操纵DOM之---attr 获取与设置属性的值

最新推荐文章于 2023-03-10 20:53:50 发布

执着更专业

最新推荐文章于 2023-03-10 20:53:50 发布

阅读量4.5k

点赞数

分类专栏： jquery操作DOM JavaScript 文章标签： javascript dom

本文链接：https://blog.youkuaiyun.com/pangchengyong0724/article/details/53188894

版权

JavaScript 同时被 2 个专栏收录

52 篇文章

订阅专栏

jquery操作DOM

3 篇文章

订阅专栏

在使用JavaScript编写网页代码的过程中，多数时间都在操纵DOM，比如Ajax返回json数据、动态地向DOM添加显示节点或者是动态地更改页面上元素的CSS和属性等。DOM的全称是Document Object Model，即文档对象模型，是一种与浏览器、平台和语言无关的接口，它可以让用户代码访问任何浏览器中呈现的元素，可以将DOM看作是网页呈现的一种标准。

attr 获取与设置属性的值

要使用jQuery操纵DOM，必须先使用选择器选中一个或多个元素，由于jQuery是对结果集进行隐式迭代的操作，因此一个jQuery对象可以同时对多个元素进行属性更改。

获取属性值
获取和设置属性使用jQuery的attr方法，而移除属性使用removeAttr方法

获取元素属性的attr语法如下所示：

$(selector).attr(attribute)
//其中selector是jQuery的选择器，attr中的参数attribute是指定要获取的元素的属性名称，举个简单的例子，要想获取图像的地址，可以使用如下语句：
$("img").attr("src");

《获取属性 的HTML DEMO》
<body>
    <ul id="nav">
        <li><a href="http://www.xxx.com/companyinfo" id="company_info" title="介绍公司的相关资讯">公司信息</a>
        </li>
        <li><a href="http://www.xxx.com/companyculture" id="culture_info" title="公司的文化信息">公司文化</a>
        </li>
        <li><a href="http://www.xxx.com/contactus" id="contactus" title="联系方式">联系我们</a>
        </li>
    </ul>

    <div id="content"></div>

    <!--属性的信息显示如下-->
    <div id="attr_info">
        <input id="btn_getAttr" type="button" value="显示属性信息">
    </div>
</body>
<!--id为btn_getAttr的按钮将获取页面上的DOM的不同的属性值-->
<script type="text/javascript">
$(document).ready(function (e) {
  $('#btn_getAttr').click(function (e) {
    var str = '<br>' + $('#company_info').attr('title');
    //显示id为company_info的title属性值
    str += '<br>' + $('#product_info').attr('href');
    //显示id为product_info的href属性值
    str += '<br>' + $('#culture_info').attr('id');
    //显示id为culture_info的id属性值
    str += '<br>' + $('#btn_getAttr').attr('value');
    //显示id为btn_getAttr的value属性值
    $('#attr_info').append(str);
    //将结果追加在div中显示属性的值
  });
});
</script>

要设置元素的属性，同样使用attr函数，语法如下：
html 还是使用上面的

$(selector).attr(attribute,value)

<!--其中attribute用来指定属性的名称，value用来指定属性的值。-->
<script type="text/javascript">
$(document).ready(function (e) {
  $('#btn_setAttr').click(function (e) {
      $('company_info').attr('title', '公司的发展历程和发展经验');
      //设置title属性
      $('#product_info').attr('href', 'http://www.microsoft.com');
      //设置href属性
      $('#culture_info').attr('id', 'btn_culture_info');
      //设置id属性
      $('#contactus').attr('title', '欢迎联系我们来获取更多信息');
      //设置联系人的title属性
    });
});
</script>

可以看到，使用attr设置属性是使用"属性名称","属性值"匹配的语句，
attr还可以同时设置两个以上的属性值
如下面的代码所示：

//同时设置两个属性的值
$("#company_info").attr({
    "href":"http://www.microsoft.com/",
    "title":"欢迎进入微软公司网站"
});
//可以看到，通过属性名/值对的方式，示例同时为href和title这两个属性设置了属性值