正文
关于jQuery里面的选择器
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
一、JQuery选择器的概述
选择器是JQuery的根基，在JQuery中，对事件处理、遍历DOM和Ajax操作都依赖于选择器。
二、选择器的优势
1、简洁的语法
2、支持CSS1.0到CSS3.0选择器
3、完善的处理机制
三、基本选择器
名称 | 语法构成 | 描述 | 实例 |
标签选择器 | element | 根据给定的标签名匹配元素 | $("h2" )选取所有h2元素 |
类选择器 | .class | 根据给定的class匹配元素 | $(" .title")选取所有class为title的元素 |
| ID选择器 | #id | 根据给定的id匹配元素 | $(" #title")选取id为title的元素 |
并集选择器 | selector1,selector2,...,selectorN | 将每一个选择器匹配的元素合并后一起返回 | $("div,p,.title" )选取所有div、p和拥有class为title的元素 |
交集选择器 | element.class或element#id | 匹配指定class或id的某元素或元素集合 | $("h2.title")选取所有拥有class为title的h2元素 |
全局选择器 | * | 匹配所有元素 | $("*" )选取所有元素 |
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
#box { background-color:#FFF; border:2px solid #;padding:5px; }
</style>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
$(document).ready(function () {
$("h2").click(function () { //获取<h2>元素为其添加click事件函数 标签选择器
$("h3").css("background-color", "#09F"); //css 是属性 属性值
$(".title").css("background", "pink"); //类选择器
$("#box").css("background", "purple"); //ID选择器
$("h2,dt,title").css("background","purple"); //给多个属性设置值 并集选择
$("h2.title").css("font-size", "50px"); //先获取class的title 给h2元素设置字体的大小 交集选择
$("*").css("color","red"); //改变所有的字体颜色 全局选择器
});
});
</script>
</head><body>
<div id="box"> id为box的div
<h2 class="title">class为title的h2</h2>
<h3 >class为title的h3</h3>
<dl>
<dt>
<img src="data:image/1419573178hE6KzQ.jpg" width="" height="" alt="公主" title="当图片不显示的时候就显示alt属性的值"/></dt>
<dd class="title">公主</dd> </dl>
</div>
</body>
</html>
四、层次选择器
名称 | 语法构成 | 描述 | 示例 |
后代选择器 | ancestor descendant | 选取ancestor元素里的所有descendant（后代）元素 | $("#menu span" )选取#menu下的<span>元素 |
子选择器 | parent>child | 选取parent元素下的child（子）元素 | $(" #menu>span" )选取#menu的子元素<span> |
相邻元素选择器 | prev+next | 选取紧邻prev元素之后的next元素 | $(" h2+dl " )选取紧邻<h2>元素之后的同辈元素<dl> |
同辈元素选择器 | prev~sibings | 选取prev元素之后的所有siblings元素 | $(" h2~dl " )选取<h2>元素之后所有的同辈元素<dl> |
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("h2").click(function () {
//$("#all span").css("background","pink"); //后代选择器 #all ---->后代是span
//$("#all>span").css("background", "pink"); //子选择器 就是在#all的标签而不是包裹在别人下的======子元素
// $("dt+dd").css("background","pink"); //相邻选择器 就是必须相邻的有顺序的
//$("span~dl").css("background","pink"); //同辈选择器 span在之后的dl
});
});
</script>
</head>
<body>
<div id="all"> <h2>全部旅游产品分类</h2>
<span>content</span>
<dl>
<dt>北京周边旅游<span>特价</span></dt>
<dd> <a href="#">按天数</a> <a href="#">海边旅游</a> <a href="#">草原</a> </dd>
</dl>
<dl>
<dt>景点门票</dt>
<dd><a href="#">名胜</a> <a href="#">暑假</a> <a href="#">乐园</a></dd>
<dd><a href="#">山水</a> <a href="#">双休</a></dd>
</dl>
<span>更多分类</span>
</div>
</body>
</html>
五、属性选择器
名称 | 语法构成 | 描述 | 示例 |
属性选择器 | [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的元素 | |
[selector] [selector2] [selectorN] | 选取满足多个条件的复合属性的元素 | $("li[id][title=新闻要点]" )选取含有id属性和title属性为新闻要点的<li>元素 |
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("h2").click(function () {
//$("h2[title]").css("background", "pink"); //选取包含属性的元素 h2标签里面 title的属性
//$("[class=odds]").css("background", "pink"); //改变 class属性的值 odds元素背景颜色
$("[id!=box]").css("color","pink");
// $("[title^=h]").css("background", "pink"); //改变 title属性的值中以h 开头的元素背景颜色
//$("[title$=jp]").css("background","pink"); //改变 title属性的值中以 jp结尾的元素的背景颜色
//$("[title*=s]").css("background","pink"); //改变 title属性的值中含有 s元素的背景颜色
//$("li[class][title*=y]").css("background","pink"); //改变包含 class属性且title属性的值含有 y的<li>元素的背景颜色
});
});
</script>
</head>
<body>
<div id="box">
<h2 class="odds" title="cartoonlist">动画列表</h2>
<ul >
<li class="odds" title="kn_jp">名侦探柯南</li>
<li class="evens" title="hy_jp">火影忍者</li>
<li class="odds" title="ss_jp">死神</li>
</ul> </div>
</body>
</html>
六、基本过滤选择器可以选取第一个元素、最后一个元素、索引为偶数或奇数的元素
基本过滤选择器 | :first | 选取第一个元素 | $(" li:first" )选取所有<li>元素中的第一个<li>元素 |
:last | 选取最后一个元素 | $(" li:last" )选取所有<li>元素中的最后一个<li>元素 | |
:even | 选取索引是偶数的所有元素（index从0开始） | $(" li:even" )选取索引是偶数的所有<li>元素 | |
:odd | 选取索引是奇数的所有元素（index从0开始） | $(" li:odd" )选取索引是奇数的所有<li>元素 |
名称 | 语法构成 | 描述 | 示例 |
基本过滤选择器 | :not(selector) | 选取去除所有与给定选择器匹配的元素 | $(" li:not(.three)" )选取class不是three的元素 |
:header | 选取所有标题元素，如h1~h6 | $(":header" )选取网页中所有标题元素 | |
:focus | 选取当前获取焦点的元素 | $(":focus" )选取当前获取焦点的元素 |
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
$(document).ready(function () {
$("h2").click(function () {
// $("li:first").css("background", "#09F"); //改变第一个<li>(进行过滤的元素:)的背景颜色
//$("li:last").css("background", "pink"); //改变最后一个<li>(进行过滤的元素:)的背景颜色
//$("li:not(.three)").css("color","pink"); //改变在<li>里面除了three以外都改变字体颜色
//$("li:even").css("color", "pink"); //改变索引为偶数的<li>元素的字体颜色
//$("li:odd").css("color","#09F"); //改变索引为奇数的<li>元素的字体颜色
// $("li:eq(1)").css("background", "pink"); //改变索引值 等于1的<li>元素的颜色
//$("li:gt(1)").css("background", "pink"); //改变索引值 大于1的<li>元素的颜色
//$("li:lt(1)").css("background", "pink"); //改变索引值 小于1的<li>元素的颜色
//$(":header").css("color","pink"); //改变所有标题元素背景颜色如 h2 h3..... $(":focus").css("background","pink"); //改变当前获取焦点的元素背景 });
});
</script></head>
<body>
<h2> 网络小说</h2>
<ul>
<li>王妃不好当 </li>
<li>致命交易 </li>
<li class="three"> 非诚勿扰</li>
<li> 逆天之宠</li>
<li> 交错时光的恋爱</li>
<li> 张震鬼故事</li>
<li> 第一次亲密接触</li>
</ul>
</body>
</html>
七、可见性过滤选择器
名称 | 语法构成 | 描述 | 示例 |
可见性过滤选择器 | :visible | 选取所有可见的元素 | $(":visible" )选取所有可见的元素 |
:hidden | 选取所有隐藏的元素 | $(":hidden" ) 选取所有隐藏的元素 |
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="js/jquery-1.12.3.min.js"></script>
<style>
#txt_show {display:none;color:#00C }
#txt_show {display:block;color:#F30 }
</style>
<script>
$(document).ready(function () {
$("[name=show]").click(function () {
$("p:hidden").show(); //获取隐藏元素，使其显示 });
$("[name=hide]").click(function () {
$("p:visible").hide(); //获取显示元素，使其隐藏 }); });
</script>
</head>
<body>
<p id="txt_hide">点击按钮我会隐藏哦 </p>
<p id="txt_show">隐藏我会显示哦 </p>
<input name="show" type="button" value="点击显示文字"/>
<input name="hide" type="button" value="点击隐藏文字"/>
</body>
</html>
总结：（一定要看实列，才会有收获哦）
基本选择器
标签选择器、类选择器、ID选择器
并集选择器、交集选择器、全局选择器
层次选择器
后代选择器、子选择器
相邻选择器、同辈选择器
属性选择器
属性名过滤、属性值过滤、多属性条件过滤
基本过滤选择器
可见性过滤选择器
