003 jquery层次选择器
1.介绍
2.程序
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>Insert title here</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-3.2.1.min.js"></script>
- <script type="text/javascript">
- $(function(){
- //选择 body 内的所有 div 元素
- $("#btn1").click(function(){
- $("body div").css("background", "#ffbbaa");
- });
- //在 body 内, 选择子元素是 div 的.
- $("#btn2").click(function(){
- $("body > div").css("background", "#ffbbaa");
- });
- //选择 id 为 one 的下一个 div 元素
- $("#btn3").click(function(){
- $("#one + div").css("background", "#ffbbaa");
- });
- //选择 id 为 two 的元素后面的所有 div 兄弟元素
- $("#btn4").click(function(){
- $("#two ~ div").css("background", "#ffbbaa");
- });
- //选择 id 为 two 的元素所有 div 兄弟元素
- $("#btn5").click(function(){
- $("#two").siblings("div").css("background", "#ffbbaa");
- });
- //选择 id 为 one 的下一个 span 元素
- $("#btn6").click(function(){
- //以下选择器选择的是近邻 #one 的 span 元素, 若该span
- //和 #one 不相邻, 选择器无效.
- //$("#one + span").css("background", "#ffbbaa");
- $("#one").nextAll("span:first").css("background", "#ffbbaa");
- });
- //选择 id 为 two 的元素前边的所有的 div 兄弟元素
- $("#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>
003 jquery层次选择器的更多相关文章
- JQuery 层次选择器
<!DOCTYPE HTML> <html> <head> <title> 使用jQuery层次选择器 </title> <scrip ...
- jquery层次选择器:空格 > next + nextAll ~ siblings
全栈工程师开发手册 (作者:栾鹏) jquery系列教程1-选择器全解 jquery层次选择器 jquery层次选择器,包括空格.>.next.+.nextAll.~.siblings等函数或表 ...
- jQuery层次选择器
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- jQuery层次选择器再探究(原创)
关于层次选择器的详解: 1)可以选取某一个元素的所有的后代元素,得到一个jQuery对象的集合--->$('prev descendant') 2)可以选取某一个元素的子辈的所有的元素,得到一个 ...
- 温故知新-------jQuery层次选择器
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></titl ...
- jQuery选择器---层次选择器总结
今天要分享的是jQuery层次选择器,层次选择器的分类如图: 接下来就开始了 要不先养养眼精神一下: 开始1.祖先选择器: 案例: <form> <label>Name:< ...
- jquery 常用选择器和方法以及遍历(超详细)
jQuery 常用选择器和和方法 学习总结 一.JQuery 介绍 1. 什么是 jQuery 2. jQuery 版本介绍 3. jQuery 文件介绍 二.jQuery 对象 1. jQuery ...
- Jquery基本、层次选择器
基本选择器: $("#none").css("background","#bbffaa"); 改变id为none的所有元素的背景色 $(&q ...
- jQuery选择器介绍:基本选择器、层次选择器、过滤选择器、表单选择器
选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.因此,如果能熟练的使用选择器,不仅能简化代码,而且可以达到事半功倍的效果.jQuery选择器完全继承了 ...
随机推荐
- BZOJ 4380 [POI2015]Myjnie | DP
链接 BZOJ 4380 题面 有n家洗车店从左往右排成一排,每家店都有一个正整数价格p[i]. 有m个人要来消费,第i个人会驶过第a[i]个开始一直到第b[i]个洗车店,且会选择这些店中最便宜的一个 ...
- 结合NTLM中继和Kerberos委派攻击AD
0x00 前言 在上个月我深入演讲了无约束委派之后,本文将讨论一种不同类型的Kerberos委派:基于资源的约束委派.本文的内容基于Elad Shamir的Kerberos研究,并结合我自己的NTLM ...
- Python multiprocessing模块的Pool类来代表进程池对象
#-*-coding:utf-8-*- '''multiprocessing模块提供了一个Pool类来代表进程池对象 1.Pool可以提供指定数量的进程供用户调用,默认大小是CPU的核心数: 2.当有 ...
- Qtree4——动态点分治
题目描述 给出一棵边带权的节点数量为n的树,初始树上所有节点都是白色.有两种操作: C x,改变节点x的颜色,即白变黑,黑变白 A,询问树中最远的两个白色节点的距离,这两个白色节点可以重合(此时距离为 ...
- Andrew Ng机器学习课程,第一周作业,python版本
Liner Regression 1.梯度下降算法 Cost Function 对其求导: theta更新函数: 代码如下: from numpy import * import numpy as n ...
- python的WSGI接口
WSGI:Web Server Gateway Interface. WSGI是为python语言定义的web服务器和web应用程序或框架之间的一种简单而实用的接口.wsgi是一个web组件的接口规范 ...
- C#访问和操作MYSQL数据库
这里介绍下比较简单的方式,引用MySql.Data.dll然后添加一个MySqlHelper类来对MySql数据库进行访问和操作. 1.将MySql.Data.dll引用到你的项目中 下载地址:MyS ...
- Tomcat权威指南-读书摘要系列9
从源代码组建Tomcat 安装Apache Ant ant是make的开放源代码的替代品,而且是专门为java程序语言设计. Ant的最初用途是作为Tomcat的组建工具: 之后,Ant成为Java软 ...
- Hadoop上传文件时报错: could only be replicated to 0 nodes instead of minReplication (=1)....
问题 上传文件到Hadoop异常,报错信息如下: org.apache.hadoop.ipc.RemoteException(java.io.IOException): File /home/inpu ...
- iOS11有哪些新功能?旧iPhone是否真的变慢了
1. [iOS 11] iOS 11十大实用新功能简介 2.[iOS 11] iPhone二维码扫描,通过内建相机就可以完成! 3. iOS 11内建屏幕录制功能!再也不需要通过第三方应用录屏 4. ...