Jquery（一） 选择器

不是基于最新版本，有待更新。

 优势：

1.写法简洁

2.支持css1到css3

3.完善的处理机制。如避免不必要的错误和空的判断

 

元素查找方法 

 1.id选择器:        $("#myELement") 

 2.element选择器（遍历html元素）:  $("div")   

 3.class选择器:  $(".myClass")  

 4. * 选择器（遍历所有元素）: $("*")         

 5.并列选择器:   例如：将p元素和div元素的margin设为0   =>    $('p, div').css('margin', '0');

 

层叠选择器： 

 1.$("div span")         选择所有的div元素中的span元素 

 2.parent > child（直系子元素）:   $('div > span').css('color', '#FF0000'); 

 3.prev + next（下一个兄弟元素，等同于next()方法）:

        $('.item + div')   => 选取class为item的下一个div兄弟元素

 4.prev ~ siblings（prev元素的所有兄弟元素，等同于nextAll()方法）

 例如： $('.inside ~ div')  =>   选取class为inside之后的所有div兄弟元素

 

基本过滤选择器： 

选择器	描述	返回	实例
:first	选取第一个元素	单个元素	$("tr:first")
:last	选取最后一个元素	单个元素	$("tr:last")
:not(selector)	去除所有给定选择匹配的元素	集合元素	$(input:not(.myClass))
:even	选取索引是偶数的所有元素	集合元素	$("tr:even")
:odd	选取索引是奇数的所有元素	集合元素	$("tr:odd")
eq:(index)	选取索引等于index的元素	集合元素	$("td:eq(1)")
:gt(index)	选取索引大于index的元素	集合元素	$("td:gt(4)")
:lt(index)	选取索引小于index的元素	集合元素	$("td:lt(1)")
:header	选取所有的标题元素	集合元素	$(":header")
:animated	选择当前正在执行动画的所有元素	集合元素	$("div:animated")
:focus	选取当前获取焦点的元素	集合元素	$(":focus")

 

内容过滤选择器：

选择器	描述	返回	实例
:contains(text)	选取含有文本内容为text的元素	集合元素	$("div:contains('ss')")
:empty	选取不包含子元素或者空元素	集合元素	$("td:empty")           选择所有的为空（也不包括文本节点）的td元素的数组
:has(selector)	选取含有选择器所匹配的元素的元素	集合元素	$("div:has(p)")        选择所有含有p标签的div元素
:parent	选取含有子元素或者文本的元素	集合元素	$("td:parent")          选择所有的以td为父节点的元素数组

 

可视化过滤选择器：

选择器	描述	返回	实例
:hidden	选取所有不可见的元素	集合元素	$("div:hidden")        选择所有的被hidden的div元素
:visible	选取所有可见的元素	集合元素	$("div:visible")        选择所有的可视化的div元素

 

属性过滤选择器：

选择器	描述	返回	实例
[attribute]	选取拥有此属性的元素	集合元素	$("div[id]")              选择所有含有id属性的div元素
[attribute=value]	选取属性的值为value的元素	集合元素	$("input[name='newsletter']")    选择所有的name属性等于'newsletter'的input元素
[attribute!=value]	选取属性的值不为value的元素	集合元素	$("input[name!='newsletter']") 选择所有的name属性不等于'newsletter'的input元素
[attribute^=value]	选取属性的值以value开头的元素	集合元素	$("input[name^='news']")         选择所有的name属性以'news'开头的input元素
[attribute$=value]	选取属性的值以value结尾的元素	集合元素	$("input[name$='news']")         选择所有的name属性以'news'结尾的input元素
[attribute*=value]	选取属性的值含有value的元素	集合元素	$("input[name*='man']")          选择所有的name属性包含'news'的input元素
[attribute|=value]	选取属性等于给定字符串或以改字符串为前缀（字符串后紧跟链接符'-'）的元素	集合元素
[attribute~=value]	选取属性用空格分隔的值中包含一个给定值的元素	集合元素
[attribute1][attribute2][atrributeN]	用属性选择器合并一个复合属性选择器	集合元素	$("input[id][name$='man']")    可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且那么属性以man结尾的元素

 

 

子元素过滤选择器：

选择器	描述	返回	实例
:nth-child(index/even/odd/equation)	选取每个父元素下的第index个子元素或者奇偶元素。index从1算起	集合元素	$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")
:first-child	选取每个父元素的第一个元素	集合元素	$("div span:first-child")          返回所有的div元素的第一个子节点的数组
:last-child	选取每个父元素的最后一个元素	集合元素	$("div span:last-child")           返回所有的div元素的最后一个节点的数组
:only-child	如果某个元素是它父元素中唯一的子元素，那么它将会被匹配	集合元素	$("div button:only-child")       返回所有的div中只有唯一一个子节点的所有子节点的数组

 

表单元素选择器：

选择器	描述	返回	实例
:input	选择所有的text input元素	集合元素
:text	选择所有的表单输入元素	集合元素
:password	选择所有的password input元素	集合元素
:radio	选择所有的radio input元素	集合元素
:checkbox	选择所有的checkbox input元素	集合元素
:submit	选择所有的submit input元素	集合元素
:image	选择所有的image input元素	集合元素
:reset	选择所有的reset input元素	集合元素
:button	选择所有的button input元素	集合元素
:file	选择所有的file input元素	集合元素
:hidden	选择所有类型为hidden的input元素或表单的隐藏域	集合元素

 

          

表单元素过滤选择器：

选择器	描述	返回	实例
:enabled	选择所有的可操作的表单元素	集合元素
:disabled	选择所有的不可操作的表单元素	集合元素
:checked	选择所有的被checked的表单元素	集合元素	$("input :checked")
:selected	选取所有被选中的选项元素	集合元素	$("select option:selected") 选择所有的select 的子元素中被selected的元素

 

 

其他选择器

  待补充

 

 

 注意事项：

1.选择器中含有“。”、“#”、“（”、“]”等特殊字符

   转义：  例如： $("#id=\\#b")

2.属性选择器@符号问题

 jquery1.3.1版本中放弃了1.1.0版本遗留下来的@符号

3. 选择器中含有空格的注意事项

 待补充

 

 

 

css2 介绍参考：http://www.w3.org/TR/CSS2/selector.html

参考：http://www.cnblogs.com/hulang/archive/2011/01/12/1933771.html