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 ...
随机推荐
- Floyd算法（最短路）
如题,这是最短路算法Floyd. Floyd,是只有五行的代码. 简单,易懂.O(N的三方)的时间也可以. 遇到简单的就这么用. #include<iostream> #include&l ...
- 第5章 不要让线程成为脱缰的野马（Keeping your Threads on Leash） ----初始化一个线程
使用线程的一个常见问题就是如何能够在一个线程开始运行之前,适当地将它初始化.初始化最常见的理由就是为了调整优先权.另一个理由是为了在SMP 系统中设定线程比较喜欢的 CPU.第10 章谈到 MFC 时 ...
- 【转】Spark运行过程
http://www.cnblogs.com/1130136248wlxk/articles/6289717.html
- Centos7搭建swarm集群
1. 准备 两台虚拟机,IP分别为: 192.168.1.104 192.168.1.105 保证能互相 ping 通 2. 修改虚拟机的 host,分别任 c1.c2 在 192.168.1.105 ...
- Python实战之SocketServer模块
文章出处:http://www.cnblogs.com/wupeiqi/articles/5040823.html SocketServer内部使用 IO多路复用 以及 "多线程" ...
- 使用Jquery.cookie.js操作cookie
query.cookie.js是一个基于jquery的插件,点击下载! 创建一个会话cookie: $.cookie(‘cookieName’,'cookieValue’); 注:当没有指明cooki ...
- 简述static关键字、void与void *(void指针)、函数指针
static关键字1.修饰局部变量,延长局部变量的生命周期.使变量成为静态局部变量,在编译时就为变量分配内存,直到程序退出才释放存储单元.2.修饰全局变量,限制全局变量的使用范围为本文件中.全局变量默 ...
- TensorFlow问题:The TensorFlow library wasn't compiled to use SSE4.2 instructions, but these are available on your machine and could speed up CPU computations.
1. 问题描述 The TensorFlow library wasn't compiled to use SSE4.2 instructions, but these are available o ...
- UWP取出图片主色调
一切都要从风车动漫的新详情页说起... 当我最初拿到风车动漫新详情页的UI设计概念图时,新详情页中有两点: 1.图片的高斯模糊 2.取出图片的主色调(主要用于tag和相关动漫的标题背景) 大概就是要这 ...
- C++大数精度计算(带小数点)
转: (原出处不可考,若有侵权,请联系我立即删除) 头文件: // WTNumber.h: interface for the CWTNumber class. // //////////////// ...