二、操作jQuery集合

导言

在通过jQuery选择器获取到jQuery集合后，我们也许会想更加细致的划分集合，或者只要其中的单个元素，这时候就需要我们来用jQuery的函数对集合进行操作了。

1. 创建新HTML元素

一种典型的情况是：当需要从部获取数据时，使用Ajax后，返回的数据是JSON或者XML格式，需要我们显示为一个表格。

$('html')创建基础的html元素
* $('<div>')等价于$('<div/>')和$('<div></div>')
$('html', content)创建带有属性或事件的元素

$('<img>', {    src:'imges/little.bear.png',    alt:'Little Bear',    title:'hello Bear',    click:function(){        alert($(this).attr('title'));    }}).appendTo('body');

2. 管理jQuery集合

2.1 确定集合的大小

jQuery提供了length属性，例如$('p').length

2.2 从集合获取元素

有时需要直接访问元素或者执行原生的JavaScript的操作

• get(index),返回一个DOM元素，或者一个DOM元素数组
  有时我们想获取一个指定元素的jQuery对象，而不是原始元素，可以用$($('p').get(2)),看起来有点奇怪，为此jQuery提供了eq()方法

方法 描述 返回 eq(index) 获取指定索引的元素 包含结果的jQuery集合 first() 获取集合中的第一个元素 包含结果的jQuery集合 last() 获取集合中的最后一个元素 包含结果的jQuery集合 toArray() 作为数组返回DOM元素的集合 以js数组的形式返回集合中的DOM元素 index(element) 反向操作确定集合中元素的索引值 集合中元素的索引值，没有找到，返回-1 index() 无参的，可以查找父节点中元素的索引(兄弟节点) 其在兄弟节点中的索引

index()无参的:

<ul id = "main-menu">    <li id ="home-link"><a href="">sss</a></li>    <li id = "pro-link"><a href="">www</a></li>    <li id = "blog-link"><a href="">blog</a></li></ul>var index = $('#blog-link').index();//结果是2

2.3 使用关系获取集合

jQuery允许根据DOM元素之间的层级关系获取新的集合

方法 描述 parents([selector]) 以集合形式返回集合中所有元素的唯一祖先，结果既有直接父节点也有其他高级节点，如果设置选择器，则返回匹配的祖先节点 parent([selector]) 返回集合中所有元素的直接父节点元素，结果以集合形式返回，如果设置选择器，则返回匹配的祖先节点 find(selector) 返回集合中每个元素的子节点作为一个集合 nextUtil([selector[,filter]]) 返回指定元素的兄弟元素，但不包括匹配选择器的元素 prev([selector]) 返回匹配元素的的直接前兄弟节点的集合，如果设置选择器，则只会选择匹配的前兄弟节点元素 children([selector]) 返回集合中元素的所有子元素，过滤选择器的参数可选 closest([selector]) 返回包含匹配指定选择器的每个元素最近上级节点的集合 siblings([selector]) 以集合形式返回集合中元素的兄弟节点，元素可以被选择器过滤

2.4 分割集合

一旦有了集合，那么或许想通过添加或者删除来调整集合中的元素，那么就需要分割集合

方法 描述 add(selector) 创建jQuery对象，并且添加selector到指定元素到集合中，参数可以是多种 addClass() 接收一个样式名作为参数，然后把样式添加给集合中的元素 not(selector) 创建不包含选择器参数匹配元素的新集合，如果传递的是函数，那么会根据每个元素来执行函数，如果返回true删除元素 filter(selector) 和not()类似，只不过当不匹配时会删除元素，也就是返回false删除元素 slice(start[,end]) 创建并返回匹配集合中部分元素的新集合 has(selector) 创建并返回新的集合，只包含匹配selector选择器的子元素 map(callback) 在集合中的每个元素上调用callback函数，返回到一个jQuery对象中 each(iterator) 遍历集合中的每个元素，然后为每个元素调入传入的迭代器函数

map():查询包含所有ID的jQuery对象，返回js数组

var $allIds = $('div').map(function(){    return this.id;}).toArray();

each():为匹配集合中的每一个元素设置一个属性值

$('img').each(function(i){    this.alt = 'this is image['+ i +']with an id of' + this.id})

2.5 集合的其他方法

方法 描述 is(selector) 确定集合中是否有元素匹配给定的选择器，包含返回true，不包含返回false end() 在链式调用中使用该方法，可以将匹配的集合返回到之前的状态 addBack([selector]) 把栈上前一个集合的元属添加到当前集合里，可以选择性提供选择器参数

• jQuery对象维护了一个内部栈来保存针对匹配元素集合的修改。
• 调用end()方法，顶部的集合就会弹出，流出前一个集合来操作后续方法
• 调用addBack()方法，他会把栈上前一个集合的元属添加到当前集合里，可以选择性提供选择器参数，会创建一个新的集合

总结

本节介绍了如何创建和查找匹配的元素集合，以及如何使用HTML代码动态创建新的元素集合。这些独立的元素存储在集合中，最后附加到页面文档的莫个部分上。为了调整集合，jQuery提供了很多方法，既有创建后立即执行的，也有链式调用方法中执行的。

既然已经知道了如何选择我们想要操作的元素集合了，那么接下来就学习实现页面动态效果的jQuery DOM操作方法吧。