jQuery实战笔记（二）-创建元素包装集

摘要：利用选择器，选择将被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()：合并命令链内最近产生的两个包装集。