jquery选择器的使用方式

时间:2022-12-16 16:30:48
1.基本选择器
 
选择器
描述
返回
示例
代码说明
1
id选择器
根据指定的id匹配元素
单个元素
$("#one").css("background","#bbffaa");
找到id为one的元素,改变其background属性
2
class选择器
根据给定的类名匹配元素
集合元素
$(".mini").css("background","#1f496c");
找到class为mini的所有元素,改变其background属性
3
element
根据给定的元素名匹配元素
集合元素
$("div").css("background","#bbffaa");
找到所有的div元素,改变其background属性
4
*
匹配所有元素
集合元素
$("*").css("background","#bbffaa");
选取所有的元素
5
select1,select2,......selectN
将每一个选择器匹配到的元素合并后一起返回
集合元素
$("span , #two").css("background","#bbffaa"); 改变所有的span元素和id为two的元素的背景色

2.层次选择器

 
选择器
描述
返回
示例
代码说明
1
$("ancestor descendant) 选取ancestor元素里的所有descendant元素 集合元素 $("body div").css("background","#bbffaa"); 选取所有body下的div元素,改变背景色
2
$("parent>child") 选取parent元素下的子元素 集合元素 $("body>div").css("background","#bbffaa"); 选取body下的元素名称为div的子元素
3
$("prev+next") 选择紧接在prev元素后的next元素 集合元素 $(".one+div").css("background","#bbffaa"); 改变class为one的下一个div同辈元素的背景色
4
$("prev~sibling") 选择紧接在prev元素后的sibling 元素 集合元素 $("#two~div").css("background","#bbffaa"); 改变id为two的元素后面的所有div同辈元素的背景色

说明:在层次选择器中,前两个比较常用。

3.过滤选择器
    3.1基本过滤选择器
 
选择器
描述
返回
示例
代码说明
1
:first 选取第一个元素 单个元素 $("div:first").css("background","#bbffaa"); 改变第一个div的颜色
2
:last 选取最后一个元素 单个元素 $("div:last").css("background","#bbffaa"); 改变最后一个div的颜色
3
:not(selector) 去掉所有与给定的选择器的元素 集合元素 $("div:not(.one)").css("background","#bbffaa"); 改变class不为one的div元素的背景色
4
:even 选取索引为偶数的元素 集合元素 $("div:even").css("background","#bbffaa"); 改变索引值为偶数的div的背景色
5
:odd
选取索引为奇数的元素
集合元素
$("div:odd").css("background","#bbffaa");
改变索引值为奇数的div的背景色
6
:eq(index)
选取索引值为index的元素,index  从0开始
单个元素
$("div:eq(3)").css("background","#bbffaa");
改变索引值为3的div的背景色
7
:gt(index)
选取索引值大于index的元素,index  从0开始
集合元素
$("div:gt(3)").css("background","#bbffaa");
改变索引值大于3的div的背景色
8
:lt(index)
选取索引值小于index的元素,index  从0开始
集合元素
$("div:lt(3)").css("background","#bbffaa");
改变索引值小于3的div的背景色
9
:header
选取所有的标题元素
集合元素
$(":header").css("background","#bbffaa");
改变所有标题(h1,h2等)元素背景色
10
:focus
选取当前焦点的元素
单个元素
$(":focus ").css("background","#bbffaa");
改变当前获得焦点的元素的背景色

     3.2内容过滤选择器

 
选择器
描述
返回
示例
代码说明
1
:contains(text) 选取含有文本内容为text的文本元素
集合元素
$("div:contains(我)").css("background","#bbffaa");
改变含有文本“我”的div的元素的背景色
2
:empty 选取不包含子元素或者文本的元素
集合元素
$("div:empty").css("background","#bbffaa");
改变不包含文本(或子元素)的div的背景色
3
:has(select)
选取选择器所匹配的元素的元素
集合元素
$("div:has('.mini')").css("background","#bbffaa");
改变div里面包含clss为mini的元素的div的背景色
4
:parent
选取包含含子元素或者文本的元素
集合元素
$("div:parent").css("background","#bbffaa");
改变包含文本(或子元素)的div的背景色

    3.3内容过滤选择器

 
选择器
描述
返回
示例
代码说明
1
[attribute] 选取拥有此属性的元素 集合元素 $("div[id]").css("background","#bbffaa"); 改变具有id属性的div的背景色
2
[attribute=value] 选取属性的值为value的元素 集合元素 $("div[id=one]").css("background","#bbffaa"); 改变具有id属性为one的div的背景色
3
[attribute!=value] 选取属性的值不为value的元素 集合元素 $("div[id!=one]").css("background","#bbffaa"); 改变具有id属性不为one的div的背景色
4
[attribute^=value] 选取属性的值以value开始元素 集合元素 $("div[title^=te]").css("background","#bbffaa"); 改变title值为te开头的div元素的背景色
5
[attribute$=value]
选取属性的值以value结尾的元素
集合元素
$("div[title$=s]").css("background","#bbffaa");
改变title值为s结尾的div元素的背景色
6
[attribute*=value]
选取属性的值含有value的元素
集合元素
$("div[title*=s]").css("background","#bbffaa");
改变title值含有s的div元素的背景色
7
[attribute|=value]
选取属性等于给定字符串或以该字符串为前缀(该字符串后面跟一个连接符(-))的元素
集合元素
$("div[title|=test]").css("background","#bbffaa");
改变title值为test或者该字符串后面跟-符号的div的元素的背景色
8
[attribute~=value]
选取属性用空格分割的值中包含一个给定值的元素
集合元素
$("div[title~=test]").css("background","#bbffaa");
改变title用空格分割的值中包含字符test的div的元素的背景色
9
[arrtibute1][arrtibute2][arrtibute3]
合并为符合选择器
集合元素
$("div[id=one][title^=te]").css("background","#bbffaa");
改变id属性为one并且title属性以te开头的div元素的背景色

    3.4子元素滤选择器

 
 
选择器
描述
返回
示例
代码说明
1
:nth-child(index/even/odd/equation) 选取每个父元素下的第index个子元素,或者奇偶元素
集合元素
$("div .one :nth-child(2)").css("background","#bbffaa"); 改变class为one的div父元素下的第二个元素的背景色
2
:first-child
选取每个父元素下的第一个子元素
集合元素
$("div .one :first-child").css("background","#bbffaa");
改变class为one的div的父元素下的第一个子元素的背景色
3
:last-child
选取每个父元素下的最后一个子元素
集合元素
$("div .one :last-child").css("background","#bbffaa");
改变class为one的div的父元素下的最后一个子元素的背景色
4
:only-child
如果每个元素是他父元素中唯一的子元素,那么将会被选择,父元素中不含其他元素,不会被匹配
集合元素
$("div .one :only-child").css("background","#bbffaa");
如果class为one的div父元素下只有一个子元素,改变子元素的背景色