jquery 最常用知识点汇总

确定当前的conext

1. 在任何事件内部，this引用的都是Dom对象
2. 在任何插件内部，this引用的都是当前的jquery对象
3. 在$(…).each方法中，this引用的都是Dom或正被遍历的元素对象
4. 在ajax事件中，this默认指向的是调用本次AJAX请求时传递的options参数，可以通过设定ajax options的context参数进行修改;

转为Dom对象

var $v =$("#v");    //jQuery对象var v=$v[0];       //DOM对象 var v=$v.get(0);   //DOM对象 

属性访问

名称 使用场合 $(…).attr 访问自定义属性 $(…).prop 访问html规范定义的属性

假如有下面的dom元素需要操作：

<input id="chk1" type="checkbox" />是否可见<input id="chk2" type="checkbox" checked="checked" />是否可见

分别用prop和attr的操作结果如下：

$("#chk1").prop("checked") == false$("#chk2").prop("checked") == true$("#chk1").attr("checked") == undefined$("#chk2").attr("checked") == "checked"

Dom漫游

名称 功能 $.parent(expr) 找父元素 $.parents(expr) 找到所有祖先元素，不限于父元素 $.children(expr) 查找所有子元素，只会找到直接的孩子节点，不会返回所有子孙 $.prev() 查找上一个兄弟节点，不是所有的兄弟节点 $.prevAll() 查找所有之前的兄弟节点 $.next() 查找下一个兄弟节点，不是所有的兄弟节点 $.nextAll() 查找所有之后的兄弟节点 $.siblings() 查找兄弟节点，不分前后

两种存在差异的Dom过滤查找

名称 含义 jQuery.find(expr) 不会有初始集合中的内容 jQuery.filter(expr) 从初始的jQuery对象集合中筛选出一部分

 $("p").find("span");//是从元素p的后代开始找，等于$("p span")

定义事件的常见方式

基本只需要使用on、once、off三个即可
尽可能使用命名空间（bootstrap比较常见）

$("#main").on("click.test",function(){    this;//指向当前的Dom元素});

灵活运用事件委托，利用时间冒泡机制，将事件绑定到祖先元素

$("#parent").on("click.test",function(event){    var $target=$(event.target);    if($target.is("#child1")){//是否为child1    //...    }    if($target.is("#child2")){//是否为child2    //...    }    return false;//=event.stopPropagation();event.preventDefault();});

使用命名函数代替匿名函数可以解决事件重复绑定问题，因为同一个命名函数绑定同一个事件只会绑定一次。

动态创建元素

$('<input />',{             type:"checkbox",             name:"cbox",             val:"1",             checked:"checked"         }).appendTo("body");

jquery的遍历

$.each(data,function(index,item){})$.each(data,function(k,v,object){})

Ajax和XmlHttpRequest

//用Form传递表单数据var formData=new FormData();//方式1，new一个FormDataformData.append("username","张三");var form=document.getElementById("myForm");var formData=new FormData(form);//方式2，根据Form创建FormDataformData.append(...);//添加额外内容//xhr.open("POST",form.action);//xhr.send(formData);//使用xhr发送数据$.ajax({//使用jquery发送数据    url:"example.php",    type:"POST",    data=formData,    processData:false,//告诉jquery不要处理待发送的数据    contentType:false//告诉jquery不要设置Content-Type请求头，默认为“application/x-www-form-urlencoded”});

Promise defer的高级用法

Promise标准：想要改变promise对象的状态，只要在then的参数回调中返回相应的值

返回值 含义 普通值 成功 throw 失败 另一个promise 代表透值

---

jQuery的具体实现

返回值 含义 普通值 在done的分支里为[成功,x值]，在fail的分支里为[失败，x值] throw 不会改变promise的状态，而是直接throw出去 另一个promise 改变promise的状态

所以，在jquery中想要扭转promise的状态就只能依靠返回另一种状态的promise对象