一.jquery选择器基础
jquery选择器采用CSS和Xpath选择器语法规范,能够满足用户在DOM中快速匹配元素或元素集合.jquery选择器解决了两个难题:
第一,支持CSS1 CSS2 CSS3不同版本的所有选择器,而很多早期浏览器并没有完全支持CSS3版本的选择器.
第二,支持不同类型的主流浏览器,因此使用jquery选择文档对象时,就不用考虑浏览器的兼容性问题.
简单地说,jquery选择器具有以下优势:
简化代码书写
完善的支持,支持CSS不同版本选择器,同时也支持不同类型浏览器.
完善的处理机制.jquery选择器的核心依然依靠JavaScript的原生方法,如getElementById()和getElementsByTagName()等方法,但是它封装了原生方法的使用,简化了代码书写又避免了易错问题
jquery选择器返回值均是一个伪数组对象,如果没有匹配元素,则会返回一个空的伪数组对象.因此,判断一个jquery对象是否存在,不能使用如下语句:
if($("tr")){
//处理代码
}
而应该使用数组长度来判断,例如:
if($("tr").length>0){
//处理代码
}
jquery选择器分为基本选择器,结构选择器,过滤选择器,属性选择器以及表单选择器等
二.基本选择器
基本选择器主要包括5种类型:ID选择器,类型选择器,通配选择器,分组选择器,这与CSS基本选择器类型相一致
| 选择器 | 说明 | 返回值 |
|---|---|---|
| #id(ID选择器) | 根据给定的ID匹配一个元素,如果选择器中包含特殊字符,可以用双斜杠转义 | 包含单个元素的jquery对象 |
| element(类型选择器) | 根据指定的元素类型名称选择该类型所有元素 | 包含同类型元素的jquery对象 |
| .class(类选择器) | 根据指定的类名选择所有同类元素 | 包含同类元素的jquery对象 |
| *(通配选择器) | 在限定范围内选择所有元素 | 包含所有元素的jquery对象 |
| selector1,selector2,selectorN | 分别选择选择器组中每个选择器匹配的元素,然后合并返回所有元素 | 包含多组匹配元素的jquery对象 |
1.ID选择器
JavaScript提供了原生的方法getElementById(),实现在DOM中选择指定的ID值的元素
var element = document.getElementById("id")
该方法返回值为所匹配元素的对象,参数值为字符串型ID值,该值在HTML标签中通过id特性设置.
jquery简化了JavaScript原生方法的操作,通过一个简单的’#'标识前缀快速匹配指定ID的元素对象,用法如下:
jQuery("#id");
参数id为字符串,表示标签的id属性值,返回值为包含匹配id的元素的jquery对象
eg:使用jquery匹配文档中ID值为"div1"的元素,并设置其背景色为红色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.4.0.js"></script>
<script>
$(function () { //页面初始化函数
$('#div1').css("background","red") //匹配ID值为div1的元素并设置其背景色为红色
})
</script>
</head>
<body>
<div id="div1">测试盒子</div>
</body>
</html>
运行结果
2.类型选择器
JavaScript提供了一个原生方法getElementsByTagName(),用来在DOM中选择指定类型的元素
var elements = document.getElementsByTagName("tagName")
该方法返回值为所选类型元素的集合,参数值为字符串类型HTML标签名称.
jquery匹配指定标签的方法比较简单,直接在jquery()构造函数中指定标签名称即可,eg:
jQuery("element")
参数element为字符串,表示标签的名称,返回值为包含匹配标签的jquery对象.与ID选择器不同,类型选择器的字符串不需要附加标识前缀"#".
eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.4.0.js"></script>
<script>
$(function () { //页面初始化函数
$("div").css("color","red")
})
</script>
</head>
<body>
<div>[标题栏]</div>
<div>[内容框]</div>
<div>[页脚栏]</div>
</body>
</html>
运行结果
$(“div”)构造函数表示匹配文档中所有的
从执行效率的角度考虑,应多用JavaScript原生的getElementsByTagName()方法来选择同类型的元素.即使在复杂的jquery编程环境中,嵌入使用getElementsByTagName()方法也要比直接使用$()方法高效.
3.类型选择器
HTML5新增了getElementsByClassName()方法,使用该方法可以选择指定类名的元素,该方法可以接收一个字符串函数,包含一个或多个类名,类名通过空格分隔,不分先后顺序,返回带有指定类的所有元素的集合
eg:使用jquery构造器匹配文档中所有类名为red的标签,并定义它们的字体颜色为红色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.4.0.js"></script>
<script>
$(function () { //页面初始化函数
$(".red").css("color","red")
})
</script>
</head>
<body>
<div class="red">红盒子</div>
<div class="blue red">蓝盒子</div>
<div class="green red">绿盒子</div>
</body>
</html>
运行结果
4.通配选择器
在JavaScript中,若果把特殊字符串"*"传递给getElementsByTagName()方法,它将返回文档中所有元素的列表,元素排列的顺序就是它们在文档中的顺序.
var elements =document.getElementsByTagName("*")
jquery定义了通配选择器,该选择器能够匹配指定上下文中的所有元素
jQuery("*")
eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.4.0.js"></script>
<script>
$(function () { //页面初始化函数
$("body *").css("color","red")
})
</script>
</head>
<body>
<div>[标题栏]</div>
<div>[内容框]</div>
<div>[页脚栏]</div>
</body>
</html>
运行结果-
更高效的方法是把JavaScript原生方法和jquery迭代操作相结合,这样可以提高代码执行效率,也不会写很多代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.4.0.js"></script>
<script>
$(function () { //页面初始化函数
var all =document.getElementsByTagName("*")
$(all).css("color","red")
})
</script>
</head>
<body>
<div>[标题栏]</div>
<div>[内容框]</div>
<div>[页脚栏]</div>
</body>
</html>
运行结果
5.分组选择器
jquery支持CSS的分组选择器,通过这种方式可以扩大选择器的选择范围,同时增强jquery选择器引擎的应用能力.
选择多组元素可以通过逗号分隔符来分隔多个不同的选择器,这些选择器可以是任意类型的,也可以是复合选择器:
jQuery("selectorl,selector2,selectorN")
参数selectorl,selector2,selectorN为字符串,表示多个选择器,这些选择器没有数量限制,它们通过逗号进行分隔.当执行组选择器之后,返回的jquery对象包含每一个选择器匹配到的元素.jquery在执行组选择器匹配时,显示逐一匹配每个选择器,然后将匹配到的元素合并到一个jquery对象中返回.
三.结构选择器
结构选择器就是根据HTML文档结构中节点之间的包含或并列关系决定匹配元素的一种方法,jquery模仿CSS的关系过滤模式定义了4个关系选择器,同时还根据包含关系,自定义了4个子元素选择器:
1.层级选择器
层级选择器能够根据元素之间的结构关系进行匹配操作,主要包括包含选择器 子选择器 相邻选择器和兄弟选择器.
| 选择器 | 说明 |
|---|---|
| ancestor descendant (包含选择器) | 在给定的祖先元素下匹配所有的后代元素.ancestor表示任何有效的选择器,descendant表示用以匹配元素的选择器,并且它是第一个选择器的后代.例如,$(“form input”)可以匹配表单下所有的input元素 |
| parent>child (子选择器) | 在给定的父元素下匹配所有的子元素.parent表示任何有效的选择器.child表示用以匹配元素的选择器,并且它是第一个选择器的子元素.例如,$(“form>input”)可以匹配表单下所有的子集input |
| prev+next(相邻选择器) | 匹配所有紧接在prev元素后的next元素.prev表示任何有效的选择器,next表示一个有效选择器并且紧接着第一个选择器.例如,$(“label+input”)可以匹配所有跟在label后面的input选择器 |
| prev~siblings(兄弟选择器) | 匹配prev元素之后的所有siblings元素.prev表示任何有效的选择器,siblings表示一个选择器,并且它作为第一个选择器的同辈.例如,$(“form~input”)可以匹配到所有与表单同辈的input元素 |
2.子元素选择器
子元素选择器就是通过当前匹配元素选择该元素包含的特定子元素.子元素选择器主要包括4种类型.
| 选择器 | 说明 |
|---|---|
| :nth-child | 匹配其父元素下的第N个子或奇偶元素 |
| :first-child | 匹配第一个子元素,:first选择器只匹配一个元素,而:first-child选择符将为每个父元素匹配一个子元素 |
| :last-child | 匹配最后一个子元素,:last选择器只匹配一个元素,而:last-child选择符将为每个父元素匹配一个子元素 |
| :only-child | 如果某个元素是父元素中唯一的子元素,那将会被匹配,如果父元素中含有其他元素,那将不会被匹配. |
四.过滤选择器
过滤选择器主要通过特定的过滤表达式来筛选特殊需求的DOM元素,过滤选择器的语法形式与CSS的伪类选择器的语法格式相同,即以冒号作为前缀标识符.根据需求不同,过滤选择器又可以分为定位过滤器 内容过滤器和可见过滤器.
1.定位过滤器
定位过滤器主要是根据编号和排位筛选特定位置上的元素,或者过滤掉特定元素.
| 选择器 | 说明 |
|---|---|
| :first | 匹配找到的第一个元素,例如,$(“tr:first”)表示匹配表格的第一行 |
| :last | 匹配找到的最后一个元素,例如,$(“tr:last”)表示匹配表格的第一行 |
| :not | 去掉所有与给定选择器匹配的元素. |
| :even | 匹配所有索引值为偶数的元素,从0开始计数 |
| :old | 匹配所有索引值为奇数的元素,从0开始计数 |
| :eq | 匹配一个给定索引值的元素,从0开始计数. |
| :gt | 匹配所有大禹给定索引值的元素.从0开始计数 |
| :lt | 匹配所有小于给定索引值的元素 |
| :header | 匹配如h1 h2 h3之类的标题元素 |
| :animated | 匹配所有正在执行动画效果的元素 |
2.内容过滤器
内容过滤器主要根据匹配元素所包含的子元素或者文本内容进行过滤,主要包括4种过滤器
| 选择器 | 说明 |
|---|---|
| :contains | 匹配包含给定文本的元素.例如,$(“div:contains(‘图片’)”)匹配所有包含"图片"的div元素 |
| :empty | 匹配所有不包含子元素或者文本的空元素 |
| :has | 匹配含有选择器所匹配的元素的元素.例如,$(“div:has§”)匹配所有包含p元素的div元素 |
| :parent | 匹配含有子元素或者文本的元素 |
3.可见过滤器
可见过滤器就是根据元素的可见或者隐藏来进行匹配的
:hidden 匹配所有不可见元素,或者type为hidden的元素
:visible 匹配所有的可见元素
五.属性选择器
属性选择器主要根据元素的属性及其属性值作为过滤的条件,来匹配对应的DOM元素.属性选择器都是以中括号作为起止分界符,如[attribute],与伪类选择器特征都比较明显.jquery定义了7类属性选择器
$("[attribute|=‘value’]")
选择指定属性值等于给定字符串或改字符串为前缀（该字符串后跟一个连字符“-”）的元素。
attribute: 一个属性名
value: 一个属性值
$(function(){
$('a[hreflang|="en"]').css("border","2px solid red");
//查找hreflang属性值是英语的所有链接。
});
$("[attribute*=‘value’]")
选择指定属性具有包含一个给定的子字符串的元素。（选择给定的属性是以包含某些值的元素）
attribute: 一个属性名
value: 一个属性值，可以是一个不带引号的一个单词，或一个带引号的字符串。
$(function(){
$('input[name*="man"]').css("border","2px solid red");
//查找所有 input 的 name 属性中带有 'man' 的元素，并添加边框
});
$("[attribute~=‘value’]")
选着指定属性用空格分隔的值中包含一个给定的元素。
attribute: 一个属性名
value: 一个属性值，可以是一个不带引号的一个单词，或一个带引号的字符串。
$(function(){
$('input[name~="man"]').css("border","2px solid red");
//查找所有属性中含有 'man' 这个单词的文本框，并且修改其文本值。
})
(
"
[
a
t
t
r
i
b
u
t
e
("[attribute
("[attribute=‘value’]")
选择指定属性是以给定元素结尾的元素。这个元素比较是区分大小写的。
attribute: 一个属性名
value: 一个属性值，可以是一个不带引号的一个单词，或一个带引号的字符串。
$(function(){
$('input[name$="letter"]').css("border","2px solid red");
//查找所有的属性名称以"letter"的结束，并把他们的文字输入。
})
$("[attribute=‘value’]")
选择指定属性是给定值的元素。
attribute: 一个属性名。
value: 一个属性值，可以是一个不带引号的一个单词，或一个带引号的字符串。
$(function(){
$('input[value="Hot Fuzz"]').next().text("Hot Fuzz");
//查找input 中 value 值等于 Hot Fuzz 的将其后面的元素添加文本。
})
$("[attribute!=‘value’]")
选择指定属性不等于这个值的元素
attribute:一个属性名
value: 一个属性值，可以是一个不带引号的一个单词，或一个带引号的字符串。
$(function(){
$('input[name!="newsletter"]').next().append("<b>；not newsletter</b>")
//查找input 中name 不等于 newletter 的下一个元素追加 文本。
注：主要含有这个字符串就行。
})
$("[attribute^=‘value’]")
选择指定属性就是以给定字符串开始的元素。
attribute:一个属性名
value: 一个属性值，可以是一个不带引号的一个单词，或一个带引号的字符串。
$(function(){
$('input[name^="news"]').val("news here!");
//查找input 中 name 中含有new 这个字符串的 添加value 值。
})
$("[attribute]")
选择所有具有指定属性的元素，该属性可以是任何值。
attribute: 一个属性名。
$(function(){
$('div[id]').css("color","red")
//给绑定id属性的div的文本颜色变成红色。
})
$("[attributeFilter1][attributeFilter2]attributeFilter3")
选择匹配所有指定的属性筛选器的元素
attributeFilter1: 一个属性过滤器
attributeFilter2：另一个属性过滤器，用于进一步减少被选择的元素。
attributeFilterN： 根据需要有更多的属性过滤器。
$(function(){
$('input[id][name$="man"]').val('only this one')
//查找那些有id属性，并且name 属性以man结尾的输入框，并设置值。
})
六.表单选择器
表单是页面中使用频率较高的元素之一,为了方便用户灵活操作表单,jquery专门定义了表单选择器,使用表单选择器可以方便地获取表单中某类表单域对象,
1.基本表达选择器
jquery定义了一组伪类选择器,利用它们可以获取页面中的表单类型元素
:input 匹配所有input,textarea,select和button元素
:text 匹配所有单行文本框
:password 匹配所有密码框
:radio 匹配所有单选按钮
:CheckBox 匹配所有复选框
:submit 匹配所有提交按钮
:image 匹配所有图像域
:reset 匹配所有重置按钮
:button 匹配所有按钮
:file 匹配所有文件域
:hidden 匹配所有不可见元素,或者type为hidden的元素
2.高级表单选择器
jquery根据表单域特有的特性定义了4个表单属性选择器,这些选择器与基本表单选择器不同,它们可以选择任何类型的表单域,因为它主要根据表单属性来进行选择.
:enabled 匹配所有可用元素
:disabled 匹配所有不可用元素
:checked 匹配所有被选中的元素(复选框 表单按钮等,不包括select中的option)
七.jquery选择器优化
正确使用选择器引擎对于页面性能起了至关重要的作用,使用合适的选择器表达式可以提高性能,增强语义并简化逻辑,在传统用法中,最常用的简单选择器包括ID选择器,类(class)选择器和类型选择器,其中速度最快的是ID选择器,这主要是因为JavaScript内置函数getElementById().其次是类型选择器,因为使用JavaScript内置函数getElementByTag(),速度最慢的是class选择器,其需要通过解析HTML文档树,并且需要在浏览器内核外递归,这种递归遍历是无法被优化的.
class选择器在文档中使用频率靠前, 这无疑会增加系统的负担,因为每一次使用class选择器,整个文档就会被重新解析一遍,并遍历每个节点,因此,应该注意几个问题:
第一,多用ID选择器
多用ID选择器,这是一个明智的选择,即使不存在ID选择器,也可以从父级元素中添加一个选择器,这样就会缩短节点访问的路程
第二,少直接使用class选择器
可以使用复合选择器,例如,使用tag.class代替.class.虽然文档的标签是有限的,但是类可以拓展标签的语义,在大部分情况下,使用同一个类的标签也是相同的.
当然,应该摒除表达式中的冗余部分,对于不必要的复合表达式就应该进行简化,例如,#id2 #id1 或者tag#id1 表达式,直接使用#id1即可,因为ID选择器是唯一的,执行速度快.使用复合选择器,反而会增加负担.
第三,多用父子关系,少用嵌套关系
例如,使用parent>child 代替 parent child.以为">“是child选择器.只从子节点里匹配,不递归,而”"是后代选择器,递归匹配所有子节点及子节点的子节点,即后代节点
第四,缓存jquery对象.
如果选出结果不发生变化的话,可以缓存jquery对象,这样就可以提高系统性功能.
889
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
