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选择器除实现了基本的标签选择外, ...

随机推荐

H5页面性能优化
对于一个产品,性能在用户体验中是必不可缺的一环.性能优化是个长远的事情,联想到导航项目,列出以下性能优化的方案: 一. 基本的代码层面优化: 1:合理使用css 1)正确使用Display属性 Dis ...
Asp.net mvc web api 在项目中的实际应用
Asp.net mvc web api 在项目中的实际应用前言:以下只是记录本人在项目中的应用,而web api在数据传输方面有多种实现方式,具体可根据实际情况而定! 1:数据传输前的加密,以下用到 ...
Android 自定义RecyclerView 实现真正的Gallery效果
http://blog.csdn.net/lmj623565791/article/details/38173061
Jmeter进行数据库压测
一.配置并发用户新建线程组,设置线程数,Ramp-up和循环次数二.添加JDBC请求先选中JDBC Users(线程组),右键选中ADD-Config Element--JDBC Connect ...
C# 控制台程序（命令行程序）设置字体颜色，窗口宽高，光标行数
控制台程序(命令行程序)设置窗口宽度高度,如下代码: Console.WriteLine(Console.WindowHeight); Console.WriteLine(Console.Buffer ...
Nhiberate (一)
严重参考感谢:@wolfy 操作数据库一直都是直接写SQL语句, 接触的ORM框架也不多,新项目要用数据库,数据库访问采用NHibernate. 1. NHibernate 是基于.Net 的针对关系 ...
Fatal Error: TXK Install Service oracle.apps.fnd.txk.config.ProcessStateException: OUI process failed : Exit=255 See log for details
安装EBS的时候,database pre-install checks检查报警,显示"!" 一开始忽略了该报警,继续安装.在post-install checks的时候又报了错误 ...
URL中文乱码处理总结（转）
转自:http://www.cnblogs.com/xirongliu/archive/2012/09/06/2674196.html 问题:传递中文参数的时候,接收页面出现乱码问题?当跨域操作,两套 ...
BJFU 1057
描述斐波那契额数列,我们都知道.现在qingyezhu想求斐波那契的某项值对2的某次方的结果.你可以帮一下他吗?他好可怜哦!计算了N的N次方次都错了,也挨了ben大哥的N的N次方次的训了.我想你是个 ...
夺命雷公狗-----React---11--添加css样式的方法
<!DOCTYPE> <html> <head> <meta charset="utf-8"> <title></ ...

JQuery_进阶选择器

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

随机推荐

热门专题