20个你应该经常使用的jQuery方法

你已经玩jQuery一段时间了，你开始掌握使用它的窍门了，并且，你真的很喜欢它。那么你是否准备着把你的jQuery知识提高一个档次？现在，我将会展示二十个你可能从没见过的函数和特性。

1, after()/before()

　　有时候，你想往DOM中插入一些东西，但你却找不到好的方法去实现。append()或者prepend()不会有什么作用，并且你不想增加额外的容器和ID。那么，这两个函数可能正是你需要的。它们使你可以把新元素插入到DOM的另一个元素的前面或者后面；也就是说，新元素和旧元素是相邻的。

$('#child').after($('')).text('This becomes a sibling of #child')); $('#child').before($('')).text('Same here, but this is go about #child'));

如果你想把一个正在在处理的元素插入，也可以使用这两个函数：

$('I\'ll be a sibling of #child').insertAfter($('#child'));

2, change()

　　change()方法是一个事件处理器，就好像click()或者hover()那样。这个change事件是专为文本框（textarea）、文本输入（input）和选择组合框（select）而设的；当目标元素的值改变时即会触发。要注意的是，这个方法和focusOut()、blur()方法不同。当元素失去焦点时，focusOut()和blur()方法都会触发，无论元素的值是否已被改变。

　　change()方法在客户端的验证处理中相当好用，远比blur()好用。因为如果用户并没有改变表单的值的话，你是不想再次验证它的。

$('input[type=text]').change(function () { 　　switch (this.id) { 　　　　/* 表单验证代码 */ 　　} });

3, Context

　　在jQuery中，Context既是一个参数，又是一个属性。当查找元素时，你可以传递第二个参数到jQuery函数中，以约束所返回的匹配你的选择器的元素为context元素的子元素。这或许会有点混乱。那么看看这些例子吧：

Hello World <div id="wrap"> Hello World </div>

var hi1 = $('.hello'), hi2 = $('.hello', $('#wrap').get(0)); console.group('hi1'); console.log("Number of elements in collection:", hi1.length); console.log("Context of the collection:", hi1.context); console.groupEnd(); console.group('hi2'); console.log("Number of elements in collection:", hi2.length); console.log("Context of the collection:", hi2.context); console.groupEnd();

那么这个属性有什么妙用呢？比如在事件处理函数中就很有用。如果你在事件处理函数中引用一个子元素，那么你可以像这样来作为context来传值：

$('ul#options li').click(function () { $('a', this) . . . });

4, data() / removeData()

　　你有没有曾经打算把一些数据存储在一个元素中呢？用data()方法你可以轻易地实现这一想法。你可以传递两个参数（参数名和参数值）或者一个参数（译者：json对象）。

$('#wrap').data('myKey', 'myValue'); $('#container').data({ myOtherKey : 'myOtherValue', year : 2010 });

要取回你的数值，只需使用这个方法来调用对应的参数名。

$('#container').data('myOtherKey'); //返回 'myOtherValue' $('#container').data('year'); //返回 2010

要取得一个元素相关的所有数据，可以调用不带参数的data()；你将会得到一个json对象。

　　如果你添加数据到一个元素后，又打算删除这组数据，只需调用removeData()方法，传递正确的参数名称给它。

$('#container').data('myOtherKey'); //返回 'myOtherValue' $('#container').data('year'); //返回 2010

5, queue() / dequeue()

　　queue()和dequeue()函数是用来处理动画的。队列（queue）就是将要在元素上实现的动画列表；一个元素的动画队列缺省地命名为“fx”。我们来设置一个场景：

HTML

<ul> <li id="start">Start Animating</li> <li id="reset">Stop Animating</li> <li id="add">Add to Queue</li> </ul> <div style="width:150px; height:150px; background:#ececec;"></div>

JavaScript

$('#start').click(animateBox); $('#reset').click(function() { $('div').queue('fx', []); }); $('#add').click(function() { $('div').queue( function(){ $(this).animate({ height : '-=25'}, 2000); $(this).dequeue(); }); }); function animateBox() { $('div').slideUp(2000) .slideDown(2000) .hide(2000) .show(2000, animateBox); }

这是将会发生的：在animateBox()中，我们设置了一个动画队列；留意最后一个动画又调用了animateBox()，所以这样会一直重复这个队列。当我们点击li#start，函数被调用，队列开始；当我们点击li#reset，当前的动画结束后，div会停止运动。这是使用jQuery将名为“fx”的队列设置成一个空数组；就是把这个队列清空了。那么当我们点击li#add时呢？首先，我们调用div上的queue()函数，这将会把我们传递进去的函数增加到队列的末尾。因为我们没有在第一个参数指定一个队列，所以使用的是“fx”队列。在这个函数里，我们使这个div运动起来，然后在div上调用dequeue()，从队列中删除了这个函数并使队列继续进行。队列会继续重复，但这个函数不会成为队列的一部分。

6, delay()

　　当有一长列动画在等待时，你可以使用delay()方法来暂停动画一段时间。把暂停时间作为一个参数传给它，单位是毫秒。

$('div').hide().delay(2000).show(); // div 会隐藏2秒后显示

7, bind(), unbind(), live(), 以及 die()

　　你可知道，当你添加一个click事件到一个元素上时，像这样：

$('#el').click(function () { /*******/ });

　……你实际上只是在使用包着外壳的bind()方法？要使用bind()方法本身，你可以传递事件的类型作为第一个参数，然后是事件的函数作为第二个参数。

　　如果你需要使用许多事件处理函数，你可以使用名空间将它们归类。在事件名称后用英文句号连接你的名空间。

$('#el').bind('click', function () { /*******/ }); $('#el').bind('click.toolbarEvents', function () { /*******/ }); // 名空间

你也可以同时分配相同的函数给多个事件。各个事件间使用空格分隔。如果你想实现和hover()相同的效果，你可以使用这种方式：

$('#el').bind('mouseover mouseout', function () { /*******/ });

　如果你有需要，还可以通过第三个参数（在第二个位置）给函数传递数据：

$('#el').bind('click', { status : 'user-ready' }, function () { switch(event.data.status) { /********/ } });

你迟早会遇到这么一种情况：你通过一个事件处理函数把元素插入到DOM中，然而你发现在这个插入的元素上，由bind()或者披着bind()外壳的事件触发的处理函数无法生效。如果这样的话，你将需要用到live()或者delegate()方法。它可以将事件处理函数恰当地绑定到插入的元素中。

$('.toggle').live(function () { /* code */ $('Enable Beta Features').appendTo($('#optionsPanel')); /* more code */ });

要清理bind()创建的事件处理函数，可以使用unbind()方法。如果你不传递任何参数的话，它将会清除所有处理函数。如果只移除特定的处理函数的话，你可以传递事件类型作为参数。使用特定的名空间创建的处理函数，清除时也要加上名空间，或者使用它的复制。如果你只是希望移除特定的函数，把函数的名字作为第二个参数传递。

$('button').unbind(); // 移除所有 $('button').unbind('click'); // 移除所有clicks()创建的 $('button').unbind('.toolbarEvents'); // 移除所有名空间为toolbarEvents创建的 $('button').unbind('click.toolbarEvents'); // 移除所有名空间toolbarEvents下的click()创建的 $('button').unbind('click', myFunction); // 仅移除这个函数

　注意你可以bind()/unbind()所传递的处理函数，这仅仅对有函数名的函数起作用。

　　如果你正在尝试从被事件触发的函数内部去unbind一个事件，只需将event对象传递给unbind()。

$('p').bind('click', function (event) { $('p').unbind(event); } );

你不能对live()委派的事件使用unbind()，而使用die()代替。

$('span').die(); // removes all $('span').die('mouseover'); // 清除所有mouseovers创建的 $('span').die('mouseover', fn); // 仅清除这个

现在，你可以熟练而有效地使用jQuery的事件机制了。

8, eq()

　　如果你在一个元素集中查找特定的元素，你可以传递元素的索引给eq()方法以得到单一的jQuery元素。传递一个负数索引将会从元素集末端开始数起。

var ps = $('p'); console.log(ps.length); // logs 3; ps.eq(1).addClass('emphasis'); // 仅对第二个项目增加了emphasis样式（由0为起点）

你也可以在选择符中使用:eq()。这样的话，前面的例子也可以这样：

$('p:eq(1)').addClass('emphasis');

9, get()

　　当查找一个元素集合的时候，jQuery会将它们作为jQuery对象返回。所以，你可使用所有的jQuery方法。如果你只是想得到基本的DOM元素，你可以使用get()方法。

　　你可以指定一个索引来获取一个元素。

alert( $('p') ); // [object Object] - jquery 对象 alert( $('p').get(1) ); // [object HTMLParagraphElement]

10, grep()

　　如果你不熟悉Unix/Linux shells，你可能没听说过grep这个术语。在一个终端，这是一个文本检索程序；但在jQuery，我们使用它来筛选一个元素数组。它不是一个jQuery方法。你可以传递一个数组作为第一个参数，筛选函数作为第二个参数。筛选函数本身又带了两个参数：一个是数组中的元素，另一个是对应的索引。这个筛选函数经过处理并返回true或者false值。默认状态下，所有返回true值的元素将会保留。你可以增加一个布尔值作为第三个参数，来反过来，使返回false的元素被保留。

var nums = '1,2,3,4,5,6,7,8,9,10'.split(','); nums = $.grep(nums, function(num, index) { // num = 当前数组元素的值 // index = 元素的索引 return num > 5; // 返回布尔值 }); console.log(nums) // 6,7,8,9,10

可以查阅不久前 Jeffrey Way 写的 a great quick tip 介绍 $.grep 的文章。

1 2 下一页

上一篇资讯：优化SQL语句in和notin的替代方案

下一篇资讯：模拟IE6.0，IE7.0，IE8.0测试环境