JQuery_进阶选择器

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

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_进阶选择器的更多相关文章

jQuery_2_常规选择器-进阶选择器
进阶选择器: 1. 群组选择器 $("span,em,#box") 获取多个选择器的DOM对象 <div id="d1">div< ...
JQuery_过滤选择器
一.基本过滤器 1.基本过滤器过滤器主要通过特定的过滤规则来筛选所需的 DOM 元素,和 CSS 中的伪类的语法类似:使用冒号(:)开头. <script type="text/ja ...
JQuery_高级选择器
在很多特殊的元素上,比如父子关系的元素,兄弟关系的元素,特殊属性的元素等等. 在早期 CSS 的使用上,由于 IE6 等低版本浏览器不支持,所以这些高级选择器的使用也不具备普遍性,但随着 jQuery ...
JQuery_简单选择器
jQuery 最核心的组成部分就是:选择器引擎.它继承了 CSS 的语法,可以对 DOM 元素的标签名.属性名.状态等进行快速准确的选择,并且不必担心浏览器的兼容性. jQuery选择器实现了 CSS ...
Jsoup进阶选择器
package com.open1111.jsoup; import org.apache.http.HttpEntity;import org.apache.http.client.methods. ...
css进阶选择器
后代选择器用空格隔开选择div标签下的p标签下的a标签 div p a 选择class为parent标签下的p标签下的a标签 .parent p a 后代选择器可以是标签.类.id的混合体后代选 ...
Jquery_类选择器笔记
$("[id^=percent]").size() ^=:表示以什么开头 $=:表示以什么结尾 ~=:表示包含什么 id:表示按id选择
jQuery常规选择器
//简单选择器$('div').css('color','red'); //元素选择器,返回多个元素$('#box').css('color','red');//id选择器,返回单个元素$('.box ...
Jquery入门之----------选择器-------------
Jquery最核心的组成部分就是选择器引擎.他继承了CSS的语法,可以对DOM元素的标签名.属性名.状态等进行快速.精确的选择,并且不必担心浏览器的兼容性.Jquery选择器除实现了基本的标签选择外, ...

随机推荐

java中获取日期和时间的方法总结
1.获取当前时间,和某个时间进行比较.此时主要拿long型的时间值. 方法如下: 要使用 java.util.Date .获取当前时间的代码如下 Date date = new Date(); da ...
去掉comments
三种comments: /* Test program */ int main() { // variable declaration int a, b, c; /* This is a test m ...
如何在C#中获得input文本框中的值
前台 <input type="text" id="txt" name="txtn" style="width:213px& ...
Handle源码分析，深入群内了解风骚的Handle机制
Hanlder的使用方式一: private static Handler mHandler = new Handler(){ public void handleMessage(android.os ...
Android 5.1 open data flow 数据开启流程
首先我们来看看下面的关系图: 底层Settings.apk 在Settings -> Data Usage Summary中的某个SIM tab下开启数据开关 android/packages/ ...
ASP.NET MVC 3 CheckBoxList 的使用
在以前的 ASP.NET MVC 中可以直接使用 CheckBoxList,但后来不知道什么原因在 MVC 中移除了 CheckBoxList,所以默认情况下 ASP.NET MVC 3 中是没有 C ...
AJAX-----07XMLHttpRequest对象的处理返回的JSON类型数据
要玩json首先就需要知道一般都数据是怎么处理的: <!DOCTYPE html> <html lang="en"> <head> <me ...
PHP排序函数
/** * 对查询结果集进行排序 * http://www.onethink.cn * /Application/Common/Common/function.php * * @access publ ...
iOS开发中NSLog输出格式大全
本文的内容是总结了一下iOS开发中NSLog输出格式大全,虽然比较基础,但有总结毕竟会各位正在学习iOS开发的朋友们一些小小的帮助. %@ 对象 %d, %i ...
HttpClient请求返回JSON、图片
/** * Created by RongGuang on 2015/9/19. */ public class RongHttp { /** * Http Post请求 * @param url * ...

JQuery_进阶选择器

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

随机推荐

热门专题