您的位置：首页 > 运维架构

prop（Property）和attr（attribute）用法区别

2015-11-10 14:42 519 查看

高版本的jquery引入prop方法后，什么时候该用prop？什么时候用attr？它们两个之间有什么区别？

1.对于HTML元素本身就带有的固有属性，在处理时，使用prop方法
2.对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

例如：<a href="#" id="link1" action="delete">删除</a>

<a>元素的DOM属性“href、id"是固有属性，处理这些属性时，建议使用prop方法。
action是自定义的属性，处理这些属性时，建议使用attr方法。

像checkbox，radio和select，readonly和disabled这样的元素，选中属性对应“checked”和“selected”，属于固有属性

$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true
如果上面使用attr方法，则会出现
[code]$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"

[/code]
3.attr方法里面，最关键的两行代码，elem.setAttribute( name, value + “” )和ret = elem.getAttribute( name )，attr()读操作. 读取的是匹配元素中第一个元素的指定属性值

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
alert($("p").attr("title"));//获取属性
// this code can only get the first element's attribute.
});
});
</script>
</head>
<body>
<p title="title1">paragraph 1</p>
<p title="title2">paragraph 2</p>
<br/>
<button>get title</button>
</body>
</html>

运行结果:弹框显示: title1.
想要分别获取每一个元素的属性,需要使用jQuery的循环结构,比如.each()或.map()方法.上面的例子可以改成:

<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
//get attribute for every element in selection.
$("p").each(function () {
alert($(this).attr("title"));
});
});
});
</script>

4.prop方法里面，最关键的两行代码，return ( elem[ name ] = value )和return elem[ name ]，你可以理解成这样document.getElementById(el)[name] = value，这是转化成JS对象的一个属性。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航