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. Java中发送http的get、post请求

    近期做项目中,须要把消息通过中间件的形式通过http请求的方式推送给第三方,因此用到了http协议,小编花费了一个多小时.对于http协议中的post和get请求,封装了一个工具类.以下与大家分享一下 ...

  2. nginx和apache

    apache所占用的内存资源较多,并且处理较慢 apache的全部模块都支持动静态编译 apache对Fcgi的支持不好 apache不支持epoll apache相对于nginx是一个庞然大物 ng ...

  3. [DLX精确覆盖+打表] hdu 2518 Dominoes

    题意: 就是给12种图形,旋转,翻折.有多少种方法构成n*m=60的矩形 思路: 裸的精确覆盖.就是建图麻烦 个人太挫,直接手写每一个图形的各种形态 须要注意的是最后的答案须要除以4 代码: #inc ...

  4. 利用photoshop的动作功能实现图片批处理操作

    首先,通过"窗体菜单"点击"动作".启动动作栏. 然后.通过动作栏的菜单,新建动作. 接着,完毕一个标准操作,包含打开图像,图像处理或者格式转换,另存为,等. ...

  5. 深度拷贝java对象

    有时,如,修改session中对象的时候,如果直接修改session中的对象,修改步骤比较多,一部分修改成功,另一部分不成功,这个时候程序报错,数据库会回滚,但是session已经修改一部分了. 这样 ...

  6. linux关于用户密码家目录总结

    创建用户及其家目录useradd -d /home/tomcat -m tomcat接着修改密码passwd tomcat usermod -s /sbin/nologin + 用户名 禁止登录ssh ...

  7. BZOJ 3211 线段树+并查集

    思路: 我们很容易发现 一个数开根号 开几(很小)次 就到了1 1 再怎么开 都是1 由于这个性质 我们就可以用并查集 了 //By SiriusRen #include <cmath> ...

  8. Asp.Net Core 之 appsettings.json

    原文:Asp.Net Core 之 appsettings.json appsettings.json是什么? 相信大家在.Net Framework的项目都会用的web.config,app.con ...

  9. 树莓派开机运行Python脚本 控制LED灯闪烁

    一.新建一个开机运行文件 在 /home/pi/.config 下创建一个文件夹,名称为 autostart,并在该文件夹下创建一个led.desktop文件(文件名以.desktop结尾) 编辑le ...

  10. Docker学习总结（6）——通过 Docker 化一个博客网站来开启我们的 Docker 之旅

    通过 Docker 化一个博客网站来开启我们的 Docker 之旅 这篇文章包含 Docker 的基本概念,以及如何通过创建一个定制的 Dockerfile 来 Docker 化Dockerize一个 ...