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. Android - Telephony API 1.5

    TelephonyManager: 1. public String getDeviceSoftwareVersion() : software version number, ex: IMEI/SV ...

  2. WPF TextCompositionManager 事件说明

    TextCompositionManager中三个隧道事件,三个冒泡事件. 除了引发的过程不一样之外其作用是一样的. 事件分别为: InputStart InputUpdate TextInput 其 ...

  3. Android 的一些中文文档

    https://blog.csdn.net/qq_36467463/article/details/77990089    //安卓mediaformat api详解 https://www.cnbl ...

  4. Linux基础命令（一）

    Linux语法命令 [选项] 参数注意:[]内容是对命令的扩张1.命令中单词之间空格隔开2.单行命令最多256个字符3.大小写区分 clear 清屏pwd 查看当前目录cd 切换目录    .表示当前 ...

  5. Parallelism VS Concurrency

     一个电脑/手机 有很多核,每一个核上运行一个任务,叫做 Parallelism. 只有一个核,通过任务调度,也可以实现 Concurrency.

  6. SCIP | 数学规划求解器SCIP超详细的使用教程

    前言 小伙伴们大家好呀!继上次lp_solve规划求解器的推文出来以后,大家都期待着更多求解器的具体介绍和用法.小编哪敢偷懒,这不,赶在考试周之际,又在忙里偷闲中给大家送上一篇SCIP规划求解的推文教 ...

  7. string类型介绍

    一.前言 int,float,char,C++标准库提供的类型:string,vector. string:可变长字符串的处理:vector一种集合或者容器的概念. 二.string类型简介 C++标 ...

  8. knova绘制矩形

    效果: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  9. JavaScript《一》

    脚本语言概念:不需要提前编译的,即时执行的语言,如js,t-sql等 在一个js块中,只要有一个语句出现错误,整个块都不执行 强类型:在编译时就已经确定的类型,弱类型,在运行时,编译器自动根据赋值在确 ...

  10. /usr/bin/ld: cannot find -lperconaserverclient_r 解决

    编译sqladvisor安装遇到: [root@localhost sqladvisor]# cd SQLAdvisor/sqladvisor/ [root@localhost sqladvisor] ...