How to hide an element in jquery

This article introduces the knowledge of "how to hide an element in jquery". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

The method of hiding an element in jquery: 1, create a HTML sample file; 2, set id;3 to the element, and hide the element through the "$(" # id ") .hide ()" method.

This article operating environment: windows7 system, jquery3.2.1 version, DELL G3 computer

How do you want an element to be hidden in jquery?

There are several ways that jquery controls the hiding and display of elements:

The organization is a little messy, please watch patiently!

Using jquery to control the display and hiding of div can be done in one sentence, such as:

1.$ ("# id") .show () is expressed as display:block

$("# id") .hide () is expressed as display:none

2.$ ("# id") .toggle () toggles the visible state of the element. Switch to hidden if the element is visible, or visible if the element is hidden.

3.$ ("# id"). Css ('display','none'); / / hide

$("# id"). Css ('display','block'); / / display

Or

$("# id") [0] .style.display='none'

Hidden search of objects controlled by display=none

Display=block controls the display of objects

4.$ ("# id"). Css ('visibility','hidden'); / / element hidden

$("# id"). Css ('visibility','visible'); / / element display

The CSS visibility attribute specifies whether the element is visible.

The visible element is visible.

The hidden element is not visible.

This value deletes a row or column when collapse is used in a table element, but it does not affect the layout of the table. The space occupied by rows or columns is reserved for other content. If this value is used on other elements, it will be rendered as "hidden".

Inherit inherits the value of the visibility attribute from the parent element.

Note:

Both display:none and visible:hidden can hide an element on a web page, and there is no difference in visual effects, but there is a difference in some DOM operations:

Display:none-does not reserve its physical space for the hidden object, that is, the object disappears completely on the page, which is generally invisible or invisible.

Visible:hidden--- makes the object invisible on the web page, but the space occupied by the object on the web page has not changed, that is, it still has properties such as height and width, which is invisible but palpable in popular terms.

/ / the first method is to set the style attribute $("# hidediv"). Css ("display", "block") to the element; / / the second method is to change the element to class to achieve hidden div, provided that the changed class style defines the hidden attribute $("# hidediv"). Attr ("class", "blockclass") / / the third method, through jquery's css method, set div to hide $("# blockdiv"). Css ("display", "none"); $("# hidediv"). Show (); / show div $("# blockdiv"). Hide (); / / hide div "how to hide an element in jquery" is introduced here, thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!