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. [uwp]MVVM之MVVMLight，一个登录注销过程的简单模拟

    之前学MVVM,从ViewModelBase,RelayCommand都是自己瞎写,许多地方处理的不好,接触到MVVMLigth后,就感觉省事多了. 那么久我现在学习MVVMLight的收获,简单完成 ...

  2. dockerfile 构建tomcat

    事先下载好tomcat和jdk的二进制包. 下载地址https://pan.baidu.com/s/1kWWHGEV 值得一说的是 tomcat的官方镜像 剪切了很多jdk和系统命令,所以生产环境建议 ...

  3. collections模块—— Counter

    ounter目的是用来跟踪值出现的次数.它是一个无序的容器类型,以字典的键值对形式存储,其中元素作为key,其计数作为value.计数值可以是任意的Interger(包括0和负数).Counter类和 ...

  4. [Swift实际操作]八、实用进阶-(1)Swift语言中的两种单例模式实际操作

    本文降温你解析常见的单例模式.单例模式可以保证一个类仅有一个实例,同时这个类还必须提供一个访问该类的全局访问点. 首先导入需要使用到的界面工具框架 import UIKit 单例对象保证了只有一个实例 ...

  5. Python中复制、深拷贝和浅拷贝的区别

    深拷贝定义(deepcopy) 在Python中,由于一切皆对象,所以任何变量都可以被引用,也即可以被赋值给任何变量.但是在Python中,给变量赋值,是区分的,一般情况下,Python中的变量赋值都 ...

  6. 【Qt开发】实现系统托盘，托盘菜单，托盘消息

    概述 系统托盘就是在系统桌面底部特定的区域显示运行的程序.windows在任务栏状态区域,linux在布告栏区域.应用程序系统托盘功能,是比较普遍的功能,本篇将详细的介绍如何实现该功能. 演示Demo ...

  7. 6、TensorFlow基础（四）队列和线程

    队列和线程 和 TensorFlow 中的其他组件一样,队列(queue)本身也是图中的一个节点,是一种有状态的节点,其他节点,如入队节点(enqueue)和出队节点(dequeue),可以修改它的内 ...

  8. Log中关于zVideoApp与zChatApp之间的消息传递可以搜索以下字符串

    [CSSBConfIPCAgent::OnMessageReceived]  (这是zVideoApp端的) 和 [CSSBPTIPCListener::OnMessageReceived]      ...

  9. Access to the path ‘’ is denied

    2019/4/29 问题:利用VS实现数据导出,出现Error:Access to the path 'F:\HPYMTotalCode\Web\dd\xmqjd.xls' is denied. 原因 ...

  10. JAVA编程思想第一章——对象导论