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. LINUX 系统初始化脚本

    #!/bin/bash ######the system first start configuretion #####for install  ####copy right by donglei## ...

  2. Qt编译mysql以及创建表后进行导入操作

    鉴于很多同学对Qt编译myql总是不能成功.出现各种问题,今天特此写出本教程,希望可以帮到须要的同学.        首先,须要明确编译的目的和原理. 目的:Qt 5.2版本号曾经都是不带mysql驱 ...

  3. kafka offset的存储问题

    注意:从kafka-0.9版本及以后,kafka的消费者组和offset信息就不存zookeeper了,而是存到broker服务器上,所以,如果你为某个消费者指定了一个消费者组名称(group.id) ...

  4. 自定义分页控件-基于Zhifeiya的分页控件改版

    基于Zhifeiya的分页控件改版的分页. html显示代码: <div class="pagelist"> {{.pagerHtml}} </div> c ...

  5. POJ 1191 记忆化搜索

    (我是不会告诉你我是抄的http://www.cnblogs.com/scau20110726/archive/2013/02/27/2936050.html这个人的) 一开始没有想到要化一下方差的式 ...

  6. 机器学习(三) Jupyter Notebook, numpy和matplotlib的详细使用 (上)

    工欲善其事,必先利其器.在本章,我们将学习和机器学习相关的基础工具的使用:Jupyter Notebook, numpy和matplotlib.大多数教程在讲解机器学习的时候,大量使用这些工具,却不对 ...

  7. JWT 使用介绍

    转载收藏于 http://www.cnblogs.com/zjutzz/p/5790180.html JWT是啥? JWT就是一个字符串,经过加密处理与校验处理的字符串,形式为: A.B.C A由JW ...

  8. How Blink works

    How Blink works Author: haraken@ Last update: 2018 Aug 14 Status: PUBLIC Working on Blink is not eas ...

  9. Linux PuTTY 更改字体

    Linux PuTTY默认的字体比较小看着比较不舒服,Linux PuTTY的字体更改与Windows下的设置有所不同 1.Linux PuTTY默认的字体 ,Font used for ordina ...

  10. HP 1022N 网络打印机安装步骤

    HP 1022N 网络打印机安装步骤