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. NOIP2015BLOCKADE c++ 代码

    #include<algorithm> #include<fstream> #include<functional> #include<iostream> ...

  2. JavaScript多个h5播放器video，点击一个播放其他暂停

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. thinkphp3搜索结果分页

    公司的办公室搬到武昌,办公室水不好喝 还是乐百氏 娃哈哈的水我们oa用的tp3的一套oa,现在boss要求按状态 和类型(2个维度)来搜索案子 数量多,用 分页注意到初始的表单 input的name ...

  4. mxonline实战4，用户登陆页面2和用户注册1

            一. 基于类来定义view.py diango中使用基于类来定义views的功能,其实更加方便,因为这样可继承一些定义好的基类,来减少我们的代码量   1. 使用基于类的方法,来重新定 ...

  5. 使HTML页面上获取到的文本保留空格和换行符等格式

    <pre> 元素可定义预格式化的文本.被包围在 pre 元素中的文本通常会保留空格和换行符.而文本也会呈现为等宽字体.   <pre>的内容自动换行的问题(兼容多个浏览器): ...

  6. centos启动错误：Inodes that were part of a corrupted orphan linked list found.

    centos启动时,提示错误: /dev/mapper/VolGroup-lv_root contains a file system with errors,check forced. /dev/m ...

  7. CSS04--对齐、 布局、导航栏

    我们接着上一章,继续学习一些有关对齐.布局.导航栏的内容. 1.水平块对齐:    1.1 margin:把左和右外边距设置为 auto,规定的是均等地分配可用的外边距.结果就是居中的元素    .c ...

  8. 前端JS批量添加校验数据唯一性

    <script type="text/javascript"> //维护删除数组中的某一项 Array.prototype.remove = function(val) ...

  9. JavaIO流总结

    字节流 InputStream FileInputStream FilterInputStream BufferedInputStream DataInputStream PushbackInputS ...

  10. 牛客OI周赛8-提高组A-用水填坑

    牛客OI周赛8-提高组A-用水填坑 题目 链接: https://ac.nowcoder.com/acm/contest/403/A 来源:牛客网 时间限制:C/C++ 2秒,其他语言4秒 空间限制: ...