JQuery chain call and show knowledge analysis, jquery chain

JQuery chain call and show knowledge analysis, jquery chain

The previous article introduced the jQuery framework. For more information about jquery, see.

JQuery has been used for a long time, but some APIs cannot be implemented. The following describes the simplified code and focuses on the implementation of jQuery.

Compared with the previous article, the code was updated: 21 ~ 78

(Function (window, undefined) {function jQuery (sel) {return new jQuery. prototype. init (sel);} jQuery. prototype = {constructor: jQuery, init: function (sel) {if (typeof sel = 'string') {var that = this; var nodeList = document. querySelectorAll (sel); Array. prototype. forEach. call (nodeList, function (val, I) {that [I] = val;}) this. selector = sel; this. length = nodeList. length ;}}, show: function () {Array. prototype. forE Ach. call (this, function (node) {// if (node. style) continue; // textnode does not have a style // Delete the display: nonevar display = node on the style. style. display; if (display = 'None') {// if dispaly is set to null, css will take effect if display is available. // otherwise, the default node will take effect. style. display = '';} // If the element display value is not the default value, it must be restored to oldDisplay: div-> display: inline-block // or check whether the display on css is noneif (node. style. display = ''| isHidden (node) {// if (node. oldDisplay) node. style. Display = node. oldDisplay; // if not, it is set to the default value of the element or the current value of the element else node. style. display = getDisplay (node) ;}}) // chained call return this ;}, hide: function () {Array. prototype. forEach. call (this, function (node) {if (! IsHidden (node) {// jQuery uses its cache mechanism to store information. Here we can simplify the process. // directly mount the node to the corresponding dom. oldDisplay = getDisplay (node); node. style. display = 'none' ;}}) return this ;}} function getDisplay (node) {var display = window. getComputedStyle (node, null ). getPropertyValue ('display'); if (display = 'None') {var dom = document. createElement (node. nodeName); // insert it into the body document. body. appendChild (dom); // you can obtain the default value var display = window of the element display. getComputedStyle (dom, null ). getPropertyValue ('display'); document. body. removeChild (dom);} return display;} function isHidden (node) {// ignore this hiding condition for elements not appended into document: $ ('<div> block </div>') does not appendreturn window. getComputedStyle (node, null ). getPropertyValue ('display') = 'none';} jQuery. prototype. init. prototype = jQuery. prototype; window. $ = jQuery;}) (window );

Get firstHideWarm up the function. As mentioned in the previous article, jQuery will process the obtained nodeList into an array. Therefore, we use forEach to process each node in the array.

Next, we only need to set the style. display of each node to 'None' to hide it. Very simple, right? (⊙ 0 ⊙ ). OldDisplay and return this do not care about begin (￣ ▽ ￣) begin

Hide: function () {Array. prototype. forEach. call (this, function (node) {if (! IsHidden (node) {// jQuery uses its cache mechanism to store information. Here we can simplify the process. // directly mount the node to the corresponding dom. oldDisplay = getDisplay (node); node. style. display = 'none' ;}}) return this ;}

Here, isHidden is used to determine whether the element is hidden: there is no need to process the hidden element and skip it directly.

Function isHidden (node) {// ignore the hidden element not appended into the document: $ ('<div> block </div>') Not appendreturn window. getComputedStyle (node, null ). getPropertyValue ('display') ==='none ';}

--------------------------

Next, let's get a little tedious show. First, a problem is thrown to cause a series of problems:

An hide element only needs to display: none. What about show?

Display: Isn't block enough? In this way, the elements can be displayed. But what if the original element value is display: inline?

Is it okay to save the original value in hide? Like the following code:

node.oldDisplay = getDisplay(node); 

What if I didn't execute hide before executing show? For example, in the following case, will there be no oldDisplay? (⊙ 0 ⊙)

<style>div{ display:none; }</style><div>display:none</div>$('div').show() 

Well, the key point is: can we get the default value of the element display? For example, div is block by default, and span is inline by default.

Now that we have ideas, the following problems are:How to get the default value of element display?

Hey, don't you think of it? Here you need to use tips. The general idea is as follows: Use nodeName to create a new tag and then obtain it.

You can optimize it again. After getDisplay obtains the default value of the display element, it can be stored using the jQuery cache mechanism (in fact, jQuery does the same ).

Function getDisplay (node) {var display = window. getComputedStyle (node, null ). getPropertyValue ('display'); if (display = 'None') {var dom = document. createElement (node. nodeName); // insert it into the body document. body. appendChild (dom); // you can obtain the default value var display = window of the element display. getComputedStyle (dom, null ). getPropertyValue ('display'); document. body. removeChild (dom);} return display ;}

Then, based on these two situations:

// If (node. oldDisplay) node. style. display = node. oldDisplay; // if not, it is set to the default value of the element or the current value of the element else node. style. display = getDisplay (node );

Thought this would end? NO, the show function is still quite complex. We have to deal with these situations:

<Style> # none, # none2 {display: none ;} </style> <body> <div id = "div"> default value: block </div> <span id = "span"> default value: inline </span> <div id = "div2" style = "display: inline-block; "> changed to inline-block </div> <div id =" none "> hidden by css </div> <div id =" none2 "style =" display: none "> hidden by css and style </div> </body>

In the end, the show function becomes like this ). The general idea is as follows:

Show: function () {Array. prototype. forEach. call (this, function (node) {// if (node. style) continue; // textnode does not have a style // Delete the display: nonevar display = node on the style. style. display; if (display = 'None') {// if dispaly is set to null, css will take effect if display is available. // otherwise, the default node will take effect. style. display = '';} // If the element display value is not the default value, it must be restored to oldDisplay: div-> display: inline-block // or check whether the display on css is noneif (node. style. display = ''| isHidden (node) {// if (node. oldDisplay) node. style. display = node. oldDisplay; // if not, it is set to the default value of the element or the current value of else node. style. display = getDisplay (node );}})}

--------------------------

Chain callThis is similar:

$('div').show().hide().css('height','300px').toggle()

Implementation is very simple, as long as you return this after each function

--------------------------

Some people say: Hello! This show, hide is incorrect, right? Is the time parameter missing? Use setTimeOut to implement it by yourself ~> _ <~ +.

This section mainly aims to let everyone know that jQuery has many situations to consider (a lot of dirty work ). The code is simplified in real time and remains so long.

After writing the show, I found that there is another situation I did not consider:

Div {display: none! Important ;}< div> How Do You Do It Yourself (⊙ 0 ⊙) </div>