JQuery专题(二)-JQuery选择器

文章目录

1.概述
2.基本选择器：第1大类
3.层次选择器：第2大类
4.过滤选择器：第3大类
- 4.1.基本过滤选择器
- 4.2.内容过滤选择器
- 4.3.可见性过滤选择器
- 4.4.属性过滤选择器

1.概述

我们学习jQuery，主要是学习jQuery中的方法，来简化js开发。因此，学习jQuery主要是学习jQuery对象的各种方法，但前提是要先获取jQuery对象，即操作必先选中（获取），一切从选择器开始！
如何选中元素？

语法：$(selector)

补充：context可选的，如果指定，就会在指定的元素下查找。默认值：document.

选择器是jQuery的根基，在jQuery中，对事件处理、遍历DOM、Ajax等各种操作都依赖于选择器。
选择器的语法可参考官方手册的选择器章节，如下图所示

jQuery内部提供了三大类共9种选择器

基本选择器
层级选择器
过滤选择器
基本过滤选择器
内容过滤选择器
可见性过滤选择器
属性过滤选择器
子元素过滤选择器
表单对象过滤选择器
表单对象属性过滤选择器

过滤选择器一般用于对其他选择器的补充（缩小选择范围）

2.基本选择器：第1大类

基本选择器，是jQuery所有选择器的基础，通过元素的id属性、class属性、标签名称进行选择。

基本选择器的语法和用法：

#id（id选择器）根据id属性查找一个元素例如：$(“#mydiv”)
element（标签选择器）根据元素标签名称查找所有元素，例如： $(“div”);
.class（类选择器）根据class属性查找元素，例如：$(".myclass");原理是遍历所有的DOM节点，然后逐个判断是否使用了
指定的类选择器，可以想象，如果页面上节点很多的情况下，效率很低，因此类选择器通常和标签选择器同时使用，
例如：$("div.myclass")，意思是获取所有使用了.myclass类的div元素，这样，jQuery会先找页面中的所有div，然后再遍历判断，大大减少了循环次数，从而提高了查询效率！
selector1,selector2,selectorN（组合选择，多选，混用选择器）将每一个选择器匹配到的元素合并后一起返回
例如：$("#myinput,div,p.pClass"); 意思是获取页面中ID为myinput的元素和所有的div元素和使用了.pClass的p元素
此种方式获取的是所有匹配元素的并集
* 匹配所有元素例如 $(“*”); 意义不大！

【示例】

<div>DIVAAAA</div>
<div class="demo">DIVBBBB</div>
<div>DIVCCCC</div>
<div>DIVDDDD</div>
<div class="demo">DIVEEEE</div>
<div id="foo">DIVFFFF</div>
<p>PAAAA</p>
<p class="demo">PBBBB</p>
<p>PCCCC</p>

需求：
获取页面中ID为foo的元素的内容
通过each()遍历所有div，在每个div元素前加入"hello"
通过size() 或 length 打印页面中 class属性为 demo 的元素数量
获取class属性为demo的div的个数
相关函数参考文档：一定要自己点进去看看，里面有例子

脚本代码：

<script type="text/javascript">jQuery(function($) {//获取页面中ID为foo的元素的内容//alert( $("#foo").html() );//通过each()遍历所有div，在每个div元素前 加入"hello"// each中的函数中的i表示div的索引，o表示当前div对象：DOM对象！DOM对象！DOM对象！/* $("div").each(function(i, o) {// this === o  表示当前DOM对象 var newHTML = "hello" + $(this).html();$(this).html(newHTML);}); *///$("div").prepend("hello");//$("div").append("world");//通过size() 或 length 打印页面中 class属性为 demo 的元素数量alert( $(".demo").size() );alert( $(".demo").length );//获取class属性为demo的div的个数alert( $("div.demo").length );});
</script>

交集和并集选择器：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-3.6.0.js"></script><script type="text/javascript">$(function () {// 小标为0的li 双击事件$("li:eq(0)").dblclick(function () {//并集选择//$("#xx,.ff,li:eq(5)").css("color","green").css("font-family","楷体");//交集选择器$("li.ff").css("color","green").css("font-family","楷体");});});</script></head>
<body>
<ul><li>貂蝉</li><li id="xx">西施</li><li >王昭君</li><li>杨玉环</li><li class="ff">凤姐</li><li>芙蓉姐</li><p class="ff">哈哈</p>
</ul>
</body>
</html>

3.层次选择器：第2大类

层次选择器是根据DOM元素的层级关系进行选择。
参考文档：

DOM元素层级的位置关系：

ancestor 祖先元素（父亲、爷爷、。。。。）
descendant 后代元素（儿子、孙子。。。。）
parent 父元素
child 子元素
prev 上一个元素
next 下一个元素
siblings 兄弟（平级的）元素

注意：每个单词都代表任意选择器！

例如，有如下html代码：

<form id="myform">
<label>Name:</label>
<div></div><input name="name" /><fieldset><label>Newsletter:</label><input name="newsletter" /></fieldset>
</form>
<input name="none" />

则：

ancestor空格descendant $("form input")   获取form元素中的input元素（儿子、孙子。。。）。
parent > child               $("form>input")    获取form元素中的input元素（只有儿子）。
prev + next                    $("label+input") 获取匹配的每个label元素后面紧跟着的一个兄弟元素input，如果后面一个元素不是input,则不会继续查询同级的下一个input 。
prev ~ siblings             $("form~input")   获取所有form元素后面的所有兄弟(平级)元素。

【需求练习】：

将class属性值为demo的元素下所有a元素字体变为红色
将class属性值为demo的元素下直接a元素字体变为蓝色
将div元素后所有兄弟a元素，字体变为绿色，大小变为30px
将div元素后紧跟着的那个兄弟a元素，背景色变为灰色的

【示例代码】

<div class="demo"><a>div link</a><p>info <a>p link</a></p>
</div>
<a>link</a>
<p class="demo"><a>p link</a>
</p>
<a>link</a>

使用jQuery改变元素的css样式，参考如下文档

脚本代码：

<script type="text/javascript">// jQuery核心函数1：$(callback);jQuery(function($) {//将class属性值为demo的元素下所有a元素字体变为红色$(".demo a").css("color", "red");//将class属性值为demo的元素下直接a元素字体变为蓝色$(".demo > a").css("color", "blue");//将div元素后所有兄弟a元素，字体变为绿色，大小变为30px$("div~a").css({color: "green",//"font-size": 30, // 默认单位为px// 样式属性可以使用驼峰名法来书写：连字符去掉，然后连字符后的每个单词的首字母大写fontSize: "50px"});//将div元素后紧跟着的那个兄弟a元素，背景色变为灰色的。$("div+a").css("backgroundColor", "gray");// 获取指定的样式属性//alert(  $("div+a").css("backgroundColor")  );});
</script>

【相关函数的使用】
css()函数设置css样式的两种用法：

设置一个样式用：css("属性名", "属性值")
设置多个样式用：css({"属性名1": "属性值1","属性名1": "属性值1"…})

只能获取匹配元素中的第一个元素的样式值
css()函数获取css样式：

css(“属性名”)

4.过滤选择器：第3大类

作用：过滤选择器通常是对基本选择器和层次选择器的结果进行过滤（缩小选择范围）。
也可以单独使用（不推荐，对整个document文档进行过滤）。
过滤选择器基本语法：通过":条件" 进行过滤，例如：

("div:first") 匹配第一个div元素
("div:last") 匹配最后一个div元素

解释如下：
$(“div”)是获取所有div，加上过滤条件":first"就表示第一个div，加上":last"就表示最后一个div

按照不同的过滤规则，过滤选择器被分为七类

基本过滤选择器
内容过滤选择器
可见性过滤选择器
属性过滤选择器
子元素过滤选择器
表单对象过滤选择器
表单对象属性过滤选择器

4.1.基本过滤选择器

基本选择器可以通过元素的索引、位置(特殊索引)和特殊性来过滤，因此可以分为三类：

根据索引(从0开始)来缩小范围

:eq(index)       选取指定索引的元素，例如$("tr:eq(0)")：第一个tr,$("tr:eq(-1)")最后一个tr!
:gt(index)      选取索引大于指定索引的元素，例如$("tr:gt(1)")：索引大于1的tr，即第2个tr之后的tr
:lt(index)      选取索引小于指定索引的元素，例如$("tr:lt(3)")：索引小于3的tr，即前3个tr(0,1,2)

根据位置(特殊索引)来缩小范围

:first           第一个位置，例如$("tr:first")：第一个tr,相当于eq(0)
:last               最后一个位置，例如$("tr:last")：最后一个tr 相当于eq(-1)  -1表示从最后一个开始算
:odd                索引为奇数位置，例如$("tr:odd")：奇数索引行(1,3,5,7,9...)  实际匹配偶数行
:even               索引为偶数位置，例如$("tr:even")：偶数索引行(0,2,4,6,8,10...) 实际匹配奇数行

根据元素的特殊性来缩小范围

:not(selector)   去除与给定选择器匹配的元素，例如$("tr:not(:first)")，所有tr（第一个除外）
:header             匹配所有的标题元素，即h1到h6,实际上能够匹配h7,h8....hn
:focus              当前获取焦点的元素

4.2.内容过滤选择器

该选择器是根据元素中是否包含指定的内容来过滤的。
参考API：

:contains(text)  过滤含有给定文本的元素，例如$("div:contains(Jack)")，$("p:contains(hello)")
:empty          过滤不包含子元素或文本的空元素，例如$("td:empty")，$("div:empty")<td></td><div></div>
:has(selector)  过滤含有指定选择器匹配的元素的元素，例如$("div:has(p)")，$("td:has(div.myClass)")
:parent         过滤含有子元素或文本的非空元素，和:empty相反

【示例练习】

<div>今天是个晴天</div>
<div>明天要去学 java</div>
<div><span>JavaScript</span> 是网页开发中脚本技术</div>
<div>Ajax 是异步的 JavaScript和 XML</div>
<div><p>jQuery</p>是 JavaScript一个 轻量级框架</div>
<div></div>

【需求】

设置含有文本内容"java" 的 div 的字体颜色为红色
设置没有子元素的div元素 文本内容 "这是一个空DIV"
设置包含p元素 的 div 背景色为黄色
设置所有含有子元素或文本的span元素的字体为蓝色

【脚本代码】

<script type="text/javascript">
jQuery(function($) {//设置含有文本内容"java" 的 div 的字体颜色为红色$("div:contains(java)").css("color", "red");//设置没有子元素的div元素 文本内容 "这是一个空DIV"$("div:empty").html("这是一个空DIV");//设置包含p元素 的 div 背景色为黄色$("div:has(p)").css("background-color", "yellow");//设置所有含有子元素或文本的span元素的字体为蓝色//$("span:parent")$("span:not(:empty)").css({color: "blue","border": "1px solid red",display: "block", // 让span变成块元素width: 100,height: 30});
});
</script>

注意：内容过滤选择器的原理先找到所有的元素，然后再判断元素中是否包含指定的内容，
因此在效率上偏低！因此通常和基本的选择器一起使用来提高查询效率

4.3.可见性过滤选择器

该选择器是根据元素的可见性(显示或隐藏)来过滤的，其中隐藏有两种形式
一种不占位置(完全隐藏)，另一种虽然也是隐藏的，但元素的位置还占着，没有完全隐藏
参考API：

:hidden      完全隐藏的元素
:visible        看得见的和不完全隐藏的元素，和:hidden相反

【预备知识】

<div>AAAAAAAAAAAAAAAAAAAA</div>
<div style="display:none;">BBBBBBBBBBBBBBBBBBBB</div>
<div>CCCCCCCCCCCCCCCCCCCC</div>
<div style="visibility:hidden;">DDDDDDDDDDDDDDDDDDDD</div>
<div>EEEEEEEEEEEEEEEEEEEE</div>

显示效果如下：

【示例练习】

<style>table,td,th{border:1px solid black;border-collapse:collapse;}</style>
<table width="600px"><tr><th>商品编号</th><th>商品名称</th><th>售价</th><th>数量</th></tr><tr style="display:none;"><td>001</td><td>冰箱</td><td>3000</td><td>100</td></tr><tr><td>002</td><td>洗衣机</td><td>2000</td><td>50</td></tr><tr style="visibility:hidden;"><td>003</td><td>热水器</td><td>1500</td><td>20</td></tr><tr><td>004</td><td>手机</td><td>2188</td><td>200</td></tr>
</table>
<input type="hidden" />

【需求】

设置table所有"可见的行"背景为灰色，并显示不完全隐藏的行
设置table所有"完全隐藏的行"字体为红色，并显示隐藏的行
设置隐藏域的值为hello，并输出隐藏域中的值

【脚本代码】

<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
<script type="text/javascript">/*页面加载完成事件：相当于jQuery(document).ready(fn);****/jQuery(function($) {//设置table所有"可见的行"背景为灰色，并显示不完全隐藏的行$("table tr:visible") // 匹配看得见的和不完全因此的元素.css("background", "gray")// .show() // 将元素的display属性修改为默认值.css("visibility", "visible");//设置table所有"完全隐藏的行"字体为红色，并显示完全隐藏的行$("table>tbody>tr:hidden").css("color", "red").show();//设置隐藏域的值为hello，并输出隐藏域中的值// 隐藏域不可以通过设置display属性让其显示，隐藏域永远是完全隐藏的！alert(  $("input:hidden").val("hello").show().val()  );});
</script>
</head>
<body>
<style>table,td,th{border:1px solid black;border-collapse:collapse;}</style>
<table width="600px"><tr><th>商品编号</th><th>商品名称</th><th>售价</th><th>数量</th></tr><tr style="display:none;"><td>001</td><td>冰箱</td><td>3000</td><td>100</td></tr><tr><td>002</td><td>洗衣机</td><td>2000</td><td>50</td></tr><tr style="visibility:hidden;"><td>003</td><td>热水器</td><td>1500</td><td>20</td></tr><tr><td>004</td><td>手机</td><td>2188</td><td>200</td></tr>
</table>
<input type="hidden" />
<!-- <div>11</div>
<span style="border:1px solid red;width:200px;height:100px;display:inline-block;">1</span>
<span style="border:1px solid red;width:200px;height:100px;display:inline-block;">2</span> -->
</body>
</html>

4.4.属性过滤选择器

该选择器是通过元素的属性来过滤选的。
参考API：

[attribute]              过滤拥有指定属性的元素，例如：$("input[name]")  拥有name属性的input元素<input name />
[attribute=value]      过滤指定属性的值为value的元素，例如：$("input[name=username]")  name属性为username的input元素<input name="username" />
[attribute!=value]     过滤指定属性的值不为value的元素，例如：$("input[value!=张三]")
[attribute^=value]     过滤指定属性的值以value开始的元素，例如：$("input[name^=myClass]")  myClass   myClassasdfsadfs 匹配不到a1myClass123
[attribute$=value]     过滤指定属性的值以value结束的元素，例如：$("input[name$=myClass]")  myClass   hhmyClass  匹配不到a myClassb
[attribute*=value]     过滤指定属性的值包含value的元素，例如：$("input[class*=myClass]")  myClass   aaaamyClass111 amyClass    myC5lassb
[attrSel1] [attrSel2]...    过滤指定的多个属性同时满足条件的元素，以上属性过滤的任意组合，例如：$("input[name=username][value!=张三]...")

注意：如果属性的值中包含特殊字符，使用单引号将值引起来，如果没有特殊字符，也可以使用单引(保险写法！)

【示例练习】

<div>AAAA</div>
<div id="mydiv" class="demo1 a b">BBBB</div>
<div class="demo2">CCCC</div>
<div id="mydiv2">DDDD</div>
<div class="divclass">EEEE</div>
<div id="xxx" class="demo3">FFFF</div>
<p class="p-demo">PPPPPP</p>
<input type="text" name="username"/>

【需求】

设置所有含有id属性的div字体颜色为红色
class属性中含有demo的元素背景为金色
对所有既有id又有class属性的div元素，添加一个点击事件，打印div标签中内容
给name属性是username的input输入框中设置一个值"zhangsan"

【脚本代码】

<script type="text/javascript">jQuery(function($) {//设置所有含有id属性的div字体颜色为红色$("div[id]").css("color", "red");//设置所有class属性中含有demo的元素背景为金色$("[class*=demo]").css("background-color", "blue");//对所有既有id又有class属性的div元素，添加一个点击事件，打印div标签中内容$("div[id][class]").click(function() {alert( $(this).html() );});//给name属性是username的input输入框中设置一个值"zhangsan"$("input[name=username]").val("zhangsan");// 属性中如果包含空格等特殊符号，需要使用单引号 $("div[class='demo1 a b']").css("fontSize", 100);});
</script>