jquery 最常用知识点汇总

确定当前的conext

转为Dom对象

属性访问

Dom漫游

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

定义事件的常见方式

动态创建元素

jquery的遍历

Ajax和XmlHttpRequest

Promise defer的高级用法

确定当前的conext

在任何事件内部，this引用的都是Dom对象

在任何插件内部，this引用的都是当前的jquery对象

在$(…).each方法中，this引用的都是Dom或正被遍历的元素对象

在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一个FormData
formData.append("username","张三");

var form=document.getElementById("myForm");
var formData=new FormData(form);//方式2，根据Form创建FormData
formData.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对象