关于选择器
尽量ID选择器。其背后机理其实是调用原生的document.getElementById()
使用类选择器时不指定元素的类型。
多级查找中,右边尽量指定得详细点而左边则尽量简单点
// 丑陋
$("div.data .gonzalez");
// 优化后
$(".data td.gonzalez");
- 表使用万能选择器,并且警惕隐式的万能选择器
$('div.someclass :radio'); // 差
$('div.someclass input:radio'); // 棒
- 操作任何元素前先将其从文档卸载,完了再贴回去
var $myList = $("#list-container > ul").detach();
//...一大堆对$myList的处理
$myList.appendTo("#list-container");
jQuery中each的用法之退出循环和结束本次循环
jQuery中each类似于javascript的for循环
但不同于for循环的是在each里面不能使用break结束循环,也不能使用continue来结束本次循环,想要实现类似的功能就只能用return,
break 用return false
continue 用return ture或者return
$.proxy
$.proxy方法类似于ECMAScript 5的bind方法,可以绑定函数的上下文(也就是this对象)和参数,返回一个新函数。
jQuery.proxy()的主要用处是为回调函数绑定上下文对象。
var o = {
type: "object",
test: function(event) {
console.log(this.type);
}
};
$("#button")
.on("click", o.test) // 无输出
.on("click", $.proxy(o.test, o)) // object
jQuery的加载
一般采用下面的写法,在网页中加载jQuery。
<script type="text/javascript"
src="//code.jquery.com/jquery-1.11.0.min.js">
</script>
<script>
window.jQuery ||
document.write(
'<script src="js/jquery-1.11.0.min.js" type="text/javascript"><\/script>'
);
</script>
上面代码有两点需要注意。一是采用CDN加载。如果CDN加载失败,则退回到本地加载。二是采用协议无关的加载网址(使用双斜线表示),同时支持http协议和https协议。
jQuery构造函数
jQuery对象本质上是一个构造函数,主要作用是返回jQuery对象的实例。
$('body').nodeType
// undefined
$('body') instanceof jQuery
// true
上面代码表示,由于jQuery返回的不是DOM对象,所以没有DOM属性nodeType
。它返回的是jQuery对象的实例。
jquery事件命名空间
如果可能尽量在绑定事件处理程序时使用一个命名空间,这样可以方便地取消绑定而不会影响其他绑定。
$('button') .on('click.myNamespace', function() { console.log('a'); });
$('button') .on('click.myNamespace2', function() { console.log('b'); });
$('button').trigger('.myNamespace2');