jquery选择器之层级选择器
HTML示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--HTML区域-->
<div class="nav-2014">
<div class="w">
<div class="w-spacer"></div>
<div class="categorys">
<div class="dt">家用电器分类</div>
</div>
<span class="hr"></span>
<div class="navitems-2014">
<div id="treasure"></div>
<span class="clr"></span>
<span class="chr"></span>
</div>
</div>
</div>
<div id="electronic">
<div id="firstScreen">
<div class="w"></div>
</div>
<ul>
<div class="u_c"></div>
<li class="ui-switch-curr"></li>
<li class="ui-switch-item"></li>
</ul>
<div class="secord_screen"></div>
<div class="third_screen"></div>
</div>
</body> </html>
1、ancestor descendant 祖先 子孙选择器，在给定的祖先元素下匹配所有的后代元素.
<script src="jquery-3.1.0.js"></script>
<script>
// 取类.nav-2014的子孙为span的元素,选择了类nav-2014下所有span子元素
$(".nav-2014 span")
</script>
运行结果：选择了类nav-2014下一个父sapn,二个孙span
2、parent > child:父子选择器，在给定的父元素下匹配所有的子元素。
<script>
// 取id为electronic的子元素为div的元素,选择了id为electronic下的二个子div（firstScreen，secord_screen）
$("#electronic > div")
</script>
3、prev + next :下一个选择器，在给定的前一个元素下匹配next 元素。
<script>
// 取ul的下一个元素为div的元素，取到紧跟form后平级的span元素,结果选择了类secord_screen
$("ul + div")
</script>
4、prev ~ siblings:在给定的前一个元素下之后的所有siblings 元素。
<script>
// 选择id为firstScreen后所有邻居中为div的元素
$("#firstScreen + div")
</script>
jquery选择器之层级选择器的更多相关文章
- jquery选择器之层级过滤选择器
$("ancestor descendant"):选取parent元素后所有的child元素 $("parent > child"):选取parent元素 ...
- jQuery选择器之属性选择器Demo
测试代码: 06-属性选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
- jQuery选择器之层次选择器Demo
测试代码: 02-层次选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
- jQuery选择器之基本选择器Demo
测试代码: 01-基本选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
- jQuery选择器之id选择器
页面的任何操作都需要节点的支撑,开发者如果快速高效的找到指定的节点也是前端开发中的一个重点.jQuery提供了一系列的选择器帮助开发者达到这一目的,让开发者可以更少的处理复杂选择过程与性能优化,更多专 ...
- 繁星——JQuery选择器之层级
[ancestor descendant] 在给定元素下匹配所有后代元素.这个选择器的使用概率相当之高,使用示例如下: //HTML代码: <div id='div01'> <inp ...
- jquery选择器之属性选择器
[attribute] 匹配指定属性名的所有元素 [attribute=value] 匹配给定的属性名是某个特定值的属性 [attribute!=value] 匹配给定的属性名不是某个特定值的属性 ...
- jquery选择器之内容选择器
HTML示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- Jquery选择器之基本选择器
id选择器 共同点: text:代表标签之间的文本值 返回值:均为列表 根据给定的ID值匹配一个标签元素,如果id值中有元字符(如 !"#$%&'()*+,./:;<=> ...
随机推荐
- java 导出Excel文件
最近在做一个文件导出功能,发现大部分博客上通过引用各种的util工具包,其实说白了还是利用apache的poi,在项目中直接导入poi包就可以.直面其原理,随个人喜好封装. 1.首先准备一些poi的j ...
- Android 通知栏Notification的整合 全面学习 （一个DEMO让你完全了解它）
在android的应用层中,涉及到很多应用框架,例如:Service框架,Activity管理机制,Broadcast机制,对话框框架,标题栏框架,状态栏框架,通知机制,ActionBar框架等等. ...
- Security » Authorization » 简单授权
Simple Authorization¶ 简单授权 82 of 86 people found this helpful Authorization in MVC is controlled thr ...
- Java与mysql数据库编程中遇见“Before start of result set at com.mysql.jdbc.SQLError.createSQLException” 的解决办法
这个Bug是因为在取出ResultSet对象,对其进行操作时,没有采用.next()方法将ResultSet对象的光标移至指定行,不管Statement对象执行SQL语句是否十分确定能搜出记录,也不可 ...
- 0020 Linux 文件操作命令
1. 创建文件 touch 文件名 2. 删除文件 rm 文件名 3. 复制文件 cp 源文件 目录 4.剪切文件 mv 源文件 目标文件 5.重命名文件 mv 源文件名 新文件名 6.改变文件权限 ...
- 基础知识复习（二）——stdafx.h 头文件及x&(x-1)运算
今天好久没写过C++程序了,使用VS2013 新建空的控制台程序,结果自动生成了头文件和main 方法. 就了解了stdafx.h头文件的含义及用法. stdafx:standard Applicat ...
- python中lambda表达式应用
对于简单的函数,也存在一种简便的表示方式,即:lambda表达式 #普通函数1 def func(a): return a+1 print 'test1_func0:',func(1000)4#lam ...
- Linux系统资源监控命令
转自http://www.51testing.com/html/16/271416-149128.html 衡量CPU性能的指标: 1,用户使用CPU的情况:CPU运行常规用户进程CPU运行niced ...
- CodeForces #369 div2 D Directed Roads DFS
题目链接:D Directed Roads 题意:给出n个点和n条边,n条边一定都是从1~n点出发的有向边.这个图被认为是有环的,现在问你有多少个边的set,满足对这个set里的所有边恰好反转一次(方 ...
- 转: 什么是REST？
REST (REpresentation State Transfer) 描述了一个架构样式的网络系统,比如 web 应用程序.它首次出现在 2000 年 Roy Fielding 的博士论文中,他是 ...