Shulou(Shulou.com)06/01 Report--

Today, I would like to share with you how to click the button to add a paragraph of relevant knowledge points in jQuery, the content is detailed, the logic is clear, I believe most people still know too much about this knowledge, so share this article for your reference, I hope you can get something after reading this article, let's take a look at it.

1. The toggle () method in jquery

The toggle () method can add two or more functions to it, and then switch through the click event, calling the first specified function when clicked, the second function when clicked again, and so on, looping.

Syntax: $(selector). Toggle (function)

Function refers to the function that needs to be run when clicked

Example description: when the "Show and hide switch" button is clicked for the first time, the content of the P tag is hidden, and when clicked again, the content of the P tag is displayed. The complete code is as follows:

Toggle between show and hide

I can show or hide.

La la la

$(document) Ready (function () {

$("button") Click (function () {

$("p") Toggle ()

})

})

As shown in the following picture, the first picture shows the effect when there is no click, and the second picture shows the effect of the first click, hiding the content.

2. Hide () and show () methods in jquery

The hide () method hides the selected element, similar to the display:none attribute in CSS. The show () method shows hidden selected elements. Both hide () and show () are used the same way, except that one shows and the other hides.

Syntax: $(selector). Hide (speed,easing,callback)

Speed represents the speed at which the effect is displayed, and is an optional value (slow,fast, milliseconds)

Easing is used to set the speed of elements at different points of animation, which is an optional value (swing,linear)

Callback represents the function that needs to be executed after the show () method is executed. It is also an optional value.

Example description: when the "hide" button is clicked, the content of the P tag is hidden, and when the "Show" button is clicked, the content of the P tag is displayed. The specific code is as follows:

Click the hide button and the text disappears

Click the display button to reproduce the text

Hide

Display

$(document) Ready (function () {

$("# hide") Click (function () {

$("# p1") Hide ()

})

$("# show") Click (function () {

$("# p1") Show ()

})

})

These are all the contents of the article "how to add a paragraph with the click of a button in jQuery". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.