Analysis jQuery source (13) to the data operation modules Detailed DOM properties

jQuery's attribute manipulation module has a total of four sections herein, this talk about the second part: DOM properties section, is used to modify the properties of DOM elements (attributes and characteristics are not the same, generally translated as property attribute, attribute translation a characteristic)

Static method DOM interface properties as follows:

prop (elem, name, value); DOM attributes set or read, in two ways, as follows

　　　　　　· $ .Prop (elem, name, value); passing the third parameter indicates the set value of the name attribute of the element elem value
　　　　　　· $ .prop (elem, name,); third parameter is undefined or set to pass then retrieves the name attribute elem

jQuery / $ instance method (that can be called by jQuery example):

writer by: Desert QQ: 22969969

prop (name, value); DOM attributes set or read, the following usage

　　　　　　An object parameter; .prop (obj)

　　　　　　.prop (name); 1 is a string parameter, parameter set 2 is not specified, or undefined, the first matching element retrieves the value of name attribute

　　　　　　.prop (name, value); who can be provided a value for each matching element

RemoveProp (name) a name attribute is removed from each of the matched elements, name may be one or more attribute name dom (separated by spaces)

For chestnut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
    <input type="text">
    <button id="b1"Button</Settings>>
    <button id="b2">获取值</button>
    <script>
        let input    = document.getElementsByTagName('input')[0],
            b1         = document.getElementsByTagName('button')[0],
            b2         = document.getElementsByTagName('button')[1];
            b1.onclick = ()=>{                
                $ ( ' INPUT ' ) .prop ( ' value ' , 555 )             // set 555 equal to the value input box .prop $ (INPUT, 'value', 555) 
            }
            b2.onclick = ()=>{
                Result the let = $ ( ' INPUT ' ) .prop ( ' value ' );      // the value is equal to the input box acquired: the let $ .prop Result = (INPUT, 'value'); 
                the console.log (Result);
            }
    </script>    
</body>
</html>

Render as follows:

We click on the settings button will change to the value of 555:

Then click get the value, the value input box will obtain value of this DOM object:

Source code analysis

$ .Prop achieve the following:

jQuery.extend({
        prop: function (elem, name, value) {         // set or read DOm properties. elem to read, DOM element set, name is the name of the attribute DOM operations, value DOM attribute value is to be operated 
            var RET, Hooks, notxml,
                nType = elem.nodeType;
             IF (! elem. 3 || || nType nType === === === nType. 8 || 2) {         // If elem empty or text, comment, attribute nodes 
                return ;                                                             / / return directly, not followed by treatment 
            }    
            notxml ! = nType == 1 || jQuery.isXMLDoc (elem);!                 // whether xml document elements
    
            IF (notxml) {                                                     // If not xml document element 
                name = jQuery.propFix [name] || name;                             // correction DOM attribute name 
                Hooks jQuery.propHooks = [name];                                 // correcting the correction target attribute extended DOM 
            }
    
            IF (value! == undefined) {     // If the value is not null, then the set value 
                IF (Hooks && "SET" in Hooks && (RET = hooks.set (elem, value, name))! == undefined) {         // priority correction method calls the SET () 
                    return RET;
    
                } The else {
                     return (elem [name] = value);                                  // set value, and the value returned 
                }
    
            } The else {                         // If value is null value is read name 
                IF (Hooks && "get" in Hooks && (RET = hooks.get (elem, name))! == null ) {                     // priority call get Correction () 
                    return RET;
    
                } The else {
                     return elem [name];                                             // Get value corresponding 
                }
            }
        },
        /**/
})

It's quite simple, jQuery for instance, it HTMl characteristics and the same part, as follows:

jQuery.fn.extend({
    prop: function (name, value) {         // set or read DOM properties 
        return jQuery.access ( the this , name, value, to true , jQuery.prop); 　　// $ borrows tool methods .access
    },

    RemoveProp: function (name) {         // remove an attribute from each of the matched DOM element 
        name = jQuery.propFix [name] || name;         // if the attribute name needs to be corrected, the correction property 
        return  the this .each ( function () {
             // the try / Handles the catch Cases WHERE IEs balks (ON SUCH aS Removing property A window) 
            the try {
                 the this [name] = undefined;                 // first set to undefined 
                delete  the this [name];                      // delete attributes 
            } the catch (e) {}
        });
    },
    / * Skip * / 
})

We can see, prop jQuery instance method is borrowed $ .access tool method, $. Access HTML properties in part already mentioned, do not say here.

Analysis jQuery source (13) to the data operation modules Detailed DOM properties

Guess you like