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 ...
随机推荐
- Quartz源码——Quartz调度器的Misfire处理规则（四）
Quartz调度器的Misfire处理规则 调度器的启动和恢复中使用的misfire机制,还需细化! SimpleTrigger的misfire机制 默认的 Trigger.MISFIRE_INSTR ...
- Linux Bash Shell字符串截取
#!/bin/bash#定义变量赋值时等号两边不能有空格,否则会报命令不存在 # 运行shell脚本两种方式 # 1.作为解释参数 /bin/sh test.sh ; 2.作为可执行文件 chmo ...
- R语言包下载（转载）
http://blog.csdn.net/hongjinlongno1/article/details/53130893 包含几乎所有包,很方便
- 关于el-dialog，我更推荐的用法
最近的项目里用上了vue和element-ui.vue这种轻量级渐进式框架的舒适自不必说,但一直困扰着我的,是如何方便又优雅的弹出模态dialog... 对于我这种在jquery出现之前就用docum ...
- Java历程-初学篇 Day05选择结构(2)
一,switch 由于本作者学的是jdk6.0版本,我知道7.0可以使用字符串,但是我就不改了 语法: switch(char类型/int类型){ case 值: //输出 break; ... de ...
- Request.QueryString("id"）与Request("id")区别
Request从几个集合取数据是有顺序的,从前到后的顺序依次是 QueryString,Form,最后是ServerVariables.Request对象按照这样的顺序依次搜索这几个集合中的变量,如果 ...
- FPGA在其他领域的应用(二)
计算机和存储领域: 计算机技术和存储技术发展迅猛.如今,云计算正在实现对传统 IT 功能和全新功能的整合.例如,许多大型数据中心目前正在同时提供传统的 IT 服务以及新型的数据分析服务. 因此,这些大 ...
- javaScript基础的基础
JavaScript是一个脚本语言,需要有宿主文件,他的宿主文件是HTML文件. 与JAVA没有直接关系 一般写在 1.head里面 2.body里面 3.</html>后面 一般写在&l ...
- SAP 发送邮件 面向对象
REPORT ZMMR0068_YYN. CONSTANTS: gc_tab TYPE c VALUE cl_bcs_convert=>gc_tab, "CL_ABAP_CHAR_UT ...
- Servlet实现后台分页查询
相信大家在搭建后台的时候,经常会使用到分页功能,当然,目前有不少框架(如esayUI)都自带分页的实现,为了更好的理解分页原理,近期本人自己摸索了关于分页查询的一些心得. 归根结底,分页的核心还是在封 ...