jQuery 属性操作
1.attr()
- 作用：attr()方法用来修改或者读取标签属性值，它其实是原生getAtrribute()和setAttribte()的结合体，语法上更加简洁，它支持同时操作多个属性，只要将多个属性包装成对象传入即可
<body>
<div id="test">hello world</div>
</body>
<script>
$(function(){
var $div = $("div")
// 添加class属性
$div.attr("class","center")
// 添加自定义属性
$div.attr("xxx","abc")
// 修改id属性的值
$di.attr("id","box")
// 获取属性值
console.log($div.attr("id")) //box
})
</script>
运行结果：
<div id="test" class="center" xxx="abc">hello world</div>
同时操作多个属性
<body>
<div id="test">hello world</div>
</body>
<script>
$(function(){
var $div = $("div")
// 同时操作多个属性
$div.attr({
"id":"box",
"class":"center",
"xxx":"abc"
})
})
</script>
运行结果与上面的一致：
<div id="box" class="center" xxx="abc">hello world</div>
2.移除属性 removeAttr()
- 作用：从标签中移除目标属性，可同时移除多个属性（每个属性用 空格 隔开）
<body>
<div id="box" class="center" xxx="abc">hello world</div>
</body>
<script>
$(function(){
var $div = $("div")
// 移除一个属性
$div.removeAttr("xxx")
// 移除多个属性
$div.removeAttr("id class")
})
</script>
运行结果：
<div>hello world</div>
3.prop()
- 作用：prop()可以读取/修改/添加 元素的属性，相当于原生js的点语法
- 注意：严格的说，attr()操作标签属性，而prop()操作js内存中元素的属性，在操作元素原生的属性（id,class,title）时，他们作用是一样的，或者说他们数据共通。其余属性是相互独立的
- 在操作多选框/复选框的 checked 属性时，prop()与attr()还是有区别的。因为标签的 checked 只是在初始化时有用，其他时候只是摆设。真正生效的是内存中的元素属性，所以此时只能用prop()
<div title="我是标题" xxx="abc">我是div</div>
<script>
$(function(){
$box = $('div')
//标签原生的属性是共通的
console.log($box.prop('title'))//我是标题
//标签自定义属性prop()无法获取
console.log($box.prop('xxx'))//undefined
})
</script>
<div title="我是标题" id="box" xxx="abc">我是div</div>
<script>
$(function(){
$box = $('div')
//修改标签自带属性
$box.prop('id','test')
console.log($box.attr('id')) //test
console.log($box.prop('id')) //test
//修改标签自定义属性
$box.prop('xxx','def')
console.log($box.attr('xxx')) //abc 自定义属性相互独立
console.log($box.prop('xxx')) //test
//同时修改多个属性
$box.prop({
title:'新的标题',
id:"newId"
})
//渲染结果
//<div title="新的标题" id="newId" xxx="abc">我是div</div>
})
</script>
- 通过prop()设置的自定义属性既不在div标签中，也没有挂载到$div对象中，可以使用原生Dom.xxx获取
$box = $('div')
//获取原生Dom
var box = $box.get(0)
console.log(box.xxx) // def
4.removeProp() 移除属性
- 作用：只是将属性值设为 undefined，只能移除自带的属性和通过prop()方法添加的自定义属性
<div title="我是标题" id="box" xxx="abc">我是div</div>
<script>
$(function(){
$box = $('div')
//移除自带的属性
$box.removeProp('title')
console.log($box.attr('title')) //undefined
console.log($box.prop('title')) //undefined
//removeProp()只能移除通过prop()方法添加的自定义属性
$box.removeProp('xxx')
console.log($box.attr('xxx')) //abc 标签自定义属性不受影响
console.log($box.prop('xxx')) //undefined 本来一开始就没有这个属性
//先添加后移除
$box.prop('xxx','def')
console.log($box.prop('xxx')) //def
console.log($box.get(0).xxx) //def 与dom点语法等效
$box.removeProp('xxx')
console.log($box.prop('xxx')) //undefined
console.log($box.get(0).xxx) //undefined 与dom点语法等效
})
</script>
5.总结
(1)attr()其实就是getAttribte()和setAttribute()的结合体，而removeAttr()就是removeAttribute()
(2)prop()/removeProp()就是Dom使用 dom.xxx 一样的效果
(3)区别：对于标签自带的属性（title,class,id）attr()与prop()作用是一样的，自带属性的值被修改后都会受到影响。而对于自定义属性，attr()操作的是标签中的属性，这个属性在查看标签时肉眼可见。而prop()设置的值存在与内存中，只能用相关方法获取
(4)在点语法中，操作class属性要使用className属性名，而在prop()方法中直接使用 'class'
<body style="padding:30px;">
<div class="test">我是div</div>
</body>
<script>
$(function(){
$box = $('div')
console.log($box.attr('class')) //test
console.log($box.prop('class')) //test
})
</script>
