选择器 语法 示例
标签选择器 D{CSS} td{font-size:14px;}
ID 选择器 #ID{CSS} #header{font-size:14px;}
类选择器 D.calssName{CSS} .dream{font-size:14px;}
群组选择器 E1,E2,E3{CSS} td,p,div,a{margin:0px;}
后代选择器 E F{CSS} #Link a{color:red;}
通配符选择符 *{CSS} *{font-size:14px;}
2jQuery 基本选择器
选择器 jQuery 返回
标签选择器 Element $("tagName") 集合元素
ID 选择器 #id $("#ID") 单个元素
类选择器 .class $(".demo") 集合元素
群组选择器 selector,2 $("div,span,p,myclass") 集合元素
通配符选择符 $("*") 集合元素
3层次选择器
选择器 jQuery
$("ancestor descemdant") $("div span")选取 div 中所有的 span(集合元素)
$("parent>child") $("div>span")选取所有 div 元素下名为 span 的子元素(集合元素)
$("prev+next") $(".one+div")选取 class 为. one 的下一个 div 元素(集合元素)
$("prev^sibling") $("#two-div")选取 id 为 two 的元素后面所有的 div 兄弟元素(集合元素)
4基本过滤选择器
过滤器 jQuery
:first $("div:first")选取所有 < div > 元素中的第一个 < div > 元素(单个元素)
:last $("div:last")选取所有 < div > 元素中的最后一个 < div > 元素(单个元素)
:not(selector) $("input:not(.myClass)")选取 class 不是 myClass 的 < input > 元素(集合元素)
:even $("input:even")选取索引是偶数的 < input > 元素(索引从 0 开始)(集合元素)
:odd $("input:odd")选取索引是奇数的 < input > 元素(索引从 0 开始)(集合元素)
:eq(index) $("input:eq(1)")选取索引等于 1 的 < input > 元素(单个元素)
:gt(index) $("input:gt(1)")选取索引大于 1 的 < input > 元素(集合元素)
:It(index) $("input:It(4)")选取索引小于 4 的 < input > 元素(集合元素)
:header $(":header")选取所有标题元素 < h1><h2><h3>(集合元素)
:animated $("div:animated")选取正在执行动画的 < div > 元素(集合元素)
5内容过滤选择器
过滤器 jQuery
:contains(text) $("div:contains(我)")选取含有文本 "我" 的 < div > 元素(集合元素)
:empty $("div:empty")选取不包含子元素 (文本元素) 的 < div > 空元素(集合元素)
:has(selector) $("div:has(p)")选取含有 < p > 元素的 < div > 元素(集合元素)
:parent $("div:parent")选取拥有子元素 (包括文本元素) 的 < div > 元素(集合元素)
6属性过滤选择器
过滤器 jQuery
[attribute] $("div[id]")选取所有拥有 id 属性的元素(集合元素)
[attribute=value] #("div[title=test]")选取元素属性 title 值为 test 的 < div > 元素(集合元素)
[attribute!=value] $("div[title!=test]")选取元素属性 title 值不为 test 的 < div > 元素(集合元素)
[attribute^=value] $("div^=test")选取属性 title 值为 test 开头的 div 元素(集合元素)
[attribute$=value] $("div$=test")选取属性 title 值为 test 结尾的 div 元素(集合元素)
[attribute*=value] $("div*=test")选取属性 title 值中包含 test 的 div 元素(集合元素)
[selector][selector2][selectorN] $("div[id][title$="test"]")选取拥有 id 属性, 且 title 属性值以 test 结尾的所有 div 元素
7子元素过滤选择器
过滤器 jQuer
:nth-child(index/even/odd/equation) :eq(index)只匹配一个元素, 而: nth-child 将为每一个父元素匹配子元素, 并且: nth-child(index)下标从 1 开始, 而: eq(index)是从 0 开始
:nth-child(even) 选取每个父元素下的索引值是偶数的元素
:nth-child(odd) 选取每个父元素下的索引值是奇数的元素
:nth-child(3n)选取每个父元素下的索引值是 3 的倍数的元素
:first-child :frist 只返回单个元素, 而: first-child 选择符将为每一父元素匹配第一个子元素.
例如 $("ul li:first-child"); 选取每个 < ul > 中的第一个 < li > 元素
注意
$("ul li :first-child"); 选取每个 < ul > 中的每一个 < li > 元素中的第一个子元素
:last-child :last 只返回单个元素而: last-child 选择器将为每个父元素匹配最后一个子元素
例如 $("ul li:last-child"); 选择每个 < ul > 中最后一个 < li > 元素
:only-child $("ul li:only-child")在 < ul > 中选取是唯一子元素的 < li > 元素.
8表单对象属性过滤选择器
选择器 jQuery
:emabled $("#form1:enabled")选取 id 为 form1 的表单内所有可用的元素(集合元素)
:disabled $("#form1:disabled")选取 id 为 form2 的表单内所有不可用的元素(集合元素)
:checked $("input:checked")选取所有被选中的 < input > 元素(集合元素)
:selected $("select:selected")选取所有被选中的选项元素 下拉列表(集合元素)
9表单选择器
过滤器 jQuery
:input $(":input")选取所有 < input><textarea><select > 和 < button>(集合元素)
:text $(":text")选取所有单行文本框(集合元素)
:password $(":password")选取所有的密码框(集合元素)
:radio $(":radio")选取所有的单选框
:checkbox $(":checkbox")选取所有复选框
:submit $(":submit")选取所有提交按钮
:image $(":image")选取所有图像按钮
:reset $(":reset")选取所有重置按钮
:button $(":button")选取所有按钮
:file $(":file")选取所有上传域
:hidden $(":hidden")选取所有不可见元素
来源: http://www.bubuko.com/infodetail-2844442.html