jQuery中的一些选择器

Posted 2021-01-19 192-168-d

① CSS选择器
选择器 语法 示例
标签选择器 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;}

②jQuery基本选择器
选择器 jQuery 返回
标签选择器 Element $("tagName") 集合元素
ID选择器 #id $("#ID") 单个元素
类选择器 .class $(".demo") 集合元素
群组选择器 selector,2 $("div,span,p,myclass") 集合元素
通配符选择符 $("*") 集合元素

③层次选择器
选择器 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兄弟元素(集合元素)

④基本过滤选择器
过滤器 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>元素(集合元素)

⑤内容过滤选择器
过滤器 jQuery
:contains(text) $("div:contains(我)")选取含有文本"我"的<div>元素（集合元素）
:empty $("div:empty")选取不包含子元素（文本元素）的<div>空元素（集合元素）
:has(selector) $("div:has(p)")选取含有<p>元素的<div>元素（集合元素）
:parent $("div:parent")选取拥有子元素（包括文本元素）的<div>元素（集合元素）

⑥属性过滤选择器
过滤器 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元素

⑦子元素过滤选择器
过滤器 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>元素。

⑧表单对象属性过滤选择器
选择器 jQuery
:emabled $("#form1:enabled")选取id为form1的表单内所有可用的元素（集合元素）
:disabled $("#form1:disabled")选取id为form2的表单内所有不可用的元素（集合元素）
:checked $("input:checked")选取所有被选中的<input>元素（集合元素）
:selected $("select:selected")选取所有被选中的选项元素 下拉列表（集合元素）

⑨表单选择器
过滤器 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")选取所有不可见元素