jQuery选择器和css一样，但兼容性更好

<body>

    <p>p1</p>

    <p>p1</p>

    <p>p1</p>

    <div id="box">

        <p>p2</p>

        <p>p2</p>

        <p>p2</p>

        <div>

            <p>p3</p>

            <p>p3</p>

            <p>p4</p>

        </div>

    </div>

    <p>p4</p>

    <p>p4</p>

    <p>p4</p>

</body>

层次选择器：

$(function(){

    //后代选择器

    $('#box p').css('color','red');

    $('#box').find('p').css('color','blue');

    //子选择器

    $('#box > p').css('color','red');

    $('#box').children('p').css('color','blue');

    //next选择器，获取节点后一个同级DOM对象，如果不是所指定的没有效果

    $('#box + p').css('color','red');

    $('#box').next('p').css('color','blue');

    //nextAll，获取节点后所有同级DOM对象

    $('#box ~ p').css('color','red');

    $('#box').nextAll('p').css('color','blue');

});

jQuery方法对选择器的补充：

    //jQuery对高级选择器的补充，提供的几种方法

    //同级上指定元素:一个或所有个

    $('#box').prev('p').css('color','red');

    $('#box').prevAll('p').css('color','blue');

    //同级非指定元素:上或下

    $('#box').prevUntil('p').css('color','red');

    $('#box').nextUntil('p').css('color','blue');

    //同级指定元素：上和下

    $('#box').siblings('p').css('color','red');

注：1 方法如果不传参相当于*，表示任意，不建议使用

2 方法相对高级选择器写法好一些：find()最快，可以拆分组合使用

    var box = $('#box');

    var p = box.find('p');

----------------------------------------------------------------------------------------------------------------------------------------------------------

属性选择器：

    <a sss="x" title="num1 aaa bbb">num1</a>

    <a>num2</a>

    <a>num3</a>

    <a>num4</a>

    <a sss="s" title="num5">num5</a>

    <a title="num-6">num6</a>

    <a title="nsdfnumsdf">num7</a>
    //属性浏览器

    $('a[title]').css('color','red');

    $('a[title=num1]').css('color','blue');

    $('a[title^=num]').css('color','red');

    $('a[title$=1]').css('color','blue');

    $('a[title|=num]').css('color','red');

    $('a[title!=num5]').css('color','blue');

    $('a[title~=aaa]').css('color','red');

    $('a[title*=num]').css('color','blue');

    $('a[sss][title=num5]').css('color','red');

jQuery高级选择器和其等价方法的更多相关文章

  1. JQuery基本选择器和基本动画方法总结

    刚开始接触JQuery是在大三的时候,那时候先学的Javascript,然后跳跃到JQuery,就一个字,爽.但因为之前用的不是太多,所以很多都忘了,直接导致的后果就是之前在一家公司面试,面试官问我要 ...

  2. jquery学习（3）--高级选择器

    自己手写的学习笔记.常规选择器: /****************学习--高级选择器(1)****************/---高级选择器:ie7+ 层次选择器: 后代选择器     ul li ...

  3. jquery 常用选择器和方法以及遍历（超详细）

    jQuery 常用选择器和和方法 学习总结 一.JQuery 介绍 1. 什么是 jQuery 2. jQuery 版本介绍 3. jQuery 文件介绍 二.jQuery 对象 1. jQuery ...

  4. jQuery 的选择器常用的元素查找方法

    jQuery 的选择器常用的元素查找方法 基本选择器: $("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myE ...

  5. jQuery选择器总结 jQuery 的选择器可谓之强大无比，这里简单地总结一下常用的元素查找方法

    新年第一编文章 jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法   $("#myELement")    选择id值等于myElement的元素,id值 ...

  6. jQuery基础 浅析（含基本方法和选择器）

    1.jQuery与DOM互相转换 jQuery入库函数:$(document).ready(function(){}) $(function(){}) $(“#btn”):jQuery存储的是DOM对 ...

  7. jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法

    jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq ...

  8. 使用 jQuery 基本选择器获取页面元素，然后利用 jQuery 对象的 css() 方法动态设置 ＜span＞ 和 ＜a＞ 标签的样式

    查看本章节 查看作业目录 需求说明: 使用 jQuery 基本选择器获取页面元素,然后利用 jQuery 对象的 css() 方法动态设置 <span> 和 <a> 标签的样式 ...

  9. JQuery_高级选择器

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

随机推荐

  1. C语言typedef struct具体解释

    在C中定义一个结构体要用typedef,如: typedef struct Student { int a; }Stu; 于是在声明变量的时候就能够:Stu stu1;(假设没有typedef就必须用 ...

  2. 如何下载最新版的 Adobe Flash Player

    如何下载最新版的 Adobe Flash Player 中国访客用代理访问下面的链接,否则会自动跳转到 https://www.flash.cn/ 当我们从 https://get.adobe.com ...

  3. 常见的C字符串处理函数的源代码

    #include <stdio.h> #include <assert.h> char *strcpy(char *strDest,const char *strSrc) // ...

  4. POJ - 3842 An Industrial Spy dfs(水)

    题意:给你一串数字,最少一个,最多七个,问用这里面的数字能组成多少素数,不重复. 思路:之前还遍历10000000的每一个素数,结果超时,后来发现直接dfs就可以了,只是标记一下做过的数. #prag ...

  5. 《Linux企业应用案例精解》一书已由清华大学出版社出版

    <Linux企业应用案例精解>简介 650) this.width=650;" border="0" alt="223754878.jpg" ...

  6. c#同步上下文SynchronizationContext学习笔记

    提供在各种同步模型中传播同步上下文的基本功能.同步上下文的工作就是确保调用在正确的线程上执行. 同步上下文的基本操作 Current 获取当前同步上下文 var context = Synchroni ...

  7. 客户端运行gpupdate /force，后提示原因是缺少到域控制器的网络连接

    问题: C:\Users\wb>gpupdate /force正在更新策略... 用户策略更新成功完成.无法成功更新计算机策略.遇到下列错误: 处理组策略失败,原因是缺少到域控制器的网络连接.这 ...

  8. VBA 字符串操作（基础篇）

    转自:http://blog.csdn.net/jyh_jack/article/details/2315345 mid(字符串,从第几个开始,长度) 在[字符串]中[从第几个开始]取出[长度个字符串 ...

  9. Swift学习笔记(8)--函数

    1.定义及调用 func sayHelloAgain(personName: String) -> String { return "Hello again, " + per ...

  10. Linux系统消息队列框架Kafka单机安装配置

    http://www.ithao123.cn/content-11128587.html