JQuery-how to hide and display Dom elements (source code 2.0.3)

1. show (): displays the Dom element.
2. hide (): Hiding Dom elements
3. toggle (): changes the display status of Dom elements. If the current status is displayed, the function is hidden after running.

I also thought about the implementation principles of these three functions. If I thought it was a simple setting style, I changed the value of the display attribute to block or none. Then I got it wrong. I checked the jQuery2.0.3 source code and understood the implementation principles of the three functions. In fact, the implementation logic is a little complicated. The following describes the specific implementation:

1. Data Storage (1) Overview

Why is data storage irrelevant to hiding and displaying Dom elements. In fact, jQuery uses the Data storage Data class and cache to save the display status before each Dom element.

In jQuery, the Data class is used for Data management. A total of two instance objects are created:

Data_user = new Data ();
Data_priv = new Data ();

The data_priv object is used for Dom element display and hiding.

(2) Storage Logic

The prototype methods of the Data class include:
Key (), set (), get (), access (), Remove (), hasData (), discard ()

The key () function needs to pass in a Dom element. In the function, the Dom element is bound to an unlock value through the defineProperties () function. The Unlock value is an auto-increment integer Data. uid.

In this way, a Dom element corresponds to a key value and is saved to the cache:

Cache [unlock] ['key'] = value; (the key value is olddisplay when Dom is hidden and displayed)
Example: Cache2 ['olddisplay'] = 'block'

In this way, the display status of each Dom is saved. The get () and set () functions can get and save the display status by passing parameters.

2. Main Function functions: showHide (elements, show)

Parameter description:
(1) Elements parameter: indicates the dom elements to be displayed or hidden (an array can be used). The Showhide function traverses Elements for processing.
(2) show parameter: Indicates whether to display the dom. You can pass true. If you need to hide it, you do not need to input any parameters. Of course, false is also acceptable.

When the Dom element is displayed, jQuery first determines the value of the display attribute saved in the cache. If there is a value such as block, display is set to this value. Otherwise, the display of the Dom element is set to the default value at the time of creation through the css_defadisplay display () function, and then the value of the display attribute is saved in the cache.

When hiding a Dom element, set the value of the display attribute to none.

The show function, hide function, and toggle function implementation call this primary function showHide () and pass in different parameters. The toggle function uses the isHidden () function to determine the display status of the current element.

 

3. Implementation principle of the css_defadisplay display () function:

JQuery will first find the display attribute of the corresponding element tag from the elemdisplay object. If it exists, it will return. Elemdisplay initialization value: {BODY: "block "}

If the tag does not exist, a new Dom element is added to the body, and the value of the display attribute is obtained. In this case, if the display attribute of the label is set to none in the style sheet, the obtained value is none.

JQuery has made a special deal to solve this problem. Create an iframe and then create a new label in the iframe, and then take the value of its display attribute, this will not be affected by the user style sheet. The default value of the displayed property will be added to the elemdisplay object for later use.