jQuery选择器(层级选择器)第二节
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <style type="text/css"> div, span, p { width: 140px; height: 140px; margin: 5px; background: #aaa; border: #000 1px solid; float: left; font-size: 17px; font-family: Verdana; } div.mini { width: 55px; height: 55px; background-color: #aaa; font-size: 12px; } div.hide { display: none; } </style> <script type="text/javascript" src="jquery-1.7.2.js"></script> <script type="text/javascript"> $(function(){ $("#btn1").click(function(){ $("body div").css("background", "#ffbbaa"); }); $("#btn2").click(function(){ $("body > div").css("background", "#ffbbaa"); }); $("#btn3").click(function(){ $("#one + div").css("background", "#ffbbaa"); }); $("#btn4").click(function(){ $("#two ~ div").css("background", "#ffbbaa"); }); $("#btn5").click(function(){ $("#two").siblings("div").css("background", "#ffbbaa"); }); $("#btn6").click(function(){ //以下选择器选择的是近邻 #one 的 span 元素, 若该span //和 #one 不相邻, 选择器无效. //$("#one + span").css("background", "#ffbbaa"); $("#one").nextAll("span:first").css("background", "#ffbbaa"); }); $("#btn7").click(function(){ $("#two").prevAll("div").css("background", "#ffbbaa"); }); }) </script> </head> <body> <input type="button" value="选择 body 内的所有 div 元素" id="btn1" /> <input type="button" value="在 body 内, 选择子元素是 div 的." id="btn2" /> <input type="button" value="选择 id 为 one 的下一个 div 元素" id="btn3" /> <input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素" id="btn4" /> <input type="button" value="选择 id 为 two 的元素所有 div 兄弟元素" id="btn5" /> <input type="button" value="选择 id 为 one 的下一个 span 元素" id="btn6" /> <input type="button" value="选择 id 为 two 的元素前边的所有的 div 兄弟元素" id="btn7" /> <br><br> <div class="one" id="one"> id 为 one,class 为 one 的div <div class="mini">class为mini</div> </div> <div class="one" id="two" title="test"> id为two,class为one,title为test的div <div class="mini" title="other">class为mini,title为other</div> <div class="mini" title="test">class为mini,title为test</div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini"></div> </div> <div class="one"> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini">class为mini</div> <div class="mini" title="tesst">class为mini,title为tesst</div> </div> <div style="display:none;" class="none">style的display为"none"的div</div> <div class="hide">class为"hide"的div</div> <div> 包含input的type为"hidden"的div<input type="hidden" size="8"> </div> <span id="span">^^span元素^^</span> <span id="span">--span元素--</span> </body> </html>
jQuery选择器(层级选择器)第二节的更多相关文章
- jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法
jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq ...
- Jquery操作层级选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jQuery的层级选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- jquery div层级选择器
div id="modelName" class="modelName"> <!-- 车系的层 --> <div name=" ...
- JQuery学习笔记——层级选择器
JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...
- Jquery 之 使用选择器
jQuery选择器描述 jQuery选择器是jQuery框架的基础,jQuery对事件的处理.DOM操作.CSS动态控制.Ajax通信.动画设计都是在选择器基础上进行的.jQuery 选择器采用CSS ...
- 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器
× 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...
- 什么是 jQuery 和jQuery的基本选择器,层级选择器,基本筛选器
jQuery是什么? [1] jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. [2] jQuery是继prototype ...
- Jquery | 基础 | 慕课网 | 层级选择器
选择器中的层级选择器处理关系类型: 子元素 后代元素 兄弟元素 相邻元素 <!DOCTYPE html> <html> <head> <meta http-e ...
随机推荐
- pmap 命令详解
通过查看帮助,返回了如下信息: Usage: pmap [options] pid [pid ...] Options: -x, --extended show detai ...
- Linux JDK配置
第一步:下载jdk-7-linux-i586.tar.gz wget -c http://download.oracle.com/otn-pub/java/jdk/7/jdk-7-linux-i586 ...
- 【模版】AC自动机(简单版)
题目背景 这是一道简单的AC自动机模版题. 用于检测正确性以及算法常数. 为了防止卡OJ,在保证正确的基础上只有两组数据,请不要恶意提交. 题目描述 给定n个模式串和1个文本串,求有多少个模式串在文本 ...
- P60 2.6
import java.util.Scanner; public class Num { public static void main(String[] args) { Scanner input ...
- Jquery插件之ajaxForm ajaxSubmit的理解用法(转)
我们在平常使用Jquery异步提交表单,一般是在submit()中,使用$.ajax进行.比如: $(function(){ $('#myForm').submit(function(){ $.aja ...
- 开源纯C#工控网关+组态软件(三)加入一个新驱动:西门子S7
一. 引子 首先感谢博客园:第一篇文章.第一个开源项目,算是旗开得胜.可以看到,项目大部分流量来自于博客园,码农乐园,名不虚传^^. 园友给了我很多支持,并提出了很好的改进意见.现加入屏幕分辨率自 ...
- ASP.Net MVC 布局页 模板页 使用方法详细说明
一.Views文件夹 -> Shared文件夹下的 _Layout.cshtml 母版页 @RenderBody 当创建基于_Layout.cshtml布局页面的视图时,视图的内容会和布局页面合 ...
- C-图文上边对齐
1.效果 1.1 样式设置 2 效果 2.1 样式
- webpack2使用ch6-babel使用 处理es6 优化编译速度
1 目录结构 安装依赖 cnpm install --save-dev babel-loader babel-core babel-preset-env babel-preset-latest &qu ...
- Python系列之内置函数
内置函数 一.数学运算类: abs(a):求绝对值如果参数是个复数则返回复数的模. a = abs(-1) print(a) >>>1 compilex([real[, imag]] ...