jQuery选择器
文章目录
一、定义
jQuery选择器是jQuery库中用于查找和操作HTML元素的功能。它们与CSS选择器非常相似，可以根据元素的标签名、类名、ID等属性进行选择。
了解JQuery：jQuery是由美国人John Resig于2006年创建的一个开源项目，如今已发展成为集JavaScript、CSS、DOM、Ajax于一体的强大框架体系，它的主旨是：以更少的代码，实现更多的功能（Write less，do more）。
2.0版本以后，就不考虑兼容浏览器的问题
二、jQuery的基本功能
1.访问和操作DOM元素
2.控制页面样式
3.对页面事件的处理
4.与Ajax技术的完美结合
5.大量插件在页面中的运用
三、jQuery选择器
在页面中为某个元素添加样式或事件时，必须先准确地找到该元素——在jQuery库中，可以通过选择器实现这一重要的核心功能。
分类：基本选择器、属性选择器、层次选择器、过滤选择器、表单选择器、内容选择器
1. 基本选择器
- 选择所有元素：
$("*")
选择文档中的所有元素。
- 按标签名选择：
$("p")
选择所有
标签。
- 按类名选择：
$(".classname")
选择所有带有指定类名的元素。
- 按ID选择：
$("#idname")
选择具有特定ID的元素。
2. 属性选择器
- 按属性值选择：
$("input[name='username']")
选择所有name属性等于"username"的<input>元素。
- 选择包含某个属性的元素：
$("a[target]")
选择所有包含target属性的<a>标签。
- 按属性值开始选择：
$("input[name^='user']")
选择所有name属性以"user"开头的<input>元素。
- 按属性值结束选择：
$("input[name$='name']")
选择所有name属性以"name"结尾的<input>元素。
- 按属性值包含选择：
$("input[name*='ser']")
选择所有name属性包含"ser"的``元素。
3. 层次选择器
-
选择直接子元素：
$("ul > li")选择所有作为
<ul>标签直接子元素的<li>标签。 -
选择后代元素：
$("div p")选择所有
<div>标签的后代<p>标签，不限层级。 -
选择相邻元素：
$("h1 + p")选择紧接在
<h1>标签后的第一个<p>标签。 -
选择同级元素：
$("h1 ~ p")选择与
<h1>标签在同一级别的所有<p>标签。
4.过滤选择器
-
选择第一个元素：
$("p:first")选择第一个
<p>元素。 -
选择最后一个元素：
$("p:last")选择最后一个
<p>元素。 -
选择奇数位置的元素：
$("tr:odd")选择所有奇数位置的行（索引从0开始，即第2、4、6…行）。
-
选择偶数位置的元素：
$("tr:even")选择所有偶数位置的行（即第1、3、5…行）。
-
选择具有特定索引的元素：
$("li:eq(2)")选择第三个
<li>元素（索引从0开始）。 -
选择包含特定文本的元素：
$("p:contains('Hello')")选择包含文本
"Hello"的<p>标签。
5. 表单选择器
-
选择所有文本框：
$(":text")选择所有类型为
text的<input>元素。 -
选择所有复选框：
$(":checkbox")选择所有类型为
checkbox的<input>元素。 -
选择所有被选中的元素：
$(":checked")选择所有已被选中的
<input>元素，如复选框或单选框。 -
选择所有禁用的元素：
$(":disabled")选择所有已禁用的表单元素。
6. 内容选择器
-
选择包含特定子元素的元素：
$("div:has(p)")选择包含
<p>子元素的所有<div>元素。 -
选择空元素：
$("p:empty")选择所有不包含子元素或文本的
<p>标签。
这些选择器可以组合使用，帮助你更高效地操作DOM元素。例如，选择所有<div>标签中的第一个<p>元素可以这样写：
$("div p:first")
通过这些jQuery选择器，你可以灵活地操作网页中的元素，实现丰富的动态效果。
四、选择器综合案例
点击简化将部分学科进行隐藏，简化变为更多，右上角图标改变（需自己导入图片）
直接上源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择</title>
<style type="text/css">
body{font-size:13px}
#all{border:solid 1px #666;width:320px;overflow:hidden}
#all #head{background-color:#eee;padding:8px;height:18px;cursor:hand}
#all #head h3{padding:0px;margin:0px;float:left}
#all #head span{float:right;margin-top:3px}
#all #content{padding:8px}
#all #content ul {list-style-type:none;margin:0px;padding:0px}
#all #content ul li{ float:left;width:95px;height:23px;line-height:23px}
#all #btn{float:right;padding-top:5px;padding-bottom:5px}
</style>
<script type="text/javascript" src="js/jquery-1.8.2.js" ></script>
<script type="text/javascript">
$(function(){
$("img").click(function(){
if($(this).attr("src") == "img/up.bmp"){
$(this).attr("src","img/down.bmp");
$("#content").css("display","none");
}else if($(this).attr("src") == "img/down.bmp"){
$(this).attr("src","img/up.bmp");
$("#content").css("display","block");
}
})
$("#btn>a").click(function(){
if($(this).text() == "简化"){
$(this).text("更多");
$("ul>li:gt(5):not(:last)").css("display","none");
}else if($(this).text() == "更多"){
$(this).text("简化");
$("ul>li:gt(5):not(:last)").css("display","block");
}
})
})
</script>
</head>
<body>
<div id="all">
<div id="head">
<h3>学科分类</h3>
<span><img src="img/up.bmp"/></span>
</div>
<div id="content">
<ul>
<li>
<a href="#">JavaEE</a><i> (1110) </i></li>
<li>
<a href="#">PHP</a><i> (230) </i></li>
<li>
<a href="#">BIG</a><i> (1430) </i></li>
<li>
<a href="#">Android</a><i> (1560) </i></li>
<li>
<a href="#">IOS</a><i> (870) </i></li>
<li>
<a href="#">H5</a><i> (1460) </i></li>
<li>
<a href="#">VR</a><i> (1450) </i></li>
<li>
<a href="#">小程序</a><i> (1780) </i></li>
<li>
<a href="#">演讲</a><i> (930) </i></li>
<li>
<a href="#">PPT</a><i> (3450) </i></li>
<li>
<a href="#">Word</a><i> (980) </i></li>
<li>
<a href="#">其他</a><i> (3230) </i></li>
</ul>
<div id="btn">
<a href="#">简化</a>
</div>
</div>
</div>
</body>
</html>
理解：
图标改变功能：
通过标签选择器$(“img”)选择图片再if判断通过attr()方法设置属性
简化功能：
通过标签选择器先选择按钮再选择其子类超链接：KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲btn>a")，再通过if判断…(this).text(“更多”);
通过标签选择器选择ul的子代li再通过过滤选择器选择大于第5个但不是最后一个的属性：$(“ul>li:gt(5):not(:last)”)，再通过css(“display”,“none”)方法将其隐藏。
效果截图：
简化后：
