cari

Rumah >hujung hadapan web >tutorial js >jQuery中attr与prop之间有什么的区别

jQuery中attr与prop之间有什么的区别

清浅
清浅asal
2018-11-23 16:22:222915semak imbas

本篇文章将要分享有关jQuery中的attr()与prop()设置属性以及获取属性的区别，有一定的参考价值，希望对大家有所帮助

经常我们会习惯的用attr()方法来获取属性值，比如想要获取一个图片的alt属性我们可以用attr直接获得，但在某些元素中，不能直接获取标准属性（true/false），所以后来有了prop属性，它的返回值都是标准属性，那么哪些属性用attr,哪些用prop呢？将在下面的文章里为大家详细介绍

attr属性

attr(name|properties|key,value|fn)

用于设置或返回被选元素的属性值。

当用于返回属性值时，则只返回第一个匹配元素的值。

当用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对

例：为所有图像设置src属性以及长宽

<body>
	<img>
	<script src="jquery/jquery-1.12.4.js"></script>
	<script>
		$(function(){
$("img").attr({width:"100px",height:"100px","src":"images/1.jpg"});
		})//为img添加多个属性值
</script>
</body>

Image 11.jpg

prop 属性

获取在匹配的元素集中的第一个元素的属性值

选中为true，没选中为false

当选择爱好时全选，其他单选，当四个全部选择时则爱好全选

<script src="jquery/jquery-1.12.4.js"></script>
<script>
 $(function () {
 
  $("#j_cbAll").click(function () {
   //修改下面的哪些checkbox
   $("#j_tb input").prop("checked", $(this).prop("checked"));
 });
  $("#j_tb input").click(function () {
   if($("#j_tb input:checked").length  ==  $("#j_tb input").length){
    $("#j_cbAll").prop("checked", true)
}else {
    $("#j_cbAll").prop("checked", false)
  }
 });
 
});

</script>

单选时

Image 12.jpg

选爱好时


attr与prop区别：

（1）比如在checked，selected，disabled等中prop方法返回的是布尔值，而attr返回的则是已定义的字符串

（2）prop（）属性用于设置或获取指定DOM元素也就是JavaScript中对象属性，所以我们可以设置数组或对象，而attr作用于文档节点，所以只能是字符串

（3）prop（）属性的使用比attr兼容性更好

所以当属性只需要添加属性名时可以用attr，当只需返回true/false时就要用prop。

总结：以上就是本篇文章的全部内容了，希望通过这篇文章，大家能够明白attr与prop之间的区别


Atas ialah kandungan terperinci jQuery中attr与prop之间有什么的区别. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：JavaScript中原始值是什么？JavaScript中原始值的详解Artikel seterusnya：js如何设置css样式？js修改css样式的方法

Artikel berkaitan

Lihat lagi