How to implement invisible jquery elements-JS Tutorial-php.cn

How to implement invisible jquery elements

藏色散人

Release： 2023-01-04 09:36:38

Original

2849 people have browsed it

How to implement invisible jquery elements: 1. Use the hide method to hide the selected element, with syntax such as "$("p").hide();"; 2. Use the toggle method to hide the element, with syntax such as "$("p").toggle();".

How to implement invisible jquery elements

The operating environment of this tutorial: windows7 system, jquery1.10.0 version, Dell G3 computer. This method is suitable for all brands of computers.

Recommended: jquery video tutorial

jquery makes elements invisible (hide)

Use jquery to control the hiding of elements, It can be done in one sentence, for example:

1. Use the hide()

hide() method to hide the selected element.

Tip: This is similar to the CSS property display:none.

Note: Hidden elements will not be fully displayed (no longer affect the layout of the page).

If you need to show hidden elements, use the show() method.

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("p").hide();
});
$(".btn2").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button class="btn1">隐藏</button>
<button class="btn2">显示</button>
</body>
</html>

Copy after login

Method 2: Use the toggle()

toggle() method to switch between hide() and show() on the selected element. If the element is visible, switch it to hidden; if the element is hidden, switch it to visible.

This method checks the visible status of the selected element. If an element is hidden, show() is run, if an element is visible, hide() is run - this creates a toggle effect.

Note: Hidden elements will not be fully displayed (no longer affect the layout of the page).

Tip: This method can be used to switch between custom functions.

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>切换  hide() 和 show()</button>
</body>
</html>

Copy after login

Method 3: Use css('display','none')

Example:

$("#id").css(&#39;display&#39;,&#39;none&#39;);//隐藏
$("#id").css(&#39;display&#39;,&#39;block&#39;);//显示

Copy after login

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

Copy after login

display=none Control the hiding of objects

display=blockControl the display of objects

Method 4: Use css('visibility','hidden')

Example:

$("#id").css(&#39;visibility&#39;,&#39;hidden&#39;);//元素隐藏
$("#id").css(&#39;visibility&#39;,&#39;visible&#39;);//元素显示

Copy after login

The CSS visibility property specifies whether an element is visible.

visible The element is visible.

hidden The element is invisible.

collapse When used in a table element, this value deletes 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 Inherits 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.

The above is the detailed content of How to implement invisible jquery elements. For more information, please follow other related articles on the PHP Chinese website!