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. 深浅copy和浅copy

    深浅copy 1,先看赋值运算. l1 = [1,2,3,['barry','alex']] l2 = l1 l1[0] = 111 print(l1) # [111, 2, 3, ['barry', ...

  2. python 杂谈

    python 当前文件导入自定义模块的时候,会默认执行一遍 python使用的变量必须是已经定义或者声明过的.

  3. javascript获取网址参数

    通过以上图片,就可以很好的理解: location.href location.protocol location.host location.hostname location.port locat ...

  4. 阿里云ros实例

    模板文件 { "ROSTemplateFormatVersion": "2015-09-01", "Parameters": { " ...

  5. 数据分析：pandas 基础

    pandas 是基于 Numpy 构建的含有更高级数据结构和工具的数据分析包 类似于 Numpy 的核心是 ndarray,pandas 也是围绕着 Series 和 DataFrame 两个核心数据 ...

  6. SAE实践——创建新应用开启MySQL服务

    1. 创建SAE应用 当创建完成SAE账户之后,即可创建SAE应用.点击创建新应用按钮,创建一个新的SAE 应用 阅读提示信息,等待五秒,点继续创建. 填写应用信息完成创建.可选择PHP5.3和空应用 ...

  7. Python之scrapy框架之post传输数据错误：TypeError: to_bytes must receive a unicode, str or bytes object, got int

    错误名:TypeError: to_bytes must receive a unicode, str or bytes object, got int 错误翻译:类型错误:to_bytes必须接收u ...

  8. 学习前端页面css定位

    css元素框定位 一.相对定位: 相对定位是一个非常容易掌握的概念.如果对一个元素进行相对定位,它将出现在它所在的位置上.然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动.pos ...

  9. Win10将用户名修改为英文

    前言 最近重装了一次Win10系统,手贱地在引导里设置了中文的用户名.使用微软账户进行登录后,Win10以这个中文名建立了用户的文件夹,使得少数软件安装或使用过程中,保存路径不支持中文路径,从而报错, ...

  10. 图像的上采样（upsampling）与下采样（subsampled）

    缩小图像(或称为下采样(subsampled)或降采样(downsampled))的主要目的有两个:1.使得图像符合显示区域的大小:2.生成对应图像的缩略图. 放大图像(或称为上采样(upsampli ...