复习笔记

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 .parent();方法 第一个父节点 .parents();所有父节点
.hidden();
.visible();

DOM节点的判断：

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

基础DOM和CSS操作

.html();获取所有html内容
.text(); 获取文本内容 并且过滤html标签；
.val(); 获取表单中的文本内容；
.html("");修改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 = $('
节点
');   //创建节点
          $('body').append(box);                //插入节点
        $("div").append("
DOM
")     //在元素内部后边插入节点
        $("div").append(function(index,html){
            return '
DOM
'+ index +html;
        })
        $("strong").appendTo("div")     //在元素内边移入节点，不需要创建节点
        $("div").prepend("
DOM
")   //在元素内部前边插入节点
        $("div").after("
DOM
")   //在元素外边的后边插入节点
        $("div").befor("
DOM
")   //在元素外边的前边插入节点
        $('strong').insertAfter('div')  //在元素外边向前移入节点 
        $('strong').insertBefor('div')  //在元素外边向后移入节点 $('div').wrap('') //在div外边添加包裹节点
        $('div').wrap('123') //在div外边包裹123后边
        $('div').wrap('')
        $('div').wrap(document.createElement('strong')); //创建临时元素并且包裹节点
        $('div').wrapAll(''); //将所有元素进行包裹
        $('div').wrapInner('') //在元素里边包裹元素
        
        $('div').clone(true).appendTo('body');// 克隆元素并且添加在body里边，clone方法里边的参数true表示把事件也克隆，false表示不克隆事件。
        $('div').remove(); //删除事件  不保留事件
        $('div').remove().appendTo('body') //把删除的元素再次添加在body里边   事件不存在
        $('div').detach(); //删除事件  保留事件
        $('div').empty();   //删除节点里边的内容
        $('div').replaceWidth("Dom")  //将div替换成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 由于服务器 加载或维护导致无法完成请求