jquery中prop和attr的区别

曾经终败给现在 2021-09-10 23:44 462阅读 0赞

jquery中prop和attr的区别

prop:

  1. prop(name|properties|key,value|fn)
  3. **概述**
  5.     获取在匹配的元素集中的第一个元素的属性值。
  6.     随着一些内置属性的DOM元素或window对象，如果试图将删除该属性，浏览器可能会产生错误。  
  7.     jQuery第一次分配undefined值的属性，而忽略了浏览器生成的任何错误
  9. **参数**
  11.     name                        String                  V1.6
  12.     属性名称
  14.     properties                  Map                     V1.6
  15.     作为属性的“名/值对”对象
  17.     key,value                   String,Object           V1.6
  18.     属性名称，属性值
  20.     key,function(index, attr)   String,Function         V1.6
  21.     1:属性名称。
  22.     2:返回属性值的函数,第一个参数为当前元素的索引值，第二个参数为原先的属性值。
  24. **示例**
  26.     参数name 描述:
  27.     选中复选框为true，没选中为false
  29.     jQuery 代码:
  30.     $("input[type='checkbox']").prop("checked");
  32.     参数properties 描述:
  33.     禁用页面上的所有复选框。
  35.     jQuery 代码:
  36.     $("input[type='checkbox']").prop({
  37.       disabled: true
  38.     });
  40.     参数key,value 描述:
  41.     禁用和选中所有页面上的复选框。
  43.     jQuery 代码:
  44.     $("input[type='checkbox']").prop("disabled", false);
  45.     $("input[type='checkbox']").prop("checked", true);
  47.     参数key,回调函数 描述:
  48.     通过函数来设置所有页面上的复选框被选中。
  50.     jQuery 代码:
  51.     $("input[type='checkbox']").prop("checked", function( i, val ) {
  52.       return !val;
  53.     });

attr

  1. attr(name|properties|key,value|fn)
  3. 概述
  4. 设置或返回被选元素的属性值。
  6. 参数
  8. name                        String                                  V1.0
  9. 属性名称
  11. properties                  Map                                     V1.0
  12. 作为属性的“名/值对”对象
  14. key,value                   String,Object                           V1.0
  15. 属性名称，属性值
  17. key,function(index, attr)   String,Function                         V1.1
  18. 1:属性名称。
  19. 2:返回属性值的函数,第一个参数为当前元素的索引值，第二个参数为原先的属性值。
  21. 示例
  23. 参数name 描述:
  24. 返回文档中所有图像的src属性值。
  26. jQuery 代码:
  27. $("img").attr("src");
  29. 参数properties 描述:
  30. 为所有图像设置src和alt属性。
  32. jQuery 代码:
  33. $("img").attr({ src: "test.jpg", alt: "Test Image" });
  35. 参数key,value 描述:
  36. 为所有图像设置src属性。
  38. jQuery 代码:
  39. $("img").attr("src","test.jpg");
  41. 参数key,回调函数 描述:
  42. 把src属性的值设置为title属性的值。
  44. jQuery 代码:
  45. $("img").attr("title", function() { return this.src });

prop和attr的区别：

  1. 对于值是true/false的property，类似于input的checked attribute等，attribute取得值是HTML文档  
  2. 字面量值，property是取得计算结果，property改变并不影响attribute字面量，但attribute改变会影响  
  3. property计算
  5. <input id="test3" type="checkbox"/>
  7.     var t=document.getElementById('test3');
  8.     console.log(t.getAttribute('checked'));//null
  9.     console.log(t.checked);//false;
  11.     t.setAttribute('checked','checked');
  12.     console.log(t.getAttribute('checked'));//checked
  13.     console.log(t.checked);//true
  15.     t.checked=false;
  16.     console.log(t.getAttribute('checked'));//checked
  17.     console.log(t.checked);//false

参考网址：

  1. http://www.cnblogs.com/dolphinX/p/3348582.html

发表评论

表情：
评论列表 （有 0 条评论，462人围观）

还没有评论，来说两句吧...

相关阅读

    相关 jquery中attr和prop的区别

    在高版本的jquery引入prop方法后，什么时候该用prop？什么时候用attr？它们两个之间有什么区别？这些问题就出现了。 关于它们两个的区别，网上的答案很多。这里谈谈我

    墨蓝墨蓝/ 0 赞/ 130 阅读

    相关 jquery中attr和prop的区别

    在高版本的jquery引入prop方法后，什么时候该用prop？什么时候用attr？它们两个之间有什么区别？这些问题就出现了。 关于它们两个的区别，网上的答案很多。这里谈谈我

    Dear 丶Dear 丶/ 0 赞/ 255 阅读