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

  1. jQuery基础之选择器

    摘自:http://www.cnblogs.com/webmoon/p/3169360.html jQuery基础之选择器 选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Aja ...

  2. jQuery 简单过滤选择器

    <!DOCTYPE HTML> <html> <head> <title> 使用jQuery基本过滤选择器 </title> <scr ...

  3. JQuery：JQuery语法、选择器、事件处理

    JQuery语法:   通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions). 一.语法:jQuery 语法是通过选取 HTM ...

  4. 23、jQuery九类选择器/jQuery常用Method-API/jQuery常用Event-API

      1)掌握jQuery九类选择器及应用 2)掌握jQuery常用Method-API 3)掌握jQuery常用Event-API 一)jQuery九类选择器[参见jQueryAPI.chm手册] 目 ...

  5. jQuery基础知识--选择器与效果

    $(this).hide()-----隐藏当前元素 $("p").hide()------隐藏所有段落 $(".test").hide()--隐藏所有class ...

  6. jQuery的筛选选择器

    基本筛选选择器 很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素,为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素.筛选选择器很多都不是CSS的规范,而是jQu ...

  7. JQuery总结：选择器归纳、DOM遍历和事件处理、DOM完全操作和动画 （转）

    JQuery总结:选择器归纳.DOM遍历和事件处理.DOM完全操作和动画 转至元数据结尾 我们后台可能用到的页面一般都是用jquery取值赋值的,发现一片不错的文章 目录 JQuery总结一:选择器归 ...

  8. jQuery中的选择器<思维导图>

    选择器是jQuery的重要组成部分,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.如果能熟练地使用选择器,不仅能简化代码,而且可以达到事半功倍的效果. 下面是关于jQuery中 ...

  9. jQuery中的选择器《思维导图》

    学习jQuery的课程中,我对jQuery中的选择器有了更深的认识,它的简洁写法,完美的兼容性,可靠的处理机制,都让我们省了很多事, 下面是我在学习过程中对jQuery选择器写的思维导图(全屏查看:& ...

  10. jQuery简单过滤选择器

    <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <!--jQuery选择器详解 根据所获 ...

随机推荐

  1. 浅谈attr()和prop()

    刚开始学JQ的时候 ,看到attr()和prop()这两个属性的时候感觉很迷茫,而且配合官方给出的推荐使用图: prop()可以做到的attr()完全都可以,而且做不到的attr()也可以做到.何用? ...

  2. C# List.ForEach 方法

    C#中List.ForEach 方法是对 List 的每个元素执行指定操作. 示例: using System; using System.Collections.Generic; using Sys ...

  3. .NET面试题解析(06)-GC与内存管理

      系列文章目录地址: .NET面试题解析(00)-开篇来谈谈面试 & 系列文章索引 GC作为.NET的重要核心基础,是必须要了解的.本文主要侧重于GC内存管理中的一些关键点,如要要全面深入了 ...

  4. 基于Metronic的Bootstrap开发框架经验总结（9）--实现Web页面内容的打印预览和保存操作

    在前面介绍了很多篇相关的<Bootstrap开发框架>的系列文章,这些内容基本上覆盖到了我这个Bootstrap框架的各个主要方面的内容,总体来说基本达到了一个稳定的状态,随着时间的推移可 ...

  5. Windows Azure Virtual Network (6) 设置Azure Virtual Machine固定公网IP (Virtual IP Address, VIP) (1)

    <Windows Azure Platform 系列文章目录> 注意:本文介绍的是Global Azure (http://www.windowsazure.com),如果你使用的是由世纪 ...

  6. 20套高品质的 Mobile & Web 界面 PSD 素材免费下载

    在这里,我们向大家呈现20个新鲜出炉的矢量的免费 PSD 素材.这些素材来自著名的设计社区——Dribbble,这个网站的用户不断发布各种精美的用户界面,图标和网站布局,以帮助激励他人.这些免费素材不 ...

  7. SpringAOP使用扩展

    在<初识Spring>中我们了解到Spring支持AOP且可配置方法的前置曾强和后置曾强,但其实Spring支持多种曾强类型.下面同过一些例子来介绍Spring的几种常用的曾强(前置增强和 ...

  8. C#--常量

  9. log4net 既要按日期分割日志文件，又要按文件大小分割。

    <appender name="DebugAppender" type="log4net.Appender.RollingFileAppender"> ...

  10. 【转载】各浏览器CSS兼容问题

    CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并 整理了一下.对于web2.0的过度,请尽量用xhtml ...