很多时候,jQuery的$()函数都返回一个类似数组的jQuery对象,例如$("div")将返回由页面中所有<div>元素包装成的jQuery对象,这个jQuery对象实际上包含了多个<div>元素对应的DOM对象。在这种情况下,jQuery提供了以下几个常用属性和方法来操作作为类数组的jQuery对象。
jQuery操作数组的常用属性和方法
常用属性
length:该属性返回jQuery里包含的DOM元素的个数。context:该属性返回获取该jQuery对象传入的context参数。jquery:该属性返回jQuery的版本。
迭代器
each(function(index)):该方法是一个迭代器函数,它将使用function函数迭代处理jQuery里包含的每个元素。在function函数里使用this来代表当前正在处理的DOM元素,如果想获取该DOM元素对应的jQuery对象,使用$(this)即可。function是一个形如function(index){}的函数,其中index代表jQuery里元素的索引,该索引从0开始。
返回DOM的方法
get():该方法返回由jQuery里包含的所有DOM元素组成的数组。get(index):该方法返回jQuery里包含的第index+1个DOM元素(第一个元素的索引为0)。
上面的两个get方法非常重要,它们可以将jQuery对象再次恢复成DOM对象。根据前面的介绍可知,jQuery的思路是把所有DOM对象包装成jQuery对象来处理,这种方式简单优雅,但总有些地方有失灵活。如果开发者需要操作DOM元素,则可通过这两个方法把jQuery对象转换成DOM对象。尤其需要指出的是,无参的get()方法总是返回一个数组—即使原始的jQuery对象里只有一个DOM对象,调用jQuery对象的无参的get()方法也将返回一个长度为1的数组。
返回索引的方法
index(element或者selector):该方法返回element元素(或匹配selector选择器的元素)在当前jQuery对象中的索引,其中element既可以是jQuery里包含的多个DOM对象之一,也可以是由任一DOM对象包装成的jQuery对象。
转为数组的方法
toArray():将该jQuery对象中包含的所有DOM对象转换为数组。
程序示例
下面的程序示范了如何使用这些工具方法来操作作为类数组的jQuery对象。
jQuery对象和DOM对象之间的转换
jQuery对象转成DOM对象
调用jQuery对象的无参的get方法或get(index)方法可以取得DOM对象.
DOM对象转成jQuery对象
在$()函数(或jQuery()函数)中传入DOM对象作为参数即可把DOM对象包装成jQuery对象.