Summary of events and DOM animation operations in JQuery

Events in JQuery

1. Load DOM

After the page is loaded, the browser will pass JavaScript Add events to DOM elements. In regular JavaScript code, the window.onload method is usually used, and in JQuery, the $(document).ready() method is used. The simplified writing method "$()" in JQuery. When registering an event in window.onload, it can only be registered in one window.onload body. But using JQuery, you can register in multiple $(document).ready() or $().

2. Event binding

Bind the matching elements to the specified event. For example, yesterday we bound the event in window.onload: "$("p").onclick(function(){

alert( $(this).text() );

});"
In JQuery's $(document).ready() you can bind it like this:
"$("p").click(function(){

alert( $(this).text() );

});"
           Using bind(), you can bind it like this:
$("p") .bind("click", function(){

alert( $(this).text() );

});

3. Synthetic events

hover(): simulate the cursor hover time. When the cursor moves over the element, the specified first function will be triggered, and when the cursor moves out of the element, the specified second function will be triggered. For example, hover effect:
$("td").hover(
function () {$(this).addClass("hover");},
function () {$(this) .removeClass("hover");}
);

toggle(): Used to simulate continuous mouse click events. The first time you click an element, the first specified function is triggered. When the same element is clicked again, the specified second function is triggered. If there are more functions, they are triggered in sequence until the last one. For example, to set the selection and unselected effects of an element:

$("td").toggle(
function () {$(this).addClass("selected");},
function () {$(this).removeClass("selected");}
);

Use toggle() without passing parameters, the effect is to switch elements visible status.

4. Event bubbling

Events will continue to rise like blisters according to the DOM hierarchy, only reaching the top.

Solution: Return false in the Event processing function, and the event will stop bubbling. You can also stop the element's default behavior.

all current UI interaction or events support this feature. Returning false in your own event handling function will abort the event from being passed down. Return true events and continue to pass downwards.

5. Properties of the event object

Event object: When an event is triggered, the event object is created. Using events in your program only requires adding a parameter to the handler function. Use some parameters in the event handler function. For example, to obtain the position relative to the page when an event occurs: event.pageX, event.pageY, event is the parameter of the event processing function.

6.Remove events

Remove all click events on a button: $("btn").unbind("click ”)

Remove all events on a button: $(“btn”).unbind();

one(): This method can bind a handler function to the element. When the handler function is triggered once, the event is deleted immediately. That is, on each object, the event handler function will only be executed once.

DOM animation in JQuery

Animation effects can be produced by setting the display and hiding methods of DOM objects.

1. Hide and display without animation effect

hide(): In an HTML document, calling the hide() method for an element will cause the display of the element to Change the style to none. The code function is the same as css("display", "none");.

show(): Change the display style of the element to the previous display state.

toggle(): Switch the visible state of the element: if the element is visible, switch to hidden; if the element is hidden, switch to visible.

2. By setting the hiding and display of the transparency effect, the fade-in and fade-out animation effect is achieved

fadeIn(), fadeOut(): only change the transparency of the element. fadeOut() will reduce the opacity of an element for a specified period of time until the element disappears completely. fadeIn() does the opposite. For example, slowly fade the paragraph in for 600 milliseconds: $("p").fadeIn("slow");.

fadeTo(): ​​Adjust the opacity to the specified value (between 0 – 1) in a gradual manner. And optionally triggers a callback function after the animation is completed. For example, use 200 milliseconds to quickly adjust the transparency of the paragraph to 0.25. After the animation ends, an "Animation Done" message box is displayed: "$("p").fadeTo("fast", 0.25, function(){ alert(" Animation Done."); });".

3. By setting the hiding and displaying of the height effect, the animation effect of sliding down and folding is achieved

slideDown(), slideUp(): only changes the element the height of. If the display attribute of an element is none, when the slideDown() method is called, the element will be displayed extending from top to bottom. The slideUp() method is just the opposite. The element is shortened and hidden from bottom to top. For example, use 600 milliseconds to slowly slide the paragraph down: $("p").slideDown("slow");.

slideToggle(): Toggle the visibility of matching elements through height changes. For example, quickly slide a paragraph up or down in 200 milliseconds. After the animation ends, an "Animation Done" message box will be displayed: "$("p").slideToggle("fast",function(){ alert("Animation Done ."); });".

The above is the detailed content of Summary of events and DOM animation operations in JQuery. For more information, please follow other related articles on the PHP Chinese website!