二、操作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操作方法吧。