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

来源：互联网发布：网络正常网页无法访问编辑：程序博客网时间：2024/05/23 01:25

在使用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这两个属性设置了属性值

0 0