JavaScript / jQuery DOM 选择器
JavaScript基础 2022-04-25 01:54:51小码哥的IT人生shichen
JavaScript / jQuery DOM 选择器
jQuery vs JavaScript
jQuery 由 John Resig 于 2006 年创建。它旨在处理浏览器不兼容性并简化 HTML DOM 操作、事件处理、动画和 Ajax。
十多年来，jQuery 一直是世界上最受欢迎的 JavaScript 库。
但是，在 JavaScript Version 5（2009）之后，大多数 jQuery 实用程序都可以通过几行标准 JavaScript 来解决：
通过 id 来查找 HTML 元素
返回 id="intro" 的元素：
jQuery
var myElement = $("#id01");
完整实例：
<!DOCTYPE html>
<html>
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<h1>通过 id 查找 HTML 元素</h1>
<p id="id01">Hello World!</p>
<p id="id02">Hello China!</p>
<p id="id03">Hello Shanghai!</p>
<p id="demo"></p>
<script>
$(document).ready(function() {
var myElements = $("#id03");
$("#demo").text("段落 id03 的文本是：" + myElements[0].innerHTML);
});
</script>
</body>
</html>
运行结果：
通过 id 查找 HTML 元素 Hello World! Hello China! Hello Shanghai! 段落 id03 的文本是：Hello Shanghai!
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JavaScript
var myElement = document.getElementById("id01");
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>通过 id 查找 HTML 元素</h1>
<p id="id01">Hello World!</p>
<p id="id02">Hello China!</p>
<p id="id03">Hello Shanghai!</p>
<p id="demo"></p>
<script>
var myElement = document.getElementById("id03");
document.getElementById("demo").innerHTML = "段落 id03 的文本是：" + myElement.innerHTML;
</script>
</body>
</html>
运行结果：
通过 id 查找 HTML 元素 Hello World! Hello China! Hello Shanghai! 段落 id03 的文本是：Hello Shanghai!
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
通过标签名来查找 HTML 元素
返回所有 <p> 元素：
jQuery
var myElements = $("p");
完整实例：
<!DOCTYPE html>
<html>
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<h1>通过标签名查找 HTML 元素</h1>
<p>Hello World!</p>
<p>Hello China!</p>
<p>Hello Shanghai!</p>
<p id="demo"></p>
<script>
$(document).ready(function() {
var myElements = $("p");
$("#demo").text("第三段中的文本是：" + myElements[2].innerHTML);
});
</script>
</body>
</html>
运行结果：
通过标签名查找 HTML 元素 Hello World! Hello China! Hello Shanghai! 第三段中的文本是：Hello Shanghai!
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
示例代码：
var myElements = document.getElementsByTagName("p");
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>通过标签名查找 HTML 元素</h1>
<p>Hello World!</p>
<p>Hello China!</p>
<p>Hello Shanghai!</p>
<p id="demo"></p>
<script>
var myElements = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = "第三段中的文本是：" + myElements[2].innerHTML;
</script>
</body>
</html>
运行结果：
通过标签名查找 HTML 元素 Hello World! Hello China! Hello Shanghai! 第三段中的文本是：Hello Shanghai!
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
通过类名来查找 HTML 元素
返回 class="intro" 的所有元素。
jQuery
var myElements = $(".intro");
完整实例：
<!DOCTYPE html>
<html>
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<h1>通过类名查找 HTML 元素</h1>
<p class="intro">Hello World!</p>
<p class="intro">Hello China!</p>
<p class="intro">Hello Shanghai!</p>
<p id="demo"></p>
<script>
$(document).ready(function() {
var myElements = $(".intro");
$("#demo").text("类名为 intro 的第三段文本是：" + myElements[2].innerHTML);
});
</script>
</body>
</html>
运行结果：
通过类名查找 HTML 元素 Hello World! Hello China! Hello Shanghai! 类名为 intro 的第三段文本是：Hello Shanghai!
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JavaScript
var myElements = document.getElementsByClassName("intro");
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>Finding HTML Elements by Class Name</h1>
<p class="intro">Hello World!</p>
<p class="intro">Hello China!</p>
<p class="intro">Hello Shanghai!</p>
<p id="demo"></p>
<script>
var myElements = document.getElementsByClassName("intro");
document.getElementById("demo").innerHTML = "类名为 intro 的第三段文本是：" + myElements[2].innerHTML;
</script>
</body>
</html>
运行结果：
Finding HTML Elements by Class Name Hello World! Hello China! Hello Shanghai! 类名为 intro 的第三段文本是：Hello Shanghai!
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
按类名查找元素在 Internet Explorer 8 和早期版本中不起作用。
通过 CSS 选择器查找 HTML 元素
返回包含 class="intro" 的所有 <p> 元素的列表。
jQuery
var myElements = $("p.intro");
完整实例：
<!DOCTYPE html>
<html>
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<h1>通过 Query 选择器查找 HTML 元素</h1>
<p class="intro">Hello World!</p>
<p class="intro">Hello China!</p>
<p class="intro">Hello Shanghai!</p>
<p id="demo"></p>
<script>
$(document).ready(function() {
var myElements = $("p.intro");
$("#demo").text("类名为 intro 的第三段文本是：" + myElements[2].innerHTML);
});
</script>
</body>
</html>
运行结果：
通过 Query 选择器查找 HTML 元素 Hello World! Hello China! Hello Shanghai! 类名为 intro 的第三段文本是：Hello Shanghai!
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
JavaScript
var myElements = document.querySelectorAll("p.intro");
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>Finding HTML Elements by Query Selector</h1>
<p class="intro">Hello World!</p>
<p class="intro">Hello China!</p>
<p class="intro">Hello Shanghai!</p>
<p id="demo"></p>
<script>
var myElements = document.querySelectorAll("p.intro");
document.getElementById("demo").innerHTML = "类名为 intro 的第三段文本是：" + myElements[0].innerHTML;
</script>
</body>
</html>
运行结果：
Finding HTML Elements by Query Selector Hello World! Hello China! Hello Shanghai! 类名为 intro 的第三段文本是：Hello World!
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
querySelectorAll() 方法在 Internet Explorer 8 和早期版本中不起作用。
