How to hide an element in jquery

How to hide an element in jquery: 1. Create an HTML sample file; 2. Set an id to the element; 3. Hide the element through the "$("#id").hide()" method That’s it.

The operating environment of this article: windows7 system, jquery version 3.2.1, DELL G3 computer

How to hide an element in jquery?

Several ways to control the hiding and display of elements with jquery:

The organization is slightly messy, please be patient!

Use jquery to control the display and hiding of divs, which can be done in one sentence, for example:

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

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

2.$("#id").toggle() switches the visibility of the element state. If the element is visible, switch it to hidden; if the element is hidden, switch it to visible.

3.$("#id").css('display','none');//Hide

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

or

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

Display=none control Hidden search of objects

Display=block controls the display of objects

4.$("#id").css('visibility','hidden');//Element hiding

$("#id").css('visibility','visible');//Element display

The CSS visibility property specifies whether the element is visible.

visible The element is visible.

hidden The element is invisible.

collapse When used in a table element, this value can delete a row or column, but it does not affect the layout of the table. The space occupied by a row or column is freed for other content. If this value is used on another element, it will be rendered as "hidden".

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

Note:

Both display:none and visible:hidden can hide an element on the web page. There is no difference in visual effects, but there are differences between the two in some DOM operations:

display:none ---Do not reserve the physical space for the hidden object, that is, the object completely disappears from the page. In layman's terms, it cannot be seen or touched.

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 attributes such as height, width, etc. In layman's terms, it means that it is invisible but Touchable.

//第1种方法 ,给元素设置style属性  
$("#hidediv").css("display", "block");  
//第2种方法 ,给元素换class，来实现隐藏div，前提是换的class样式定义好了隐藏属性  
$("#hidediv").attr("class", "blockclass");  
//第3种方法,通过jquery的css方法，设置div隐藏  
$("#blockdiv").css("display", "none");  
  
$("#hidediv").show();//显示div    
$("#blockdiv").hide();//隐藏div

Recommended learning: "jquery video tutorial"

The above is the detailed content of How to hide an element in jquery. For more information, please follow other related articles on the PHP Chinese website!