jQuery属性操作
Posted orochiz-
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 属性时，还是有区别的。因为标签的 checked 只是在初始化时有用，其他时候只是摆设。真正生效的是内存中的元素属性，所以此时只能用prop()
基本用法：
<script>
$(function()
var $div = $("div")
// 修改id属性
$div.prop("id","box")
// 添加元素属性
$div.prop("className","center")
// 添加自定义属性（无效）
$div.prop("yyy","def")
console.log($div.prop("yyy")) // def
// 同时操作多个属性
$div.prop(
title:"this is a title",
color:"red"
)
console.log($div) //没有看见 yyy 和 color 属性
)
</script>运行结果：
<div id="box" class="center" title="this is a title">hello world</div>通过prop()设置的自定义属性既不在div标签中，也没有挂载到$div对象中。其实它挂载到了原生Dom中了
var div = document.querySelector("div")
console.log(div.yyy,div.color) // def red4.removeProp() 移除属性
只是将属性值设为 undefined
// 移除xxx自定义属性
$div.removeProp("xxx")
console.log($div.prop("xxx"))//undefined
// 移除title属性
$div.removeProp("title")运行结果：
<div id="box" class="center" title="undefined">hello world</div>以上是关于jQuery属性操作的主要内容，如果未能解决你的问题，请参考以下文章