jquery选择器的使用方式

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父元素下只有一个子元素，改变子元素的背景色

转载于:https://www.cnblogs.com/qadada/p/4512456.html

jquery选择器的使用方式相关推荐

jQuery选择器回顾，IE8还需要你发光发热
2019独角兽企业重金招聘Python工程师标准>>> 今天又把jQuery的选择器看了一下,感觉有好几个一直都没有用过.现在有这么多模板双向绑定之类先进思想的前端框架,也不知道jq ...
使用HTML5的自定义数据属性的jQuery选择器
本文翻译自:jQuery selectors on custom data attributes using HTML5 I would like to know what selectors are ...
jQuery选择器和选取方法 http://www.cnblogs.com/MaxIE/p/4078869.html
我们已经使用了带有简单Css选择器的jQuery选取函数:$().现在是时候深入了解jQuery选择器语法,以及一些提取和扩充选中元素集的方法了. 一.jQuery选择器在CSS3选择器标淮草案定义 ...
php jquery选择器,常用jQuery选择器总结_jquery
在Dom 编程中我们只能使用有限的函数根据id 或者TagName 获取Dom 对象. 然而在jQuery 中则完全不同,jQuery 提供了异常强大的选择器用来帮助我们获取页面上的对象, 并且将对象 ...
Java程序员从笨鸟到菜鸟之（八十六）跟我学jquery（二）大话jquery选择器
本篇博客我将带大家来学习一下jQuery的第一个比较重要的知识点,这个知识点对学习jquery的同学来说是必须掌握的,因为他是所有操作的基础,这个知识点就是jquery的对象选择器,我们利用jquer ...
HTML选择器属于jq的选择器吗,JQuery 选择器
jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能 ...
jQuery选择器中的特殊符号和关键字
一般情况下,在jQuery选择器中,我们很少会用到诸如"."."#"."("."["等特殊字符,因为根据W3C规定,HT ...
jQuery选择器引擎和Sizzle介绍
jQuery选择器引擎和Sizzle介绍首先介绍一下什么是Sizzle: Sizzle是一个纯javascript CSS选择器引擎.jquery1.3开始使用sizzle,Sizzle一反传统采取 ...
jQuery选择器和选取方法
我们已经使用了带有简单Css选择器的jQuery选取函数:$().现在是时候深入了解jQuery选择器语法,以及一些提取和扩充选中元素集的方法了. 一.jQuery选择器在CSS3选择器标淮草案定义 ...

jquery选择器的使用方式

jquery选择器的使用方式相关推荐

最新文章

热门文章