关于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选择器

并集选择器、交集选择器、全局选择器

层次选择器

后代选择器、子选择器

相邻选择器、同辈选择器

属性选择器

属性名过滤、属性值过滤、多属性条件过滤

基本过滤选择器

可见性过滤选择器

巴特西

关于jQuery里面的选择器

最新文章

热门文章