复习笔记

npm跟cnpm的区别:

npm:是从国外服务器下载的 受网络影响大,可能出现异常
cnpm:国内的 淘宝镜像 加载更快

npm是node.js的包管理器,用于node插件的管理。

window.onload和$(function)的区别:

  • window.onload只能加载一次,$(function)可以加载多次;
  • window.onload需要网页全部加载完毕,然后再执行包裹代码,$(function)只需要页面中的DOM元素加载完毕就可以执行

如何解决多个库之间的冲突:

比如jquery库跟base库 如果jquery库在base库之前 jquery的$就会失效,解决办法是 :定义一个变量 var $$ = jquery。

如果jquery库在base库的后边 base的就会失效,解决的办法是 引用jquery.noConflict();将符版权删除然后再定义一个变量 var $$ = jquery;

jquery选择器:

  1. 选择子节点:> == children(“”)
  2. 选择所有后代元素:空格 == find(“”)
  3. 群组选择器 $("span,em,div")
  4. 后代选择器 $("ul li a")
  5. 通配选择器 $("*") 会浪费大量的资源 不建议使用在全局环境中 一般用在局部环境;
  6. .box.pox{} 是class既有box 又有pox的情况下改变样式
    .box,.pox{} 是所有class为box和pox的元素改变样式
  7. next()选择器 $("div + p") 获取当前元素同级的下一个DOM对象
  8. nextAll()选择器$("div ~ p") 获取当前元素同级下的所有DOM对象
    next()等选择器不穿参数的话就相当与穿了*
  9. prev()选择器 $("div + p") 获取当前元素同级的上 一个DOM对象
  10. prevAll()选择器$("div ~ p") 获取当前元素同级上的所有DOM对象
  11. siblings()选择器 上下同级的所有元素
  12. 伪类选择器IE6~IE8都不支持 属于C3属性 但是jq所开发的方法支持

过滤选择器:

:last :first :not() :even偶数 :odd奇数 :eq(index)=indext :gt(indext)>index :lt<index :header 选择标题元素(H1-H6) :animated 选择正在执行动画的元素 :focus 选择当前被焦点的元素 必须是网页初始状态的已经被激活焦点的元素才能实现
.parent();方法 第一个父节点 .parents();所有父节点
.hidden();
.visible();

DOM节点的判断:

$("#pox").size()
$("#pox").get(0)
$("#pox")[0]
$("#pox")[0].nodeName 获取第一个元素的标签名

基础DOM和CSS操作

.html();获取所有html内容
.text(); 获取文本内容 并且过滤html标签;
.val(); 获取表单中的文本内容;
.html("<em></em>");修改html内容;
.val(“打广告”) val的值是哪个就能首选那个;
.attr("key") 获取某个元素的属性值;
attr("key","value") 设置某个元素的属性值;
.css(); 设置样式;
.addClass(); 添加样式;
.removeClass(); 移除样式;
.toggleClass(); 切换样式;
$.each("box",function(attr,value){
})
.width();自动转换成numbull类型;
.innerWidth(); 获取元素宽度,包括内边距padding;
.outerWidth(); 获取元素宽度,包括border+padding;
.outerWidth(true);获取元素宽度,包括border+padding +margin;
.offset().top();距离窗口的距离;
.positinon().top();距离父级元素的距离;
.scrollTop(value);设置垂直滚动条的值;
.scrollLeft(value);设置水平滚动条的值;

DOM节点操作:

  $(function(){

        var box = $('<div id="box">节点</div>');   //创建节点
          $('body').append(box);                //插入节点
        $("div").append("<div>DOM</div>")     //在元素内部后边插入节点
        $("div").append(function(index,html){
            return '<div>DOM</div>'+ index +html;
        })
        $("strong").appendTo("div")     //在元素内边移入节点,不需要创建节点
        $("div").prepend("<div>DOM</div>")   //在元素内部前边插入节点
        $("div").after("<div>DOM</div>")   //在元素外边的后边插入节点
        $("div").befor("<div>DOM</div>")   //在元素外边的前边插入节点
        $('strong').insertAfter('div')  //在元素外边向前移入节点 
        $('strong').insertBefor('div')  //在元素外边向后移入节点 $('div').wrap('<strong></strong>') //在div外边添加包裹节点
        $('div').wrap('<strong>123</strong>') //在div外边包裹123后边
        $('div').wrap('<strong><em></em></strong>')
        $('div').wrap(document.createElement('strong')); //创建临时元素并且包裹节点
        $('div').wrapAll('<strong></strong>'); //将所有元素进行包裹
        $('div').wrapInner('<strong></strong>') //在元素里边包裹元素
        
        $('div').clone(true).appendTo('body');// 克隆元素并且添加在body里边,clone方法里边的参数true表示把事件也克隆,false表示不克隆事件。
        $('div').remove(); //删除事件  不保留事件
        $('div').remove().appendTo('body') //把删除的元素再次添加在body里边   事件不存在
        $('div').detach(); //删除事件  保留事件
        $('div').empty();   //删除节点里边的内容
        $('div').replaceWidth("<span>Dom</span>")  //将div替换成span
        $("<span></span>").replaceAll('div')   //同上      节点被替换后,所包含的事件行为全部消失

    })

表单选择器

$(function(){

  $(input[name = user][type = text]).val();
  :input //获取所有表单元素  包括textarea  button  select
  :text  //单行文本框
  :password  //密码框
  //表单下的隐藏要加form
  $('form :hidden').size();
  //表单过滤事件
  $('form :enabled').size(); //获取可用元素
  $('form :disabled').size();  //获取不可用元素
  $('form :checked').size();  //获取被选中元素   单选框和复选框
  $('form :selected').size();  //获取被选中元素  下拉框
})

基础事件

$(function(){

      $(''input).bind('click',function(){    //通过bind方法来绑定事件
          alert('弹框')
      })
})

:cick(fn) 单击事件
:dbclick(fn) 双击事件
: mousedown(fn) 点击后
: mouseup(fn) 点击弹起
: mouseover(fn) 鼠标移入 会穿过子节点
:mouseenter(fn) 不会穿过子节点
: mouseout(fn) 鼠标移出 会穿过子节点
:mouseleave(fn) 不会穿过子节点
:keydown(fn) 键盘按下
:keyup(fn) 键盘按下弹起
:focus(fn) 焦点激活事件
:blur(fn)焦点丢失事件
:scroll(fn) 滚动条拖动事件
:change(fn) 改变文本内容时触发

事件对象

event.target 得到的是触发元素的dom 就是你点击的元素
event.currentTarget 得到的是监听元素的dom 就是你绑定的元素

  1. 冒泡事件:从最里边向最外边执行 必须是重叠元素

  2. 阻止冒泡事件:stopPropagation();

    $(function(e){
             e.stopPropagation();
     })
    
  3. 阻止默认行为:preventDefault();

  4. 既要阻止默认行为又要阻止冒泡事件:return false;

高级事件

  1. .trigger('click') :模拟事件 a.不阻止默认行为 b.相同元素的相同事件执行所有
  2. triggerHandler('click'):模拟事件 a.阻止默认行为 b.相同元素的相同事件只执行第一个
  3. 事件委托: 使用live()已经删除 替代的方法是.delegate();而不是bind();

$('button').live('cick',function(){ $(this).clone().appendTo('#box'); })
$('#box').delegate('.button','click',function(){})
.live()事件是绑定在document上边,而点击button其实是冒泡到document上边,并且点击document时候,需要验证event.type和event.target才能触发
优点:
a、可以动态绑定事件
b、永远只会绑定一次事件

开发的新的绑定事件的方法 on off one(仅一次事件 触发)

替代的简单的bind()事件:
$('button').on('click',{user:'name'},function(e){ alert('替代bind+e.data.user') })
替代事件委托的事件:live();delegate();
$('div').on('button','click',function(){ $(this).clone().appendTo("div"); })

动画

  1. 列队动画,递归自调用

    $(function(){
        $('.show').click(function(){
             $('.test').first().show('fast',function testShow(){
                 $(this).next().show('fast',testShow);
             });
         });
    });
    

ajax

状态有两种:成功success和失败error

http状态码的返回的数字分别代表什么

200 服务器成功返回
400 语法错误导致服务器不识别
401 请求需要用户认证
404 指定的url在服务器上找不到
500 服务器遇到意外错误,无法完成请求
503 由于服务器 加载或维护导致无法完成请求

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,242评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,769评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,484评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,133评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,007评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,080评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,496评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,190评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,464评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,549评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,330评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,205评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,567评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,889评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,160评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,475评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,650评论 2 335

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,347评论 1 45
  • 前端开发面试题 <a name='preface'>前言</a> 只看问题点这里 看全部问题和答案点这里 本文由我...
    自you是敏感词阅读 746评论 0 3
  • jQuery笔记总结篇 poetries 已关注 2016.10.20 10:52* 字数 9137 阅读 660...
    小杰的简书阅读 1,794评论 2 32
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,314评论 0 2
  • 原文链接 http://blog.poetries.top/2016/10/20/review-jQuery 关注...
    程序员poetry阅读 16,630评论 18 503