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. 有关于OpenGL、OpenGL ES、WebGL的小结

    转自原文 有关于OpenGL.OpenGL ES.WebGL的小结 一.   OpenGL简介 OpenGL(全写Open Graphics Library)是个定义了一个跨编程语言.跨平台的编程接口 ...

  2. Linux Virtual Server技术

    1 LVS简单介绍 Linux VirtualServer是一个高扩展和高可用性server,在一个真正server的集群中构建而成,包括Linux操作系统中的负载均衡. server的架构对于终端用 ...

  3. 常量成员函数的注意事项 & mutable的使用场景

    mutable的使用场景: 可以在一个const的对象里面,解除对部分字段的const限制.也可以用在const成员函数里面. 对于const与否,一般会调用不同版本的函数: 而对于二元操作符,如果用 ...

  4. 安卓自己定义对话框及The specified child already has a child问题

    问题:在android开发过程中,有时会在不同情况下遇到同种问题:The specified child already has a parent.You must call removeView() ...

  5. ios svn repository

    xcode默认自带Git和svn,首先讲下xcode4.6.3下配置svn: 1.检測你的mac中是否安装了svn: (1) 打开终端,输入 svn --version 假设出现下图信息,则说明已经安 ...

  6. JNI 实战全面解析

    项目决定移植一款C++开源项目到Android平台,开始对JNI深入研究. JNI是什么? JNI(JavaNative Interface)意为Java本地调用,它允许Java代码和其他语言写的代码 ...

  7. Android 5.0(Lollipop)中的SurfaceTexture，TextureView, SurfaceView和GLSurfaceView

    SurfaceView, GLSurfaceView, SurfaceTexture以及TextureView是Android当中名字比较绕,关系又比较密切的几个类.本文基于Android 5.0(L ...

  8. 6.控制器（ng-Controller）

    转自:https://www.cnblogs.com/best/tag/Angular/ ngController指令给视图添加一个控制器,控制器之间可以嵌套,内层控制器可以使用外层控制器的对象,但反 ...

  9. Controller接口控制器2

    5.ServletForwardingController 将接收到的请求转发到一个命名的servlet,具体示例如下: package cn.javass.chapter4.web.servlet; ...

  10. Scrapy框架之日志等级

    一.日志等级 CRITICAL:严重错误 ERROR:一般错误 WARNING:警告 INFO: 一般信息 DEBUG:调试信息 [注意:默认的日志等级是DEBUG] 二.日志等级设置 修改setti ...