prop&attr

作者: 强某某 | 来源:发表于2018-05-26 17:04 被阅读20次

checkbox

 <input type="checkbox" checked='checked'>

说明:多选框中的checked属性除非不写,不然不论赋什么值,还是不写值,都代表选中。

attribute

html的预定义属性和自定义属性


input标签:针对的html
所以如上:checked是input标签的attribute


property

js原生对象的直接属性
每一个预定义的attribute都会有一个property与之对应


input节点:针对的是js
所以如上:checked是input节点的property


布尔值属性和非布尔值属性

<body>
    <input type="checkbox" checked='checked' name='zq'>
</body>
</html>
<script>
    //此时checked属性就是布尔值属性
    //name属性就是非布尔值属性
    //   布尔值属性:property的属性值是布尔值类型
    //   非布尔值属性:property的属性值是非布尔值类型
    //非布尔值属性:不论什么情况property和attribute都会同步
    //布尔值属性:1.改变property不会同步修改attribute
    //2.在没有动过property时,attribute会同步property,一旦动过property
    //attribute不会同步property
var zq=document.querySelector('input[type=checkbox]');
//修改attribute
zq.setAttribute("name","zq1");
//修改property
zq.name='zq2';

//浏览器只认property,用户操作的是property
</script>

属性使用attr还是prop的区分图

prop&attr.png

能使用attribute尽量使用attribute,性能高。

基本案例:

此时只有在第一次点击全选才有效,如果一旦第一次点击操作过property则全选无效,例如此时的水果三个全部手动选中,都是操作property,则在点击全选无效。如果在html全部给水果加上checked属性就相当于操作了property,此时即使第一次点击全选也无效。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>H5</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <input type="checkbox" >苹果
    <input type="checkbox" >栗子
    <input type="checkbox" >香蕉
    <input type="button" id="CheckAll" value="全选">
</body>
</html>
<script>
  $(function(){
      $("#CheckAll").click(function(){
          $(":checkbox[type=checkbox]").attr("checked",true);
      })
  })
</script>

对比案例:

checked属性是布尔值属性,如果使用操作property则一直有效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>H5</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <input type="checkbox" >苹果
    <input type="checkbox" >栗子
    <input type="checkbox" >香蕉
    <input type="button" id="CheckAll" value="全选">
</body>
</html>
<script>
  $(function(){
      $("#CheckAll").click(function(){
          $(":checkbox[type=checkbox]").prop("checked",true);
      })
  })
</script>

相关文章

  • prop&attr

    checkbox 说明:多选框中的checked属性除非不写,不然不论赋什么值,还是不写值,都代表选中。 attr...

  • JS 方括号[]

    var test = { 'attr0' : 'attr1', 'attr1' : 'at...

  • DOM属性操作

    attr() 获取设置属性 $("p").attr("title")$("p").attr("title","yo...

  • 前端学习笔记

    jQuery中attr()和prop()的使用和区别 一、attr()使用 $(selector).attr():...

  • CSS3新增选择器

    选择器属性选择器 E[attr] 选中具有attr属性的E元素E[attr="var"] 选中具有attr属性且...

  • 16、jQuery 对属性的操作

    attr(): attr(属性名):获取属性 attr(属性名,属性值):修改或添加属性 removeAttr(属...

  • 无标题文章

    $(".photo img").attr("src", src);$(".preview img").attr("...

  • jQuery 样式篇

    attr("attrName") 获取属性的值 attr(属性名, 属性值): 设置属性的值 attr(属性名,函...

  • Jquery中的`attr`和`prop`的区别

    Jquery中的attr和prop的区别 测试唤醒: Google attr和prop的作用和区别   attr和...

  • [易混]attr和prop属性

    attr具体用法: attr(key) : 获取属性key的值 , 属性名key可以自定义attr(key,val...

网友评论

    本文标题:prop&attr

    本文链接:https://www.haomeiwen.com/subject/spimjftx.html