1. 编程号首页

js中prop和attr_jquery获取属性值attr「建议收藏」

编程小号 • • 未分类

js中prop和attr_jquery获取属性值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

在这里插入图片描述

今天的文章js中prop和attr_jquery获取属性值attr「建议收藏」分享到此就结束了，感谢您的阅读。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/85821.html

赞 (0)
编程小号编程小号
0

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注