一、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 #000;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="image/1419573178hE6KzQ.jpg" width="93" height="99" 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>
总结：（一定要看实列，才会有收获哦）