先是父、祖父或曾祖父等等。
通过 jQuery,您能够向上遍历 DOM 树,以查找元素的祖先。
向上遍历 DOM 树
这些 jQuery 方法很有用,它们用于向上遍历 DOM 树:
parent()
parents()
parentsUntil()
jQuery parent() 方法
parent() 方法返回被选元素的直接父元素。
该方法只会向上一级对 DOM 树进行遍历。
下面的例子返回每个 <span> 元素的的直接父元素:
实例
$(document).ready(function(){ $("span").parent();});
jQuery parents() 方法
parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。
下面的例子返回所有 <span> 元素的所有祖先:
实例
$(document).ready(function(){ $("span").parents();});
尝试一下 »
您也可以使用可选参数来过滤对祖先元素的搜索。
下面的例子返回所有 <span> 元素的所有祖先,并且它是 <ul> 元素:
实例
$(document).ready(function(){ $("span").parents("ul");});
jQuery parentsUntil() 方法
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素:
实例
$(document).ready(function(){ $("span").parentsUntil("div");});
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!
多刚入门HTML5前端开发的小伙伴对HTML页面的基本机构代码还不是很清楚,下面和千锋广州小编一起来看看吧。
1、什么是标签:
html标签组成是html文档的最基本元素,一般是成对出现,由开始标签和与其对应的结束标签构成.?如<html></html>,<p></p>,<body></body>,<head></head>,<span></span>等,此外,还有一些标签是单独出现的,如<img/>,<input/>等,标签可以相互嵌套使用。
由于html语言是一门弱类型语言,对格式的要求不是非常严格,因此所有标签是不区分大小写的,但是,一般在实际开发中,大家都统一使用小写。
2、html文档的基本结构
如上图,每一个html文档的基本结构为:
第一层:
<!DOCTTYPE>------!文档类型,它的目的是要告诉标准通用标记语言解析器,它应该使用什么样的文档类型定义(DTD)来解析文档,在html5文档中,一般写为<!DOCTTYPE html> ;值得注意的是,<!DOCTTYPE>不属于html标签。
<html></html>-------html标签,是html文档的根标签,所有的网页标签都放在这对标签中,是所有html标签的祖先容器。
第二层:
<head></head>-------头部标签,代表着html文档的头信息,是所有头部元素的容器,内部一般包含:<title> <script><style><meta><link>这些头部元素。
<body></body>-------网页主体标签,其内部主要包含着构成网页内容的一些元素,如<p></p>,<span></span>,<div></div>,<table></table>等。这些元素都会在网页的内容部分显示。
3、标签的属性
就如人有这身高、体重、年龄等这些属性一样,html标签也有自己的属性,如字体颜色,宽,高,背景等。这些属性一般通过键值对的形式卸载标签中,是标签的一部分,并且每种标签的属性都不完全像同,有的标签有着自己特有的属性。如下图所示:
4、html注释
在实际开发中,我们需要在html文档中做一些标记,方便日后对代码的维护及修改,也方便其他程序员了解我们的代码。而在html文档中,注释的格式为:
我们可以理解为,html中,标签元素是给计算机读的,为注释是给程序员看的。
以上就是今天分享的内容,希望对大家有帮助哦!
近我在做前端面试题总结系列,感兴趣的朋友可以添加关注,欢迎指正、交流。
争取每个知识点能够多总结一些,至少要做到在面试时,针对每个知识点都可以侃起来,不至于哑火。
在上一篇文章【前端 · 面试 】JavaScript 之你不一定会的基础题(一)中,有同学产生了这样一个疑惑:为什么 click 事件的监听函数中,this.id 和 event.target.id 的输出值是不一样的?
今天我们就来扒一扒这其中的原理。
有如下的 HTML 文档结构:
<div id="parent">
<div id="child" class="child">
点我
</div>
</div>
第一次执行如下 JavaScript 代码:
document.getElementById("parent").addEventListener("click", function () {
alert(`parent 事件触发,` + this.id);
});
document.getElementById("child").addEventListener("click", function () {
alert(`child 事件触发,` + this.id);
});
第二次执行另一套 JavaScript 代码:
document.getElementById("parent").addEventListener("click", function (e) {
alert(`parent 事件触发,` + e.target.id);
});
document.getElementById("child").addEventListener("click", function (e) {
alert(`child 事件触发,` + e.target.id);
});
问题如下:
点击 id 为 child 的 div 后,JavaScript 代码的执行结果分别是什么?
答案是:
对于这个答案中的第二次输出结果,有人生出了疑惑:为什么 parent 事件触发时,e.target.id 的结果为 child呢?不应该是 parent 吗?
首先,我们知道,HTML 页面上 DOM 元素的事件执行顺序一般有三个阶段:
整个过程如下图:
事件捕获和事件冒泡
当一个事件发生在具有父元素的元素上(例如,在我们的例子中是 child 元素)时,现代浏览器运行两个不同的阶段 - 捕获阶段和冒泡阶段。 在捕获阶段:
在冒泡阶段,恰恰相反:
这两个阶段如下图所示:
在现代浏览器中,默认情况下,所有事件处理程序都在冒泡阶段进行注册,这也是为什么只有一个阻止冒泡方法的方法 event.stopPropagation(),而没有阻止捕获的方法,因为完全没必要。
首先,我们得有一个清晰的认知:事件冒泡或者事件捕获,都是针对注册了事件的元素。
关于 this 和 event.target ,总结如下:
event 还有一个属性 event.srcElement,它是 event.target 的别名,但是是一个非标准属性,尽量不在生产环境中使用。
假如有以下代码:
parent.onclick = function1;
child.onclick = function2;
当我们点击 child 时,由于事件默认会在冒泡阶段注册,所以,不仅会执行 function2,之后还会执行 function1,这样的结果可能不是我们所期望的,我们更希望它们的点击事件之间互不影响。
如果要实现这点,只需要在 function2 中添加 event.stopPropagation() 即可。
现在我们将题目中的 JavaScript 代码再增加一份:
document.getElementById("parent").addEventListener("click", function (e) {
alert(`parent 事件触发,` + e.target.id);
}, false);
document.getElementById("child").addEventListener("click", function (e) {
alert(`child 事件触发,` + e.target.id);
}, true);
问题1:如果点击 child 元素,输出是什么?
问题2:如果点击 parent 元素,输出是什么?
可以看到,现在 parent 的点击事件是冒泡阶段执行,child 的点击事件是在 捕获阶段执行。
针对问题1,由于 parent 注册的是冒泡阶段执行,所以它的事件是在 child 触发阶段后的冒泡阶段执行的,所以答案应该是:先弹出 “child 事件触发,child”,再弹出“parent 事件触发,child”。
针对问题二,虽然 child 注册的是捕获阶段执行事件,但是 parent 事件流程的捕获根本走不到它,所以答案应该是:只弹出“parent 事件触发,parent”。
上面我们分析了这么多,其实总结起来就下面几条:
小问题也有大根源,勇于发现,勇于探究!
~
~本文完,感谢阅读!
~
学习有趣的知识,结识有趣的朋友,塑造有趣的灵魂!
大家好,我是〖编程三昧〗的作者 隐逸王,我的公众号是『编程三昧』,欢迎关注,希望大家多多指教!
你来,怀揣期望,我有墨香相迎! 你归,无论得失,唯以余韵相赠!
知识与技能并重,内力和外功兼修,理论和实践两手都要抓、两手都要硬!
*请认真填写需求信息,我们会在24小时内与您取得联系。