3.操作jQuery集合《jquery实战》
操作集合
3.1 创建HTML元素
使用 jquery 创建动态元素是相当容易的。可以通过 $() 函数包含一个 HTML 标签的字符串来创建。
$('<div>Hello</div>')
任何在已经存在的元素上执行的 jQuery 方法都是可以在新创建的元素上使用。
注意，如果想创建一个空的 div 元素，可以这样写：
$('<div>');
前面介绍了 $() 函数的第二个参数 context。当使用 $() 函数来创建新元素时，可以使用 context 参数来为正要创建的新元素指定属性及其值。
假设创建一个img元素，包含多个属性，而且可以点击该图片。
$('<img>',
{
src: '../images/little.bear.png',
alt: 'Little Bear',
title:'I woof in your general direction',
click: function() {
alert($(this).attr('title'));
}
}).appendTo('body');
动态创建复杂的元素也是相当简单
3.2 管理jQuery 集合
3.2.1 确定集合大小
假设你知道页面中所有段落的数量，现在需要显示。
alert($('p').length);
3.2.2 从集合获取元素
有了集合，就可以执行一些排序操作。有时经常需要直接访问元素或者执行原生 javascript 的操作。
（1）通过索引查找元素
例如获取 alt 属性的 <img> 图片元素集合中第一个元素。
var imgElement = $('img[alt]')[0];
如果选择使用方法而不是索引，可以使用 get() 方法。
① get()方法语法
get([index])
取得其中一个匹配的元素。 num表示取得第几个匹配的元素。
参数：[index]
取得第 index个位置上的元素
get()
取得所有匹配的 DOM 元素集合。
var imgElement = $('img[alt]').get(0);
等价于全前面的索引代码。get()方法可接受负数索引。使用 get(-1) 会查找倒数第一个元素。
② eq()方法语法
eq(index)
获取集合中指定索引的元素，返回包含结果的新集合。
有时候想获取一个包含特定元素的 jQuery 对象，而不是原始元素。
$('div:eq(1)');
为了了解与过滤器 :eq() 的区别：
var $secondDiv = $('div').eq(1); //使用eq()方法选择
var $secondDiv = $('div:eq(1)'); //使用:eq()过滤器选择
出于性能的考虑，建议选择第一种（eq()）。
③ first()方法语法
④ last()方法语法
⑤ toArray()方法语法
toArray()
作为数组返回 Dom 元素的集合。
var allLableButtions = $(`lable + button`).toArray();
这条语句查询所有页面上跟在 label 后面的 button 元素,做为javascript对象转换为数组赋值给 allLableButtions 变量。
（2）获取元素的索引
① index()方法语法
index([element])
查找集合中的特定元素，返回集合中的索引值。或者查找其兄弟元素的集合的第一个元素的索引。如果没有找到，则返回 -1 。
参数：element
（Selector|Element|jQuery）包含选择器的字符串、元素引用，或者恶意确定值的 jQuery 对象。
如果不给 .index() 方法传递参数，那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。
如果参数是一组DOM元素或者jQuery对象，那么返回值就是传递的元素相对于原先集合的位置。
如果参数是一个选择器，那么返回值就是原先元素相对于选择器匹配元素中的位置。如果找不到匹配的元素，则返回-1。
<ul>
<li id="foo">foo</li>
<li id="bar">bar</li>
<li id="baz">baz</li>
</ul>
-------------------
$('li').index(document.getElementById('bar')); //1，传递一个DOM对象，返回这个对象在原先集合中的索引位置
$('li').index($('#bar')); //1，传递一个jQuery对象
$('li').index($('li:gt(0)')); //1，传递一组jQuery对象，返回这个对象中第一个元素在原先集合中的索引位置
$('#bar').index('li'); //1，传递一个选择器，返回#bar在所有li中的做引位置
$('#bar').index(); //1，不传递参数，返回这个元素在同辈中的索引位置。
3.2.3 使用关系获取集合
<div class="box-small">
<h2>Dom Sample</h2>
<div id="sample-dom">
<span>Some images:</span>
<div>
</div>
<div id="some-div">This is a <div> with an id of <code>some-div</code></div>
<h2>Hello, I'm a <h2> element</h2>
<p>
I'm a paragraph, nice to meet you.
</p>
<ul class="my-list">
<li>
<a href="http://jquery.com">jQuery website</a>
<ul>
<li><a href="#css1">CSS1</a></li>
<li><a href="#css2">CSS2</a></li>
<li><a href="#css3">CSS3</a></li>
<li>Basic XPath</li>
</ul>
</li>
<li>
jQuery also supports
<ul>
<li>Custom selectors</li>
<li>Form selectors</li>
</ul>
</li>
</ul>
<table id="languages">
<thead>
<tr>
<th>Language</th>
<th>Type</th>
<th>Invented</th>
</tr>
</thead>
<tbody>
<tr>
<td>Java</td>
<td>Static</td>
<td>1995</td>
</tr>
<tr>
<td>Ruby</td>
<td>Dynamic</td>
<td>1993</td>
</tr>
<tr>
<td>Smalltalk</td>
<td>Dynamic</td>
<td>1972</td>
</tr>
<tr>
<td>C++</td>
<td>Static</td>
<td>1983</td>
</tr>
</tbody>
</table>
<form id="form-fake" action="#">
<div>
<label for="aTextField">Text:</label>
<input type="text" id="aTextField" name="someTextField" />
</div>
<div>
<span>Radio group:</span>
<label>
<input type="radio" name="radio-group" id="radio-a" value="A" /> A</label>
<label>
<input type="radio" name="radio-group" id="radio-b" value="B" checked="checked" /> B</label>
<label>
<input type="radio" name="radio-group" id="radio-c" value="C" /> C</label>
</div>
<div>
<span>Checkboxes:</span>
<label>
<input type="checkbox" name="checkboxes" id="checkbox-1" value="1" /> 1</label>
<label>
<input type="checkbox" name="checkboxes" id="checkbox-2" value="2" /> 2</label>
<label>
<input type="checkbox" name="checkboxes" id="checkbox-3" value="3" checked="checked" /> 3</label>
<label>
<input type="checkbox" name="checkboxes" id="checkbox-4" value="4" /> 4</label>
</div>
<input type="submit" id="button-submit" value="Submit" />
</form>
</div>
</div>
效果图
① parents()方法语法
parents([expr])
取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。
参数：
expr：用于筛选祖先元素的表达式
例子：获取id为radio-b的所有父元素集合
$('#radio-b').parents()
获取id为radio-b的所有父元素集合
② children()方法语法
想知道这里 #form-fake 子元素数量：
$('#form-fake > *')
`#form-fake` 子元素
这里使用了极力不推荐使用的通用选择器。所以该使用
children() 方法。
$('#form-fake').children()
③ contents()方法语法
children() 方法不会返回文本节点。
对于处理文本节点的情况，使用 contents()。和 children() 的不同在于：contents() 不接收任何参数，还可以获得文本节点和框架内元素。
contents()：查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容
处理文本节点的情况，使用 contents()
④ find()方法语法
find(expr|obj|element)
搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法
参数：
expr:用于查找的表达式
obj:一个用于匹配元素的jQuery对象
element:一个DOM元素
find() 的强大之处体现在 jQuery 的链式调用中，
$('#form-fake').children().find('span')
$('#form-fake').children() 下的 span 元素
⑤ nextUntil()方法语法
nextUntil([expr|element][,filter])
查找当前元素之后所有的兄弟元素，但不包括那个选择器匹配到的元素。
参数：
[expr][,filter]:
expr: 用于筛选祖先元素的表达式。
filter: 一个字符串，其中包含一个选择表达式匹配元素。
[element][,filter]:
element: 用于筛选祖先元素的DOM元素。
filter: 一个字符串，其中包含一个选择表达式匹配元素。
看一个例子：
<ul>
<li class="awesome">First</li>
<li>Second</li>
<li class="useless">Third</li>
<li class="good">Fourth</li>
<li class="brilliant amazing">Fifth</li>
</ul>
查询样式为 awesome 的元素的兄弟元素，排除样式为 brilliant 和 amazing 的元素。
$('.awesome').nextUntil('.brilliant.amazing');
$('.awesome').nextUntil('.brilliant.amazing');
如果只想查找样式 good 的元素，这个函数的第二个参数是可选参数 filter，允许你来实现目标。
$('.awesome').nextUntil('.brilliant.amazing','.good');
只查找good元素
3.2.4 分割集合
（1）集合中添加新元素（不是在html添加元素，是在选择器中添加）
① add()方法语法
$('img[alt]')
.addClass('red-border')
.add('img[title]')
.addClass('opaque')
add()方法
（2）集合中删除元素
② not()方法语法
not(expr|ele|fn)
删除与指定表达式匹配的元素
参数：
expr：一个选择器字符串。
element：一个DOM元素
function(index)：一个用来检查集合中每个元素的函数。this是当前的元素
$("p").not( $("#selected")[0] )
当需要最大的灵活的时候，传递函数给 not() 方法。
$('div').not(function(index){
return $(this).children().length > 2 && index % 2 === 0;
});
③ filter()方法语法
filter(expr|obj|ele|fn)
筛选出与指定表达式匹配的元素集合
例子：创建所有包含正整数的 <td> 元素的集合。
$('td').filter(function(index) {
return this.innerHTML.match(/^\d+$/);
});
包含正整数的td元素集合
（3）获取集合的子集
④ slice()方法语法
slice(start, [end])
选取一个匹配的子集
参数：
start：开始选取子集的位置。第一个元素是0.如果是负数，则可以从集合的尾部开始选起
end：结束选取自己的位置，如果不指定，则就是本身的结尾。
$('*').slice(12,19)
选择其中的12~19的位置
⑤ has()方法语法
has(selector)
创建并返回新的集合，只包含匹配 selector 选择器的子元素
参数：
selector（Selector|Element）包含选择器的字符串会应用到集合中元素的所有子元素上，或者测试 Dom 上。
$('div').has('img[alt]')
包含所有div元素的集合并返回至少一个<img>子元素和alt属性的div元素
（4）转换集合的元素
⑥ map()方法语法
map(callback)
一组元素转换成其他数组（不论是否是元素数组）
（在集合中的每个元素调用 callback 函数，然后返回值到一个 jQuery 对象中。）
例子：页面上所有div元素的ID：
$('div').map(function(){
return this.id;
}).toArray();
//["sample-dom", "", "some-div", "", "", ""]
（5）遍历集合的元素
map()方法对于遍历集合元素后搜集值或转换为其他元素非常有用，但是很多时候为了达到其他目的才迭代元素。
⑦ each()方法语法
each(iterator)
遍历集合里的所有元素，然后为每个元素传入的 iterator（迭代器）函数
例子：为匹配集合中的每个元素设置一个属性值：
$('img').each(function(i){
this.alt = 'This is image['+ i +'] with an id of ' +this.id;
})
对每个img图片元素执行传入的函数代码，使元素的ID和索引来修改元素
3.2.5 使用集合的其他方法
① is()方法语法
is(selector)
确定集合中是否有元素匹配给定的选择器，如果有一个就返回 true
<form><input type="checkbox" /></form>
---
$("input[type='checkbox']").parent().is("form")
//true
判断点击li标签增加背景色为红色，如果点击的是第2个strong,当前的li增加背景色为绿色
<ul>
<li>
<strong>list</strong> item 1 - one strong tag
</li>
<li>
<strong>list</strong> item
<strong>2</strong> - two <span>strong tags</span>
</li>
<li>list item 3</li>
</ul>
----
$("li").click(function() {
var $li = $(this),
isWithTwo = $li.is(function() {
return $('strong', this).length === 2;
});
if ( isWithTwo ) {
$li.css("background-color", "green");
} else {
$li.css("background-color", "red");
}
});
判断点击li标签增加背景色为红色，如果点击的是第2个strong,当前的li增加背景色为绿色
② end()方法语法
end()
在 jQuery 链式调用中使用该方法；
在当前调用链中结束最近的过滤操作，然后返回匹配元素的集合到之前的状态。
回到最近的一个"破坏性"操作之前（hide()不是）
$('img')
.filter('[title]')
.hide()
.end()
.addClass('red-border')
end()
jQuery对象维护了一个内部栈来保存针对匹配元素的集合修改。调用诸如之前的方法时，新集合被压栈，调用 end() 方法时，顶部集合就会弹出，留出前一个集合来后续操作。
③ addBack()方法语法
addBack([selector])
把栈上前一个集合的元素添加到当前集合里，可以选择性提供选择器参数。
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li class="third-item">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
----
$('li.third-item').nextAll().addBack()
.css('background-color', 'red');
首先，初始选择位于第3项，初始化堆栈集合只包含这项。调用.nextAll() 后将第4和第5项推入堆栈。最后，调用.addBack() 合并这两个组元素在一起，创建一个jQuery对象，指向所有三个项元素
addBack() 前一个集合的元素添加到当前集合
