How to show and hide elements in jquery

This article introduces the knowledge of "how to show and hide elements 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!

Jquery shows hidden elements with methods: 1, show () and hide (); 2, toggle (), can switch the visible state of the element; 3, slideDown (), can show and hide elements in a sliding way; 4, css (), you can control the element's "display" attribute to show and hide elements.

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

There are many ways to hide p in jquery, such as the relatively simple functions show (), hide (), toggle (), slideDown (), and then css sets the style property of p, which I will introduce below.

Show () and hide () methods

Show () can show hidden

element.

$(".btn2") .click (function () {$("p") .show ();})

Hide () hides the visible

Elements:

$(".btn1") .click (function () {$("p") .hide ();})

This function is often used with show

Toggle () method

The toggle () method toggles the visible state of the element.

If the selected elements are visible, they are hidden, and if they are hidden, they are displayed.

$(document) .ready (function () {$(".btn1") .click (function () {$("p") .toggle (1000);});})

This is a paragraph.

Toggle

SlideDown () method

Show hidden in a sliding manner

Elements:

$(".btn2") .click (function () {$("p") .slideDown ();})

Css () method

The css () method sets or returns one or more style properties of the selected element.

Returns the CSS property

To return the value of the specified CSS property, use the following syntax:

Css ("propertyname"); $("p") .css ("display", "none")

Look at an example.

$(document) .ready (function () {}); function hiden () {$("# divObj") .hide () / / hide () function, which can be hidden with a time parameter (millisecond) in parentheses such as hide (2000) at a speed of 2000 milliseconds, or slow,fast} function slideToggle () {$("# divObj") .slideToggle (2000) / / switch the curtain effect. Click to close, click to open. The parameter can be left empty. The parameter description is the same as above} function show () {$("# divObj") .show () / / display, parameter description as above} function toggle () {$("# divObj") .toggle (2000) / / Show hidden switch. Parameter can be left empty. Parameter description} function slide () {$("# divObj") .slideDown () / / Curtain effect expansion} display and hide special effects of content in div