深入学习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描绘成一个由多层节点构成的结构.每个节点都拥有各自的特点.数据和方法,也 ...
随机推荐
- C++ 结构体数组回调C#代码，c#数组只有一条
C# 方法 [UnmanagedFunctionPointerAttribute(CallingConvention.StdCall, CharSet = CharSet.Ansi)] public ...
- Web前端性能测试-性能测试知多少---深入分析前端站点的性能
针对目前接手的web前端的性能,一时间不知道从什么地方入手,然后经过查找资料,发现其实还是蛮简单的. 前端性能测试对象: HTML.CSS.JS.AJAX等前端技术开发的Web页面 影响用户浏览网页速 ...
- Python 爬虫2——环境配置
关于环境配置的操作,其实非常简单,假如不使用第三方的框架的话,只需要安装Python即可完成后续的操作. 一.Python的安装和配置: windows系统的安装配置过程如下,假如是Mac系统,可参考 ...
- PHP防止跨域提交表单
在提交的服务段的数据进行验证. $servername=$_SERVER['SERVER_NAME'];//当前运行脚本所在服务器主机的名字. $sub_from=$_SERVER[" ...
- Django开发笔记
django基础之视图 1.在Django中网页前端的页面和其他内容都是由视图来传递的(视图对web请求进行回应)Django通过检查请求的URL(准确地说,是URL里域名之后的那部分)来选择使用哪个 ...
- bzoj1510: [POI2006]Kra-The Disks(单调栈)
这道题可以O(n)解决,用二分还更慢一点 维护一个单调栈,模拟掉盘子的过程就行了 #include<stdio.h> #include<string.h> #include&l ...
- python将图片转换为Framebuffer裸数据格式(终端显示图片)
要在ubuntu终端显示图片或者在板子的LCD显示图片,Framebuffer是一个简单易用的接口,直接写入像素信息即可. 但普通的图片带有头部信息或者编码格式不同,直接送入Framebuffer是显 ...
- Linux 系统的初始化配置
1.零时配置网卡IP地址 2.配置永久生效IP地址 需要进如 cd /etc/sysconfig/network-scripts 找到网卡文件编辑 3.零时主机名的更改. 4.永久主机名的更 ...
- java学习之面向对象（2）
在描述事物的时候,该事物已存在就具备的一些内容,这是我们就可以把它们都定义在构造函数中,那么什么是构造函数呢? 构造函数就是构建创造对象时调用的函数,它可以给对象进行初始化.构造函数与类名相同,第一个 ...
- 数据库中的two phase locking
数据库中的two phase locking 两段锁协议是指每个事务的执行可以分为两个阶段:生长阶段(加锁阶段)和衰退阶段(解锁阶段). 加锁阶段:在该阶段可以进行加锁操作.在对任何数据进行读操作之前 ...