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()：合并命令链内最近产生的两个包装集。