Home >Web Front-end >Front-end Q&A >What function does jquery use to display and hide elements?

What function does jquery use to display and hide elements?

WBOY
WBOYOriginal
2022-04-15 10:47:162723browse

The functions are: 1. show(), this method can display hidden elements, the syntax is "element object.show()"; 2. hide(), this method can hide the displayed elements, the syntax is "element Object.hide()"; 3. toggle(), this method can show or hide elements, the syntax is "Element object.toggle()".

What function does jquery use to display and hide elements?

The operating environment of this tutorial: windows10 system, jquery3.2.1 version, Dell G3 computer.

What function does jquery use to display and hide elements?

1. Display elements: show()

If the selected element has If hidden, these elements are displayed:

Syntax

$(selector).show(speed,callback)
  • speed is optional. Specifies how quickly an element goes from hidden to fully visible. Default is "0".

Possible values:

milliseconds (e.g. 1500)

"slow"

"normal"

"fast"

With the speed set, the element will gradually change its height, width, margins, padding, and transparency as it goes from hidden to fully visible.

  • callback is optional. The function to be executed after the show function is executed. This parameter cannot be set unless the speed parameter is set.

2. Hidden element: hide()

If the selected element has been displayed, hide the element.

Syntax

$(selector).hide(speed,callback)
  • speed is optional. Specifies how quickly an element goes from visible to hidden. Default is "0".

Possible values:

milliseconds (e.g. 1500)

"slow"

"normal"

"fast"

When the speed is set, the element will gradually change its height, width, margins, padding and transparency as it goes from visible to hidden.

  • callback is optional. The function to be executed after the hide function is executed.

This parameter cannot be set unless the speed parameter is set.

The example is as follows:

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
  $("p").hide();
  });
  $(".btn2").click(function(){
  $("p").show();
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Hide</button>
<button class="btn2">Show</button>
</body>
</html>

Output result:

What function does jquery use to display and hide elements?

##3. Automatically identify, show or hide elements: toggle()

The toggle() method switches between hide() and show() on the selected element.

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.

Grammar

$(selector).toggle(speed,easing,callback)

The example is as follows:


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

Output result:


What function does jquery use to display and hide elements?

Related videos Tutorial recommendation:

jQuery video tutorial

The above is the detailed content of What function does jquery use to display and hide elements?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article:Is hover a jquery event?Next article:Is hover a jquery event?