jQuery系列 第四章 jQuery框架的选择器

第四章 jQuery框架的选择器

4.1 jQuery选择器说明

jQuery 最核心的组成部分就是选择器引擎。它完全继承了 CSS 的风格,可以对 DOM 元 素的标签名、属性名、状态等进行快速准确的选 择，而且不必担心浏览器的兼容性，写法更加简洁。

jQuery 选择器实现了 CSS1~CSS3 的大部分规则之外,还实现了一些自定义的选择器,用于各种特殊状态的选择。

优点：相对于直接使用 JavaScript 获取页面元素和处理业务逻辑相比，使用jQuery 选择器来进行操作代码更简单且拥有完善的代码检测机制。

jQuery 选择器根据获取页面中元素的不同，可以划分为四大类 :基本选择器、层级选择器、筛选选择器和表单选择器。

4.2 基本选择器

顾名思义，基本选择器是jQuery中用的最多， 使用最频繁的选择器，通过基本选择器我们可以实现大多数页面元素的选择。基本选择器主要有：ID选择器、类选择器、标签选择器、并集选择器和通配符选择器。

选择器 语法 功能 参考示例
ID选择器 #id 根据给定的ID匹配一个元素 $(“#divID”)
类选择器 .class 根据给定的类名匹配所有的元素 $(“.box”)
标签选择器 element 根据给定的元素名匹配所有的元素 $(“div”)
通配符选择器 * 匹配所有的元素 $(“*”)
并集选择器 #id,.class 将每个选择器匹配到的元素合并在一起后返回 $(“#divID,.box”)

基本选择器代码示例

 1 <body>
 2 <div id="demo">我是id为demo的div标签</div>
 3 <div class="box1">我是class为box1的div标签</div>
 4 <div class="box1">我是class为box1的div标签</div>
 5 <div class="box2">我是class为box2的div标签</div>
 6 <div class="box2">我是class为box2的div标签</div>
 7 <p>我是p标签</p>
 8 <script>
 9     $(function () {
10         //基本选择器:
11         //(1) ID选择器 $("#ID");
12         //(2) 类选择器  $(".类");
13         //(3) 标签选择器 $("标签名");
14         //(4) 并集选择器 $("选择器,选择器")
15         //(5) 通配符    $("*")
16
17         //ID选择器:获取页面中id为demo的标签,设置背景颜色为红色
18          $("#demo").css("background","red");
19          //类选择器:获取页面中所有class为box1的标签,并设置背景颜色
20          $(".box1").css("background","green");
21          //类选择器:获取页面中所有class为box2的标签,并设置背景颜色
22          $(".box2").css("background","yellow");
23          //标签选择器:获取页面中所有的p标签
24          $("p").css("background","red");
25          //并集选择器:获取页面中id为demo的标签以及class为box2的所有标签
26          $("#demo,.box2").css("background","green");
27          //通配符选择器:获取页面中所有的标签(包括HTML),设置背景颜色
28          $("*").css("background","green");
29     })
30 </script>

4.3 层级选择器 

层次选择器通过 DOM 元素间的层次关系获取元素，其主要的层次关系包括后代、直接后代、下一个相邻兄弟和后面所有兄弟元素的关系，通过其中某类关系可以方便快捷地定位元素。

选择器 语法 功能 参考示例
后代选择器 parent child 根据祖先元素匹配所有的后代元素 $(“div p”)
直接后代选择器 parent > child 根据父元素匹配所有的子元素 $(“div > .box”)
下一个相邻兄弟 prev + next 匹配所有紧接在prev元素后的相邻元素 $(“#demoID + div”)
后面所有兄弟 prev ~ siblings 匹配 prev 元素之后的所有兄弟元素 $(“#demoID ~ div”)

说明： 后代选择器获取的是所有的后代标签（层次关系是祖先与后代），而直接后代仅仅获取指定标签的子节点满足条件的标签（层次关系为父子关系）。

补充 next() == 下一个相邻兄弟 || nextAll() == 后面所有兄弟

代码示例

 1 <script>
 2     $(function () {
 3         //....
 4         //(1) 后代标签 $(".box div")
 5         //要获取class为box的标签的所有后代中的div标签
 6         $(".box div").css("background","red");
 7         //(2) 直接后代 $(".box>div")
 8         $(".box>div").css("background","green");
 9         //(3) 当前标签后面的第一个兄弟节点 $(".box1 + div")
10         $(".box1 +div").css("background","green");
11         //(4) 当前标签后面的所有的兄弟节点 $(".box1 ~ div")
12         $(".box1 ~ div").css("background","green");
13     })
14 </script>

父子选择器相关方法

`parent() 获取当前标签的父节点`
`parents()获取当前标签的祖先节点`
`parentsUntil()获取当前标签的祖先节点直到…`
`children()获取当前标签的子节点`
`siblings()获取当前标签的兄弟节点`

代码示例

 1 <body>
 2 <div>
 3     <div class="box">
 4         <div>demo</div>
 5         <div class="active">demo</div>
 6         <div>demo</div>
 7         <div>demo</div>
 8         <div>demo</div>
 9     </div>
10     <span>我是span</span>
11 </div>
12 <button>点击我</button>
13 <script>
14     $(function () {
15         $("button").click(function () {
16             //(1) 获取当前标签的父节点
17             //console.log(this);
18             //console.log($(".active").parent());
19             //$(".active").parent().css("background","red");
20             //(2) 获取当前标签的祖先节点
21             //$(".active").parents().css("background","red");
22             //(3) 获取当前标签的祖先节点直到...
23             //$(".active").parentsUntil("body").css("background","red");
24             //(4) 获取当前标签的子节点
25             //$(".box").children().css("background","green");
26             //(5) 获取除了当前标签之外的其他兄弟节点
27             //$(".active ~div").css("background","green");
28             $(".active").siblings().css("background","green");
29         })
30     })
31 </script>

4.4 筛选选择器

筛选选择器可以划分为 :基本筛选选择器、内容筛选选择器、可见性筛选选择器、属性筛选选择器、子元素筛选选择器、表单对象属性筛选选择器。

4.4.1 基本筛选选择器
选择器语法 功能
:first 获取第一个元素
:last 获取最后一个元素
:eq(index) 获取指定索引值的元素
:gt(index) 获取大于给定索引值的元素
:lt(index) 获取小于给定索引值的元素
:not(selector) 获取除给定选择器外的所有元素
:header 获取所有标题类型的元素，如h1 h2
:animated 获取正在执行动画效果的元素
:even 获取所有索引值为偶数的元素，索引号从0开始
:odd 获取所有索引值为奇数的元素，索引号从0开始

代码示例

 1 <script>
 2     $(function () {
 3         //01 获取整个页面中第一个li标签,并设置背景颜色
 4         $("li:first").css("background","green");
 5         //02 获取整个页面中最后一个li标签,并设置背景颜色
 6         $("li:last").css("background","green");
 7         //03 获取整个页面中所有的li标签,除了最后一个
 8         $("li:not(:last)").css("background","green");
 9         //04 获取整个页面中所有的li标签,除了索引为2的之外
10         $("li:not(:eq(2))").css("background","green");
11         //05 获取索引值为偶数的li标签
12         $("li:even").css("background","green");
13         //06 获取索引值为奇数的li标签
14         $("li:odd").css("background","green");
15         //07 获取索引值为4的li标签
16         $("li:eq(4)").css("background","green");
17         //08 获取所有索引值大于4的li标签
18         $("li:gt(4)").css("background","green");
19         //09 获取所有索引值小于4的li标签
20         $("li:lt(4)").css("background","green");
21     });
22 </script>
4.4.2 内容筛选选择器

内容筛选选择器根据元素中的文字内容或所包含的子元素特征获取元素，其文字内容可以模糊或绝对匹配进行元素定位。

选择器语法 功能
:contains(text) 获取包含给定文本的元素
:parent 获取含有子元素或者文本的元素
:empty 获取所有不包含子元素或文本的空元素
:has(selector) 获取含有选择器所匹配的元素

代码示例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="jquery-3.1.1.js"></script>
 7     <style>
 8         div{
 9             width: 100px;
10             height: 40px;
11         }
12     </style>
13 </head>
14 <body>
15 <div>天王盖地虎</div>
16 <div><span>我是span</span></div>
17 <div>宝塔镇河妖</div>
18 <div></div>
19 <script>
20     $(function () {
21         //(1) 获取包含给定文本的元素
22         $("div:contains(‘天‘)").css("background","red");
23         $("div:contains(‘塔‘)").css("background","green");
24         //(2) 获取不包含子元素或文本的空元素
25         $("div:empty").css("background","red");
26         //(3) 获取含有子元素或者是文本的元素
27         $("div:parent").css("background","yellow");
28         //(4) 获取含有span子标签的div
29         $("div:has(‘span‘)").css("background","red");
30     })
31 </script>
32 </body>
33 </html>
4.4.3 属性筛选选择器

属性过滤选择器根据元素的某个属性获取元素，在使用的时候我们可以匹配单个属性也可以进行多个属性的匹配。

选择器语法 功能
[属性名] 获取包含给定属性的元素
[属性名1][属性名2] 获取满足多个条件的复合属性的元素
[属性名=’value’] 获取包含给定属性且等于指定值的元素
[属性名！=’value’] 获取包含给定属性且不等于指定值的元素
[属性名^=’value’] 获取包含给定属性且以指定字符开头的元素
[属性名$=’value’] 获取包含给定属性且以指定字符结尾的元素
[属性名*=’value’] 获取包含给定属性且包含指定字符或者是子串的元素

示例代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <div>
 9     <a href="www.baidu.com">www.baidu.com</a><br>
10     <a href="www.jd.com">www.jd.com</a><br>
11     <a href="www.taobao.com">www.taobao.com</a><br>
12     <a href="www.520it.cn">www.520it.cn</a><br>
13     <a href="www.520it.com" title="demo">www.520it.com</a><br>
14     <a href="www.520it.com" title="Test">www.520it.com</a><br>
15     <a>我什么也不是</a>
16 </div>
17 <button>设置所有拥有href属性的a标签</button><br>
18 <button>设置harf属性值为www.baidu.com的a标签</button><br>
19 <button>设置harf属性值不为www.baidu.com的a标签</button><br>
20 <button>设置harf属性值以www开头的a标签</button><br>
21 <button>设置harf属性值以com结尾的a标签</button><br>
22 <button>设置harf属性值包含520的a标签</button><br>
23 <button>设置harf属性值中以www开头且title中包含demo的a标签</button><br>
24 <script src="js/jquery-3.2.1.js"></script>
25 <script>
26     $(function () {
27         $("button").eq(0).click(function () {
28             $("a[href]").css("background","green");
29         });
30         $("button").eq(1).click(function () {
31             $("a[href=‘www.baidu.com‘]").css("background","green");
32         });
33         $("button").eq(2).click(function () {
34             $("a[href!=‘www.baidu.com‘]").css("background","green");
35         });
36         $("button").eq(3).click(function () {
37             $("a[href^=‘www‘]").css("background","green");
38         });
39         $("button").eq(4).click(function () {
40             $("a[href$=‘com‘]").css("background","green");
41         });
42         $("button").eq(5).click(function () {
43             $("a[href*=‘520‘]").css("background","green");
44         });
45         $("button").eq(6).click(function () {
46             $("a[href^=‘www‘][title=‘demo‘]").css("background","green");
47         });
48     });
49 </script>
50 </body>
51 </html>
4.4.4 子元素筛选选择器

通过子元素筛选选择器可以方便轻松的获取父元素中指定的某个元素。

选择器语法 功能
:first-child 获取每个父元素下的第一个子元素
:last-child 获取每个父元素下的最后一个子元素
:only-child 获取每个父元素下的仅有一个子元素
:nth-child(eq-index) 获取每个父元素下特定位置的元素索引从1开始
4.4.5 可见性筛选选择器

可见性过滤选择器根据元素是否可见的特征获取元素，分为可见和不可见两种。

选择器语法 功能
:visible 获取所有的可见元素
:hidden 获取所有不可见元素,或者type为hidden的元素
4.4.6 表单对象属性筛选选择器

表单对象属性筛选选择器通过表单中某对象的属性特征获取该类元素，主要有enabled、disabled、checked（选中）elected等属性。

选择器语法 功能
:enabled 获取表单中所有属性为可用的元素
:disabled 获取表单中所有属性为不可用的元素
:checked 获取表单中所有被选中的元素
:selected 获取表单中所有被选中option的元素
4.4.5 可见性筛选选择器

可见性过滤选择器根据元素是否可见的特征获取元素，分为可见和不可见两种。

选择器语法 功能
:visible 获取所有的可见元素
:hidden 获取所有不可见元素,或者type为hidden的元素

4.5 表单选择器

表单在前端开发中是非常重要的标签，在显示和提交数据的数据经常需要用到，在 jQuery 框架中引入了表单选择器，该选择器专为表单量身打造，通过表单选择器可以在页面中快速定位某表单对象。

表单选择器的语法

选择器语法 功能
:file 获取所有文件域
:image 获取所有的图像域
:text 获取所有的单行文本框
:reset 获取所有重置按钮
:radio 获取所有单选框按钮
:button 获取所有按钮
:submit 获取所有提交按钮
:checkbox 获取所有的复选框
:password 获取所有的密码框
:input 获取所有的input、textarea、select标签

附录 jQuery选择器知识结构

原文地址：https://www.cnblogs.com/wendingding/p/8856510.html

时间： 2024-10-14 14:16:15

jQuery系列 第四章 jQuery框架的选择器的相关文章

jQuery系列 第三章 jQuery框架操作CSS

第三章 jQuery框架操作CSS 3.1 jQuery框架的CSS方法 jQuery框架提供了css方法,我们通过调用该方法传递对应的参数,可以方便的来批量设置标签的CSS样式. 使用JavaScript设置标签的样式相对来说比较麻烦,而如果需要批量的设置多个标签的样式那需要写很多代码,使用jQuery可以为我们简化该过程.     使用原生的方式来设置标签的样式(代码示例) 1 <body> 2 <div>我是div标签</div> 3 <button id=

锋利的jQuery第四章:jQuery中的事件和动画

第一部分 1, (1)$()是$(document)的简写,默认参数是document. $(function(){}是$(document).ready(function(){})的简写. 2, (1)事件绑定 bind(type [,data],fn); type是事件类型,有blur,focus,load,resize,scroll,unload,click,dbclick,mousedown,mouseup, mouseover,mousemove,mouseout,mouseenter

jquery基础教程 - 第一章 JQUERY入门

Jquery基础教程 - 第一章 JQUERY入门 内容提要 1.jquery能做什么 2.jquery为什么如此出色 3.第一个jquery驱动的页面 4.纯javascript与jquery 5.开发工具 6.小结 1.jquery能做什么 取得文档中的元素 -- jQuery为准确的获得需要检查或操纵的文档元素,提供了可靠而富有效率的选择符机制. 找到所有应用了.content class样式的div中所有的P标签             $('div.content').find('p'

第四章 jQuery中的事件

1.加载DOM jQuery中,在$(document).ready()方法内注册的事件,只要DOM就绪就会被执行,此时可能元素的关联文件未下载完. jQuery中的 load()方法,会在元素的onload事件中绑定一个处理函数.比如$(window).load(function(){...}),等价于JavaScript中的window.onload=function(){...},该方法需要等网页所有元素都加载完(包括管理文件). 2.事件绑定 在文档装载完之后,可以为元素绑定事件来完成一

从零开始学_JavaScript_系列（四）——jquery（基础，选择器，触发条件，动画，回调函数）

jQuery语法 (1)引用jquery文件及下载库: http://jquery.com/download/ 下载 Download the compressed, production jQuery 2.2.2 这个是用户版的,已经被精简和压缩. 然后使用 <script src="jquery.js"></script> 来启动这个库文件,记得将下载的文件重命名为jquery.js 也可以使用谷歌和微软的CDN,不过这里略. (2)jQuery语法 $ (

【jQuery系列0】初识jQuery之属性

接触jQuery是从做项目开始的,当时只知道我们的项目里边用到了jquery.ajax等等,一听高大上的感觉,但是哪里用到了作用是什么并不清楚,直到看了jquery视频才恍然大悟:原来这就是jquery,我还一直以为那就是单纯的js呢! jQuery简介 jQuery,即JavaScript和查询Query,它是继prototype之后又一个优秀的JavaScript库,它兼容多浏览器,核心理念是"写得更少,做得更多",由美国人于2006年1月在纽约的barcamp发布,吸引了世界各地

WP8.1学习系列(第四章)——交互UX

交互模式和指南 这部分包括三部分内容,分别是导航模式.命令模式和输入模式. 导航模式 虽然 Windows 导航模式提供了框架,但它提倡创新.激发你的创造力并在已建立的模式上构建. 命令模式 使用应用栏.超级按钮.菜单和页面内容,以使用户可以控制你的应用. 输入模式 了解用户可用于与应用交互的许多方式.深入了解如何设计良好的触摸交互. 导航模式 组织 Windows 或 Windows Phone 应用中的内容,以便用户可以轻松而直观地进行导航. 适用于 Windows 的导航模式 适用于 Wi

jQuery之第4章 jQuery中的事件和动画

一.jQuery中的事件: 1.加载DOM: jQuery:$(document).ready(); JavaScript:window.onload(); $(window).load(function(){ }) 等价于 window.onload = function(){} 简写方式: (1)$(document).ready(functon(){}) (2)$().ready(functon(){}) (3)$(function(){}) 2.事件绑定: bind(); 3.合成事件:

jQuery之第2章 jQuery选择器

jQuery选择器: 1.基本选择器: (1) (2) 2.层次选择器: 3.过滤选择器: 基本过滤选择器: (1) 内容过滤选择器: 可见性过滤选择器: 属性过滤选择器: 子元素过滤选择器: 表单对象属性过滤选择器 4.表单选择器: