利用attr()设置元素属性，多种用法！

最新推荐文章于 2024-05-03 12:26:08 发布

长河落日#

最新推荐文章于 2024-05-03 12:26:08 发布

阅读量1.3k

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/weixin_47065927/article/details/108072972

版权

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、attr("属性")

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>attr</title>
    <script src="js/jquery-1.12.4.js"></script>
    <style>
      ul {
        display: none;
      }
    </style>
  </head>
  <body>
    <p title="what's you favorite animal?">what's you favorite animal?</p>
    <ul>
      <li title="cat">cat</li>
      <li title="dog" value="123">dog</li>
      <li title="elephant">elephant</li>
    </ul>
    <button>the answer</button>
    <script>
      //给按钮绑定事件
      $(function () {
        $(":button").bind("click", function () {
          alert($("ul li:eq(1)").attr("title"));
        });
      });
    </script>
  </body>
</html>

2、attr("属性","属性值")

临时修改属性值

$(function () {
        $(":button").bind("click", function () {
          //   alert($("ul li:eq(1)").attr("title"));
          $("ul li:eq(1)").attr("title", "black cat");
          alert($("ul li:eq(1)").attr("title"));
        });
      });

3、attr("属性","fn")

将属性值设置为函数返回值

 $("ul li:eq(1)").attr("title", function () {
            return this.value;
          });
          alert($("ul li:eq(1)").attr("title"));
        });

4、attr(properties)

可设置多组属性，以及对元素样式进行动态修改

 $("ul li:eq(1)").attr({ title: "black cat", value: "123" });
          alert($("ul li:eq(1)").attr("title"));
          alert($("ul li:eq(1)").attr("value"));
        });
        //设置属性
        $("div").attr({ style: "color:red" });
      });
    </script>

求赞

长河落日#

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
利用attr()设置元素属性，多种用法！

1、attr("属性")<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>attr</title> <script src="js/jque
复制链接

扫一扫