1. 区别和概念：
- jQuery的
attr： attr是一个jQuery方法，用于读取或设置HTML元素的属性值。- 它用于获取或设置HTML属性，例如
src、href、title等。 attr返回的值通常是属性的字符串表示。
- JavaScript的DOM属性：
- 在JavaScript中，你可以使用DOM API来访问和操作HTML元素的属性。
- 你使用
getAttribute和setAttribute方法来实现类似的功能。 - JavaScript的DOM属性可以是更复杂的数据类型，而不仅仅是字符串。
2. JavaScript属性操作的用法示例：
<!DOCTYPE html> <html> <head> <title>JavaScript Attribute Manipulation</title> </head> <body> <img id="myImage" src="image.jpg" alt="Sample Image" /> <button id="changeImage">Change Image Source</button> <script> // 获取元素引用 var image = document.getElementById("myImage"); var button = document.getElementById("changeImage"); // 读取属性值 var srcValue = image.getAttribute("src"); var altValue = image.getAttribute("alt"); // 输出属性值 console.log("Initial src value: " + srcValue); console.log("Initial alt value: " + altValue); // 设置属性值 image.setAttribute("src", "newImage.jpg"); image.setAttribute("alt", "New Image"); // 输出修改后的属性值 console.log("New src value: " + image.getAttribute("src")); console.log("New alt value: " + image.getAttribute("alt")); // 添加事件处理程序，以在按钮点击时修改属性 button.addEventListener("click", function () { image.setAttribute("src", "updatedImage.jpg"); }); </script> </body> </html>
3. jQuery属性操作的用法示例：
<!DOCTYPE html> <html> <head> <title>jQuery attr() Method</title> </head> <body> <img id="myImage" src="image.jpg" alt="Sample Image" /> <button id="changeImage">Change Image Source</button> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function () { var $image = $("#myImage"); var $button = $("#changeImage"); // 1. 读取属性值 var srcValue = $image.attr("src"); var altValue = $image.attr("alt"); console.log("Initial src value: " + srcValue); console.log("Initial alt value: " + altValue); // 2. 设置属性值 $image.attr("src", "newImage.jpg"); $image.attr("alt", "New Image"); console.log("New src value: " + $image.attr("src")); console.log("New alt value: " + $image.attr("alt")); // 3. 设置多个属性值 $image.attr({ src: "anotherImage.jpg", alt: "Another Image", }); console.log("Another src value: " + $image.attr("src")); console.log("Another alt value: " + $image.attr("alt")); // 4. 移除属性 $image.removeAttr("alt"); console.log("Alt attribute removed: " + $image.attr("alt")); // 5. 检查属性是否存在 var hasAltAttribute = $image.attr("alt") !== undefined; console.log("Alt attribute exists: " + hasAltAttribute); // 6. 添加自定义属性 $image.attr("data-custom", "Custom Data"); console.log("Custom data attribute: " + $image.attr("data-custom")); // 7. 使用回调函数修改属性值 $button.click(function () { $image.attr("src", function (i, oldValue) { return "updatedImage.jpg"; }); }); }); </script> </body> </html>
总结
- 读取属性值： 使用
attr("attributeName")来读取元素的属性值。 - 设置属性值： 使用
attr("attributeName", "value")来设置元素的属性值。 - 设置多个属性值： 使用
attr({ attributeName: "value" })来设置多个属性的值。 - 移除属性： 使用
removeAttr("attributeName")来移除元素的属性。 - 检查属性是否存在： 使用
attr("attributeName")来检查属性是否存在。 - 添加自定义属性： 使用
attr("data-attribute", "value")来添加自定义数据属性。 - 使用回调函数修改属性值： 使用回调函数来根据属性的旧值来设置新值。
