基本选择器：

 $("#none").css("background","#bbffaa");

改变id为none的所有元素的背景色

 $(".mini").css("background","#bbffaa");

改变class为mini的所有元素的背景色

 $("*").css("background","#bbffaa");

改变所有元素的背景色

 $("span,#two").css("background","#ddffaa");

改变所有<span>元素和id 为two的元素的背景色

层次选择器

 $("ancestor descendant")

选取ancestor元素里的所有descendant(后代)元素

$("div span")选取<div>里所有的<span>元素

 $("parent>child")

选取parent元素下的child（子）元素，与$("ancestor descendant")有区别，$("ancestor descendant")选择的是后代元素

$("div>span")选取<div>元素下元素名是<span>的子元素

 $("prev + next")

选取紧接在prev元素后的next元素

$(".one+div")选取class为none的下一个<div>同辈元素

 $("prev~siblings")

选取prev元素之后的所有siblings元素

$("#two~div")选取id为two的元素后面的所有的<div>同辈元素

 $("body div").css("background","#bfa");

改变<body>内所有<div>的背景色

 $("body>div").css("background"."#bfa");

改变<body>内子<div>元素的背景色

 $(".one+div").css("background","#bfa");

改变class为one的下一个<div>同辈元素背景色

 $("#two - div").css("background","#bfa");

改变id为two的元素后面的所有<div>同辈元素的背景色

等价关系

$(".one+div")    与    $(".one").next("div")   相等

$("#prev~div")    与   $("#prev").nextAll("div")   相等

摘自《锋利的JQuery》 第二章  2.31 基本选择器  2.3.2 层次选择器

Jquery基本、层次选择器的更多相关文章

  1. 黑马day16 jquery&amp;层次选择器

    假设想通过DOM元素之间的层次关系来获取特定元素,比如后代元素,子元素,相邻元素,兄弟元素等,则须要使用层次选择器. 1 .ancestor descendant 使用方法: $("form ...

  2. jQuery之层次选择器

    层次选择器: 查找子元素, 后代元素, 兄弟元素的选择器1. ancestor descendant 在给定的祖先元素下匹配所有的后代元素2. parent>child 在给定的父元素下匹配所有 ...

  3. JQuery 层次选择器

    <!DOCTYPE HTML> <html> <head> <title> 使用jQuery层次选择器 </title> <scrip ...

  4. jQuery层次选择器

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  5. jQuery选择器介绍：基本选择器、层次选择器、过滤选择器、表单选择器

    选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.因此,如果能熟练的使用选择器,不仅能简化代码,而且可以达到事半功倍的效果.jQuery选择器完全继承了 ...

  6. jQuery选择器之层次选择器Demo

    测试代码: 02-层次选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  7. jQuery基础学习7——层次选择器find()方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. jQuery选择器---层次选择器总结

    今天要分享的是jQuery层次选择器,层次选择器的分类如图: 接下来就开始了 要不先养养眼精神一下: 开始1.祖先选择器: 案例: <form> <label>Name:< ...

  9. jquery层次选择器：空格 > next + nextAll ~ siblings

    全栈工程师开发手册 (作者:栾鹏) jquery系列教程1-选择器全解 jquery层次选择器 jquery层次选择器,包括空格.>.next.+.nextAll.~.siblings等函数或表 ...

随机推荐

  1. 【Pro ASP.NET MVC 3 Framework】.学习笔记.10.SportsStore：上传图片

    1 扩展数据库 打开表定义,新增两列可空 ) 2 增强领域模型 为Products类添加如下属性 publicstring ImageMimeType { get; set; } 第一个属性不会在界面 ...

  2. 【Pro ASP.NET MVC 3 Framework】.学习笔记.2.MVC的主要工具-Ninject

    这三个工具,应该是每个MVC程序员的兵工厂中的一部分.DI容器,单元测试框架,mocking 工具.Ninject是我们偏爱的DI容器,它简单,高雅,并且容易使用.这里有很多复杂的替代品,但是我们喜欢 ...

  3. 正则表达式用户名密码电话身份证Email使用

    月末了,这个月才写了2遍文章,对自己略感失望了,最近是有些忙,等闲些日子后,再整理一些文章分享给大家! 这遍是关于正则表达式,因为写项目时要用到正则表达式,所以就学习了下,另写一遍文章,方便记忆! 1 ...

  4. C++Lua配置

    1.先从lua官网下载lua新版本http://www.lua.org/,我这里以lua-5.3.0.tar.gz为例,大小不到300kb 2.解压后出现如下图 3.在vs2013新建工程静态库类型( ...

  5. java中方法的参数传递机制（值传递还是引用传递）

    看到一个java面试题: 问:当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里到底是值传递还是引用传递?  答:是值传递.Java 编程语言只有值传递参 ...

  6. RadioGroup+Fragment 使用Fragment的add（）方法，防止使用replace每次都重新加载页面，造成资源浪费

    radiogroup+fragment是很常用的主页导航控件,之前为了代码简便一直使用的replace()替换fragment,代码如下: getSupportFragmentManager().be ...

  7. 新学习的语言Groovy

    什么是 Groovy? Groovy 是 JVM 的一个替代语言 —替代 是指可以用 Groovy 在 Java 平台上进行 Java 编程,使用方式基本与使用 Java 代码的方式相同.在编写新应用 ...

  8. css写法优化

    写css关于id,class等的命名,文件的结构,共同模块的提取,代码的复用性,可读性,扩展性,维护性都要考虑,不然后期可以会需要花大力气去进行维护修改.考虑写出足够科学的css,需要考虑下面几个方面 ...

  9. 杭电1020-Encoding

    Problem Description Given a string containing only 'A' - 'Z', we could encode it using the following ...

  10. 关于基于webrtc的android-apk 和 webrtc-brows

    这一段时间我在做一些关于基于webrtc应用的一些研究,做个一个android的demo,详情如下: 手机客户端:   基于webrtc的 android apk   (webrtc 代码版本 R67 ...