操纵DOM之---attr 获取与设置属性的值
在使用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这两个属性设置了属性值声明：该文观点仅代表作者本人，入门客AI创业平台信息发布平台仅提供信息存储空间服务，如有疑问请联系rumenke@qq.com。
- 上一篇： PHP中使用memcache存储session的三种配置方法
- 下一篇：没有了
