Home Web Front-end JS Tutorial JQuery binding events, removal events and animations

JQuery binding events, removal events and animations

Jun 30, 2017 am 11:37 AM
jquery animation binding


BindingEvent: bind(), on(), live(), delegate(), keyup();
Trigger event: trigger( 'keyup'), keyup();
Unbinding events: unbind(), off(), die(), undelegate();
Conforming events: hover(), toggle();
Events Binding: bind();


JQuery binding events, removal events and animations

##1. Binding event

​​

JQueryBinding events, in addition to the bing() method, there are also on(), live(), one( ) Binding methods for other events.

Binding event classification:

(a) Binding a single event

$("#btn").bind("click",function(){
    //代码块
    console.log(123);
});
Copy after login
Copy after login

(b) Binding multiple events at the same time

$("#btn").bind({
    mouseover:function(){
        $(this).css("background","red");
        console.log("代码块1");
    },
    mouseout:function(){
        console.log("代码块2");
    },
    click:function(){
        console.log("点击事件");
    }
});
Copy after login
Copy after login

For the differences between bind(), live(), and delegate() event methods in JQuery, please check:

http://www.php100.com/html/program/jquery/2013/0905/5993. html



2. Remove event

(a) Use the unbind() method to remove the event

  $("button").click(function(){
    $("p").unbind();
  });
Copy after login
Copy after login

3. JQueryAnimation

In Jquery, a series of methods for displaying animation effects are provided, among which,

  1. show() ——— Method controls the display of elements;

  2. hide() — ——-Method to control the display of elements;

  3. toggle() ——-Method to switch the visiblestate of elements;

  4. fadeIn() ——-Method fade in;

  5. fadeOut() ——Method fade out;

  6. slideUp()——Method to realize the shrinkage of elements

  7. slideDown()——Method Implement the expansion of elements


##Binding events: bind(), on(), live(), delegate(), keyup();
Trigger events: trigger('keyup'), keyup();

Unbinding events: unbind(), off(), die(), undelegate();
Conforming events: hover(), toggle ();
Event binding: bind();


JQuery binding events, removal events and animations

##1. Binding events

JQuery binding events, in addition to the bing()

method, there are also

on(), live(), one () Binding methods for and other events.
Binding event classification:

(a) Binding a single event

$("#btn").bind("click",function(){
    //代码块
    console.log(123);
});
Copy after login
Copy after login

(b) Binding multiple events at the same time

$("#btn").bind({
    mouseover:function(){
        $(this).css("background","red");
        console.log("代码块1");
    },
    mouseout:function(){
        console.log("代码块2");
    },
    click:function(){
        console.log("点击事件");
    }
});
Copy after login
Copy after login

For the differences between bind(), live(), and delegate() event methods in JQuery, please check:

http://www.php100.com/html/program/jquery/2013/0905/5993. html


2. Remove the event

(a) Use the unbind() method to remove the event

  $("button").click(function(){
    $("p").unbind();
  });
Copy after login
Copy after login
3. JQuery animation

In Jquery, a series of methods for displaying animation effects are provided, among which,

    show()
  1. ——— Method controls the display of elements;

  2. hide()
  3. ——— Method controls the display of elements;

  4. toggle()
  5. ——-Method switches the visible state of the element;

  6. fadeIn()
  7. — ——Method fade in;

  8. fadeOut()
  9. ——Method fade out;

    ##slideUp()
  10. ——Method to realize the shrinking of elements
  11. slideDown()
  12. ——Method to realize the expansion of elements

The above is the detailed content of JQuery binding events, removal events and animations. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Nordhold: Fusion System, Explained
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1670
14
PHP Tutorial
1274
29
C# Tutorial
1256
24
BTCC tutorial: How to bind and use MetaMask wallet on BTCC exchange? BTCC tutorial: How to bind and use MetaMask wallet on BTCC exchange? Apr 26, 2024 am 09:40 AM

MetaMask (also called Little Fox Wallet in Chinese) is a free and well-received encryption wallet software. Currently, BTCC supports binding to the MetaMask wallet. After binding, you can use the MetaMask wallet to quickly log in, store value, buy coins, etc., and you can also get 20 USDT trial bonus for the first time binding. In the BTCCMetaMask wallet tutorial, we will introduce in detail how to register and use MetaMask, and how to bind and use the Little Fox wallet in BTCC. What is MetaMask wallet? With over 30 million users, MetaMask Little Fox Wallet is one of the most popular cryptocurrency wallets today. It is free to use and can be installed on the network as an extension

How to bind a sub-account on Xiaohongshu? How does it check whether the account is normal? How to bind a sub-account on Xiaohongshu? How does it check whether the account is normal? Mar 21, 2024 pm 10:11 PM

In today's era of information explosion, the construction of personal brand and corporate image has become increasingly important. As the leading fashion life sharing platform in China, Xiaohongshu has attracted a large number of user attention and participation. For those users who want to expand their influence and improve the efficiency of content dissemination, binding sub-accounts has become an effective means. So, how does Xiaohongshu bind a sub-account? How to check whether the account is normal? This article will answer these questions for you in detail. 1. How to bind a sub-account on Xiaohongshu? 1. Log in to your main account: First, you need to log in to your Xiaohongshu main account. 2. Open the settings menu: click "Me" in the upper right corner, and then select "Settings". 3. Enter account management: In the settings menu, find the "Account Management" or "Account Assistant" option and click

Steps and methods to bind Douyin in Toutiao Steps and methods to bind Douyin in Toutiao Mar 22, 2024 pm 05:56 PM

1. Open Toutiao. 2. Click My in the lower right corner. 3. Click [System Settings]. 4. Click [Account and Privacy Settings]. 5. Click the button on the right side of [Douyin] to bind Douyin.

How to set up ppt animation to enter first and then exit How to set up ppt animation to enter first and then exit Mar 20, 2024 am 09:30 AM

We often use ppt in our daily work, so are you familiar with every operating function in ppt? For example: How to set animation effects in ppt, how to set switching effects, and what is the effect duration of each animation? Can each slide play automatically, enter and then exit the ppt animation, etc. In this issue, I will first share with you the specific steps of entering and then exiting the ppt animation. It is below. Friends, come and take a look. Look! 1. First, we open ppt on the computer, click outside the text box to select the text box (as shown in the red circle in the figure below). 2. Then, click [Animation] in the menu bar and select the [Erase] effect (as shown in the red circle in the figure). 3. Next, click [

How to use PUT request method in jQuery? How to use PUT request method in jQuery? Feb 28, 2024 pm 03:12 PM

How to use PUT request method in jQuery? In jQuery, the method of sending a PUT request is similar to sending other types of requests, but you need to pay attention to some details and parameter settings. PUT requests are typically used to update resources, such as updating data in a database or updating files on the server. The following is a specific code example using the PUT request method in jQuery. First, make sure you include the jQuery library file, then you can send a PUT request via: $.ajax({u

How to bind the Cainiao app to Pinduoduo? How to add the Cainiao Wrap to Pinduoduo platform? How to bind the Cainiao app to Pinduoduo? How to add the Cainiao Wrap to Pinduoduo platform? Mar 19, 2024 pm 02:30 PM

The Cainiao app is a platform that can provide you with various logistics information. The functions here are very powerful and easy to use. If you have any logistics-related problems, they can be solved here. Anyway, it can bring you a The one-stop service can solve everything in time. Checking the express delivery, picking up the express delivery, sending the express delivery, etc. are all without any problems. We have cooperated with various platforms and all the information can be queried. However, sometimes It will happen that the goods purchased on Pinduoduo cannot display the logistics information. In fact, you need to manually bind Pinduoduo to achieve this. The specific methods have been sorted out below, and everyone can take a look. . How to bind Cainiao to Pinduoduo account: 1. Open Cainiao APP and go to the main page

How to bind the Cainiao APP to Pinduoduo How to bind the Cainiao APP to Pinduoduo How to bind the Cainiao APP to Pinduoduo How to bind the Cainiao APP to Pinduoduo Mar 19, 2024 pm 05:16 PM

Do you know how to bind Pinduoduo when using Cainiao Wrap? The official version of Cainiao Wrap App does not automatically synchronize some Pinduoduo’s logistics information on this platform. All we need to do is You can copy the order number or check your mobile phone to see if there is any express delivery information. Of course, these all need to be completed manually. If you want to know more, come and take a look with the editor. How to bind the Cainiao APP to Pinduoduo 1. Open the Cainiao APP and click "Package Guide" in the upper left corner of the main page. 2. In the interface, there are many shopping websites, and accounts can be bound. 3. Click to import other e-commerce platforms. 4. User authorization: Click Pinduoduo to go to the interface

jQuery Tips: Quickly modify the text of all a tags on the page jQuery Tips: Quickly modify the text of all a tags on the page Feb 28, 2024 pm 09:06 PM

Title: jQuery Tips: Quickly modify the text of all a tags on the page In web development, we often need to modify and operate elements on the page. When using jQuery, sometimes you need to modify the text content of all a tags in the page at once, which can save time and energy. The following will introduce how to use jQuery to quickly modify the text of all a tags on the page, and give specific code examples. First, we need to introduce the jQuery library file and ensure that the following code is introduced into the page: &lt

See all articles