文章目录
- 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>
