prop（Property）和attr（attribute）用法区别

最新推荐文章于 2023-01-02 22:13:28 发布

16个夏天

最新推荐文章于 2023-01-02 22:13:28 发布

阅读量746

点赞数

分类专栏： js/jQuery

本文链接：https://blog.csdn.net/xiaoxiangyu5/article/details/49759283

版权

js/jQuery 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

高版本的jquery引入prop方法后，什么时候该用prop？什么时候用attr？它们两个之间有什么区别？

1.对于HTML元素本身就带有的固有属性，在处理时，使用prop方法

2.对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

例如：<a href="#" id="link1" action="delete">删除</a>

<a>元素的DOM属性“href、id"是固有属性，处理这些属性时，建议使用prop方法。

action是自定义的属性，处理这些属性时，建议使用attr方法。

像checkbox，radio和select，readonly和disabled这样的元素，选中属性对应“checked”和“selected”，属于固有属性

$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true
如果上面使用attr方法，则会出现
$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"

3.attr方法里面，最关键的两行代码，elem.setAttribute( name, value + “” )和ret = elem.getAttribute( name )，attr()读操作. 读取的是匹配元素中第一个元素的指定属性值

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("button").click(function () {
                alert($("p").attr("title"));//获取属性
                // this code can only get the first element's attribute.
            });
        });
    </script>
</head>
<body>
<p title="title1">paragraph 1</p>
<p title="title2">paragraph 2</p>
<br/>
<button>get title</button>
</body>
</html>

运行结果:弹框显示: title1.

想要分别获取每一个元素的属性,需要使用jQuery的循环结构,比如.each()或.map()方法.上面的例子可以改成:

<script type="text/javascript">
    $(document).ready(function () {
        $("button").click(function () {
            //get attribute for every element in selection.
            $("p").each(function () {
                alert($(this).attr("title"));
            });
        });
    });
</script>

4.prop方法里面，最关键的两行代码，return ( elem[ name ] = value )和return elem[ name ]，你可以理解成这样document.getElementById(el)[name] = value，这是转化成JS对象的一个属性。

 
  //判断checkbox是否被选中 
 
  if($(this).is(":checked")){ 
 
  alert('选中'); 
 
  } 
 
  else{ 
 
  alert('未选中'); 
 
  } 
 
  //用jquery全选所有class为listbox的checkbox 
 
  $(".listbox").prop("checked", true); 
 
  //用jquery取消所有class为listbox的checkbox的选中 
 
  $(".listbox").prop("checked", false);