Summary of events and animations in jQuery, and summary of jquery events

Summary of events and animations in jQuery, and summary of jquery events

1. Load DOM

1.1.window event

Window. onload = function () {}...... timing: After loading all other resources, execute
$ (Function (){})...... : Just wait until the tag is complete.

Difference: the former can only parse the last one in the HTML page, and the second is N

 window.onload() = function () {        }        $(function () {            $("li").bind("click", function () {                $(this).css("background","red");            });        });        $(function () {            $("div").bind("click", function () {                $(this).css("background", "red");            });        });

Part 1 -- events

2. mouse events

2.1 common mouse events

Click (): click an event, trigger, or bind a function to a click event of a specified element.

Mouseover (): triggers or binds a function to a mouseover event of a specified element.

Mouseout (): Events that trigger or bind a function to the mouseout of a specified Element

Classic baton effect:

 $(function () {            $("input").click(function () {                $("li").mouseover(function () {                    $(this).css("background", "green");                }).mouseout(function () {                    //this.style.background = "";                    this.style.cssText = "background:";                });            });        });

 

 

3. Keyboard Events

3.1 Common Keyboard Events

Keydown (): When you press the button, trigger or bind the function to the keydown event of the specified Element

Keyup (): When the button is released, triggered, or the function is bound to the keyup event of the specified element.

Keypress (): A keypress event that generates printable characters, triggers, or binds a function to a specified element.

$ (Function () {$ ("p input "). keyup (function () {$ ("# events "). append ("keyup ");}). keydown (function () {$ ("# events "). append ("keydown ");}). keypress (function () {$ ("# events "). append ("keypress") ;}; $ (document ). keydown (function (event) {if (event. keyCode = "13") {// press enter alert ("are you sure you want to submit? ");}});});

 

 

4. Form Events

4.1 common form events

Focus (): gets focus, triggers, or binds a function to a focus event of a specified element.

Blur (): A blur event that loses focus, triggers, or binds a function to a specified element.

$ (Function () {// Add a border style to the text box $ ("input "). focus (function () {$ (this ). addClass ("myclass ");}). blur (function () {$ (this ). removeClass ("myclass ");});});

 

 

5. Bind and remove events

5.1 bind events

Syntax:

Bind (type, [data], fn), where data is not required

Type: event type, including basic events such as blur, focus, click, and mouseout. In addition, it can also be custom events.

Fn: The processing function to bind.

$ (Function (){
// Bind the click event to li and modify the style $ ("li "). bind ("click", function () {detail (thisground .css ("background", "red ");});});

 

 

5.2 bind multiple events at the same time

$(function () {            $("li").bind({                mouseover: function() {                    $(this).css("background", "pink");                }, mouseout: function() {                    $(this).css("background", "gray");                }            });        });

 

 

5.3 remove events and remove multiple events at the same time

Unbind ([type], [fn]) is the opposite of the binding event. If the method does not have a parameter, all events are removed.

Unbind if you want to remove multiple ones, you only need to add a space between them.

        $(function () {            $("li").unbind("click");
            $("li").unbind("mouseover mouseout");        });

 

5.4 Some other binding and Removal Methods

1. live () unbind ()
2. methods available after on () jQuery1.7 are off ()
3. delegate () undelegate ()

 

6. composite events

6.1 hover () method

Syntax:

Hover (enter, leave); this method is equivalent to a combination of mouseover and mouseout events.

      $("li").hover(function() {                $("li").css("background", "gray");            }, function() {                $("li").css("background", "green");            });

 

 

6.2 toggle () method

Syntax:

Toggle (fn1, fn2 ,......, FnN); this method is used to simulate the mouse continuous click event. A fn is executed after a single mouse click, and executed sequentially from the beginning. The hidden fields used by tolgge () belong

Display, which does not occupy any location in the browser, and the same visibility as it occupies

$("body").toggle(function () {                $("li").css("background", "gray");            }, function () {                $("li").css("background", "green");            }, function () {                $("li").css("background", "blue");            });

 

 

Next let's take a look at the second part-Animation

1. Display and hide control elements

Syntax:

$ (Select). show ([speed], [callback]);

The show () method is opposite to the hide () method, which can control element hiding.

 Syntax:

$ (Select). hide ([speed], [callback]); in addition to controlling the hiding of elements, it can also define the effect of hiding elements, such as the hiding speed.

Note: In most cases, the hide () and show () methods are always used together.

2. Control Element transparency

2.1 fade in control elements

Syntax:

 

$ (Select). fadeIn ([speed], [callback]);

 

Compared with the show () method, the fadeOut () method controls the element fading.

 

3. Change element height

3.1 Methods slideUp () and slideDown ()

The slideDown () method will show the elements extending from top to bottom. The slideUp () method is the opposite, and the elements will be shortened from bottom to top to hidden.

 $(function () {            $("#btnshow").click(function () {                $("img").show(1000);            });            $("#btnhide").click(function () {                $("img").hide(1000);            });        });        $(function () {            $("#btnin").click(function () {                $("img").fadeIn(5000);            });            $("#btnout").click(function () {                $("img").fadeOut(5000);            });        });        $(function () {            $("#btnup").click(function () {                $("img").slideUp(5000);            });            $("#btndown").click(function () {                $("img").slideDown(5000);            });        });

 

4. the animate () method uses a custom animation.

When we need more control over the animation, the use of the animation () method can be more flexible, because it can replace all other methods.

$ (Function () {$ ("[type = button]"). bind ("click", function () {// two special effects are executed in parallel and are not added to the queue: $ ("div "). animate ({"font-size": "50px"}, 3000 ). animate ({"width": "300px" },{ queue: false, duration: 3000 });});});

 

 

 

4.1 Use the animate () method to replace some other methods

// Replace the show () method
// $ ("Img "). show (1000); $ ("img "). animate ({height: "show", width: "show", opacity: "show"}, 1000); // replace fadeIn () method $ ("img "). fadeIn (5000); $ ("img "). animate ({opacity: "show"}, 5000 );
 
// Replace the slideDown () method

                $("img").slideDown(5000); 
                $("img").animate({ height: "show" }, 5000);

 

These animations are a simplified form of the animate () method. These specific style values can be "show", "hide", and "toggle ", you can also customize the value.

 

 $("div").click(function() {                $(this).next().toggle();                $(this).next().fadeTo(600,0.2);                $(this).next().fadeToggle();                $(this).next().slideToggle();            });