JQuery元素属性
元素属性
attr
设置或返回被选元素的属性值
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=811731284,3359880732&fm=26&gp=0.jpg" alt="图片">
<script>
$(function (){
//参数name 描述: 返回文档中所有图像的src属性值
console.log($("img").attr("src"));
//参数properties 描述: 为所有图像设置src和alt属性
$("img").attr({
"src":"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1320386509,921148889&fm=26&gp=0.jpg",
"alt": "jQuery图片"
});
//参数key,回调函数 描述: 把src属性的值设置为title属性的值
$("img").attr("title", function() {
//this 代表 当前 img 对象
return this.src
});
});
</script>
removeAttr
从每一个匹配的元素中删除一个属性
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=811731284,3359880732&fm=26&gp=0.jpg" alt="图片">
<script>
$(function (){
//将文档中图像的src属性删除
$("img").removeAttr("src");
});
</script>
prop
设置或返回被选元素的属性和值
在jQuery中,attr()函数和prop()函数都用于设置或获取指定的属性,它们的参数和用法 也几乎完全相同
但不得不说的是,这两个函数的用处却并不相同:
- 获取和设置自定义属性的时候 使用attr
- 获取自身属性的时候使用prop
console.log( $('input[type=checkbox]').attr('checked') ) //选中的时候 checked 未选中是undefined
console.log( $('input[type=checkbox]').prop('checked') ) //选中的时候 true 未选中是false
removeProp
<p></p>
<script>
$(function () {
var $p = $("p");
//设置 property 属性
$p.prop("name","星期八领证");
//获取 property = name 属性值
console.log($("p").prop("name"));
//移除 property = name 的属性
$("p").removeProp("name");
//获取 property = name 属性值
console.log($("p").prop("name"));
});
</script>