jQuery的attr()方法和JavaScript的属性操作

入冉心

已于 2023-10-17 14:05:30 修改

阅读量417

点赞数

文章标签： javascript jquery 前端

于 2023-10-13 18:00:25 首次发布

本文链接：https://blog.csdn.net/rr20060119/article/details/133815906

版权

1. 区别和概念：

2. JavaScript属性操作的用法示例：

3. jQuery属性操作的用法示例：

总结

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")来添加自定义数据属性。
使用回调函数修改属性值： 使用回调函数来根据属性的旧值来设置新值。

入冉心

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery的attr()方法和JavaScript的属性操作

使用来读取元素的属性值。使用来设置元素的属性值。使用来设置多个属性的值。使用来移除元素的属性。使用来检查属性是否存在。使用来添加自定义数据属性。使用回调函数来根据属性的旧值来设置新值。
复制链接

扫一扫