版权声明：本文为博主原创文章，未经博主允许不得转载——Cc。 https://blog.csdn.net/mufeng633/article/details/72833652
1）基本选择器：
//语法 类型 返回值
$("#ID"); //id选择器 单个元素
$("标签"); //标签选择器 元素集合
$(".类型"); //类选择器 元素集合
$("*"); //全局选择器 集合元素2）层次选择器：
//语法 类型 返回值
后代选择器 $("#menu span"); //选取#span下所有的<span>元素 元素集合
//例如:$("menuspan"); 选取#menu下的所有元素<span>
子选择器 $("parent>child"); //选取parent元素下的child子元素集合 元素集合
// 例如：$("menu>span"); 选取#menu下的子元素<span>
相邻元素选择器 $("prev+next"); //选取紧邻prev元素之后的next元素 元素集合
// 例如:$("h2+dl"); 选取紧邻<h2>元素之后的同辈元素<dl> 不包括<h2>
同辈元素选择器 $("prev~sibings"); //选取prev元素之后的所有siblings（同辈元素） 元素集合
//例如:$("h2~dl"); 选取<h2>元素之后所有的同辈元素<dl>。 不包括<h2>
3）属性选择器
//语法 描述 返回值
[attribute] //选取包含指定属性的元素 元素集合
$("[href]")选取含有 href 属性的元素
[attribute==value] //选取等于指定属性是某个特定值的元素 元素集合
$("[href=‘#’]")选取含有href属性值为 “#” 的元素
[attribute!=value] //选取不等于指定属性是某个待定值的元素 元素集合
$("[href！=‘#’]")选取href属性值不为 “#” 的元素
[attribute^=value] //选取指定属性是以某些特定值开始的元素 元素集合
$("[href^=‘en’]")选取href属性值以 "en" 开头的元素
[attribute$=value] //选取指定属性是以某些特定值结尾的元素 元素集合
$("[href$=‘jpg’]")选取href属性值以 "jpg" 开头的元素
[attribute*=value] //选取指定属性值包含某些值的元素 元素集合
$("[href*=‘txt’]")选取href属性值中含有 "txt" 的元素4）基本过滤选择器
##
:first 选取 第一个 元素 $("li:first")选取所有<li>元素中第一个<li>元素
:last 选取 最后一个 元素 $("li:last")选取所有<li>元素中最后一个<li>元素
:not(selector) 选取去除所有与给定选择器匹配的元素 $("li:not(three)")选取class不是three的元素
:even 选取索引是 偶数 的所有元素（index从0开始） $("li:even")选取索引是 偶数 的所有<li>元素
:odd 选取索引是 奇数 的所有元素（index从0开始） $("li:even")选取索引是 奇数 的所有<li>元素
:eq(index) 选取索引 等于 index 的元素（index从0开始） $("li:eq(1)")选取索引 等于 1 的<li>元素
:gt(index) 选取索引 大于 index 的元素（index从0开始） $("li:gt(1)")选取索引 大于 1 的<li>元素
（注：大于1，不包括1）
:lt(index) 选取索引 小于 index 的元素（index从0开始） $("li:lt(1)")选取索引 小于 1 的<li>元素
（注：小于1，不包括1）
:header 选取所有 标题 元素 $(":header")选取网页中所有标题元素
:focus 选取当前获取焦点的元素 $(":focus")选取当前获取焦点的元素
:animated 选取所有动画元素 $(":ainmated")选取当前所有动画的元素
//只有， :first :last 返回的是单个元素，其他过滤器，返回的都是集合元素5）可见性过滤选择器
//语法 描述 返回值 例子
:visible 选取所有可见的元素 集合元素 $(":visible")选取所有可见的元素
:hidden 选取所有隐藏的元素 集合元素 $(":hidden")选取所有隐藏的元素
代码篇
层次选择器–代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>(老师) 层次选择器</title>
<script src="../../jQuery数据库/jquery-1.12.4.min.js"></script>
<script>
$(function(){
//后代选择器
$("body p").css("color","red");
//子选择器
$("body>p").css("color","blue");
//相邻选择器(.pp后面同辈元素) 不包括pp
$(".p1+ul").css("background-color","pink");
//pp后面的所有同辈元素 不包括pp
$(".p1~p").css("font-size","25px");
});
</script>
</head>
<body>
<p class="pp">这是第一个P标签</p>
<ul>
<li>这是第一个li标签</li>
<p>这是第一个li标签中的P标签</p>
</ul>
<p>这是第二个P标签</p>
<ul>
<li>这是第二个li标签</li>
<p>这是第二个li标签中的P标签</p>
</ul>
<p>这是最后一个P标签</p>
</body>
</html>属性选择器 –代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>（老师）属性选择器</title>
<script src="../../jQuery数据库/jquery-1.12.4.min.js"></script>
<script>
$(function(){
//包含 id 属性的 div
// $("div[id]").css("background-color","blue");
//包含 class 属性 并且值 等于 one 的div
// $("div[class=one]").css("background-color","pink");
//包含 class 属性 并且值 不等于 one 的div
// $("div[class!=one]").css("background-color","pink");
//包含 class 属性 并且值 以 on 开头的div
// $("div[class^=on]").css("background-color","gray");
//包含 class 属性 并且值 以 n 结尾的div
$("div[class$=n]").css("background-color","gray");
//包含 class 属性 并且值含有 o 的div
//$("div[title*=h]").css("background-color","gray");
});
</script>
<style type="text/css">
.one{
width: 300px;
height: 300px;
border: solid gray;
float: left;
margin-left:50px ;
}
.on{
width: 200px;
height: 200px;
border: solid red;
}
</style>
</head>
<body>
<div class="one" id="one">
第一个div
<div class="on">
第一个div里面的div
</div>
</div>
<div class="one" id="two">
第二个div
<div class="on" alt="yy">
第二个div里面的div
</div>
</div>
<div class="one" id="three">
第三个div
<div class="on" title="hr">
第三个div里面的div
</div>
</div>
</body>
</html>过滤选择器–代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>过滤选择器</title>
</head>
<script src="../../jQuery数据库/jquery-3.2.1.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function(){
//标题
$(".contain :header ").css("background-color","blue");
//第一个标记
$(".contain li:first").css("color","gray");
//最后一个标记
$(".contain li:last").css("color","gray");
//选取 class 不是one的元素
// $(".contain li:not(.one)").css("font-size","20px");
//奇数 :odd
$(".contain li:odd").css("background-color","#cccccc");
//偶数 :even
$(".contain li:even").css("background-color","#f0fff0");
//给前两个li 设置字体颜色 lt(X) X小于本身, 注意 下标从 0开始 选取索引index 小于2的<li>元素,但是不包括2
$(".contain li:lt(2)").css("color","blue");
//给大于两个 li 字体颜色 :gt(2) index>2 X不包含本身 选取索引index 大于2的<li>元素,但是不包括2
$(".contain li:gt(2)").css("color","red");
//给等于 li 字体设置样式 :eq(X) 包含本身 选取索引index 等于2的<li>元素，包括本身
$(".contain li:eq(2)").css("font-family","宋体");
});
</script>
<style type="text/css">
ul{
padding: 0px;
padding-left: 5px;
}
*{
padding: 0px;
margin: 0px auto;
}
li{
list-style: none;
line-height: 40px;
border-bottom: 1px dotted #ccc;
}
.contain{
border: 1px solid blue;
height: 300px;
width: 300px;
font-size: 12px;
}
</style>
<body>
<div class="contain">
<h2>祝福冬奥</h2>
<ul>
<li class="one">贝克汉姆：衷心希望北京能够申办成功</li>
<li>姚明：北京审冬奥是个非常棒的机会！加油</li>
<li>张虹：北京办冬奥，大家的热情定超乎想象</li>
<li>肖恩怀特：我爱北京，支持北京申办冬奥会</li>
<li>赵宏博：北京申办冬奥会再合适不过了！</li>
<li>你喜欢哪些冬季运动项目？（点击进入调查页）</li>
</ul>
</div>
</body>
</html>可见性选择器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../../jQuery数据库/jquery-3.2.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
//鼠标单击 显示
$("#show").click(function(){
//选取所有隐藏的元素
$("p:hidden").show()
});
//鼠标点击 隐藏
$("#hide").click(function(){
//选取所有可见的元素
$("p:visible").hide();
})
});
</script>
<style type="text/css">
#txt-show{
display: none;
}
</style>
</head>
<body>
<p id="txt-hiden">点击隐藏</p>
<p id="txt-show">点击显示</p>
<input type="button" value="点击,显示"id="show"/>
<input type="button" value="点击,隐藏"id="hide"/>
</body>
</html>