JQuery features operational details and instance code _jquery

Front.

Each element has one or more attributes that are used to give additional information about the corresponding element or its contents. There are 3 DOM methods for manipulating features: the GetAttribute () method, the SetAttribute () method, and the RemoveAttribute () method, and a attr () and removeattr () in jquery can all be done, Includes compatibility issues. This article will introduce the feature operations in jquery

Get attributes

jquery uses the attr () method to get and set attributes, ATTR is an acronym for Attribute (feature), which is often used in jquery DOM operations attr () method

attr (AttributeName)

attr (incoming attribute name): Gets the value of the attribute, equivalent to the getattribute in Dom ()

<div id= "Test" ></div>
<script src= "Http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js" > </script>
<script>
console.log (test.getattribute (' id '));//' Test '  
console.log ($ (' #test ') ). attr (' id ');//' Test '
</script>

[Note the]attr () method gets only the property value of the first matching element. To get the attribute values for each individual element, we rely on the. each () or. Map () method loop of jquery.

<div class= "test" id= "Ele1" > Element one </div>
<div class= "test" id= "Ele2" > element two </div>
< Script src= "Http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js" ></script>
<script>
Console.log ('. Test '). attr (' id ');//' Test '
$ ('. Test '). Each (function (index) {
 Console.log (index+ ":" +$ ( This). attr (' id '));//' 1:ele1 2:ele2 '
})
; </script>

Prop ()

Attributes and attributes are different. Attributes are attributes of a DOM node, and attributes are attributes of HTML tags

[note] Details on the difference between attributes and attributes are in this

<div id= "test" data= "abc" ></div>
<script src= "http://cdn.bootcss.com/jquery/1.12.4/" Jquery.min.js "></script>
<script>
test.data = 123;
ie8-Browser returns 123, other browsers return ' abc '
Console.log (test.getattribute (' data '))
Console.log (test.data)//123
// ie8-Browser returns 123, other browsers return ' abc '
console.log (' #test '). attr (' data ')
Console.log ($ (' #test '). Prop (' data ')/ 123
</script>

From the code above, jquery does not solve the problem of confusing the properties and features of the low version IE browser

Setting attributes

Setting attributes, while still using the attr () method, has 3 different ways

"1" attr (Attributename,value)

attr (attribute name, attribute value): Sets the value of the attribute, equivalent to the setattribute in Dom ()

<div id= "Test" ></div>
<script src= "Http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js" > </script>
<script>
test.setattribute (' title ', ' abc ');
Console.log (Test.getattribute (' title '))//' ABC '
$ (' #test '). attr (' title ', ' 123 ');  
Console.log (' #test '). attr (' title ');//' 123 '
</script>

jquery disables the change of the type attribute of a <input> or <button> element and silently fails. Silence fails because ie8-does not allow the type attribute of <input> or <button> elements to be changed

<input id= "Test" type= "text" >
<script src= "Http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js" > </script>
<script>
test.setattribute (' type ', ' button ');
$ (' #test '). attr (' type ', ' button ');  
</script>

"2" attr (attributes)

attr (attributes): Sets multiple attribute values for the specified element, that is, {attribute name one: "Attribute value one", attribute name two: "attribute value two",...}

When multiple attributes are set, the quotation marks for the package attribute name are optional

<div id= "Test" ></div>
<script src= "Http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js" > </script>
<script>
test.setattribute (' title ', ' abc ');
Test.setattribute (' A ', ' abc ');
Console.log (Test.getattribute (' title '))//' abc '
Console.log (Test.getattribute (' a '))//' ABC '
$ (' #test '). attr ({
  title: ' 123 ',
  A: ' 123 '
});  
Console.log (' #test '). attr (' title '))//' 123 '
console.log ($ (' #test '). attr (' a '));//' 123 '
</script >

[note] When you set the style name "class" attribute, you must use quotation marks. Otherwise, the Ie8-browser will complain.

<div id= "Test" ></div>
<script src= "Http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js" > </script>
<script>
$ (' #test '). attr ({
  class: ' Test '
});  
ie8-Browser will error, other browsers output ' test '
console.log (' #test '). attr (' class '));
</script>

"3" attr (Attributename,function (index,attr))

attr (attribute name, function value): By using a function to set the property, you can return the final desired property value based on the other property values on the element

The index in the function represents the indexed position of the element in the matching collection, HTML represents the original HTML content of the element, this points to the current element, and the function returns the value to be set

<div class= "test" id= "Ele1" title= "element" > Element one </div>
<div class= "test" id= "Ele2" title= "elements" > Element II </div>
<script src= "Http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js" ></script>
<script>
$ ('. Test '). attr (' title ', function (index,attr) {return
  attr + this.classname +index
})
console.log (' #ele1 '). attr (' title '));//Element test0
console.log (' #ele2 '). attr (' title '));//Element Test1
</script>

If you implement a similar effect with JavaScript, it is actually a string connection

Attention ie8-Browser does not support the Getelementsbyclassname () method

<div class= "test" id= "Ele1" title= "element" > Element one </div>
<div class= "test" id= "Ele2" title= "elements" > Element II </div>
<script>
var classtest = document.getelementsbyclassname (' test ');
for (var i = 0; i < classtest.length i++) {
  classtest[i].title = classtest[i].title + classtest[i].classname + i;
   }
Console.log (ele1.title);//Element test0
Console.log (ele2.title);//element test1
</script>

Delete attribute

Removeattr (AttributeName)

The Removeattr () method uses the native RemoveAttribute () function, but its advantage is that it can be invoked directly on a jquery object, and it solves a problem with a different browser's attribute name

The name of the property to be removed starts with version 1.7 and can be a space-delimited list of attributes

<div id= "Ele1" title= "element" Data= "value" > Element </div>
<script src= "http://cdn.bootcss.com/jquery/ 1.12.4/jquery.min.js "></script>
<script>
console.log ($ (' #ele1 '). attr (' title '));//' element '
console.log (' #ele1 '). attr (' data ');//' Value '
$ (' #ele1 '). Removeattr (' title Data ');
Console.log (' #ele1 '). attr (' title ');//undefined
Console.log ($ (' #ele1 '). attr (' data ');
</script>

Through this article, I hope you can have the knowledge of jquery characteristics operation, thank you for your support of this site!