基本选择器:

 $("#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. andoid下的股票行情开发

    1.信息类 public class SinaStockInfo { /** * Sina股票数据接口 以大秦铁路(股票代码:601006)为例,如果要获取它的最新行情,只需访问新浪的股票数据 * 接 ...

  2. 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.7.Slider控件

    默认slider的安装启用 为slider自定义风格 修改配置选项 创建一个垂直的slider 设置最大最小值,和默认值 启用多个 手柄 和 范围 slider内置的回调事件 slider的方法 这个 ...

  3. JavaScript,base64加密解密

    直接下载吧: http://files.cnblogs.com/files/xiluhua/base64Decode.js

  4. MySQL数据库的常用操作

    /*创建表*/ CREATE TABLE tb_test ( id ) unsigned NOT NULL AUTO_INCREMENT COMMENT '自增主键', name ) NOT NULL ...

  5. 3、JavaScript

    1.    JavaScript简介 1.1. JavaScript由来 Netscape 发明了 JavaScript JavaScript由Netscape 在1995年发明.早期的主要目的是处理 ...

  6. source insight项目文件列表固定嵌入右侧

    项目文件列表悬浮出来,不是嵌入紧靠右边,先将该窗口最小化,然后往右拖放,就成功固定嵌入到右边了.

  7. 每日一九度之 题目1023:EXCEL排序

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:18804 解决:4240 题目描述:     Excel可以对一组纪录按任意指定列排序.现请你编写程序实现类似功能.     对每个测试用例 ...

  8. Finding Nemo 分类: POJ 2015-07-11 10:11 10人阅读 评论(0) 收藏

    Finding Nemo Time Limit: 2000MS   Memory Limit: 30000K Total Submissions: 8117   Accepted: 1883 Desc ...

  9. Windows上Python3.5安装Scrapy(lxml) 以及与twisted有关错误的解决

    转载于:http://www.cnblogs.com/silverbullet11/p/4966608.html 常用网址: Python 3.5: https://www.python.org/do ...

  10. SIGPIPE信号详解

    转自:http://blog.csdn.net/lmh12506/article/details/8457772 前一段面试的时候被问到项目中有没有处理SIGPIPE信号,怎么处理的?当时没有答出来, ...