关于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里面的选择器的更多相关文章

jQuery基础之选择器
摘自:http://www.cnblogs.com/webmoon/p/3169360.html jQuery基础之选择器选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Aja ...
jQuery 简单过滤选择器
<!DOCTYPE HTML> <html> <head> <title> 使用jQuery基本过滤选择器 </title> <scr ...
JQuery：JQuery语法、选择器、事件处理
JQuery语法: 通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions). 一.语法:jQuery 语法是通过选取 HTM ...
23、jQuery九类选择器/jQuery常用Method-API/jQuery常用Event-API
1)掌握jQuery九类选择器及应用 2)掌握jQuery常用Method-API 3)掌握jQuery常用Event-API 一)jQuery九类选择器[参见jQueryAPI.chm手册] 目 ...
jQuery基础知识--选择器与效果
$(this).hide()-----隐藏当前元素 $("p").hide()------隐藏所有段落 $(".test").hide()--隐藏所有class ...
jQuery的筛选选择器
基本筛选选择器很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素,为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素.筛选选择器很多都不是CSS的规范,而是jQu ...
JQuery总结：选择器归纳、DOM遍历和事件处理、DOM完全操作和动画（转）
JQuery总结:选择器归纳.DOM遍历和事件处理.DOM完全操作和动画转至元数据结尾我们后台可能用到的页面一般都是用jquery取值赋值的,发现一片不错的文章目录 JQuery总结一:选择器归 ...
jQuery中的选择器<思维导图>
选择器是jQuery的重要组成部分,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.如果能熟练地使用选择器,不仅能简化代码,而且可以达到事半功倍的效果. 下面是关于jQuery中 ...
jQuery中的选择器《思维导图》
学习jQuery的课程中,我对jQuery中的选择器有了更深的认识,它的简洁写法,完美的兼容性,可靠的处理机制,都让我们省了很多事, 下面是我在学习过程中对jQuery选择器写的思维导图(全屏查看:& ...
jQuery简单过滤选择器
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <!--jQuery选择器详解根据所获 ...

随机推荐

js算法之最常用的排序
引入大学学习计算机语言的那几年,从c语言,到c++,再到数据结构JAVA..让我印象最深刻的还是最开始老师讲冒泡算法的时候,直到现在大四快毕业了我才渐渐通窍了.刚学前端的时候以为前端就是做出好看很炫 ...
AJAX大文件切割上传以及带进度条。
分块传输的原理就是利用HTML5新增的文件slice截取函数. 代码如下: html: <input id="f" type="file" name=&q ...
关于OnEraseBkgnd和OnPaint的转载
问题是这样产生的.在OnEraseBkGnd中,如果你不调用原来缺省的OnEraseBkGnd只是重画背景则不会有闪烁.而在OnPaint里面, 由于它隐含的调用了OnEraseBkGnd,而你又没有 ...
12步创建高性能Web APP
现在,Web App 日益重视用户的交互体验,了解性能优化的方式则可以有效提高用户体验.阅读和实践下面的性能优化技巧,可以帮你改善应用的流畅度.渲染时间和其他方面的性能表现. 概述对 Web App ...
Android属性动画之ObjectAnimator控制
Android为我们提供了大量的动画效果,如何通过这些动画来达到我们需要的效果呢?今天就为大家总结一下ObjectAnimator动画控制事件. 该项目的的布局文件只有两个控件:ImageView和B ...
mac＋apache+php+phpmyadmin集成php开发环境配置
刚开始才接触php才发现macos还是比较强大了,macbook不仅是时尚达品还很实用哦. --------------他山之石-------------------------- http://da ...
php基础教程-必备基础知识
PHP 脚本在服务器上执行. 您应当具备的基础知识在继续学习之前,您需要对下面的知识有基本的了解: HTML CSS JavaScript 如果您希望首先学习这些项目,请在我们的首页访问这些教程 ...
BonBon - 使用 CSS3 制作甜美的糖果按钮
BonBon 是一组使用 CSS3 制作的甜美的糖果按钮样式.在过去,我们都是使用图片或者 JavaScript 来实现漂亮的按钮效果,随着越来越多的浏览器对 CSS3 的支持和完善,使用 CSS3 ...
mysql连接查询
以前查询都是随便查到结果就行了,因为发现每次查询的数量都很少,当然现在也是.不过效率一直是程序员执着的追求,我就多了解下差距. 首先是多张表联合,一张模板种类category,一张模板表templat ...
Asp.net 高性能 Sqlite ORM 框架之 sqliteSugar
一.介简 easyliter框架的升级版本,并且正式命名为SqliteSugar框架,另外Sugar系列还有 MySql和MsSql版本,Oracle版本待开发中(因为客户端太大一直在忧郁当中) 用S ...

关于jQuery里面的选择器

关于jQuery里面的选择器的更多相关文章

随机推荐

热门专题