版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/cccmercy/article/details/81660440
结论
- 对于HTML元素本身就带有的
固有属性
,处理时使用prop
方法。 - 对于HTML元素
自定义属性
,处理时使用attr
方法。
固有属性
指的是HTML标签原生支持的属性,如a
标签原生支持的属性有:download
、href
、hreflang
、media
、rel
、target
、type
,这些属性是W3C组织确定的,可通过W3School查询.
自定义属性
指的是自己为HTML标签定义的属性,如:<a href="#" data-event="delete">删除</a>
中的data-event
即为自定义属性
使用场景
<body>
<form>
<input type="checkbox" name="hobby" value="movie" /> 电影
<input type="checkbox" name="hobby" value="music" checked="checked" /> 音乐
<select name="主食">
<option value="rice">米饭</option>
<option value="noodles" selected="selected">面条</option>
</select>
</form>
<button id="btn1">测试attr</button>
<button id="btn2">测试prop</button>
<script type="text/javascript" src="js/jquery.min.js" ></script>
// 上述js请改为你本地的
<script>
$('#btn1').click(function(){
console.log($('[value="movie"]').attr('checked')); // undefined
console.log($('[value="music"]').attr('checked')); // checked
console.log($('[value="rice"]').attr('selected')); // undefined
console.log($('[value="noodles"]').attr('selected')); // selected
});
$('#btn2').click(function(){
console.log($('[value="movie"]').prop('checked')); // false
console.log($('[value="music"]').prop('checked')); // true
console.log($('[value="rice"]').prop('selected')); // false
console.log($('[value="noodles"]').prop('selected')); // true
});
</script>
</body>
对于checked
或者selected
属性,请使用prop
方法,他返回的是选中状态:true
或者false
,使用attr
方法,返回的是checked
或者selected
属性的属性值,如果没有添加该属性,返回undefined
,如上面的例子。