JavaScript / jQuery HTML DOM 元素操作
JavaScript基础 2022-04-25 01:55:04小码哥的IT人生shichen
JavaScript / jQuery HTML DOM
jQuery vs JavaScript
jQuery 由 John Resig 于 2006 年创建。它旨在处理浏览器不兼容性并简化 HTML DOM 操作、事件处理、动画和 Ajax。
十多年来，jQuery 一直是世界上最受欢迎的 JavaScript 库。
但是，在 JavaScript Version 5（2009）之后，大多数 jQuery 实用程序都可以通过几行标准 JavaScript 来解决：
删除元素
删除 HTML 元素：
jQuery
$("#id").remove();
完整实例：
<!DOCTYPE html>
<html>
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<h1>删除 HTML 元素</h1>
<h2 id="id01">Hello World!</h2>
<h2 id="id02">Hello China!</h2>
<script>
$(document).ready(function() {
$("#id01").remove();
});
</script>
</body>
</html>
运行结果：
删除 HTML 元素 Hello China!
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JavaScript
element.parentNode.removeChild(element);
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>删除 HTML 元素</h1>
<h2 id="id01">Hello World!</h2>
<h2 id="id02">Hello China!</h2>
<script>
var element = document.getElementById("id01");
element.parentNode.removeChild(element);
</script>
</body>
</html>
运行结果：
删除 HTML 元素 Hello China!
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
获取父元素
返回 HTML 元素的父元素：
jQuery
var myParent = myElement.parent();
完整实例：
<!DOCTYPE html>
<html>
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<h1>获取父级 HTML 元素</h1>
<h2 id="01">Hello World!</h2>
<h2 id="02">Hello China!</h2>
<h2 id="03">Hello Shanghai!</h2>
<p id="demo"></p>
<script>
$(document).ready(function() {
var myParent = $("#02").parent();
$("#demo").text(myParent.prop("nodeName"));
});
</script>
</body>
</html>
运行结果：
获取父级 HTML 元素 Hello World! Hello China! Hello Shanghai! BODY
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JavaScript
var myParent = myElement.parentNode;
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>获取父级 HTML 元素</h1>
<h2 id="01">Hello World!</h2>
<h2 id="02">Hello China!</h2>
<h2 id="03">Hello Shanghai!</h2>
<p id="demo"></p>
<script>
var myParent = document.getElementById("02").parentNode;
document.getElementById("demo").innerHTML = myParent.nodeName;
</script>
</body>
</html>
运行结果：
获取父级 HTML 元素 Hello World! Hello China! Hello Shanghai! BODY
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
