jquery中关于attr和prop的区别！
昨天这两个方法搞混了,被公司大佬说了下，虽然没说什么，但还是挺尴尬的。重点是大佬说你可以用attr方法，我特么第一句话就是怎么用呢。原谅我使用vue之后太依赖框架的东西了，以至于以前jquery玩的也挺溜的我，慢慢淡忘了 jquery。罪过罪过呢！jquery还是一款很优秀的函数库，哎 不说了 继续码代码了。$().attr() 允许我们往元素上加上自定义属性我们也可以用attr 获取提前定义好的
总结
一、attr和prop区别
1.attr 是从页面搜索获得元素值，所以页面必须明确定义元素才能获取值，相对来说较慢。
2.prop是从属性对象中取值，属性对象中有多少属性，就能获取多少值，不需要在页面中显示定义。
3…设计和获取 状态 切换的 要用 prop， attr会出错的
attr和prop的定义
该方法用于获取或设置被选元素的属性值。
需要获取属性值时，该方法返回第一个匹配元素的值
需要设置属性值，该方法为目标元素添加一个或多个属性/值对
从定义的角度无法看出两个方法的具体区别。
以button标签作为案例分析
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery中attr和prop的区别</title>
<script type="" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<p>JQuery中attr和prop的区别</p>
<input id="btnId" type="button" onclick="btnTest()" value="button value" testProperty="testProperty value"/>
<input id="inputId" type="text" onclick="inputTest()" value="Try it" testProperty="testProperty value"/>
<input id="radioId" type="radio" value="Radio"/>
<p id="demo"></p>
<input id="btnId1" type="button" onclick='changDefaultPropertyValue1($("#demo1"))' value="修改标签自带属性的值"/>
<p id="demo1"></p>
<input id="btnId2" type="button" onclick='changDefaultPropertyValue2($("#demo2"))' value="修改标签非自带属性的值"/>
<p id="demo2"></p>
<input id="btnId3" type="button" onclick='changDefaultPropertyValue3($("#demo3"))' value="动态添加标签自带属性值"/>
<p id="demo3"></p>
<input id="btnId4" type="button" onclick='changDefaultPropertyValue4($("#demo4"))' value="动态添加非标签自带属性值"/>
<p id="demo4"></p>
<input id="btnId5" type="button" onclick='changDefaultPropertyValue5($("#demo5"))' value="Radio标签测试结果"/>
<p id="demo5"></p>
<script>
function btnTest(){
alert("This is button onclick function alert.")
}
function inputTest(){
alert("This is input onclick function alert.")
}
var demoObj = $("#demo")
var btnIdObj = $("#btnId")
demoObj.append("Button Test: </br>")
demoObj.append("value 是button标签自带的属性，attr和prop的效果：</br>")
demoObj.append('$("#btnId").attr("value"): ' + btnIdObj.attr("value") + "</br>")
demoObj.append('$("#btnId").prop("value"): ' + btnIdObj.prop("value") + "</br>")
demoObj.append("testProperty 不是button标签自带的属性(不是通过js动态添加)，attr和prop的效果：</br>")
demoObj.append('$("#btnId").attr("testProperty"): ' + btnIdObj.attr("testProperty") + "</br>")
demoObj.append('$("#btnId").prop("testProperty"): ' + btnIdObj.prop("testProperty") + "</br></br>")
function changDefaultPropertyValue1(obj){
obj.html("")
obj.append("使用jquery修改标签自带属性值，attr和prop效果：</br>")
obj.append('$("#btnId").attr("value", "attr"): </br>')
btnIdObj.attr("value", "attr")
obj.append('$("#btnId").attr("value"): ' + btnIdObj.attr("value") + "</br>")
obj.append('$("#btnId").prop("value"): ' + btnIdObj.prop("value") + "</br></br>")
obj.append('$("#btnId").prop("value", "prop"): </br>')
btnIdObj.prop("value","prop")
obj.append('$("#btnId").attr("value"): ' + btnIdObj.attr("value") + "</br>")
obj.append('$("#btnId").prop("value"): ' + btnIdObj.prop("value") + "</br>")
}
function changDefaultPropertyValue2(obj){
obj.html("")
obj.append("使用jquery修改非标签自带属性值，attr和prop效果：</br>")
obj.append('$("#btnId").attr("testProperty", "attr"): </br>')
btnIdObj.attr("testProperty", "attr")
obj.append('$("#btnId").attr("testProperty"): ' + btnIdObj.attr("testProperty") + "</br>")
obj.append('$("#btnId").prop("testProperty"): ' + btnIdObj.prop("testProperty") + "</br></br>")
obj.append('$("#btnId").prop("testProperty", "prop"): </br>')
btnIdObj.prop("testProperty","prop")
obj.append('$("#btnId").attr("testProperty"): ' + btnIdObj.attr("testProperty") + "</br>")
obj.append('$("#btnId").prop("testProperty"): ' + btnIdObj.prop("testProperty") + "</br>")
}
function changDefaultPropertyValue3(obj){
obj.html("")
obj.append("使用jquery动态添加标签自带属性值，attr和prop效果：</br>")
obj.append('$("#btnId").attr("style", "color:red;"): </br>')
btnIdObj.attr("style", "color:red;")
obj.append('$("#btnId").attr("style"): ' + btnIdObj.attr("style") + "</br>")
obj.append('$("#btnId").prop("style"): ' + btnIdObj.prop("style") + "</br></br>")
obj.append('$("#btnId").prop("style", "color:blue;"): </br>')
btnIdObj.prop("style","color:blue;")
obj.append('$("#btnId").attr("style"): ' + btnIdObj.attr("style") + "</br>")
obj.append('$("#btnId").prop("style"): ' + btnIdObj.prop("style") + "</br>")
}
function changDefaultPropertyValue4(obj){
obj.html("")
obj.append("使用jquery动态添加非标签自带属性值，attr和prop效果：</br>")
obj.append('$("#btnId").attr("xxx", "attr动态添加非标签自带属性值"): </br>')
btnIdObj.attr("xxx", "attr动态添加非标签自带属性值")
obj.append('$("#btnId").attr("xxx"): ' + btnIdObj.attr("xxx") + "</br>")
obj.append('$("#btnId").prop("xxx"): ' + btnIdObj.prop("xxx") + "</br></br>")
obj.append('$("#btnId").prop("xxx", "prop动态添加非标签自带属性值"): </br>')
btnIdObj.prop("xxx","prop动态添加非标签自带属性值")
obj.append('$("#btnId").attr("xxx"): ' + btnIdObj.attr("xxx") + "</br>")
obj.append('$("#btnId").prop("xxx"): ' + btnIdObj.prop("xxx") + "</br>")
}
function changDefaultPropertyValue5(obj){
obj.html("")
obj.append("radio标签测试attr和prop效果：</br>")
obj.append('$("#radioId").attr("checked"): ' + $("#radioId").attr("checked") + "</br>")
obj.append('$("#radioId").prop("checked"): ' + $("#radioId").prop("checked") + "</br></br>")
obj.append('$("#radioId").attr("checked", true): </br>')
$("#radioId").attr("checked", true)
obj.append('$("#radioId").attr("checked"): ' + $("#radioId").attr("checked") + "</br>")
obj.append('$("#radioId").prop("checked"): ' + $("#radioId").prop("checked") + "</br></br>")
obj.append('$("#radioId").prop("checked", false): </br>')
$("#radioId").prop("checked", false)
obj.append('$("#radioId").attr("checked"): ' + $("#radioId").attr("checked") + "</br>")
obj.append('$("#radioId").prop("checked"): ' + $("#radioId").prop("checked") + "</br>")
}
</script>
</body>
</html>
总结
该属性是HTML标签自带的属性时：
非使用js动态添加：attr和prop无区别
使用js动态添加：attr和prop均可设置目标标签属性值，但attr方法返回设置的属性值，prop返回属性的声明。
该属性不是HTML标签自带的属性时：
非使用js动态添加：attr方法返回该属性的值，prop返回undefined
非使用js动态添加修改： 返回各自修改后的值，未修改前返回同上
使用js动态添加：attr和prop均可添加属性值，返回值为各自设置的值，若未设置则返回undefined
以radio标签作为案例分析
代码如上
结论：
attr 类似于js中attribute的作用，用于取得值是HTML文档字面量值，prop类似于property是取得计算结果，property改变并不影响attribute字面量，但attribute改变会影响property的计算值。
对于checked, readonly, multiple, selected等这些需要计算后才能得知结果的属性，直接用prop就行。未初始化这些属性值时attr返回undefined，prop返回false。
attribute和property的区别可参考：
https://www.cnblogs.com/dolphinX/p/3348582.html
$().attr() 允许我们往元素上加上自定义属性
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div>
hello world
</div>
$('div').attr('num',20);
我们也可以用attr 获取提前定义好的在上面的 自定义属性值
<p hel="nihao">hello world</p>
console.log($('p').attr('hel'));
当然 也可以获取到 元素 自带的一些属性
<a href="http://www.zhaoyunchong.com/page.html">跳转</a>
console.log($('a').attr('href'));
那么 attr 是获取和设置 属性的 prop 是干什么的 其实他也是获取属性的
不放我们试试用prop 获取下
<p hel="nihao">hello world</p>
<script type="text/javascript">
console.log($('p').prop('hel'));
</script>
看到下面的输出 惊呆我了 不可以吗 怎么给我输出一个undefined
别急 我们再试试看
<a href="http://www.zhaoyunchong.com/page.html">跳转</a>
<script type="text/javascript">
console.log($('a').prop('href'));
</script>
看下下面 不是获取到了么
根据上面的 童鞋们 应该可以总结出来什么的
prop 可以获取 元素自带的属性 但是不可以获取到 自定义的属性
那这样 他能不能给元素加上 自定义属性了 别急 我们再试试看
<a href="http://www.zhaoyunchong.com/page.html">跳转</a>
<script type="text/javascript">
$('a').prop('num',30)
console.log($('a').prop('num'));
</script>
我们尝试着加上 之后看见了 并没有 显示在 dom 元素上 这个和 attr 不一样
但打印确实有这个东西
这下可以总结出来，prop 可以给 元素加上一个自定义属性 但是 不回显示到 dom树上，但却可以获取到
除了这点 区别 还有其他的呢 当然有了
在dom元素中有一些 表单元素 表单元素 有一些表示 状态的属性
如 select checkbox radio 这些元素
我们再试试看 attr和prop 的区别
<input type="radio" checked="checked">单选
<button class="attr">attr</button>
<button class="prop">prop</button>
<script type="text/javascript">
$('.attr').on('click',function(){
console.log($('input').attr('checked'))
if($('input').attr('checked')){
$('input').attr('checked',false);
}else{
$('input').attr('checked',true);
}
})
$('.prop').on('click',function(){
if($('input').is(":checked")){
$('input').prop('checked',false);
}else{
$('input').prop('checked',true);
}
})
</script>
测试1
这样看起来 好像没啥问题 对吧
我们来回切换 再试试看
测试2
来回切换 就出来问题 了 prop 可以 切换 但是 attr 就出问题了
我们在打印下 数据 看看情况
测试3
这个时候看出来 问题 attr 打印 出来的情况是
checked undefined
而prop 打印出来 是 true 和 false
由此 总结 可得 哈 设计和获取 状态 切换的 要用 prop， attr会出错的
小知识 学习
在html5 建议 自定义属性 前面 最好加上 data-自定义属性 这种方式
其实工作中用的也比较多 赋值到元素上面 我们在 获取到 然后传送给 后台接口中
好吧 我们来实验下 哈
<p data-hel="hello" id="hel"></p>
<script type="text/javascript">
// 使用jquery的方式
console.log($('p').attr('data-hel'));
// 使用html5的方式
var d1=document.querySelector("#hel");
console.log(d1.dataset['hel']);
</script>
看吧确实可以获取到 原生的两个方式 是 setAttribute 和 getAttribute
前往低代码交流专区
更多推荐
6
0- 0
已为社区贡献4条内容
所有评论(0)