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. git如何从远程非master分支更新到本地对应分支

    git如何从远程非master分支更新到本地对应分支 自己实例 正确步骤 如果本地有分支,那就删除本地分支 删除本地分支::git branch -d 2018_4_18_second 切换分支: g ...

  2. Rapidjson的简单使用示例

    很早就想用用Markdown了,一直没机会.今天就来试一下 先放个目录: Rapidjson的简单使用示例 rapidjson官方教程 本示例所用环境 示例代码与注释 rapidjson官方教程 如果 ...

  3. 关于WMware Workstation出现 “”该虚拟机似乎正在使用中“”解决办法

    如图 直接到配置文件D:\centos1\这个目录下 将vmdk.lck文化删除 然后重新打开虚拟机便可进入 问题解决

  4. div动态加载页面

    div动态加载页面 /* /// method 1 var url="<%=basePath%>/qne.do?p=pessegerCountSet"; $.post( ...

  5. maven pom下载不了

    Downloading: http://repo.maven.apache.org/maven2/org/apache/maven/plugins/maven-clean-plugin/2.4.1/m ...

  6. js实现导出数据到excel

    来自:http://www.imooc.com/article/13374 //html代码<!DOCTYPE HTML> <html> <head> <ti ...

  7. 如何建立远程桌面连接（XP、Vista、Win7）

    如何建立远程桌面连接(XP.Vista.Win7) 要求: 1:对方即你要连的机器必须要允许远程桌面连接,操作系统一般是winXP(单用户)和win2003server(多用户),具体设置:右击我的电 ...

  8. javaScript 三目运算符初探

    三目运算符 三目运算符,又称条件运算符,是计算机语言的重要组成部分.它是唯一有3个操作数的运算符,所以有时又称为三元运算符.一般来说,三目运算符的结合性是右结合的. 定义 对于条件表达式b ? x : ...

  9. ajax跨域过程

  10. JS之字符串和数组

    字符串: 属性: length:可以获取字符串的长度: <script type="text/javascript"> var str = "haha&quo ...