基本选择器：

 $("#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. 鸟哥的linux私房菜---非常好的linux基础网址【转】

    转自:http://linux.vbird.org/linux_basic/0320bash.php 在 Linux 的環境下,如果你不懂 bash 是什麼,那麼其他的東西就不用學了!因為前面幾章我們 ...

  2. Linux 编程中的API函数和系统调用的关系【转】

    转自:http://blog.chinaunix.net/uid-25968088-id-3426027.html 原文地址:Linux 编程中的API函数和系统调用的关系 作者:up哥小号 API: ...

  3. java中OutputStream字节流与字符流InputStreamReader 每一种基本IO流BufferedOutputStream，FileInputStream，FileOutputStream，BufferedInputStream，BufferedReader，BufferedWriter，FileInputStream，FileReader，FileWriter，InputStr

    BufferedOutputStream,FileInputStream,FileOutputStream,BufferedInputStream,BufferedReader,BufferedWri ...

  4. 指令重排序及Happens-before法则随笔

    指令重排序 对主存的一次访问一般花费硬件的数百次时钟周期.处理器通过缓存(caching)能够从数量级上降低内存延迟的成本这些缓存为了性能重新排列待定内存操作的顺序.也就是说,程序的读写操作不一定会按 ...

  5. Linux下Nagios的安装与配置

    一.本文说明 本文是在参考:http://www.cnblogs.com/mchina/archive/2013/02/20/2883404.html   David_Tang文章以及网上的一些资料完 ...

  6. MyISAM表杂记实验

    一.本文说明 由于刚学mysql所以动手做了一些实验. 二.实验内容 1.验证MyISAM有AUOT_INCREMENT coloumn功能 ----在这里是对现有表t,增加一个主键----mysql ...

  7. php curl语句的用法

    system32文件夹下,修改php.ini文件,找到;extension= php_curl.dll行,去掉前面的;号,保存,重启服务器.在站点目录下建立一个PHP文件,内容如下 $ch = cur ...

  8. C++中的类型重定义

    发现重复定义是由于从两个不同的路径包含了同一个头文件而引起的,同事也建议从另外一个路径打开工程试试, 这才慢慢发现了原因.这个原因可能有些拗口,而事实上要出现这种错误也有些"曲折" ...

  9. EffectiveJava笔记（第一部分）

    考虑用静态构造方法代替构造器的好处: 1.静态构造方法有名字     BigInteger.probablePrime(int, int, Random)比 new BigInteger(int, i ...

  10. javaScript判断鼠标滚轮的上下滚动

    分享一个js实现判断鼠标滚轮的上下滚动: <script type="text/javascript"> var scrollFunc = function (e) { ...