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”) |
基本选择器代码示例
<body>
<div id="demo">我是id为demo的div标签</div>
<div class="box1">我是class为box1的div标签</div>
<div class="box1">我是class为box1的div标签</div>
<div class="box2">我是class为box2的div标签</div>
<div class="box2">我是class为box2的div标签</div>
<p>我是p标签</p>
<script>
$(function () {
//基本选择器:
//(1) ID选择器 $("#ID");
//(2) 类选择器 $(".类");
//(3) 标签选择器 $("标签名");
//(4) 并集选择器 $("选择器,选择器")
//(5) 通配符 $("*") //ID选择器:获取页面中id为demo的标签,设置背景颜色为红色
$("#demo").css("background","red");
//类选择器:获取页面中所有class为box1的标签,并设置背景颜色
$(".box1").css("background","green");
//类选择器:获取页面中所有class为box2的标签,并设置背景颜色
$(".box2").css("background","yellow");
//标签选择器:获取页面中所有的p标签
$("p").css("background","red");
//并集选择器:获取页面中id为demo的标签以及class为box2的所有标签
$("#demo,.box2").css("background","green");
//通配符选择器:获取页面中所有的标签(包括HTML),设置背景颜色
$("*").css("background","green");
})
</script>
4.3 层级选择器
层次选择器通过 DOM 元素间的层次关系获取元素,其主要的层次关系包括后代
、直接后代
、下一个相邻兄弟
和后面所有兄弟
元素的关系,通过其中某类关系可以方便快捷地定位元素。
选择器 | 语法 | 功能 | 参考示例 |
---|---|---|---|
后代选择器 | parent child | 根据祖先元素匹配所有的后代元素 | $(“div p”) |
直接后代选择器 | parent > child | 根据父元素匹配所有的子元素 | $(“div > .box”) |
下一个相邻兄弟 | prev + next | 匹配所有紧接在prev元素后的相邻元素 | $(“#demoID + div”) |
后面所有兄弟 | prev ~ siblings | 匹配 prev 元素之后的所有兄弟元素 | $(“#demoID ~ div”) |
说明: 后代选择器获取的是所有的后代标签(层次关系是祖先与后代),而直接后代仅仅获取指定标签的子节点满足条件的标签(层次关系为父子关系)。
补充 next() == 下一个相邻兄弟
|| nextAll() == 后面所有兄弟
代码示例
<script>
$(function () {
//....
//(1) 后代标签 $(".box div")
//要获取class为box的标签的所有后代中的div标签
$(".box div").css("background","red");
//(2) 直接后代 $(".box>div")
$(".box>div").css("background","green");
//(3) 当前标签后面的第一个兄弟节点 $(".box1 + div")
$(".box1 +div").css("background","green");
//(4) 当前标签后面的所有的兄弟节点 $(".box1 ~ div")
$(".box1 ~ div").css("background","green");
})
</script>
父子选择器相关方法
`parent()
获取当前标签的父节点``parents()
获取当前标签的祖先节点``parentsUntil()
获取当前标签的祖先节点直到…``children()
获取当前标签的子节点``siblings()
获取当前标签的兄弟节点`
代码示例
<body>
<div>
<div class="box">
<div>demo</div>
<div class="active">demo</div>
<div>demo</div>
<div>demo</div>
<div>demo</div>
</div>
<span>我是span</span>
</div>
<button>点击我</button>
<script>
$(function () {
$("button").click(function () {
//(1) 获取当前标签的父节点
//console.log(this);
//console.log($(".active").parent());
//$(".active").parent().css("background","red");
//(2) 获取当前标签的祖先节点
//$(".active").parents().css("background","red");
//(3) 获取当前标签的祖先节点直到...
//$(".active").parentsUntil("body").css("background","red");
//(4) 获取当前标签的子节点
//$(".box").children().css("background","green");
//(5) 获取除了当前标签之外的其他兄弟节点
//$(".active ~div").css("background","green");
$(".active").siblings().css("background","green");
})
})
</script>
4.4 筛选选择器
筛选选择器
可以划分为 :基本筛选选择器、内容筛选选择器、可见性筛选选择器、属性筛选选择器、子元素筛选选择器、表单对象属性筛选选择器。
4.4.1 基本筛选选择器
选择器语法 | 功能 |
---|---|
:first | 获取第一个元素 |
:last | 获取最后一个元素 |
:eq(index) | 获取指定索引值的元素 |
:gt(index) | 获取大于给定索引值的元素 |
:lt(index) | 获取小于给定索引值的元素 |
:not(selector) | 获取除给定选择器外的所有元素 |
:header | 获取所有标题类型的元素,如h1 h2 |
:animated | 获取正在执行动画效果的元素 |
:even | 获取所有索引值为偶数的元素,索引号从0开始 |
:odd | 获取所有索引值为奇数的元素,索引号从0开始 |
代码示例
<script>
$(function () {
//01 获取整个页面中第一个li标签,并设置背景颜色
$("li:first").css("background","green");
//02 获取整个页面中最后一个li标签,并设置背景颜色
$("li:last").css("background","green");
//03 获取整个页面中所有的li标签,除了最后一个
$("li:not(:last)").css("background","green");
//04 获取整个页面中所有的li标签,除了索引为2的之外
$("li:not(:eq(2))").css("background","green");
//05 获取索引值为偶数的li标签
$("li:even").css("background","green");
//06 获取索引值为奇数的li标签
$("li:odd").css("background","green");
//07 获取索引值为4的li标签
$("li:eq(4)").css("background","green");
//08 获取所有索引值大于4的li标签
$("li:gt(4)").css("background","green");
//09 获取所有索引值小于4的li标签
$("li:lt(4)").css("background","green");
});
</script>
4.4.2 内容筛选选择器
内容筛选选择器根据元素中的文字内容或所包含的子元素特征获取元素,其文字内容可以模糊或绝对匹配进行元素定位。
选择器语法 | 功能 |
---|---|
:contains(text) | 获取包含给定文本的元素 |
:parent | 获取含有子元素或者文本的元素 |
:empty | 获取所有不包含子元素或文本的空元素 |
:has(selector) | 获取含有选择器所匹配的元素 |
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.1.1.js"></script>
<style>
div{
width: 100px;
height: 40px;
}
</style>
</head>
<body>
<div>天王盖地虎</div>
<div><span>我是span</span></div>
<div>宝塔镇河妖</div>
<div></div>
<script>
$(function () {
//(1) 获取包含给定文本的元素
$("div:contains('天')").css("background","red");
$("div:contains('塔')").css("background","green");
//(2) 获取不包含子元素或文本的空元素
$("div:empty").css("background","red");
//(3) 获取含有子元素或者是文本的元素
$("div:parent").css("background","yellow");
//(4) 获取含有span子标签的div
$("div:has('span')").css("background","red");
})
</script>
</body>
</html>
4.4.3 属性筛选选择器
属性过滤选择器
根据元素的某个属性获取元素,在使用的时候我们可以匹配单个属性也可以进行多个属性的匹配。
选择器语法 | 功能 |
---|---|
[属性名] | 获取包含给定属性的元素 |
[属性名1][属性名2] | 获取满足多个条件的复合属性的元素 |
[属性名=’value’] | 获取包含给定属性且等于指定值的元素 |
[属性名!=’value’] | 获取包含给定属性且不等于指定值的元素 |
[属性名^=’value’] | 获取包含给定属性且以指定字符开头的元素 |
[属性名$=’value’] | 获取包含给定属性且以指定字符结尾的元素 |
[属性名*=’value’] | 获取包含给定属性且包含指定字符或者是子串的元素 |
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<a href="www.baidu.com">www.baidu.com</a><br>
<a href="www.jd.com">www.jd.com</a><br>
<a href="www.taobao.com">www.taobao.com</a><br>
<a href="www.520it.cn">www.520it.cn</a><br>
<a href="www.520it.com" title="demo">www.520it.com</a><br>
<a href="www.520it.com" title="Test">www.520it.com</a><br>
<a>我什么也不是</a>
</div>
<button>设置所有拥有href属性的a标签</button><br>
<button>设置harf属性值为www.baidu.com的a标签</button><br>
<button>设置harf属性值不为www.baidu.com的a标签</button><br>
<button>设置harf属性值以www开头的a标签</button><br>
<button>设置harf属性值以com结尾的a标签</button><br>
<button>设置harf属性值包含520的a标签</button><br>
<button>设置harf属性值中以www开头且title中包含demo的a标签</button><br>
<script src="js/jquery-3.2.1.js"></script>
<script>
$(function () {
$("button").eq(0).click(function () {
$("a[href]").css("background","green");
});
$("button").eq(1).click(function () {
$("a[href='www.baidu.com']").css("background","green");
});
$("button").eq(2).click(function () {
$("a[href!='www.baidu.com']").css("background","green");
});
$("button").eq(3).click(function () {
$("a[href^='www']").css("background","green");
});
$("button").eq(4).click(function () {
$("a[href$='com']").css("background","green");
});
$("button").eq(5).click(function () {
$("a[href*='520']").css("background","green");
});
$("button").eq(6).click(function () {
$("a[href^='www'][title='demo']").css("background","green");
});
});
</script>
</body>
</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选择器知识结构
- Posted by 博客园·文顶顶 ~ 文顶顶的个人博客_花田半亩
- 联系作者 简书·文顶顶 新浪微博·文顶顶
- 原创文章,版权声明:自由转载-非商用-非衍生-保持署名 | 文顶顶
jQuery系列 第四章 jQuery框架的选择器的更多相关文章
- jQuery系列 第七章 jQuery框架DOM操作
第七章 jQuery框架的选择器 jQuery框架继承和优化了JavaScript访问DOM对象的特性,我们使用jQuery框架提供的api可以更加方便的操作DOM对象. 7.1 创建DOM节点 使用 ...
- jQuery系列 第六章 jQuery框架事件处理
第六章 jQuery框架事件处理 JavaScript以事件驱动来实现页面的交互,其核心是以消息为基础,以事件来驱动.虽然利用传统的JavaScript事件处理方式也能够完成页面交互,但jQuery框 ...
- jQuery系列 第五章 jQuery框架动画特效
第五章 jQuery框架动画特效 5.1 jQuery动画特效说明 jQuery框架中为我们封装了众多的动画和特效方法,只需要调用对应的动画方法传递合适的参数,就能够方便的实现一些炫酷的效果,而且jQ ...
- jQuery系列 第三章 jQuery框架操作CSS
第三章 jQuery框架操作CSS 3.1 jQuery框架的CSS方法 jQuery框架提供了css方法,我们通过调用该方法传递对应的参数,可以方便的来批量设置标签的CSS样式. 使用JavaScr ...
- jquery系列教程7-自定义jquery插件全解:对象函数、全局函数、选择器
点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...
- 第四章 jQuery中的事件
1.加载DOM jQuery中,在$(document).ready()方法内注册的事件,只要DOM就绪就会被执行,此时可能元素的关联文件未下载完. jQuery中的 load()方法,会在元素的on ...
- JQuery系列(8) - JQuery插件开发
所谓“插件”,就是用户自己新增的jQuery实例对象的方法.由于该方法要被所有实例共享,所以只能定义在jQuery构造函数的原型对象(prototype)之上.对于用户来说,把一些常用的操作封装成插件 ...
- jQuery系列(四):jQuery的属性操作
jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如attr().removeAttr ...
- 第四章 jQuery节点操作
1.DOM操作分为三类:(1)DOM Core:任何一种支持DOM的编程语言都可以使用用它如:getElementById()(2)HTML-DOM:用于处理HTML文档,如document,form ...
随机推荐
- 【Python】 上下文管理器和contextlib
上下文管理器 一直对python中的上下文管理比较迷惑,趁着今天研究SQLAlchemy顺便看了一下,感觉稍微清楚了一点.http://www.cnblogs.com/chenny7/p/421344 ...
- 【Linux】 用户管理
Linux用户管理 ■ 查看用户整体情况 cat /etc/passwd可以查看用户的一些基本信息.用finger <user>似乎更加方便 查看某一个特定的用户的话就可以 grep &l ...
- OpenStreetMap、googleMap等经纬度和行列号之间相互转化
# OpenStreetMap经纬度转行列号 def deg2num(lat_deg, lon_deg, zoom): lat_rad = math.radians(lat_deg) n = 2.0 ...
- lvs(dr)+keepalived
系统:centos6.5mini 环境: 机器名 Ip地址 角色 Vip-web: 192.168.20.50 Vip-mysql: 192.168.20.60 lvs01 192.168.20.10 ...
- 爬虫(requests)
requests库包含两个对象:Response和Requests Response对象属性: r.status_code HTTP请求的返回状态,200表示成功 r.text ...
- hihocoder [Offer收割]编程练习赛52 D 部门聚会
看了题目的讨论才会做的 首先一点,算每条边(u, v)对于n*(n+1)/2种[l, r]组合的贡献 正着算不如反着算 哪些[l, r]的组合没有包含这条边(u, v)呢 这个很好算 只需要统计u这半 ...
- Leetcode 1——twosum
Given an array of integers, return indices of the two numbers such that they add up to a specific ta ...
- 第二次作业-关于Steam游戏平台的简单分析
1.1 Steam平台的简单介绍 你选择的产品是? 如题,这次的作业我选择了Steam作为分析的对象. 为什么选择该产品作为分析? 我选择数字游戏贩售平台STEAM作为分析对象的原因有以下几点: 1. ...
- 第二次作业:软件分析之Steam的前世今生
摘要:本次作业我将介绍一下Steam的相关内容,以及对Steam的相关调研测评,以及需求分析,最后就是对Steam的建议以及在中国的发展提出相应的建议 一.相关信息 Steam是一个整合游戏 ...
- 冲刺NO.8
Alpha冲刺第八天 站立式会议 项目进展 项目稳步进行,项目的基础部分如基本信息管理,信用信息管理等部分已相对比较完善. 问题困难 技术困难在短期内很难发生质的变化,而本项目由于选择了队员不太熟悉的 ...