目录
1、选择器简介
在JQuery中，遍历DOM、事件处理、CSS控制、动画设计和Ajax操作都依赖于选择器。JQuery选择器的核心依然依赖于JavaScript的原生方法，如getElementById()等。
JQuery选择器分为基本选择器、结构选择器、过滤选择器、属性选择器、和表单选择器。
2、基本选择器
基本选择器主要有5种类型：
（1）ID选择器
JQuery通过“#”标识前缀匹配指定ID的元素对象，来取代JavaScript的getElementById()
jQuery("#id");应用举例：
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
</style>
<link type="text/css" rel="stylesheet" href="style.css">
<script src="jquery/jquery-3.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(
function(){ //界面初始化函数
$("#div1").css("color","red");
}
)
</script>
</head>
<body>
<div id="div1">测试jquery</div>
</body> 
对应JavaScript实现方式如下：
<script type="text/javascript">
window.οnlοad=function()
{
var odiv1=document.getElementById("div1");
odiv1.style.color="red";
};
</script>（2）类型选择器
JQuery匹配类型元素的集合使用JQuery（）构造函数完成，对应JavaScript的getElementsByTagName()
jQuery("element");应用举例：
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
</style>
<link type="text/css" rel="stylesheet" href="style.css">
<script src="jquery/jquery-3.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(
function(){ //界面初始化函数
$("div").css("color","red");
}
)
</script>
</head>
<body>
<div >菜单栏</div>
<div >内容栏</div>
<div >页脚栏</div>
</body> 
对应JavaScript实现方式如下：
<script type="text/javascript">
window.οnlοad=function()
{
var odivs=document.getElementsByTagName("div");
for(var i=0;i<odivs.length;i++)
{
odivs[i].style.color="red";
}
};
</script>（3）类选择器
JQuery使用前缀符号“.”表示该选择器为类选择器，返回为包含匹配className的元素的jQuery对象。对应JavaScript的getElementsByClassName("red")。
jQuery(".classname");应用举例：
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
</style>
<link type="text/css" rel="stylesheet" href="style.css">
<script src="jquery/jquery-3.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(
function(){ //界面初始化函数
$(".red").css("color","red");
}
)
</script>
</head>
<body>
<div class="red">菜单栏</div>
<div class="green">工具栏</div>
<div class="blue red">内容栏</div>
<div class="green red">页脚栏</div>
</body> 
（4）通配选择器
JQuery的通配选择器的语法如下，对应JavaScript的getElementsByTagName("*")。
jQuery("*");应用举例：匹配<body>标签下的所有标签。
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
</style>
<link type="text/css" rel="stylesheet" href="style.css">
<script src="jquery/jquery-3.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(
function(){ //界面初始化函数
$("*").css("color","red");
}
)
</script>
</head>
<body>
<div >菜单栏</div>
<div >内容栏</div>
<div >页脚栏</div>
</body> 
（5）分组选择器
JQuery通过“，”分割多个不同的选择器，扩大选择器的范围，基本语法如下：
jQuery("selector1,selector2,selector3");<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
</style>
<link type="text/css" rel="stylesheet" href="style.css">
<script src="jquery/jquery-3.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(
function(){ //界面初始化函数
$("#div1,.red").css("color","red");
}
)
</script>
</head>
<body>
<div id="div1">菜单栏</div>
<div class="red" >内容栏</div>
<div >页脚栏</div>
</body> 
3、结构选择器
结构选择器是根据HTML文档结构中节点之间的包含和并列关系决定匹配元素的一种方法。主要有层次选择器和子元素选择器。
（1）层次选择器
应用举例：包含选择器
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
</style>
<link type="text/css" rel="stylesheet" href="style.css">
<script src="jquery/jquery-3.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(
function(){ //界面初始化函数
$("form input").css({"border":"solid 1px red","background":"blue"});
}
)
</script>
</head>
<body>
<form>
<fieldset>
<label>
包含的子文本框<input/>
</label>
<fieldset>
<label>
包含的孙文本框<input/>
</label>
</fieldset>
</fieldset>
</form>
<label>
非包含的文本框<input/>
</label>
</body> 
（2）子元素选择器
子元素选择器通过当前匹配元素选择该元素包含的特点子元素。主要包括四种类型：
应用举例：
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
</style>
<link type="text/css" rel="stylesheet" href="style.css">
<script src="jquery/jquery-3.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(
function(){ //界面初始化函数
$("li:first-child").css("color","red");//匹配第一个子元素
$("li:last-child").css("color","blue");//匹配最后一个子元素
$("li:nth-child(1)").css("background","green");//匹配第一个元素
$("li:nth-child(2n)").css("background","orange");//匹配第2个及其后面2n个元素
}
)
</script>
</head>
<body>
<li>子元素选择器测试一</li>
<li>子元素选择器测试二</li>
<li>子元素选择器测试三</li>
<li>子元素选择器测试四</li>
</body> 
4、过滤选择器
过滤选择器主要通过特定的过滤表达式来筛选特殊需求的DOM元素。
（1）定位过滤器
定位过滤选择器主要根据编号和排位筛选特定位置上的元素，或者过滤掉特定元素。
应用举例：
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
</style>
<link type="text/css" rel="stylesheet" href="style.css">
<script src="jquery/jquery-3.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(
function(){ //界面初始化函数
$("li:first").css("color","red");//匹配第一个子元素
$("li:last").css("color","blue");//匹配最后一个子元素
}
)
</script>
</head>
<body>
<li>子元素选择器测试一</li>
<li>子元素选择器测试二</li>
<li>子元素选择器测试三</li>
<li>子元素选择器测试四</li>
</body> 
（2）内容过滤器
内容过滤器主要根据匹配元素所包含的子元素或者文本内容进行过滤。
应用举例：
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
</style>
<link type="text/css" rel="stylesheet" href="style.css">
<script src="jquery/jquery-3.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(
function(){ //界面始化函数
$("li:empty").text("空内容");//匹配空li元素
$("div u1:parent").css("color","blue");//匹配div包含ul元素中包含子元素或文本的元素
$("h1:contains('内容过滤')").css("color","green");//标题元素包含“内容过滤”文本内容的元素
$("p:has(span)").css("color","red");//包含span元素的p元素
}
)
</script>
</head>
<body>
<h1>内容过滤器测试</h1>
<p>段落文本1</p>
<p><span>段落文本2</span></p>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body> 
（3）可见过滤器
根据元素的可见或隐藏进行匹配。
5、属性选择器
属性选择器主要根据元素的属性及其属性值作为过滤条件，来匹配DOM元素。
6、表单选择器
（1）基本表单选择器
（2）高级表单选择器
