jQuery使用手册之二 DOM操作
在 jQuery 中，我们可以方便地操作 DOM 元素。下面是一些常见操作：
选择器
使用 $() 选择器可以获取页面中的元素，并进行操作。
基本选择器
| 选择器 | 描述 |
|---|---|
$("element") |
选取所有符合element的元素 |
$(".class") |
选取所有符合class的元素 |
$("#id") |
选取符合id的元素 |
层级选择器
| 选择器 | 描述 |
|---|---|
$("parent > child") |
选取 parent 的所有直接子元素 child |
$("ancestor descendant") |
选取所有符合条件的后代元素 |
过滤选择器
| 选择器 | 描述 |
|---|---|
$("element:first") |
选取第一个符合条件的元素 |
$("element:last") |
选取最后一个符合条件的元素 |
$("element:even") |
选取所有偶数位置的元素 |
$("element:odd") |
选取所有奇数位置的元素 |
元素操作
修改内容
使用 text() 方法可以修改元素的文本内容，使用 html() 方法可以插入带有HTML标签的内容。
$("p").text("这是修改后的文本。"); // 修改文本内容
$("p").html("<b>这是粗体内容</b>"); // 插入带有HTML标签的内容
修改属性
使用 attr() 方法可以修改元素的属性值。
$("img").attr("src", "newImage.jpg"); // 修改图片的src属性为newImage.jpg
修改样式
使用 css() 方法可以修改元素的样式。
$("p").css("color", "red"); // 修改文本颜色为红色
事件操作
使用 on() 方法可以绑定事件处理函数，使用 off() 方法可以解除绑定。
$("button").on("click", function() { // 点击事件处理函数
alert("按钮被点击了。"); // 弹出消息框
});
$("button").off("click"); // 解除按钮的点击事件处理函数
示例说明
示例 1
以下示例展示了使用基本选择器和修改内容的操作：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery 示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("img").attr("src", "newImage.jpg");
$("p").text("这是修改后的文本。");
});
</script>
</head>
<body>
<img src="oldImage.jpg">
<p>这是原始文本。</p>
</body>
</html>
运行该示例后，页面中的图片会被替换成 newImage.jpg，段落中的文本会被修改成 “这是修改后的文本。”。
示例 2
以下示例展示了使用事件操作的操作：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery 示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").on("click", function() {
alert("按钮被点击了。");
});
});
</script>
</head>
<body>
<button>点击我</button>
</body>
</html>
运行该示例后，点击页面中的按钮会触发一个弹出消息框，其中显示 “按钮被点击了。” 的消息。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery使用手册之二 DOM操作 - Python技术站
微信扫一扫 
支付宝扫一扫 