1、基本选择器（重要）
$('标签名') 标签选择器
$('#id名') id选择器
$('.class名') 类选择器演示：
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div,span{
width: 180px;
height: 180px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
</style>
</head>
<body style="zoom: 1;">
<input type="button" value="改变 id 为 one 的元素的背景色为 红色" id="b1">
<input type="button" value="改变元素名为 <div> 的所有元素的背景色为 红色" id="b2">
<input type="button" value="改变 class 为 mini 的所有元素的背景色为 红色" id="b3">
<input type="button" value="改变所有的<span>元素和 id 为 two 的元素的背景色为红色" id="b4">
<div id="one">id为one</div>
<div id="two" class="mini">
id为two，class是 mini
</div>
<div class="one">
class是 one
</div>
<div class="one">
class是 one
</div>
<span class="one">class为one的span元素</span>
<span class="mini">class为mini的span元素</span>
</body>
</html>jQuery代码：
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
// 1. 获取所有的 input 标签
var inputs = $("input");
// 2. id 选择器 (id为one的变成红色)
inputs.eq(0).click(function () {
$("#one").css("backgroundColor", "red");
});
// 3. div 标签选择器 (div标签变成红色)
inputs.eq(1).click(function () {
$("div").css("backgroundColor", "red");
});
// 4. class 类选择器 (类名为mini的变成红色)
inputs.eq(2).click(function () {
$(".mini").css("backgroundColor", "red");
});
// 5. span, #two 并集选择器
inputs.eq(3).click(function () {
$("span, #two").css("backgroundColor", "red");
});
});
</script>
2、层次选择器
$('A B') 获得A元素内部的所有子元素B
$('A > B') 获得A元素内部的第一层所有子元素B
$('A + B') 获得A元素同级下一个B元素
$('A ~ B') 获得A元素后面的所有同级B元素演示：
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div,span{
width: 180px;
height: 180px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div .mini{
width: 50px;
height: 50px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div .mini01{
width: 50px;
height: 50px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
</style>
</head>
<body style="zoom: 1;">
<input type="button" value="改变 <body> 内所有 <div> 的背景色为红色" id="b1">
<input type="button" value="改变 <body> 内第一个子 <div> 的背景色为红色" id="b2">
<input type="button" value="改变 id 为 one 的下一个 <div> 的背景色为红色" id="b3">
<input type="button" value="改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 红色" id="b4">
<h1>有一种奇迹叫坚持</h1>
<h2>自信源于努力</h2>
<div id="one">id为one</div>
<div id="two" class="mini">
id为two，class是 mini
<div class="mini">class是 mini</div>
</div>
<div class="one">
class是 one
<div class="mini">class是 mini</div>
<div class="mini">class是 mini</div>
</div>
<div class="one">
class是 one
<div class="mini01">class是 mini01</div>
<div class="mini">class是 mini</div>
</div>
<span class="spanone">span</span>
</body>
</html>jQuery代码：
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
var inputs = $("input");
// 改变 <body> 内所有 <div> 的背景色为红色 (后代选择器)
inputs.eq(0).click(function () {
$("body div").css("backgroundColor", "red");
});
// 改变 <body> 内第一个子 <div> 的背景色为红色 (直接后代)
inputs.eq(1).click(function () {
$("body > div").css("backgroundColor", "red");
});
// 改变 id 为 one 的下一个 <div> 的背景色为红色 (直接兄弟选择器)
inputs.eq(2).click(function () {
$("#one + div").css("backgroundColor", "red");
});
// 改变 id 为 two 的元素后面的所有兄弟 <div> 的元素背景色为红色 (所有兄弟选择器)
inputs.eq(3).click(function () {
$("#two ~ div").css("backgroundColor", "red");
});
});
</script>3、属性选择器
$('A[属性名]') 获得有属性名的A元素
$('A[属性名=值]') 获得属性名 等于 值的A元素
$('A[属性名!=值]') 获得属性名 不等于 值的A元素
$('A[属性名^=值]') 获得属性名 以值开头 的A元素
$('A[属性名$=值]') 获得属性名 以值结尾 的A元素
$('A[属性名*=值]') 获得属性名 含有值 的A元素
$('A[属性名!=值][属性名^=值]') 复合属性选择器，多个属性同时过滤演示：
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div,span{
width: 180px;
height: 180px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div .mini{
width: 50px;
height: 50px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div .mini01{
width: 50px;
height: 50px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
</style>
</head>
<body style="zoom: 1;">
<input type="button" value=" 含有属性title 的div元素背景色为红色" id="b1">
<input type="button" value=" 属性title值等于test的div元素背景色为红色" id="b2">
<input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色" id="b3">
<input type="button" value=" 属性title值 以te开始 的div元素背景色为红色" id="b4">
<input type="button" value=" 属性title值 以est结束 的div元素背景色为红色" id="b5">
<input type="button" value="属性title值 含有es的div元素背景色为红色" id="b6">
<input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景色为红色" id="b7">
<div id="one">id为one的div</div>
<div id="two" class="mini" title="test">
id为two，class是 mini的div，title="test"
<div class="mini">class是 mini</div>
</div>
<div class="visible">
class是 one
<div class="mini">class是 mini</div>
<div class="mini">class是 mini</div>
</div>
<div class="one" title="test02" id="">
class是 one，title="test02"
<div class="mini01">class是 mini01</div>
<div class="mini" style="margin-top:0px;">class是 mini</div>
</div>
<div class="one" title="stte">123title='stte'</div>
</body>
</html>jQuery代码：
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
var inputs = $("input");
// 含有属性 title 的 div 元素背景色为红色
inputs.eq(0).click(function () {
$("div[title]").css("backgroundColor", "red");
});
// 属性 title 值等于 test 的 div 元素背景色为红色
inputs.eq(1).click(function () {
$("div[title=test]").css("backgroundColor", "red");
});
// 属性 title 值不等于 test 的 div 元素 (没有属性title的也将被选中) 背景色为红色
inputs.eq(2).click(function () {
$("div[title!=test]").css("backgroundColor", "red");
});
// 属性 title 值以 te 开始的 div 元素背景色为红色
inputs.eq(3).click(function () {
$("div[title^=te]").css("backgroundColor", "red");
});
// 属性 title 值以 est 结尾的 div 元素背景色为红色
inputs.eq(4).click(function () {
$("div[title$=est]").css("backgroundColor", "red");
});
// 属性 title 值含有 es 的 div 元素背景色为红色
inputs.eq(5).click(function () {
$("div[title*=es]").css("backgroundColor", "red");
});
// 选取有属性 id 的 div 元素, 然后在结果中选取属性 title 值含有 es 的 div 元素背景色为红色
inputs.eq(6).click(function () {
$("div[id][title*=es]").css("backgroundColor", "red");
});
});
</script>
4、基本过滤选择器
$('A:first') 过滤出第一个
$('A:last') 过滤出最后一个
$('A:not(选择器)') 排除指定的元素
$('A:eq()') 按索引值过滤
$('A:gt()') 过滤大于指定索引值 从0开始 greater then
$('A:lt()') 过滤小于指定索引值 less then
$('A:even') 过滤索引值为偶数 从0开始
$('A:odd') 过滤索引值为奇数
$(':header') 过滤所有的标题标签 h1-h6
$(':animated') 过滤正在执行动画的标签对象演示：
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div,span{
width: 180px;
height: 180px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
</style>
</head>
<body style="zoom: 1;">
<input type="button" value=" 改变第一个 div 元素的背景色为 红色" id="b1">
<input type="button" value=" 改变最后一个 div 元素的背景色为 红色" id="b2">
<input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色" id="b3">
<input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色" id="b4">
<input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色" id="b5">
<input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色" id="b6">
<input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色" id="b7">
<input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色" id="b8">
<input type="button" value=" 改变所有的标题元素的背景色为 红色" id="b9">
<input type="button" value=" 改变当前正在执行动画的所有元素的背景色为 红色" id="b10">
<h1>有一种奇迹叫坚持</h1>
<h2>自信源于努力</h2>
<h3>自信源于努力</h3>
<div id="one">id为one</div>
<div id="two" class="mini">
id为two class是 mini
</div>
<div class="one">
class是 one
</div>
<div class="one">
class是 one
</div>
<div id="mover" style="display: block; overflow: hidden; height: 179.995px; padding-top: 0px;
margin-top: 19.9995px; padding-bottom: 0px; margin-bottom: 19.9995px;">动画</div>
</body>
</html>JQuery代码：
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
var inputs = $("input");
// 改变第一个 div 元素的背景色为红色
inputs.eq(0).click(function () {
$("div:first").css("backgroundColor", "red");
});
// 改变最后一个 div 元素的背景色为红色
inputs.eq(1).click(function () {
$("div:last").css("backgroundColor", "red");
});
// 改变 class 不为 one 的所有 div 元素的背景色为红色
inputs.eq(2).click(function () {
$("div:not(.one)").css("backgroundColor", "red");
});
// 改变索引值为偶数的 div 元素的背景色为红色
inputs.eq(3).click(function () {
$("div:even").css("backgroundColor", "red");
});
// 改变索引值为奇数 的 div 元素的背景色为红色
inputs.eq(4).click(function () {
$("div:odd").css("backgroundColor", "red");
});
// 改变索引值大于3的 div 元素背景色为红色
inputs.eq(5).click(function () {
$("div:gt(3)").css("backgroundColor", "red");
});
// 改变索引值等于3的 div 元素的背景色为红色
inputs.eq(6).click(function () {
$("div:eq(3)").css("backgroundColor", "red");
});
// 改变索引值小于3的 div 元素背景色为红色
inputs.eq(7).click(function () {
$("div:lt(3)").css("backgroundColor", "red");
});
// 改变所有的标题元素的背景为红色
inputs.eq(8).click(function () {
$(":header").css("backgroundColor", "red");
});
// 改变当前正在执行动画的所有元素的背景色为红色
inputs.eq(9).click(function () {
$(":animated").css("backgroundColor", "red");
});
// 使用id为 mover 的 div 运行
function move() {
$("#mover").slideToggle("slow", function() {
// 回调函数
move();
})
}
move();
});
</script>5、表单属性选 择器
$(':enabled') 选择可用的input标签
$(':disabled') 选择不可用的input标签
$(':checked') 选择选中的radio或者checkbox
$(':selected') 选择选中的<select>演示：
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" id="b1" value="获取可用的<input type='text'/>标签的长度">
<input type="button" id="b2" value="获取不可用的<input type='text'/>标签的长度">
<input type="button" id="b3" value="获取选中的input标签的长度">
<input type="button" id="b4" value="获取选中的option标签的长度">
<br>
<br>
<input type="text" value="不可用" disabled="disabled">
<input type="text" value="可用">
<input type="text" value="不可用" disabled="disabled">
<input type="text" value="不可用" disabled="disabled">
<input type="text" value="可用">
<br>
<br>
<input type="radio" name="sex" checked="checked">男
<input type="radio" name="sex">女
<input type="radio" name="sex">嘿嘿嘿
<br>
<br>
<input type="checkbox">篮球
<input type="checkbox" checked="checked">足球
<input type="checkbox" checked="checked">羽毛球
<br>
<br>
<select name="">
<option value="">上海市</option>
<option value="" selected="selected">北京市</option>
<option value="">广州市</option>
</select>
<select name="">
<option value="">深圳市</option>
<option value="" selected="selected">杭州市</option>
<option value="">郑州市</option>
</select>
</body>
</html>jQuery代码：
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
var inputs = $("input");
// 获取可用的 <input type="text" /> 标签的长度
inputs.eq(0).click(function () {
var length = $("input[type=text]:enabled").length;
alert("length = " + length);
});
// 获取不可用的 <input type="text" /> 标签的长度
inputs.eq(1).click(function () {
var length = $("input[type=text]:disabled").length;
alert("length = " + length);
});
// 获取选中的 input 标签的长度 (radio, checkbox)
inputs.eq(2).click(function () {
var length = $("input:checked").length;
alert("length = " + length);
});
// 获取选中的 option 标签的长度
inputs.eq(3).click(function () {
var length = $("option:selected").length;
alert("length = " + length);
});
});
</script>6、筛选选择器
jq对象.parent() 当前元素的亲生父级元素
jq对象.parents() 当前元素的所有父级元素
jq对象.siblings() 最牛的筛选选择器，可以选出除了自己以外的所有同级元素
jq对象.children() 当前元素的第一层子元素
jq对象.find() 当前元素的指定子级元素演示：
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
list-style: none;
}
div{
width: 200px;
height: 200px;
border: 2px solid #000;
}
.box1 div{
margin: 100px 0 0 100px;
}
li{
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
border-radius: 50%;
border: 1px solid #000;
float: left;
margin: 300px 10px;
}
</style>
</head>
<body>
<input type="button" id="b1" value="选择box3的亲生父亲变色">
<input type="button" id="b2" value="选择box3的所有父亲变色">
<input type="button" id="b3" value="选择lis的所有兄弟变色">
<input type="button" id="b4" value="选择box1的亲生儿子变色">
<input type="button" id="b5" value="选择box1里面的box3变色">
<div class="box1">爷爷
<div class="box2">父亲
<div class="box3">孙子</div>
</div>
</div>
<ul>
<li>1</li>
<li class="lis">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>jQuery代码：
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
var inputs = $("input");
// 选择 box3 的亲生父亲变色
inputs.eq(0).click(function () {
$(".box3").parent().css("backgroundColor", "red");
});
// 选择 box3 的所有父亲变色
inputs.eq(1).click(function () {
$(".box3").parents().css("backgroundColor", "red");
});
// 选择 lis 的所有兄弟变色
inputs.eq(2).click(function () {
$(".lis").siblings().css("backgroundColor", "red");
});
// 选择 box1 的亲生儿子变色
inputs.eq(3).click(function () {
$(".box1").children().css("backgroundColor", "red");
});
// 选择 box1 里面的 box3 变色
inputs.eq(4).click(function () {
$(".box1").find(".box3").css("backgroundColor", "red");
});
});
</script>
