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

11, 伪类选择符

　　嘿嘿，jQuery使用的CSS选择符引擎，提供了不少的伪类选择符，使得查找元素的工作更为轻松。看看下面这些有意思的例子：

1. $(':animated'); // 返回所有正在运动的元素<br /> $(':contains(me)'); // 返回所有包括'me'的文本的元素<br /> $(':empty'); // 返回所有没有子节点或者文本的元素<br /> $(':parent'); // 返回所有有子节点或者文本的元素<br /> $('li:even'); // 返回所有序号为偶数的<li>元素<br /> $('li:odd'); // ……猜到是什么意思了吧？<br /> $(':header'); // 返回所有标题：h1 - h6<br /> $('li:gt(4)'); // 返回所有序号大于4的<li>元素（由0为起点）<br /> $('li:lt(4)'); // 返回所有序号小于4的<li>元素<br /> $(':only-child'); // 返回所有……这个很明显吧！ 

还有许多。当然，上面这些是比较特殊的。

12, isArray() / isEmptyObject() / isFunction() / isPlainObject()

　　有时候，你需要确认转给函数的参数类型是正确的。这几个函数会使得这个工作变得简单。前三个函数的功能是不言而喻的：

1. $.isArray([1, 2, 3]); // 返回 true<br /> $.isEmptyObject({}); // 返回 true<br /> $.isFunction(function () { /****/ }); // 返回 true 

最后一个就不那么明显了。当转递的参数是一个创建为对象字面值，或者是使用new Object()创建的对象的话，isPlainObject()返回true。

1. function Person(name) {<br /> this.name = name<br /> return this;<br /> }<br /> $.isPlainObject({})); // 返回 true<br /> $.isPlainObject(new Object()); // 返回 true<br /> $.isPlainObject(new Person()); // 返回 false 

13, makeArray()

　　当你使用jQuery创建一个DOM元素集合时，得到的是一个jQuery对象。有的情况你会希望返回的是一个数组或者一组规整的DOM元素。makeArray() 正好能满足你的要求。

1. var ps = $('p');<br /> $.isArray(ps); //返回 false;<br /> ps = $.makeArray(ps);<br /> $.isArray(ps); // 返回 true; 

14, map()

　　map()方法有点像grep()。正如你所意料的，它带一个函数作为参数，这个函数又有两个参数。传递的函数会对集合中的每个元素执行一次。无论这个函数的返回值是什么，都会分别取代元素原来的位置。

1. $('ul#nav li a').map(function() {<br /> return $(this).attr('title');<br /> }); // 集合变成了链接的标题<br /> // 工具提示插件的制作可以基于这种操作 

15, parseJSON()

　　如果你在使用 $.post 或者 $.get，以及在一些其它会和JSON打交道的情况，你会发现parseJSON()相当有用。这个函数使用浏览器内建的JSON解析器（如果有的话）。这会明显地提高速度。

1. $.post('somePage.php', function (data) {<br /> /*****/<br /> data = $.parseJSON(data); <br /> /*****/ <br /> }); 

16, proxy()

　　如果你将一个函数作为对象属性，而这个函数引用了对象中的其他属性，你将不能在其他函数中调用这个函数并得到正确结果……我知道这样说很混乱，先看看这个例子吧：

1. var person = {<br /> name : "Andrew",<br /> meet : function () {<br /> alert('我的名字是' + this.name);<br /> }<br /> };<br /> person.meet();<br /> $('#test').click(person.meet); 

函数自己运行时，person.meet() 会弹出正确的结果。但是当它被事件调用时，会弹出“我的名字是undefined”。这是因为函数不是在恰当的上下文中被调用。要修正这个问题，可以使用proxy()函数：

1. $('#test').click($.proxy(person.meet, person));<br /> // 也可以这样： $.proxy(person, "meet") 

17, replaceAll() / replaceWith()

　　如果你想替换DOM元素，这就是你需要的。我们可以在查找或创建的元素上调用replaceAll()，将想要替换成的元素选择符转进去。在这个例子里，所有有“error”类的元素都将被替换成我们创建的 span 元素。

1. $('<span class="fixed">The error has been corrected</span>').replaceAll('.error'); 

　replaceWith()方法只是把选择符反过来引用，即先把想替换的内容查找到：

1. $('.error').replaceWith('<span class="fixed">The error has been corrected</span>'); 

这两个方法将分别返回元素或者是HTML序列，你也可以将它们作为参数传递。

18, serialize() / serializeArray()

　　serialize()方法是用来将表单中的值编码成一个字符串。

HTML

1. type="text" name="url" value="http://www.example.com" /><br /> </form> 

JavaScript

1. console.log($('form').serialize());<br /> // logs : name=John+Doe&url=http%3A%2F%2Fwww.example.com 

你也可以使用serializeArray()方法来将表单中的值转成一个Json对象数组而不是字符串

1. console.log($('form').serializeArray());​​​<br /> // logs : [{ name : 'name', value : 'John Doe'} , { name : 'url', value : 'http://www.example.com' } ] 

19, siblings()

　　你可能已经猜到siblings()方法能做什么——它将返回所有兄弟元素集：

1. <div> . . . </div><br /> <p> . . . </p><br /> <span> . . . </span> 

1. $('p').siblings(); // returns <div>, <span> 

20, wrap() / wrapAll() / wrapInner()

　　这三个函数是便于使用一个元素包围其他元素的。三个都带一个参数：或者是一个元素，如HTML序列，一个CSS选择符，一个jQuery对象，或者一个DOM元素，又或者是一个返回元素的函数。

　　wrap()方法使用指定的元素将集合中的每一个元素包围：

1. $('p').wrap('<div class="warning" />'); // 所有段落都被包含在 div.warning 中 

wrapAll()方法会将集合中所有的元素都包围在同一个元素中。这意味着集合中的元素会被移动到DOM中的新位置，排列在第一个元素的后面，并一起被包围。

处理前的HTML

1. <p><br /> <span> . . . </span><br /> <span class="moveMe"> . . . </span><br /> <span class="moveMe"> . . . </span><br /> </p><br /> <p><br /> <span> . . . </span><br /> <span class="moveMe"> . . . </span><br /> <span class="moveMe"> . . . </span><br /> </p> 

JavaScript

1. $('.moveMe').wrapAll(document.createElement('div')); 

处理后的HTML

1. <p><br /> <span> . . . </span><br /> <div><br /> <span class="moveMe"> . . . </span><br /> <span class="moveMe"> . . . </span><br /> <span class="moveMe"> . . . </span><br /> <span class="moveMe"> . . . </span><br /> </div><br /> </p><br /> <p><br /> <span> . . . </span><br /> </p> 

　wrapInner()函数则是用指定的元素来包围集合中的每一个元素内部的内容。

1. <p> <br /> <span> . . . </span> <br /> <span> . . . </span> <br /> </p> 

JavaScript

1. $('p').wrapInner($('<div />')); 

处理后的HTML

1. <p> <br /> <div> <br /> <span> . . . </span> <br /> <span> . . . </span> <br /> </div> <br /> </p> 

好了，现在，你已经掌握了超过20项新的jQuery特性了。下个项目中你就可以大显身手了