你的位置:首页 > Java教程

[Java教程]关于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 "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 "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 "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 "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 "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选择器
并集选择器、交集选择器、全局选择器
层次选择器
后代选择器、子选择器
相邻选择器、同辈选择器
属性选择器
属性名过滤、属性值过滤、多属性条件过滤
基本过滤选择器
可见性过滤选择器