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

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. play for scala 通过网易smtp发送邮件

    最近用play来做一个小项目,里面用到了发送邮件的功能.这里我将这部分抽出来分享,毕竟目前来看paly于scala方面的中文资料在网上还是毕竟少,希望我的这篇文章能为有需要的人提供一点思路. 下面写下 ...

  2. hive函数参考手册

    hive函数参考手册 原文见:https://cwiki.apache.org/confluence/display/Hive/LanguageManual+UDF 1.内置运算符1.1关系运算符 运 ...

  3. 磨刀不误砍柴工，使用visual studio之前应该先了解这些...

    注:以下的快捷键在vs2010中测试无误. 众所周知,vs是一个非常强大的开发平台,但是又有多少小伙伴熟悉以下这些快捷键呢? 当然,不知道这些快捷键与开发并没有直接关系,不过,就我而言,以下这些快捷键 ...

  4. CSS样式 让你的输入的小写自动变成大写。

    1.transform:uppercase  参考:http://www.w3school.com.cn/cssref/pr_text_text-transform.asp 2.可以让你实现输入的小写 ...

  5. JQuery html API支持解析执行Javascript脚本功能实现-代码分析

    JQuery html用法(功能类似innerHTML) 开发中需要使用Ajax技术来更新页面局部区域, 使用的方法是ajax获取html代码段(字符串),然后将这个html代码段作为参数,传入目标D ...

  6. 小Q系列之 最佳裁判

    这个题需要注意一些数据条件 尤其是一些输入数据条件 #include<algorithm> #include<stdio.h> #include<math.h> u ...

  7. poi jar包的作用

    目前POI的最新发布版本是3.10_FINAL.该版本保护的jar包有: Maven artifactId Prerequisites JAR poi commons-logging, commons ...

  8. asp检测数字类型函数

    '**************************************************'函数ID:0014[检测ID是否为数字类型]'函数名:JCID'作 用:检测ID是否为数字类型' ...

  9. js实现继承的五种方式

    function Parent(firstname) { this.fname=firstname; ; this.sayAge=function() { console.log(this.age); ...

  10. spring使用elasticsearch 5.x

    elasticsearch客户端选择 这里使用transport建立elasticsearch客户端 applicationContext.xml配置,属性可以采用读取属性文件的方式.参考类Prope ...