在简单选择器外，还有一些进阶的选择器方便我们更精准的选择元素。

1、群组选择器

　　可以将相同的样式合并

<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
    $(function(){
        /*$('div,p,strong').css('color','red');   同样可以是id，class等选择器组合*/
        $('#box,.pox,strong').css('color','red');
    });
</script>
<style>
    /*div,p,strong{ color:red;}多种选择器添加红色字体 多个选择器之间逗号隔开就行，可以是id，class等选择器的组合*/

</style>
</head>
<body>
    <div id="box">div</div>
    <div>div</div>
    <div>div</div>

    <p>p</p>
    <p>p</p>
    <p class="pox">p</p>

    <strong>strong</strong>
    <strong>strong</strong>
    <strong>strong</strong>
</body>

2、后代选择器

<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
    $(function(){
        $('ul li a').css('color', 'red'); //后代选择器 jQuery 方式
    });
</script>
<style>
    /*ul li a { color:red;}层层追溯到的元素添加红色字体*/
</style>
</head>
<body>
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
    </ul>
    <a href="#">首页</a>
    <a href="#">首页</a>
</body>

3、通配选择器

<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
    $(function(){
        $('*').css('color', 'blue'); //通配选择器
        alert($('*').size());//测试通配选择器到底选择了多少个节点
        alert($('*')[0]);//第一个是html节点对象

        //html节点对象一般不是想要的，只想要body节点对象里面的有用的，所以通配选择器会极大的消耗资源，所以不建议在全局中使用
    });
</script>
<style>
    *{ color:red;}/*页面所有元素都添加红色字体*/
</style>
</head>
<body>
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
    </ul>
    <a href="#">首页</a>
    <a href="#">首页</a>
</body>

　　警告：在实际使用上，通配选择器一般用的并不多，尤其是在大通配上，比如：$('*')，这种使用方法效率很低，影响性能，建议竟可能少用。可以在局部中使用通配选择器

<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
    $(function(){
        $('ul li *').css('color','green');
        alert($('ul li *').size());/*只选择了四个不会像在全局中使用通配选择器那样把一些不必要的也选中*/
    });
</script>
<style>
    ul li *{ color:red;}/*ul li 里面的所有都选中*/
</style>
</head>
<body>
    <ul>
        <li><a href="#">首页ul li a</a></li>
        <li><a href="#">首页ul li a</a></li>
        <li><p>首页ul li p<p></li>
    </ul>
</body>

4、混合选择器

　　在实际应用中，我们可以灵活的搭配，使得选择器更加的精准和快速：

<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
    $(function(){
        $('ul li a,#pox,.box').css('color','green');
    });
</script>
<style>
    ul li a,#pox,.box{ color:red;}
</style>
</head>
<body>
    <ul>
        <li><a href="#">首页ul li a</a></li>
        <li><a href="#">首页ul li a</a></li>
    </ul>
    <a href="#">首a页</a>
    <a href="#">首a页</a><!--a标签有默认的属性：下划线，字体为蓝色-->
    <p>首页p</p>
    <div class="box">div#box</div>
    <div id="pox">div.pox</div>
</body>

 5、在 ID 和类(class)中指明元素前缀

<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
    $(function(){
        $('div.box').css('color','blue');
        $('p.box').css('color','pink');
    });
</script>
<style>
    div.box{ color:red;}
    p.box{ color:green;}
</style>
</head>
<body>
    <div class="box">divbox</div>
    <p class="box">pbox</p>

    <div>div</div>
    <p>p</p>
</body>

　　类(class)有一个特殊的模式，就是同一个 DOM 节点可以声明多个类(class)。那么对于这种格式，我们有多 class 选择器可以使用，但要注意和 class 群组选择器的区别。

<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
    $(function(){
        $('.box.pox').css('color','pink');
        /*$('.box,.pox').css('color','pink');中间加上,号变成将所有box和pox都选中了*/
    });
</script>
<style>
    .box.pox{ color:red;}/*IE6不支持*/
</style>
</head>
<body>
    <div class="box pox">divbox</div><!--只想要第一个-->
    <p class="pox">pbox</p>

    <div class="pox">divbox</div>
    <p class="box">pbox</p>
</body>

　　警告：在构造选择器时，有一个通用的优化原则：只追求必要的确定性。当选择器筛选越复杂，jQuery 内部的选择器引擎处理字符串的时间就越长。

JQuery_进阶选择器的更多相关文章

  1. jQuery_2_常规选择器-进阶选择器

    进阶选择器: 1. 群组选择器     $("span,em,#box")   获取多个选择器的DOM对象 <div id="d1">div< ...

  2. JQuery_过滤选择器

    一.基本过滤器 1.基本过滤器 过滤器主要通过特定的过滤规则来筛选所需的 DOM 元素,和 CSS 中的伪类的语法类似:使用冒号(:)开头. <script type="text/ja ...

  3. JQuery_高级选择器

    在很多特殊的元素上,比如父子关系的元素,兄弟关系的元素,特殊属性的元素等等. 在早期 CSS 的使用上,由于 IE6 等低版本浏览器不支持,所以这些高级选择器的使用也不具备普遍性,但随着 jQuery ...

  4. JQuery_简单选择器

    jQuery 最核心的组成部分就是:选择器引擎.它继承了 CSS 的语法,可以对 DOM 元素的标签名.属性名.状态等进行快速准确的选择,并且不必担心浏览器的兼容性. jQuery选择器实现了 CSS ...

  5. Jsoup进阶选择器

    package com.open1111.jsoup; import org.apache.http.HttpEntity;import org.apache.http.client.methods. ...

  6. css进阶选择器

    后代选择器 用空格隔开 选择div标签下的p标签下的a标签 div p a 选择class为parent标签下的p标签下的a标签 .parent p a 后代选择器可以是标签.类.id的混合体 后代选 ...

  7. Jquery_类选择器笔记

    $("[id^=percent]").size() ^=:表示以什么开头 $=:表示以什么结尾 ~=:表示包含什么 id:表示按id选择

  8. jQuery常规选择器

    //简单选择器$('div').css('color','red'); //元素选择器,返回多个元素$('#box').css('color','red');//id选择器,返回单个元素$('.box ...

  9. Jquery入门之----------选择器-------------

    Jquery最核心的组成部分就是选择器引擎.他继承了CSS的语法,可以对DOM元素的标签名.属性名.状态等进行快速.精确的选择,并且不必担心浏览器的兼容性.Jquery选择器除实现了基本的标签选择外, ...

随机推荐

  1. H5页面性能优化

    对于一个产品,性能在用户体验中是必不可缺的一环.性能优化是个长远的事情,联想到导航项目,列出以下性能优化的方案: 一. 基本的代码层面优化: 1:合理使用css 1)正确使用Display属性 Dis ...

  2. java类为什么是单继承。类的继承，实现接口。

    java中提供类与类之间提供单继承. 提供多继承会可能出现错误,如:一个类继承了两个父类,而两个父类里面都有show()方法. class Fulei1{ public void show(){ Sy ...

  3. ubuntu dpkg 依赖问题处理

    ubuntu dpkg 依赖问题处理 使用 apt-get 安装软件期间,如果出现意外中断的情况,下次安装时会出现 dpkg 的一系列依赖问题,提示如下 :: dpkg: error processi ...

  4. iOS ARC中CTCallCenter没用，无法监听电话的解决方案

    今天在尝试使用CTCallCenter进行电话监听时,发现一直无法捕获电话状态改变的事件,研究了一番之后找到了解决方案,在这里分享给大家. 首先使用CTCallCenter监听电话的代码如下: CTC ...

  5. Thread Safe(线程安全)和None Thread Safe(NTS，非线程安全)之分

    Windows版的PHP从版本5.2.1开始有Thread Safe(线程安全)和None Thread Safe(NTS,非线程安全)之分,这两者不同在于何处?到底应该用哪种?这里做一个简单的介绍. ...

  6. JSONP使用笔记

    JSONP JSONP是实现跨域GET请求的一种方法, 原理上利用script标签可以动态加载JS文件, 将不同源站点的JSON数据加载到本网站来,如果给定回调函数,将回调函数名传递到服务器端, 在服 ...

  7. （转）PHP常用函数

    来源  :http://www.cnblogs.com/dreamhome/archive/2011/05/04/2037011.html ---------------------------- & ...

  8. EF CodeFirst 如何通过配置自动创建数据库<当模型改变时>

    最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来. 十年河东十年河西,莫欺少年穷 学无止境,精益求精    本篇为进阶篇,也是弥补自己之前没搞明白的地方,惭愧 ...

  9. 查看ADOP会话

    查看ADOP有哪些会话: $ adop -status Enter the APPS username: apps Enter the APPS password: Current Patching ...

  10. 修改git commit默认触发的编辑器

    使用git commit会自动启动编辑器编辑本次提交的comment,git默认配置是GNU nano,但是很多人不是很熟悉(我就是),其实这个是可以自行配置的. 编辑制定代码库的.git/confi ...