Html learning-element hiding/display and input hiding

Html learning-element hiding/display and input hiding
Element hiding

In html, we often need to hide some elements. Sometimes we need to temporarily hide the page so that other elements can be displayed to complete the operation. Sometimes some information needs to be transmitted to js, but we do not want to show it to users, so it will also be hidden.

Display/visibility Method

Both methods can hide elements in html.

First, use the previous html code and then perform the operation.

Html code

The above code is very simple.label input submit buttonThere are four elements in total.

Display code

This is the code that hides the element whose id is firstname.
Is it easy. There is another way:

Visibility Method

This is also hidden.

Differences between the two methods

The first display method is more thorough. That is to say, hidden elements do not occupy space on the page. The typographical elements move in sequence to occupy all the space occupied by the previous elements.

The second is just invisible. However, the position occupied by the page is still its own and will not be used by other elements.

Both methods can be selected by the JQuery selector.

Jquery's hide () and show ()

This is relatively simple.
See the following code:

$('#firstname').hide();

In this way, this element is hidden.
Likewise:

$('#firstname').show();

In this way, the elements are displayed.

Interestingly, both functions have parameters.
The following is how to use it:

$('#firstname').hide('slow/400/fast', function() {        //do something after hide           });

The first parameter is to select the hidden time.slow / 400 / fastThe second parameter is a callback function to tell the browser what the next action is after hiding the element.

Example:

$('#firstname').hide('400', function() {        alert(I have been hidden);});

In this case, OK.

Hide input element

In fact, the above methods can hide the Input element, but the input has a simpler method.
The following code:

This is enough !!
Is it very simple, so you can hide and use it when you only need simple information.