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值中有元字符(如 !"#$%&'()*+,./:;<=> ...
随机推荐
- Http协议总结
Http协议(Hyper Text Transfer Protocol)是目前网络上使用最广泛的,面向应用层的协议.它基于传输层的TCP协议进行通信.它是一种通用的,无状态的协议(不对当前的状态进行记 ...
- Creating Materials at runtime And Issue of Shader.Find()
Creating Materials at runtimehttp://forum.unity3d.com/threads/create-materials-at-runtime.72952/ //通 ...
- POJ----(3974 )Palindrome [最长回文串]
Time Limit: 15000MS Memory Limit: 65536K Total Submissions: 5121 Accepted: 1834 Description Andy ...
- 学习PYTHON之路， DAY 1 - PYTHON 基础 1
一 PYTHON 安装 1. Python下载 (1) www.python.org官网 (2) 选择可执行文件( 64位3.5.2Windows x86-64 executable installe ...
- 算法课堂笔记14—NP-COMPLETENESS
今天的算法课接着上一节,说的是NP问题. 1.关于什么是P和NP问题 所谓P问题是指所有能在多项式复杂度解决的问题,比如排序算法,n*n复杂度解决问题.而对于有些问题,目前可能没有多项式复杂度的解决方 ...
- Project2010简易操作指南[转]
Microsoft Office Project 2010 操作手册 英文界面版 一.启动阶段 1. 前期准备 (1)新建项目文件 选择 File — NewNew 菜单, 选择项目模版 打开项目文件 ...
- PDF 补丁丁 0.4.3.1342 测试版发布：修复崩溃问题
PDF 补丁丁 0.4.3.1342 测试版发布了. 此测试版修复了之前测试版在合并文件.书签编辑器.文档结构探查器中出现的崩溃问题. 推荐下载了0.4.3测试版的网友尽快更新.
- user-select : 保护版权内容的简单方案
有的适合我们需要保护我们页面的内容,为了版权或者安全等原因,这个适合我们可以使用 user-select 这个CSS属性,简单易用. 嗯,这个属性不麻烦,而且也不是 CSS 3 / CSS 4 的新属 ...
- 连接到CentOS(Linux)服务器ssh、mysql缓慢
现象: 服务器163与服务器164在同一机柜,双绞线直接连接,从办公室或者服务器163去连机服务器164的ssh.mysql均缓慢,让机房人员查了,无果.而164却正常. 最后发现两个机器/etc/r ...
- centos下载jdk
wget --no-cookies --no-check-certificate --header "Cookie: gpw_e24=http%3A%2F%2Fwww.oracle.com% ...