Relationship between the visibility selector of JQuery and show and hide

Relationship between the visibility selector of JQuery and show and hide

The visibility selectors in JQuery refer to: selectors: hidden and: visible. In the previous article, we mentioned the difference between display and visibility. In this article, we will take a look at the elements selected by the visibility selector.

If the visible selector can select outB, the value of $ ("# outB: visible"). size () is 1;

If the outden selector can select outB, the value of $ ("# outB: hidden"). size () is 1.

The test results under IE11/FF17/Chrome39 are as follows:

Display visibility $ ("# outB: visible"). size () $ ("# outB: hidden"). size ()
None visible 0 1

None hidden 0 1

Block visible 1 0

Block hidden 1 0

Analyze the above table and draw a conclusion:

1. The hidden selector does not refer to "visibility: hidden", but to "display: none"

2. The visibility selector does not refer to "visibility: visible", but the display attribute is not none.

That is, the visibility selector is irrelevant to the visibility style and only related to the display.

By the way: the hidden selector can also select the form element of type = "hidden.

In JQuery, if we want to display/hide dom elements, we can use show () and hide (). Now let's take a look at what these two functions have done. We use JQuery2.1.1 to test the following HTML document.

Code 1:

  $("#outA").hide();  alert($("#outA").css("visibility"));//visible  alert($("#outA").css("display"));//none  alert($("#outB").css("visibility"));//visible  alert($("#outB").css("display"));//block

After calling hide () on outA, we can see that the display attribute value of outA changes from block to none, while the visibility attribute value remains unchanged. The display and visibility attribute values of the child element outB are not affected. The following two conclusions can be drawn:

1. The hide () function only sets the display attribute of the element to none, and the visibility attribute is not affected.

2. The hide () function only applies to the currently selected elements, and does not affect the display and visibility attributes of child elements.

Code 2:

// Hide outB first and then show outB $ ("# outB "). hide (); $ ("# outB "). show (); // observe the changes in the attribute value alert ($ ("# outB" ).css ("visibility ")); // visiblealert ($ ("# outB" ).css ("display"); // block

If the display attribute is block before B hides, the value of the display attribute is block when the outB element hide first shows and the value of the display attribute is block. If B hides the display Attribute before the display attribute is inline, the value of the display attribute is inline. We can draw a conclusion:

1. The show () function only affects the value of the display attribute, and restores display to the value (block or inline) before the element in hide ).
This is actually a good introduction and scientific. After all, hide () and show () are only used to control the visibility of elements. If show () is called, the display attribute is set to block or inline, the layout relationship between elements may be damaged.

Code 3:

$("#outA").hide();  $("#outB").show();

The outB element is still invisible, because the parent element outA is invisible, so even if the display attribute of outB is block, the visibility attribute is visible, and the other is invisible.