Deep Learning of jQuery features and operations, deep learning of jquery features

Deep Learning of jQuery features and operations, deep learning of jquery features
* Directory [1] Get features [2] set features [3] Delete features before

Each element has one or more features. The purpose of these features is to provide additional information about the corresponding element or its content. The DOM methods of operation features mainly include the getAttribute () method, setAttribute () method, and removeAttribute () method. In jQuery, an attr () method and removeAttr () method are used () you can solve all the problems, including compatibility issues. This article describes the features and operations in jQuery.

 

Obtain features

The attr () method is used in jQuery to obtain and set features. attr is the abbreviation of attribute. the attr () method is often used in jQuery DOM operations.

Attr (attributeName)

Attr (passed in feature name): gets the feature value, which is equivalent to 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 obtains only the attribute values of the First Matching Element. To obtain the attribute values of each individual element, we rely on jQuery's. each () or. map () method to loop.

<Div class = "test" id = "ele1"> element 1 </div> <div class = "test" id = "ele2"> element 2 </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 ()

Property and attribute are different. Attribute is the attribute of a DOM node, and the attribute is the attribute of an HTML Tag.

[Note] the detailed information about the difference between properties and features is now

<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-the browser returns 123, and other browsers return 'abc' console. log (test. getAttribute ('data') console. log (test. data) // 123 // IE8-the browser returns 123, and other browsers return 'abc' console. log ($ ('# test '). attr ('data') console. log ($ ('# test '). prop ('data') // 123 </script>

The code above shows that jQuery does not solve the problem of obfuscation between attributes and features of earlier ie browsers.

 

Set features

Although the attr () method is still used for setting features, there are three methods

[1] attr (attributeName, value)

Attr (feature name, feature value): sets the feature value, which is equivalent to 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 prohibits you from changing the type attribute of an <input> or <button> element, causing silent failure. Because IE8-does not allow changes to the type attribute of the <input> or <button> element, silent fails.

<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 feature values for a specified element, that is, {feature name 1: "feature value 1", feature name 2: "feature value 2 ",...}

When multiple features are set, the quotation marks of the feature names 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 setting the style name "class", quotation marks must be used. Otherwise, an error is reported in the IE 8-browser.

<Div id = "test"> </div> <script src = "http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"> </script> <script> $ ('# test '). attr ({class: 'test'}); // IE8-the browser reports an error. other browsers output the 'test' console. log ($ ('# test '). attr ('class'); </script>

[3] attr (attributeName, function (index, attr ))

Attr (feature name, function value): You can use a function to set attributes. You can return the final required attribute value based on other attribute values on the element.

The index in the function indicates the index position of the element in the matching set. html indicates the original HTML content of the element. this indicates the current element. The function returns the value used for setting.

<Div class = "test" id = "ele1" title = "element"> element 1 </div> <div class = "test" id = "ele2" title = "element "> element 2 </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 test0console. log ($ ('# ele2 '). attr ('title'); // element test1 </script>

If you use javascript to achieve similar results, it is actually a string connection.

[Note] IE8-the browser does not support the getElementsByClassName () method.

<Div class = "test" id = "ele1" title = "element"> element 1 </div> <div class = "test" id = "ele2" title = "element "> element 2 </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 test0console. log (ele2.title); // element test1 </script>

 

Delete features

RemoveAttr (attributeName)

The removeAttr () method uses the native removeAttribute () function, but it has the advantage that it can be called directly on a jQuery object, and it solves the problem of different cross-browser feature names.

The attribute name to be removed starts from version 1.7. It can be a list of attributes separated by spaces.

<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'); // 'elemental 'console. log ($ ('# ele1 '). attr ('data'); // 'value' $ ('# ele1 '). removeAttr ('title data'); console. log ($ ('# ele1 '). attr ('title'); // undefinedconsole. log ($ ('# ele1 '). attr ('data'); // undefined </script>