The relationship between the visual selector of jquery and show and hide

The visibility selector in jquery refers to: selectors: Hidden and: visible. In the previous article we mentioned the difference between display and visibility, and this article combines the visibility selector to see what kind of element the visibility selector is selected.

<div id= "OutB" style= "width:400px;height:200; Background: #0000ff;d isplay:block;visibility:hidden; " ></div>

If: The visible selector can select OutB, then $ ("#outB: Visible"). The value of size () 1;

If: The hidden selector is able to select OutB, then $ ("#outB: Hidden"). The value of size () 1.

The test results under Ie11/ff17/chrome39 are as follows:

 display       visibility      $ ("#outB: Visible"). Size ()       $ ("#outB: Hidden"). Size ()
   none            visible           &NBS P               0                     & nbsp                               1

    None             hidden        & nbsp                 0                   nbsp                             r>

    Span style= "font-size:14px" >block           visible                           1         & nbsp                          ,         &NB Sp       0

block Hidden 1 0

Analyzing the table above, you can conclude:

1.: Hidden selector does not refer to "Visibility:hidden", but "Display:none"

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

That is, the visibility selector is independent of the visibility style and is only relevant for display.

By the way: thehidden selector is also able to select the form element that type= "hidden".

In jquery, if we want to show/hide DOM elements, you can use Show () and hide (). Now let's take a look at what these 2 functions do. We use the JQuery2.1.1 version to test the following HTML document.

<div id= "OutA" style= "width:400px; height:400px; Background: #CDC9C9;d isplay:block; " >      <div id= "OutB" style= "width:400px;height:200; background: #0000ff;d isplay:block;" ></div>

Code Listing 1:

  $ ("#outA"). Hide ();  Alert ($ ("#outA"). CSS ("visibility");//visible  alert ($ ("#outA"). CSS ("display");//none  alert ($ ("#outB") . CSS ("visibility"));//visible  alert ($ ("#outB"). CSS ("display"));//block

on Outa, you can see that the value of the display property of Outa has changed from block to none, and the visibility property value remains the same. The display and visibility property values of the child element Outb are not affected. The following 2 conclusions can be drawn:

The 1.hide () function simply sets the display property of an element to the None,visibility property without any effect.

The 2.hide () function only acts on the currently selected element and does not affect the display and visibility properties of the child elements .

Code Listing 2:

Hide OutB First, then show outb$ ("#outB"). Hide (); $ ("#outB"). Show ();//Observe the change in the value of the property alert ($ ("#outB"). CSS ("visibility"));// Visiblealert ($ ("#outB"). CSS ("display"));//block

if B is hidden before the display property is block, then the OUTB element hides after show, the value of the display property is block, and if B is hidden before the display property is inline, So the OUTB element first hide after show, the value of the display property is inline. It can be concluded that:

The 1.show () function is also a value that affects only the display property, restoring display to the value of the element before hide (block or inline).
This is actually very good introduction, but also very scientific. After all, hide () and show () are only used to control the visibility of the element, and if you call Show () to set the display property to the uniform setting of violence to block or inline, then the layout relationship between elements is likely to be destroyed.

Code Listing 3:

$ ("#outA"). Hide ();  $ ("#outB"). Show ();

The OUTB element is still invisible because the parent element outa is not visible, so even if the display property of Outb is the Block,visibility property is visible, it is not visible.

The relationship between the visual selector of jquery and show and hide