摘要:
利用选择器,选择将被jQuery包装的元素;
创建并放置新的HTML元素到DOM中;
操作元素包装集;
一、选择将被操作的元素
1.利用基本CSS选择器
元素选择方法:通过元素的ID进行选择,通过CSS类名称进行选择,通过标签名称进行选择,以及通过页面元素的DOM层次结构进行选择。
示例:a——匹配所有链接(<a>)元素
#specialID——匹配id为specialID的元素
.specialClass——匹配拥有CSS类specialClass的元素
a#specialID.specialClass——匹配id为specialID、拥有CSS类specialClass的链接元素
p a.specialClass——匹配拥有CSS类specialClass、在<p>元素内声明的链接元素
为了利用jQuery来选择元素,请把选择器包装在$()里,如:$("p a.specialClass")
【总结见表2-1】
2.利用子选择器、容器选择器和特性选择器
子选择器:父节点与直接子节点以右尖括号(>)隔开,如 p > a,这个选择器只匹配作为<p>元素的直接子节点的链接。
【选择器ul.myList li a将抓取所以的链接,因为所有这些链接(<a>)都是列表(<li>)元素的后代节点。】
特性选择器:示例:
a[href^=http://] 匹配包含以http://开头的href值的所有链接。
form[method] 匹配拥有显式method特性的任何<form>元素
input[type=text] 匹配type特性值为text的所有<input>元素
a[href$=.pdf] 匹配以.pdf结尾的href值的链接
a[href*=jquery.com]匹配在任意位置出现jquery.com的href值的链接
li:has(a)匹配包含<a>元素的所有<li>元素
div:not(li:has(a))匹配在其后代节点里,不存在包含<a>的<li>的<div>元素。
【jQuery只支持一层嵌套。如:支持foo:not(bar:has(baz)),不支持foo:not(bar:has(baz:eq(2)))。从形式上看,不支持三重括号(...(...(...)...)...)】
3.通过位置选择
示例:
a:first 匹配页面上的第一个<a>元素
p:odd 匹配序数为偶数的元素
li:last-child 匹配每个<ul>元素的最后<li>子节点
【总结见表2-2】 ps:nth-child从1开始计数,而其他选择器从0开始计数。如果n等于0,就会导致选择所有元素的意外结果。
4.利用自定义jQuery选择器
【总结见表2-3】ps:反转筛选 利用:not筛选器,如input:not(:checkbox)匹配非复选框的<input>元素
筛选选择器和查找选择器的差异:
1.筛选选择器:通过对元素应用更高的选择标准,缩小正在匹配的元素的集合;
2.查找选择器:如后代选择器(空格符)、子节点选择器(>)以及兄弟节点选择器(+),则查找与已选择元素具有某种关系的其他元素,而不是通过把标准应用于已匹配元素来限制匹配范围。
【可以把:not筛选器应用到筛选选择器,但不能应用到查找选择器。】
为了使事情变得简单,筛选器被简单地标识,因为它们都以冒号(:)或者左方括号([)开头。除筛选器以外,任何其他选择器都不能在:not()筛选器里使用。
二、生成新HTML
$函数不仅能够选择现有页面元素,还能够生成HTML。
$("<div>")等同于$("<div></div>")和$("<div/>")
ps:利用这个技巧无法可靠地创建<script>元素。
在现有元素的包装集上可执行的任何jQuery命令,在新建的HTML片段上同样可以执行。
体验示例:
$("<div class='foo'>I have foo!</div><div>I don't</div>")
.filter(".foo").click(function() {
alert("I'm foo!");
}).end().appendTo("#someParentDiv");
三、管理包装元素集合
本节探索对元素包装集进行精简、扩展或取子集的多种途径。
1.确定包装集的大小
jQuery元素包装集运行起来与数组非常相似:像JavaScript数组那样拥有length属性,也可以利用jQuery定义的size()方法,同样返回包装元素的个数。
2.从包装集获取元素
(1).jQuery允许把包装集当成JavaScript数组进行处理,因此,可以利用简单的数组下标来获取元素。
如:从页面上带有alt特性的所有<img>元素的集合中获取第一个元素
$('img[alt]')[0];
(2).可以利用jQuery定义的get()方法来获取元素
get(index):获取包装集里的一个或所有匹配元素。如果不指定参数,包装集里的所有元素就以JavaScript数组形式返回;
如果指定了下标参数,就返回下标所对应的元素。返回一个DOM元素或DOM元素数组。
$('img[alt]').get(0);
get()方法也可用于把元素包装集转化为普通的JavaScript数组。如:
var allLabeledButtons = $('label+button').get();
把邻近<label>元素的所有<button>元素包装到jQuery包装器里,然后创建由那些元素所组成的JavaScript数组,
赋值给变量allLabeledButtons.
(3).可以利用逆运算,获取包装集里特定元素的下标。如,想知道在页面上整个图像集里id为findMe的图像的顺序下标,
可用以下语句获取下标:
var n = $('img').index($('img#findMe')[0]);
index(element):在包装集里查找传入的元素,并返回该元素在包装集里的顺序下标;如果该元素不在包装集里,则返回-1。
3.筛选元素包装集
(1).添加更多元素到包装集
匹配带有alt或title特性的所有<img>元素:$('img[alt],img[title]');
用add匹配相同的元素集合:$('img[alt]').add('img[title]');
以这种方式来调用add()方法,允许把多个选择器链在一起形成“或”关系,即并集。
add(expression):把表达式参数所指定的元素添加到包装集。表达式可以是选择器、HTML片段、DOM元素或DOM元素数组。
参数expression:(字符串|元素|数组)指定添加到包装集的元素。参数如果是jQuery选择器,则全部匹配元素都被添加到集合;
如果是HTML片段,则创建适当的元素并添加到集合;如果是DOM元素或DOM元素数组,则直接添加到集合。
如:$('p').add('<div>Hi there!</div>');
【ps:这样做只是添加新元素到包装集,而在语句里并没有调用添加新元素到DOM的方法。
可以调用jQuery的append()方法添加所选择的元素或新建的HTML到DOM的某个部分。】
(2).整理包装集的内容
not(expression):根据表达式参数的值,从包装集里删除元素。如果参数是jQuery筛选选择器,则从包装集里删除任何匹配表达式的元素;如果参数是元素引用,则从包装集里删除该元素。
参数expression:(字符串|元素|数组)jQuery筛选表达式、元素引用或元素引用的数组,定义从包装集里删除的元素。
示例:想要选择页面里带有title特性的所有<img>元素,除title特性值包含文本puppy的元素以外。
img[title]:not([title*=puppy])等同于$('img[title]').not('[title*=puppy]')
【传递给not()方法的选择器仅限于删除任何元素引用的筛选表达式。传递显式的选择器img[title*=puppy]给not()方法是错误的,
因为not()方法不支持元素选择器。】
filter()方法,当传给它一个函数,它会为每个包装集元素反复调用那个函数,如果哪个元素的函数调用返回false值,就删除哪个函数。利用筛选函数体的函数上下文(即this),每次调用都能存取当前包装集元素。
示例:创建包含数字值的所有<td>元素的包装集。
$('td') .filter(function() {
return this.innerHTML.match(/^\d+$/);
});
【这个表达式首先创建所有<td>元素的包装集,然后为每一个包装集元素各调用一次传递给filter()方法的函数,
并且将当前包装集元素作为当次调用的this值。函数利用正则表达式确定元素内容是否匹配已描述的模式,如果不匹配,则返回false。
筛选函数调用返回false的任何元素,都会从包装集里删除。】
filter(expression):利用传入的选择器表达式或筛选函数,从包装集里筛选元素。
参数:expression (字符串|函数)如果参数是字符串,则指定jQuery选择器,用于从包装集里删除所有与选择器不匹配的元素,
也就是说,留下与选择器匹配的元素;如果参数是一个函数,则用于确定筛选条件。为包装集里的每个元素各调用一次该函数,
以当前元素作为当次调用的函数上下文(this)。函数调用返回值为false的任何元素都会从包装集里删除。
(3).获取包装集的子集
根据元素在包装集里的位置,获取包装集的子集。jQuery提供名为slice()的方法,这个命令创建并返回来自原始包装集的
任何连续部分的新包装集,或把它叫做“原始包装集的切片(slice)”。
slice(begin,end) 创建并返回新包装集,想包装集包含原始包装集的连续的一部分。
begin (数字)将被包含在返回切片中的第一个元素的下标(从0开始)
end (数字,可选)不被包含在返回切片中的第一个元素的下标(从0开始);或一个数字,该数字超出了元素包装集的最后一个
元素的下标。如果省略,则切片延伸到原始包装集的末尾。
示例:$('*').slice(2,3);这个语句选择页面上的所有元素,然后生成包含原始包装集的第3个元素的新包装集。
【注意这与$('*').get(2)不同,后者返回包装集的第三个元素,而不是包含元素的包装集。】
【slice()返回新包装集,而原始包装集保持不变;以上大部分方法除了slice(),都会修改调用它们的包装集。】
4.利用关系获取包装集
【总结见表2-4】
5.更多使用包装集的途径
假设有包装集变量wrappedSet,可用如下语句,获取段落内所有引文(<cite>元素)的新包装集:
wrappedSet.find('p cite');
【注意,如果这是发生在单个语句里的一切,也可通过给jQuery选择器传入上下文参数来完成:$('p cite',wrappedSet)】
find(selector):返回新包装集,包含原始包装集里与传入选择器表达式想匹配的所有元素。
注意:原始新包装集里的元素的后代,会因为与传入的选择器表达式相匹配而被包含在新包装集里。
参数selector:(字符串)一个jQuery选择器,元素必须匹配这个选择器,才能成为新包装集的一部分。
contains(text):返回新包装集,由包含text参数所传入的文本字符串的元素所组成。
【注意,字符串测试应用到元素体的内容的各个方面,包括标记和后代元素的特性值。】
is(selector):确定包装集里是否有元素匹配传入的选择器表达式。
如果至少有一个元素匹配传入的选择器,则返回true,否则返回false。
6.管理jQuery链
利用命令链里调用的方法,可能生成多个包装集。例如,调用clone()方法生成新包装集,即创建原始包装集元素的副本。
一旦生成新包装集,就无法引用原始包装集,因此,我们就被剥夺了构造多功能jQuery命令链的能力。
如:$('img').clone().appendTo('#somewhere');
这个语句内产生两个包装集:一个是页面上所有<img>元素的原始包装集,另一个是由原始包装集元素的副本所组成的新包装集。
clone()方法返回新包装集作为结果。而appendTo()命令是在这个新包装集上进行操作的。
jQuery提供了end()命令,调用此命令,方法就会作为返回值回退到前一个包装集。
如:$('img').clone().appendTo('#somewhere').end().addClass('beenCloned');
appendTo()方法返回克隆得到的新包装集,只要调用end()就回退到前一个包装集,并在其上执行addClass()命令。
如果不插入end()命令,addClass()就操作克隆得到的新包装集。
end():在jQuery命令链内调用,以便回退到前一个包装集。
jQuery命令链在执行期间所产生的包装集保存再栈内。当调用end()时,最顶端的(最近产生的)包装集出栈。
另一个修改包装集栈的便利的jQuery方法是andSelf()。这个方法把栈内最顶端的两个包装集合并为一个包装集。
andSelf():合并命令链内最近产生的两个包装集。