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

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. loadrunner generators (controller in windows)

    http://my.oschina.net/u/2391658/blog/735690 http://blog.csdn.net/xu1314/article/details/7455114 http ...

  2. C++ Primer Pluse_7_课后题

    #include <iostream> using namespace std; double Sum2(double x, double y) { double sum = 0; if ...

  3. mac地址、IP地址和端口号

    看了很多遍,才整理出来我对整个通信过程的理解,大致如下,后期会不断学习补充更正: 在利用TCP/IP协议族进行通信的时候,有三个比较关键的确认身份的信息:mac地址.IP地址和端口号. mac地址是在 ...

  4. iOS开发UI篇—Modal简单介绍

    iOS开发UI篇—Modal简单介绍 一.简单介绍 除了push之外,还有另外一种控制器的切换方式,那就是Modal 任何控制器都能通过Modal的形式展⽰出来 Modal的默认效果:新控制器从屏幕的 ...

  5. JAVA Math类

    public class MathTest{ public static void main(String[] args)  {  /*---------下面是三角运算---------*/  //将 ...

  6. Java基础之扩展GUI——添加状态栏（Sketcher 1 with a status bar）

    控制台程序. 为了显示各个应用程序参数的状态,并且将各个参数显示在各自的面板中,在应用程序窗口的底部添加状态栏是常见且非常方便的方式. 定义状态栏时没有Swing类可用,所以必须自己建立StatusB ...

  7. JSP-12-使用过滤器和监听器

    1 什么是过滤器及其工作方式 向Web应用程序的请求和响应添加功能的Web组建 过滤器可以统一的集中处理请求和响应 15.2 过滤器的实现 新建 filter ,注意此时是在 src中建立的(同cla ...

  8. 使用Scala实现Java项目的单词计数：串行及Actor版本

    其实我想找一门“具有Python的简洁写法和融合Java平台的优势, 同时又足够有挑战性和灵活性”的编程语言. Scala 就是一个不错的选择. Scala 有很多语言特性, 建议先掌握基础常用的: ...

  9. 四、Salesforce Styles_1

    1.静态变量的使用:<apex:stylesheet value="{!$Resource.TestStyles}"/>2.<apex:page><s ...

  10. 使用C# yield关键字来提高性能和可读性

    对于”yield”这个关键字我已经见过N次了,直到最近我才知道这个关键字所蕴含的力量.我将在下面展示出一些使用”yield”让你的代码有更高可读性和更好性能的例子. 为了让你对yield有一些快速概览 ...