确定当前的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对象