JQuery 实践---创建元素包装集

1. 利用选择器，选择将被JQuery包装的元素

标识和选择DOM元素。JQuery采用我们已经知道的CSS语法并且扩展了一些.为了利用JQuery来选择元素，请把选择器包装在$()中。

• 基本CSS选择器： 
  元素名 tag, 元素ID #,元素类 .classname，位置： p a.classname 以及组合
• 子选择器，容器选择器和特性选择器
  * 匹配任何元素
  E 匹配标签名为E的所有元素
  E F 匹配标签名为F，作为E的后代节点的所有元素
  E>F 匹配标签名为F，作为E的直接子节点的所有元素
  E+F 匹配标签名为F，其前面是邻近兄弟节点E，E和F紧挨着
  E~F匹配标签名为F，其前面是任何兄弟节点E，E和F可以不紧挨着
  E:has(F) 匹配标签名为E,至少有一个标签名为F的后代节点
  E.C 匹配带有类名C的所有元素E
  E#I 匹配id特性值为I的所有E元素
  E[A] 匹配含有属性A的所有E元素
  E[A=V] 相等
  E[A^=V] 开始
  E[A*=V] 包含
  E[A$=V] 结尾
• 位置选择
  

  :first	页面的最先匹配，某个元素在页面（Scope）第一个出现的
  :last	页面的最后匹配
  :first-child	最先的子元素. 某元素作为最先的子元素
  :last-child	最后的子元素
  :only-child	返回没有兄弟节点的所有元素
  :nth-child(n)	第n个子节点，n从1开始
  :nth-child(odd|even)	偶数或奇数
  :nth-child(Xn+Y)	根据传入的公式计算的第N个子节点
  :even or :odd	页面范围内偶数或奇数的匹配元素
  :eq(n)	第n个匹配元素,n从0开始
  :gt(n)
  :lt(n)

• 自定义JQuery选择器

  :animated	选择当前处于动态控制之下的元素
  :button	任何Button
  :checkbox
  :checked
  :contains(foo)	只选择包含文本foo的元素
  :disabled
  :enabled
  :file
  :header	h1~h6
  :hidden
  :image
  :input
  :not(filter)	与指定的筛选器求反，只能应用到筛选选择器上
  :parent	选择拥有后代节点的元素 包括文本节点
  :password
  :radio
  :reset
  :selected	选择已选中的选项元素
  :submit
  :text	只选择文本字符元素
  :visible	只选择可见元素

只支持一层嵌套

筛选选择器，通过对元素应用更高的选择标准，缩小正在匹配的元素的集合

查找选择器，查找与已选择元素具有某种关系的其他元素。可能扩大操作集

支持XPath的JQuery插件：http://jQuery.com/plugins/project/xpath

/html//form/fieldset
  /html//form/*/input
 //div/..  div的直接父元素

//div[@foo=bar]

//div[@p]

2. 创建并放置新的HTML元素到DOM中
  $("<div>Hello</div>")

$("<div>")

利用这个技巧无法可靠地创建<script>元素

eg.

$("<div class='foo'> I have foo</div><div>I don't</div>").filter(".foo").click(function(){alert('I am foo');}).end().appendTo("#someparentDiv")

3.操作元素包装集

名称	函数	参数	返回值	例子
确定包装集大小	size()		元素的个数	$("a").size()
从包装集获取元素	get(index) index(element)	index不指定时，获取所有的元素以JS数组形式返回 元素的引用	一个DOM元素或DOM元素数组 传入元素的下标或-1
添加更多元素到包装集	add(expression)	字符串|元素|数组	包装集	$('img[alt],img[title]') $('img[alt]').add('img[title]') $('img[alt]').add('<p>sdf</p>')
从包装集里删除元素	not(expression)	字符串|元素|数组。 任何JQuery包装集都能够当成元素引用的数组来使用	包装集
编程方式筛选包装集元素	filter(expression)	字符串|函数 字符串作为JQuery选择器，在包装集中留下匹配的元素.函数调用返回为False的从包装集中删除 隐试函数类型的筛选器	包装集
根据元素在包装集的位置，获取包装集子集	slice(begin[,end])	数字，包含begin，不包含end	新建的包装集
关系：返回原始包装集元素的所有唯一子元素组成的包装集	children()	包含字符串的参数	包装集
关系：返回原始包装集袁术的内容的包装集，可能包含文本节点。	contents()		包装集	常用语获取<iframe>元素的内容
返回原始包装集元素的所有唯一的下一个兄弟元素所组成的包装集	next()	包含字符串的参数	包装集
返回原始包装集元素的所有后续兄弟元素的包装集	nextAll()	包含字符串的参数	包装集
返回原始包装集元素的唯一直接父元素	parent()	包含字符串的参数	包装集
祖先元素，但不包括文档跟元素	parents()	包含字符串的参数	包装集
	prev()	包含字符串的参数	包装集
	prevAll()	包含字符串的参数	包装集
返回原始包装集元素的所有唯一兄弟元素所组成的包装集	siblings（）	包含字符串的参数	包装集
把现有包装集仔细搜索，并返回包含所有匹配传入选择器表达式的元素的新包装集 操作链中调用，力量才强大	find(selector)	字符串，一个jQuery选择器	新包装集	wrappedSet.find('p cite') <==> $('p cite',wrappedSet)
查找包含指定字符串的元素 元素体的内容的各个方面，包含标记和后代元素的特性值，但不匹配受测原始元素的标记和特性值	contains(text)	字符串	新包装集
测试包装集，是否至少包含一个匹配给定选择器元素	is(selector)	字符串，选择器表达式	true/false
回退到前一个包装集	end()		前一个包装集	$('img').clone().appendTo('#somewhere').end().addClass('beenCloned')
合并栈内最顶端的两个包装集,把当前包装集和前一个包装集合并为一个包装集	andSelf()		合并后的包装集