jQuery实战：控制页面元素操作技巧

"这篇jQuery学习笔记主要关注如何利用jQuery控制页面元素，通过示例代码讲解了如何遍历元素、获取及设置属性值等基础操作。文章包含多个独立运行的代码段，HTML和CSS代码位于文章末尾。" jQuery是一种广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画效果和Ajax交互等任务。在这个学习笔记中，我们将探讨如何使用jQuery控制页面上的元素，以实现特定的功能。 首先，我们来看`each()`函数，用于遍历DOM中的元素。例如，下面的代码展示了如何遍历所有的`<div>`元素，并将它们的内容替换为它们的索引： ```javascript $(document).ready(function(){ $("#btn").html("each()遍历元素").click(function(event){ $("div").each(function(index){ $(this).html("这是第" + index + "个div"); }); event.preventDefault(); }); }); ``` 这段代码中，`$(document).ready()`确保在DOM加载完成后执行内部的函数。`$("#btn")`选取ID为`btn`的元素，然后为其添加点击事件监听器。当按钮被点击时，所有`<div>`元素的文本将被替换。 接下来，我们学习如何获取元素的属性值。这里以获取`<div>`的`title`属性为例： ```javascript $(document).ready(function(){ $("#btn").html("获取属性值").click(function(event){ $("div").each(function(){ alert("title属性的值是:" + $(this).attr("title")); }); event.preventDefault(); }); }); ``` 这个例子中，`$(this).attr("title")`用于获取当前遍历到的`<div>`的`title`属性值，并弹出警告框显示。 接着，我们讨论如何设置元素的属性值。这里有两种方式，一是直接赋值，二是使用函数： ```javascript // eg1 直接赋值 $(document).ready(function(){ $("div").each(function(){ $(this).html(this.title); }); $("#btn").html("设置属性值").click(function(event){ $("div").each(function(){ $(this).attr("style","color:Red"); }); event.preventDefault(); }); }); // eg2 使用函数 $(document).ready(function(){ $("div").each(function(){ $(this).html(this.title); }); $("#btn").html("设置属性值").click(function(event){ $("div").each(function(index){ $(this).attr("id", function(){ return "div" + index; }); }); event.preventDefault(); }); }); ``` 在`eg1`中，点击按钮后，所有`<div>`元素的`style`属性被设置为`color: Red`，使文字变为红色。而在`eg2`中，`attr()`方法接受一个函数作为第二个参数，返回一个新的ID值，根据`<div>`的索引动态生成。 总结，这篇学习笔记主要涵盖了jQuery中`each()`函数的使用，以及`attr()`方法用于获取和设置元素属性的技巧。通过这些基础操作，你可以更高效地控制页面元素，实现丰富的交互功能。