jquery常用函数及技巧(持续更新)

关于选择器

• 尽量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');