深入学习jQuery节点关系
前面的话
DOM可以将任何HTML描绘成一个由多层节点构成的结构。节点之间的关系构成了层次，而所有页面标记则表现为一个以特定节点为根节点的树形结构。下图表示了DOM间的节点关系，而jQuery也存在类似的方法来描述节点关系
后代元素
【children()】
jQuery是一个集合对象，如果想快速查找合集里面的第一级子元素，此时可以用children()方法
children()方法允许通过在DOM树中对这些元素的直接子元素进行搜索，并且构造一个新的匹配元素的jQuery对象
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div>
<i>1</i>
<b>2</b>
<i>3</i>
</div>
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
$('div').children().css('border','1px solid red');
})
</script>
children([selector])
children()方法可以接受一个用于匹配元素的选择器字符串作为参数
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div>
<i>1</i>
<b>2</b>
<i>3</i>
</div>
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
$('div').children('i').css('border','1px solid red');
})
</script>
[注意]children()方法只能找出第一级子元素
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="box">
<div>
<i>1</i>
<b>2</b>
<i>3</i>
</div>
</div>
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
$('#box').children().css('border','1px solid red');
})
</script>
【find()】
find()方法通过一个选择器，jQuery对象，或元素过滤，得到当前匹配的元素集合中每个元素的后代，匹配的元素将构造一个新的jQuery对象
find()和children()方法是相似的，只是children()方法查找子元素，而find()方法查找后代元素
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="box">
<div>
<i>1</i>
<b>2</b>
<div>3</div>
</div>
</div>
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
$('#box').find('div').css('border','1px solid red');
})
</script>
[注意]find()方法必须有参数才有效。如果想要查找所有后代元素，需要传递参数为'*'
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="box">
<div>
<i>1</i>
<b>2</b>
<i>3</i>
</div>
</div>
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
$('#box').find('*').css('border','1px solid red');
})
</script>
【contents()】
contents()方法获得匹配元素集合中每个元素的子元素，包括文字和注释节点，这个方法不接受任何参数
contents()和children()方法类似，只不过前者包括文本节点以及jQuery对象中产生的HTML元素
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<br /><br />
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</div>
<script>
console.log($('div').children())//[br, br, prevObject: init[1], context: document]
console.log($('div').contents())//[text, br, br, text, prevObject: init[1], context: document]
</script>
【contains()】
contains(container, contained)是一个工具方法，用来检查一个DOM元素是否是另一个DOM元素的后代
如果第二个参数所提供的DOM元素是第一个参数DOM元素的后裔，那么$.contains()方法返回true，无论是直接的子元素或者是后代元素。否则，返回false
[注意]该方法只支持元素节点，如果第二个参数是一个文本或注释节点，$.contains()将返回 false
console.log($.contains( document.documentElement, document.body ));//true
console.log($.contains( document.body, document.documentElement ));//false
祖先元素
【parent()】
parent()方法能够在DOM树中搜索到这些元素的父级元素
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div>
<i>1</i>
<b>2</b>
<i>3</i>
</div>
<p>
<i>1</i>
<b>2</b>
<i>3</i>
</p>
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
$('i').parent().css('border','1px solid red');
})
</script>
parent([selector])
parent()方法可以接受一个用于匹配元素的选择器表达式字符串作为参数进行筛选
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div>
<i>1</i>
<b>2</b>
<i>3</i>
</div>
<p>
<i>1</i>
<b>2</b>
<i>3</i>
</p>
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
$('i').parent('div').css('border','1px solid red');
})
</script>
【parents()】
与parent()方法不同，parents()方法获取的是祖先元素，而parent()方法获取的是父级元素
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div>
<i>1</i>
<i><b>2</b></i>
<i>3</i>
</div>
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
$('b').parents().css('border','1px solid red');
})
</script>
parents([selector])
parents()方法可以接受一个用于匹配元素的选择器表达式字符串作为参数进行筛选
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div>
<i>1</i>
<i><b>2</b></i>
<i>3</i>
</div>
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
$('b').parents('div').css('border','1px solid red');
})
</script>
【parentsUntil()】
parent()方法匹配父元素，parents()方法匹配祖先元素，而parentsUntil()方法则在parents()方法的基础上，确定匹配到哪个祖先元素时停止匹配
parentsUntil([selector][,filter])
parentsUntil()方法接受两个参数。第一个参数是一个选择器字符串、DOM节点或jQuery对象，用于确定到哪个祖先元素时停止匹配，不包括参数中的元素。第二个参数是一个筛选字符串，用于匹配元素的选择器字符串
当parentsUntil()方法没有参数时，和parents()方法作用相同
【1】没有参数时
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div>
<i>1</i>
<i><b>2</b></i>
<i>3</i>
</div>
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
$('b').parentsUntil().css('border','1px solid red');
})
</script>
【2】存在一个参数时
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div>
<i>1</i>
<i><b>2</b></i>
<i>3</i>
</div>
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
$('b').parentsUntil('div').css('border','1px solid red');
})
</script>
【3】存在两个参数时
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div>
<i>1</i>
<i><b>2</b></i>
<i>3</i>
</div>
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
$('b').parentsUntil('body','div').css('border','1px solid red');
})
</script>
【closest(selector)】
closest()方法从自身元素开始(包括自身元素)，在DOM树中向上遍历，直到找到了与提供的选择器相匹配的元素，返回包含零个或一个元素的jQuery对象
closest()方法的参数是一个用于匹配元素的选择器字符串、jQuery对象或DOM元素。若匹配，则返回该元素的jQuery对象，否则，返回包含0个元素的jQuery对象
[注意]closest()方法必须接受参数，否则无效
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div>
<i>1</i>
<i><b>2</b></i>
<i>3</i>
</div>
<button id="btn1">按钮一</button>
<button id="btn2">按钮二</button>
<button id="btn3">按钮三</button>
<script>
$('#btn1').click(function(){
$('b').closest('p').css('border','1px solid red');
})
$('#btn2').click(function(){
$('b').closest('b').css('border','1px solid red');
})
$('#btn3').click(function(){
$('b').closest('body').css('border','1px solid red');
})
</script>
兄弟元素
【siblings([selector])】
siblings()方法可以获得匹配元素集合中每个元素的兄弟元素
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li class="third-item">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
$('.third-item').siblings().css('border','1px solid red');
})
</script>
siblings()方法可以接受一个用于匹配元素的选择器字符串作为参数来筛选元素
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li class="third-item">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
$('.third-item').siblings(':contains("1")').css('border','1px solid red');
})
</script>
【next([selector])】
next()方法返回匹配的元素集合中每一个元素紧邻的后面兄弟元素的元素集合
next()方法接受一个选择器字符串作为参数，只有紧跟着的兄弟元素满足选择器时，才会返回此元素
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div>
<i>1</i>
<b><i>2</i></b>
<i>3</i>
</div>
<button id="btn1">按钮一</button>
<button id="btn2">按钮二</button>
<button id="btn3">按钮三</button>
<script>
$('#btn1').click(function(){
$('b').next().css('border','1px solid red');
})
$('#btn2').click(function(){
$('i:contains("2")').next().css('border','1px solid red');
})
$('#btn3').click(function(){
$('b').next('b').css('border','1px solid red');
})
</script>
【nextAll()】
next()方法表示当前元素的后一个兄弟元素，而nextAll()方法表示当前元素后面的所有兄弟元素
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li class="third-item">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
$('.third-item').nextAll().css('border','1px solid red');
})
</script>
nextAll()方法可以接受一个选择器字符串用于筛选元素
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li class="third-item">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
$('.third-item').nextAll(':contains("4")').css('border','1px solid red');
})
</script>
【nextUntil()】
nextUntil()方法接受两个参数。第一个参数是一个选择器字符串、DOM节点或jQuery对象，用于确定到哪个兄弟元素时停止匹配，不包括参数中的元素。第二个参数是一个筛选字符串，用于匹配元素的选择器表达式字符串
当nextUntil()方法没有参数时，和nextAll()方法作用相同
【1】没有参数时
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li class="third-item">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
$('.third-item').nextUntil().css('border','1px solid red');
})
</script>
【2】有一个参数时
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li class="third-item">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
$('.third-item').nextUntil('li:last').css('border','1px solid red');
})
</script>
【3】有两个参数时
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li class="third-item">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
$('.third-item').nextUntil('li:last',':contains("4")').css('border','1px solid red');
})
</script>
【prev([selector])】
prev()方法返回匹配的元素集合中每一个元素紧邻的前面兄弟元素的元素集合
prev()方法接受一个选择器字符串作为参数，只有前面紧跟着的兄弟元素满足选择器时，才会返回此元素
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div>
<i>1</i>
<b><i>2</i></b>
<i>3</i>
</div>
<button id="btn1">按钮一</button>
<button id="btn2">按钮二</button>
<button id="btn3">按钮三</button>
<script>
$('#btn1').click(function(){
$('b').prev().css('border','1px solid red');
})
$('#btn2').click(function(){
$('i:contains("2")').prev().css('border','1px solid red');
})
$('#btn3').click(function(){
$('b').prev('b').css('border','1px solid red');
})
</script>
【prevAll()】
prev()方法表示当前元素的前一个兄弟元素，而prevAll()方法表示当前元素前面的所有兄弟元素
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li class="third-item">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
$('.third-item').prevAll().css('border','1px solid red');
})
</script>
prevAll()方法可以接受一个选择器字符串用于筛选元素
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li class="third-item">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
$('.third-item').prevAll(':contains("2")').css('border','1px solid red');
})
</script>
【prevUntil()】
prevUntil()方法接受两个参数。第一个参数是一个选择器字符串、DOM节点或jQuery对象，用于确定到哪个兄弟元素时停止匹配，不包括参数中的元素。第二个参数是一个筛选字符串，用于匹配元素的选择器表达式字符串
当prevUntil()方法没有参数时，和prevAll()方法作用相同
【1】没有参数时
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li class="third-item">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
$('.third-item').prevUntil().css('border','1px solid red');
})
</script>
【2】有一个参数时
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li class="third-item">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
$('.third-item').prevUntil('li:first').css('border','1px solid red');
})
</script>
【3】有两个参数时
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li class="third-item">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<button id="btn">按钮</button>
<script>
$('#btn').click(function(){
$('.third-item').prevUntil('li:first',':contains("2")').css('border','1px solid red');
})
</script>
深入学习jQuery节点关系的更多相关文章
- 深入学习jQuery节点操作
× 目录 [1]创建节点 [2]插入节点 [3]删除节点[4]复制节点[5]替换节点[6]包裹节点 前面的话 DOM节点操作包括创建节点.插入节点.移除节点.替换节点和复制节点.jQuery也有类似的 ...
- 从零开始学习jQuery (五) 事件与事件对象
本系列文章导航 从零开始学习jQuery (五) 事件与事件对象 一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解 ...
- 从零开始学习jQuery (三) 管理jQuery包装集
本系列文章导航 从零开始学习jQuery (三) 管理jQuery包装集 一.摘要 在使用jQuery选择器获取到jQuery包装集后, 我们需要对其进行操作. 本章首先讲解如何动态的创建元素, 接着 ...
- 【菜鸟学习jquery源码】数据缓存与data()
前言 最近比较烦,深圳的工作还没着落,论文不想弄,烦.....今天看了下jquery的数据缓存的代码,参考着Aaron的源码分析,自己有点理解了,和大家分享下.以后也打算把自己的jquery的学习心得 ...
- 从零开始学习jQuery (二) 万能的选择器
本系列文章导航 从零开始学习jQuery (二) 万能的选择器 一.摘要 本章讲解jQuery最重要的选择器部分的知识. 有了jQuery的选择器我们几乎可以获取页面上任意的一个或一组对象, 可以明显 ...
- 学习jQuery之旅
早就听说了Jquery的大名,一直没有细心的学习一下,通过阅读收集的一些资料,感觉Jquery真的很强大.决定开始自己的学习Jquery之旅.在这里不是为大家讲解Jquery(深知水平有限),只是将自 ...
- 学习jquery mobile
学习jquery mobile的时间不是很长,在学习的过程当中也遇到了很多令人抓狂的问题,在网上搜索问题答案的时候发现,现在关于jquery mobile的文章还不是很多,所以,我也是一边学习,一边摸 ...
- 从零开始学习jQuery (八) 插播:jQuery实施方案
一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 本篇文章属于临时插播, 用于介绍我在本公司的j ...
- jacascript DOM节点——节点关系与操作
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 节点关系 DOM可以将任何HTML描绘成一个由多层节点构成的结构.每个节点都拥有各自的特点.数据和方法,也 ...
随机推荐
- windows消息机制详解（转载）
消息,就是指Windows发出的一个通知,告诉应用程序某个事情发生了.例如,单击鼠标.改变窗口尺寸.按下键盘上的一个键都会使Windows发送一个消息给应用程序.消息本身是作为一个记录传递给应用程序的 ...
- 通读SDWebImage③--gif和webP的支持、不同格式图片的处理、方向处理
本文目录 NSData+ImageContentType: 根据NSData获取MIME UIImage+GIF UIImage+WebP UIImage+MultiFormat:根据NSData相应 ...
- 初学者-PHP笔记
PHP介绍 PHP 是 "PHP Hypertext Preprocessor" 的首字母缩略词 PHP 是一种被广泛使用的开源脚本语言 PHP 脚本在服务器上执行 PHP 没有成 ...
- 应用程序无法正常启动0xc0150002(windows server 2003)
windows server 2003运行一个程序时出现 "应用程序无法正常启动0xc0150002"的错误提示; 解决方案: 下载地址:http://www.microsoft. ...
- Logstash之multiline 插件
input { stdin { codec => multiline { pattern => "^\[" negate => true what => & ...
- Intellij IDEA 常用快捷键
[常规] Ctrl+Shift + Enter,语句完成 "!",否定完成,输入表达式时按 "!"键 Ctrl+E,最近的文件 Ctrl+Shift+E,最近更 ...
- Android控件之Notification
Android通知就是让设备在屏幕最顶上那栏里面显示图标,当滑下通知栏之后可以看到列表状的通知选项,有些是"通知"类型的,有些是"正在运行"类型的," ...
- eayui datagrid 分页 排序 详解
最近因为经常使用easyui 在做表格时难免后出现排序 及分页的问题,但是 在官网中没有 相关的介绍及例子,所以经过多方面的查找后,终于完成了分页 和排序的功能 首先 页面datagrid 要排序的必 ...
- windows和linux中搭建python集成开发环境IDE——如何设置多个python环境
本系列分为两篇: 1.[转]windows和linux中搭建python集成开发环境IDE 2.[转]linux和windows下安装python集成开发环境及其python包 3.windows和l ...
- RemoteIE 开发者可跨平台使用IE测试网页
RemoteIE,这是一个基于微软Azure的服务,它允许开发者在最新版本的IE(Windows 10技术预览版)中测试他们的网页,而不需要安装或在虚拟机中设置对应的系统.要想使用这项服务,开发者需要 ...