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 属性的 图片元素集合中第一个元素。

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>
                ![](../images/image.1.jpg)
                ![](../images/image.2.jpg)
                ![](../images/image.3.jpg)
                ![](../images/image.4.jpg)
                ![](../images/image.5.jpg)
                ![](../images/image.6.jpg)
            </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()

② children()方法语法

想知道这里 #form-fake 子元素数量：

$('#form-fake > *')

这里使用了极力不推荐使用的通用选择器。所以该使用 children() 方法。

$('#form-fake').children()

③ contents()方法语法

children() 方法不会返回文本节点。

对于处理文本节点的情况，使用 contents()。和 children() 的不同在于：contents() 不接收任何参数，还可以获得文本节点和框架内元素。

contents()：查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容

④ find()方法语法

find(expr|obj|element)

搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法

参数：

expr:用于查找的表达式

obj:一个用于匹配元素的jQuery对象

element:一个DOM元素

find() 的强大之处体现在 jQuery 的链式调用中，

$('#form-fake').children().find('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');

如果只想查找样式 good 的元素，这个函数的第二个参数是可选参数 filter，允许你来实现目标。

$('.awesome').nextUntil('.brilliant.amazing','.good');

3.2.4 分割集合

（1）集合中添加新元素（不是在html添加元素，是在选择器中添加）

① add()方法语法

$('img[alt]')
.addClass('red-border')
.add('img[title]')
.addClass('opaque')

（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+$/);
         });

（3）获取集合的子集

④ slice()方法语法

slice(start, [end])

选取一个匹配的子集

参数：

start：开始选取子集的位置。第一个元素是0.如果是负数，则可以从集合的尾部开始选起

end：结束选取自己的位置，如果不指定，则就是本身的结尾。

$('*').slice(12,19)

⑤ has()方法语法

has(selector)

创建并返回新的集合，只包含匹配 selector 选择器的子元素

参数：

selector（Selector|Element）包含选择器的字符串会应用到集合中元素的所有子元素上，或者测试 Dom 上。

$('div').has('img[alt]')

（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;
         })

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");
  }
});

② end()方法语法

end()

在 jQuery 链式调用中使用该方法；

在当前调用链中结束最近的过滤操作，然后返回匹配元素的集合到之前的状态。

回到最近的一个"破坏性"操作之前（hide()不是）

$('img')
.filter('[title]')
.hide()
.end()
.addClass('red-border')

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对象，指向所有三个项元素