操作jQuery集合

介绍如何使用jQuery()函数创建新的DOM元素

创建新HTML元素

参考以下代码：动态创建一个功能完整的图片元素

管理jQuery集合

介绍多种细化、扩展及过滤jQuery结果集的方法

确定集合大小

jQuery集合的行为与数组很像

获取页面中所有的段落数量

var $allPara = $('p').length;

从集合获取元素

通过索引查找元素

get([index])方法，如果参数为负，从匹配集合的末尾开始计算

以下两条语句等价：

var imgElement = $('img[alt]')[0];

or

var imgElement = $('img[alt]').get(0);

eq(index)方法

选择页面中所有<div>元素集合中的第二个元素

var secondDiv = $('div').eq(1);     //  推荐

or

var secondDiv = $('div:eq(1)');

first() last()方法

作为数组获取所有元素

toArray()方法，作为数组返回DOM元素的集合

var allLabeledButtons = $('label + button').toArray();

获取元素的索引

get()方法查找的是给定索引的元素，而可以使用index()来确定元素的索引值

index([element])方法，查找集合中的特定元素，返回集合中的索引值，或者查找兄弟元素集合的第一个元素的索引。如果没有找到指定元素，则返回-1。

使用关系获取集合

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

基于HTML DOM 元素关系获取新集合的方法

• children([selector])
• closest(selector[,context])
• contents()
• find(selector)
• next([selector])
• nextAll([selector])
• nextUntil([selector[,filter]])
• offsetParent()
• parent([selector])
• parents([selector])
• parentsUntil([selector[,filter]])
• prev([selector])
• prevAll([selector])
• preUntil([selector[,filter]])
• siblings([selector])

获取段落元素的子元素数量

var count = $('#description').children().length;

获取集合中所有段落的引文元素

$set.find('p cite');

查询集合中所有的兄弟元素直到到达匹配的选择器元素位置

var $listItems = $('.awesome').nextUntil('.brilliant.amazing');

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

查找元素所在的最近元素

$(this).closest('div');     // 这会找到最直接的父级元素<div>$(this).closest('div.my-container');    // 查找更高层级的树节点

选择一个具有特殊title属性值的兄弟元素

$(this).siblings('button[title="close"]');$(this).siblings('button[title="close"]').first();  // 第一个兄弟元素

分割集合

在集合中添加新元素

add(selector[,context])方法，允许链式调用多个选择器，以创建满足多个选择器的元素集合

$('img[alt]').add('img[title]');

同

$('img[alt], img[title]');

删除集合元素

not(selector)方法，创建不包含选择器匹配元素的新集合，表示一种排除关系

选择页面中的所有包含title属性但属性值不是puppy的图片元素

$('img[title]').not('[title*=puppy]');

删除集合中包含两个以上子元素的div以及奇数索引（不是位置）的div

$('div').not(function(index){    return $(this).children().length > 2 && index % 2 ==== 0;});

filter(seletor)方法，创建一个集合副本，然后从新集合中删除不符合选择器条件的元素。

选择页面中所有图片，为其设置opaque样式，再过滤只有title属性值为dog的元素，为其设置red-border样式

$('img')  .addClass('opaque')  .filter('[title*="dog"]')  .addClass('red-border');

slice(start[,end])方法，创建并返回匹配集合中部分元素的新集合，相当于从一个长度为（start，end] 的区间内获取元素。

选择所有<img>元素以及包含wrapper样式的div元素，然后在div元素内部生成一个只有第三个元素的新集合

$('img, div.wrapper', 'div').slice(2, 3);

has(selector)方法，创建并返回新的集合，只包含匹配selector选择器的子元素。

创建包含所有<div>元素的集合，然后创建并返回至少一个<img>子元素和alt属性的<div>元素集合

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

map(callback)方法，在集合中的每个元素上调用callback函数，然后返回值到一个jQuery对象中。

搜集页面上所有<div>元素的ID

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

each(iterator)方法，遍历集合里的所有元素，然后为每个元素调用传入的iterator函数。

匹配集合中每个元素并为其设置一个属性值

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

使用集合的其他方法

is(selector)方法，确定集合中是否有元素匹配给定的选择器。

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

$('img')  .filter('[title]')  .hide()  .end()  .addClass('my-class');    // .my-class被应用到所有img

addBack([selector])方法，把栈上前一个集合的元素添加到当前集合里。

$('div')  .addClass('my-class')  .find('img')  .addClass('red-border')  .addBack()  .addClass('opaque');  // 最后的效果就是，div元素集合设置了my-class和opaque样式，子图片元素被设置了red-border和opaque样式

最后一次更新2017/3/17
作者 swpuLeo 整理自 《jQuery实战》
点击查看 相关代码片段