The difference between attr and prop in Jquery

After the prop method is introduced in higher versions of jquery, when should prop be used? When to use attr? What's the difference between the two of them? These problems arise. The following article mainly introduces you to the relevant information on the difference between attr and prop in Jquery. Friends who need it can refer to it. Let’s take a look together. I hope it can help everyone.

Practical process

Some time ago, a colleague made a page, and the effect is like this

Page

When you click on the checkBox in the upper left corner, you need to select all the checkBoxes below. Our code is like this

 $("input[name='checkbox']").attr("checked",true);

However, it has no effect at all. Later, it was changed to this, okay

 $(function(){
  $("#all").click(function(){
   if($("#all").prop("checked")){
    $("input[name='checkbox']").prop("checked",true);
   }else{
    $("input[name='checkbox']").prop("checked",false);
   }
  });
 });

So I went to the official documentation to check the difference between attr and prop, and found that I couldn’t understand it at all, as shown below

So , we did an experiment

  c1:<input id="c1" name="checkbox" type="checkbox" checked="checked" /></br>
  c2:<input id="c2" name="checkbox" type="checkbox" checked=true/></br>
  c3:<input id="c3" name="checkbox" type="checkbox" checked=""/></br>
  c4:<input id="c4" name="checkbox" type="checkbox" checked/></br>
  c5:<input id="c5" name="checkbox" type="checkbox" /></br>
  c6:<input id="c6" name="checkbox" type="checkbox" checked=false/></br>

   var a1=$("#c1").attr("checked");
   var a2=$("#c2").attr("checked");
   var a3=$("#c3").attr("checked");
   var a4=$("#c4").attr("checked");
   var a5=$("#c5").attr("checked");
   var a6=$("#c6").attr("checked");

   var p1=$("#c1").prop("checked");
   var p2=$("#c2").prop("checked");
   var p3=$("#c3").prop("checked");
   var p4=$("#c4").prop("checked");
   var p5=$("#c5").prop("checked");
   var p6=$("#c6").prop("checked");

   console.log("a1:"+a1);
   console.log("a2:"+a2);
   console.log("a3:"+a3);
   console.log("a4:"+a4);
   console.log("a5:"+a5);
   console.log("a6:"+a6);

   console.log("p1:"+p1);
   console.log("p2:"+p2);
   console.log("p3:"+p3);
   console.log("p4:"+p4);
   console.log("p5:"+p5);
   console.log("p6:"+p6);

The result is like this (chrome)

Effect

It is found that the return value of attr is either checked Either is undefined, and the return values ​​​​of prop are only true and false.

After searching and testing on the Internet, the results of the

prop() function are summarized:

1. If there is a corresponding attribute, return the specified attribute value.

2. If there is no corresponding attribute, the return value is an empty string.

attr() function result:

1. If there is a corresponding attribute, return the specified attribute value.

2. If there is no corresponding attribute, the return value is undefined.

For the inherent attributes of the HTML element itself, use the prop method when processing.

For our own customized DOM attributes of HTML elements, use the attr method when processing them.

Attributes with two properties, true and false, such as checked, selected or disabled, use prop()

Related recommendations:

In jQuery. The difference between attr() and .data()

Introduction to the use of getAttribute in JavaScript

jquery selector [attribute=value] appears Problem solution

The above is the detailed content of The difference between attr and prop in Jquery. For more information, please follow other related articles on the PHP Chinese website!