1. jQuery选择器的优势：

(1) 代码更简单
(2) 支持CSS1到CSS3选择器
(3) 完善的处理机制

  1. jQuery选择器的分类

（1） 基本选择器

基本选择器是jQuery中使用最多的选择器，它又元素Id、class、元素名、多个元素符组成。

（2） 层次选择器

层次选择器通过DOM元素间的层次关系来获取元素，主要的层次关系包括父子、后代、相邻、兄弟关系。

（3） 过滤选择器

① 简单过滤选择器

过滤选择器是根据某类过滤规则进行元素的匹配，书写时都以(:)开头；简单过滤选择器是过滤选择器中使用最广泛的一种。

② 内容过滤选择器

内容过滤选择器是根据元素中的文字内容或所包含的的子元素特征获取元素，其文字内容可以模糊或绝对匹配进行元素定位。

③ 可见性过滤选择器

可见性过滤选择器根据元素是否可见的特征来获取元素

④ 属性过滤选择器

⑤ 子元素过滤选择器

⑥ 表单对象属性过滤选择器

此选择器主要是对所选择的表单元素进行过滤，例如选择被选中的下拉框，多选框等元素。

（4） 表单选择器

eg：

HTML部分：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <link rel="stylesheet" type="text/css" href="css/style.css"/>

        <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">

            $(function(){

                //            选取含有 属性title 的div元素.

                $('#btn1').click(function(){

                    $('div:[title]').css('background','orchid');

                })

//              选取 属性title值等于“test”的div元素.

                $('#btn2').click(function(){

                    $('div[title=test]').css('background','orange');

                })

                $('#btn3').click(function(){

                    //              选取 属性title值不等于“test”的div元素(没有属性title的也将被选中).

                     $('div:[title!=test]').css('background','chartreuse');

                })

                $('#btn4').click(function(){

                    $('div:[title^=te]').css('background','#FFC0CB');

                })

                $('#btn5').click(function(){

                    $('div:[title$=est]').css('background','aqua');

                })

                $('#btn6').click(function(){

                    //选取属性title值含有es的元素

                    $('div:[title*=es]').css('background','coral');

                })

                $('#btn7').click(function(){

                    //组合属性选择器，首先选取有属性id的元素，然后在结果中选取属性title值含有es的元素

                    $('div:[id][title*=es]').css('background','deeppink');

                })

            })

        </script>

    </head>

    <body>

            <button id="reset">手动重置页面元素</button>

        <input type="checkbox" id="isreset" checked="checked" /><label for="isreset">点击下列按钮时先自动重置页面</label>

        <h3> 属性选择器.</h3>

        <input type="button" value="选取含有 属性title 的div元素." id="btn1" />

        <input type="button" value="选取 属性title值等于“test”的div元素." id="btn2" />

        <input type="button" value="选取 属性title值不等于“test”的div元素(没有属性title的也将被选中)." id="btn3" />

        <input type="button" value="选取 属性title值 以“te”开始 的div元素." id="btn4" />

        <input type="button" value="选取 属性title值 以“est”结束 的div元素." id="btn5" />

        <input type="button" value="选取 属性title值 含有“es”的div元素." id="btn6" />

        <input type="button" value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有“es”的元素." id="btn7" />

        <br /><br />

        <!-- 测试的元素 -->

        <div class="one" id="one">

            id为one,class为one的div

            <div class="mini">class为mini</div>

        </div>

        <div class="one" id="two" title="test">

            id为two,class为one,title为test的div.

            <div class="mini" title="other">class为mini,title为other</div>

            <div class="mini" title="test">class为mini,title为test</div>

        </div>

        <div class="one">

            <div class="mini">class为mini</div>

            <div class="mini">class为mini</div>

            <div class="mini">class为mini</div>

            <div class="mini"></div>

        </div>

        <div class="one">

            <div class="mini">class为mini</div>

            <div class="mini">class为mini</div>

            <div class="mini">class为mini</div>

            <div class="mini" title="tesst">class为mini,title为tesst</div>

        </div>

        <div style="display:none;" class="none">

            style的display为"none"的div

        </div>

        <div class="hide">class为"hide"的div</div>

        <div>

            包含input的type为"hidden"的div<input type="hidden" size="8" />

        </div>

    </body>

</html>

style.css部分：

div,span,p {

    width:140px;

    height:140px;

    margin:5px;

    background:#aaa;

    border:#000 1px solid;

    float:left;

    font-size:17px;

    font-family:Verdana;

}

div.mini {

    width:55px;

    height:55px;

    background-color: #aaa;

    font-size:12px;

}

div.hide {

    display:none;

}

结果图：

jQuery选择器，外加例子讲解的更多相关文章

  1. jQuery选择器简单例子

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jQuery_5.aspx. ...

  2. Jquery选择器 讲解

    在Dom 编程中我们只能使用有限的函数根据id 或者TagName 获取Dom 对象. 然而在jQuery 中则完全不同,jQuery 提供了异常强大的选择器用来帮助我们获取页面上的对象, 并且将对象 ...

  3. jQuery选择器和选取方法 http://www.cnblogs.com/MaxIE/p/4078869.html

    我们已经使用了带有简单Css选择器的jQuery选取函数:$().现在是时候深入了解jQuery选择器语法,以及一些提取和扩充选中元素集的方法了. 一.jQuery选择器 在CSS3选择器标淮草案定义 ...

  4. jQuery选择器和选取方法

        我们已经使用了带有简单Css选择器的jQuery选取函数:$().现在是时候深入了解jQuery选择器语法,以及一些提取和扩充选中元素集的方法了. 一.jQuery选择器 在CSS3选择器标淮 ...

  5. jQuery选择器和选取方法.RP

    我们已经使用了带有简单Css选择器的jQuery选取函数:$().现在是时候深入了解jQuery选择器语法,以及一些提取和扩充选中元素集的方法了. 一.jQuery选择器 在CSS3选择器标淮草案定义 ...

  6. 《锋利的jQuery（第2版）》笔记-第2章-jQuery选择器

    选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.熟练使用选择器,不仅可以简化代码,而且可以达到事半功倍的效果. 2.1 jQuery选择器是什么 1. ...

  7. jquery选择器 之 获取父级元素、同级元素、子元素

    jquery选择器 之 获取父级元素.同级元素.子元素 一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 <div id="par_div" ...

  8. jQuery选择器。 5.21 《深夜还在编码的你》

    (之所以字体弄那么大是因为省眼,程序员不容易,程序员的眼睛更不容易,请保护我们的眼睛) 选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器. 熟练地使用选 ...

  9. jQuery 选择器 （基础恶补之三)+Ajax

    jQuery load() 方法 jQuery load() 方法是简单但强大的 AJAX 方法. load() 方法从服务器加载数据,并把返回的数据放入被选元素中. 语法: $(selector). ...

随机推荐

  1. org.springframework.dao.CannotAcquireLockException解决

    java.sql.SQLException: Lock wait timeout exceeded 该异常为一个service中调用了另一个service,两个service对同一表进行操作,造成事务 ...

  2. windows下用wampServer 为wordpress 搭建本地服务器运行环境

      1.准备wamp server wamp是windows apache mysql php 的首字母缩写,更新的wamp总能保证wordpress对服务器的要求 点此下载最新wamp 2.安装wa ...

  3. android frame的学习

    http://blog.csdn.net/littletigerat/article/details/6318365   //2011年Android Activity生命周期学习笔记 http:// ...

  4. 挂载U盘到linux中

        一.  挂载U盘到linux中,也可以是虚拟机中的linux 1. 首先插上U盘 2. fdisk -l 找到自己的U盘设备,并且记住文件系统类型,主要看空间大小来判断,比如是/dev/sdc ...

  5. Spring Boot 之 Hello World 战记

    1. Maven创建SpringBoot项目 2. application.properties spring.session.store-type=none // 解决默认的30+编译错误 3. d ...

  6. 【JavaScript】动态原型模式创建对象 ||为何不能用字面量创建原型对象?

    var proto = ""; function Person(name, age, job) { this.name = name; this.age = age; this.j ...

  7. 对drf视图的理解

    视图说明 1. 两个基类 1)APIView rest_framework.views.APIView APIView是REST framework提供的所有视图的基类,继承自Django的View父 ...

  8. linux 多线程之间信号传递

    函数 sigwait sigwait的含义就如同它的字面意思:等待某个信号的到来.如果调用该函数的线程没有等到它想等待的信号那么该线程就休眠.要达到等到一个信号,我们得做下面的事: 首先,定义一个信号 ...

  9. StarUML使用简明教程

    最近了解到StarUML比较多,所以写一篇教程供大家参考,不足支持,请见谅. StarUML(简称SU),是一种创建UML类图,生成类图和其他类型的统一建模语言(UML)图表的工具.StarUML是一 ...

  10. Haskell优雅的快排实现

    说得快速排序,基本是常用的排序当中速度最快的排序了,之前也用C和Java实现过,但是过程十分痛苦,更重要的是写完代码只记得过程却对实质的过程觉得隔了一层纱,有种说不出的感觉.刚刚看一下Haskell实 ...