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父元素下只有一个子元素，改变子元素的背景色
时间： 2024-12-20 01:29:16

jquery选择器的使用方式的相关文章

jQuery选择器中的一些注意事项

选择器中含有特殊符号: 选择器中含有"."."#"."("或"]"等特殊字符.根据W3C的规定,属性值中是不能含有这些特殊字符的.但在实际项目中偶尔会遇到表达式中含有"#"和"."等特殊字符.如果按照普通的方式去处理出来的话就会出错.解决此类错误的方法是使用转义符转义. HTML代码如下: <div id="id#b">bb</div> <

jQuery选择器代码详解（四）——Expr.preFilter

原创文章,转载请注明出处,多谢! Expr.preFilter是tokenize方法中对ATTR.CHILD.PSEUDO三种选择器进行预处理的方法.具体如下: Expr.preFilter : { "ATTR" : function(match) { /* * 完成如下任务: * 1.属性名称解码 * 2.属性值解码 * 3.若判断符为~=,则在属性值两边加上空格 * 4.返回最终的mtach对象 * * match[1]表示属性名称, * match[1].replace(rune

常用jQuery选择器总结

在Dom 编程中我们只能使用有限的函数根据id 或者TagName 获取Dom 对象. 然而在jQuery 中则完全不同,jQuery 提供了异常强大的选择器用来帮助我们获取页面上的对象, 并且将对象以jQuery 包装集的形式返回.本文主要对常用的jQuery 选择器进行一个介绍及归类. jQuery 选择器大体上可分为 4 类:基本选择器.层次选择器.过滤选择器.表单选择器.其中过滤选择器可以分为:简单过滤选择器.内容过滤选择器.可见性过滤选择器.属性过滤选择器.子元素过滤选择器.表单对象属

jQuery选择器。 5.21 《深夜还在编码的你》

(之所以字体弄那么大是因为省眼,程序员不容易,程序员的眼睛更不容易,请保护我们的眼睛) 选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器. 熟练地使用选择器,不但能简化代码,而且能够事半功倍. jQuery选择器可通过CSS选择器.条件过滤两种方式获取元素. 可以通过CSS选择器语法规则获取元素的jQuery选择器包括基本选择器.层次选择器和属性选择器: 可以通过条件过滤选取元素的jQuery选择器包括基本过滤选择器和可见性过滤选择器. jQuer

jQuery选择器(一)

晚上闲着没事,正好用来整理下jQuery的选择器,毕竟没有总结就不算学习嘛. 首先,对事件处理.遍历DOM和Ajax操作,都依赖于选择器. 1.CSS选择器 要使用某个HTML元素,就先要找到它,而css选择器比较简单,不废话,主要常用的有 文档元素做选择符.ID做选择符.class做选择符,举例: 文档元素: li{ font-size:13px; } a{ text-decoration:none; } ID方式: #txtName{ font-size:13px; } Class方式: .

jQuery选择器代码详解（五）——实例说明tokenize的解析过程

原创文章,转载请写明出处,多谢! 以下分析基于jQuery-1.10.2.js版本. 下面将以$("div:not(.class:contain('span')):eq(3)")为例,说明tokenize和preFilter各段代码是如何协调完成解析的.若想了解tokenize方法和preFilter类的每行代码的详细解释,请参看如下两篇文章: jQuery选择器代码详解(三)--tokenize方法 jQuery选择器代码详解(四)--Expr.preFilter 下面是tokeni

jQuery内核详解与实践读书笔记2:破解jQuery选择器接口1

前两篇已经介绍了如何搭建一个jQuery框架的雏形,从这一篇开始详细了解jQuery选择器的接口.jQuery选择器功能强大但用法很简单,它仅仅提供了一个接口:jQuery(),也可以简写为$(). 1. 简单但很复杂的黑洞 jQuery提供了唯一的接口(jQuery()或$())使选择器与外界进行交流.jQuery框架的基础是查询,即查询文档元素对象,因此可以认为jQuery对象就是一个选择器,并在此基础上构建和运行查询过滤器.jQuery查询结果的数据集合是jQuery对象的一部分.在$()

转-JQuery选择器及radio，checkbox,select取值和反选

jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div")           选择所有的div标签元素,返回div元素数组 $(".myClass")      选择使用myClass类的css的所有元素 $("*")        

jQuery 选择器 （基础恶补之三)+Ajax

jQuery load() 方法 jQuery load() 方法是简单但强大的 AJAX 方法. load() 方法从服务器加载数据,并把返回的数据放入被选元素中. 语法: $(selector).load(URL,data,callback); 必需的 URL 参数规定您希望加载的 URL. 可选的 data 参数规定与请求一同发送的查询字符串键/值对集合. 可选的 callback 参数是 load() 方法完成后所执行的函数名称. 这是示例文件("demo_test.txt")