Summary sharing of events and animations in jquery _jquery

1. Load DOM

1.1.window Event

Window.onload=function () {} .... Timing: All other resources are loaded and then executed

$ (function () {}) ... : Just wait for the label to complete, you can perform

Difference: The former can only parse the last one in an 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");
      });
    

The first part--Events

2. Mouse events

2.1 Methods of common mouse events

Click (): Clicking Event, triggering, or binding function to the click event of the specified element

MouseOver (): A mouseover event that triggers or binds a function to a specified element

Mouseout (): event that triggers or binds a function to the mouseout of the specified element

Classic Light Bar 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 Ways to use keyboard events

KeyDown (): KeyDown event that triggers or binds a function to a specified element when a key is pressed

KeyUp (): KeyUp event that triggers or binds a function to a specified element when the key is released

KeyPress (): KeyPress event that produces a printable word 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 = = ' ") {
          //press ENTER
          alert (" Confirm to submit? ");
        }
      });
    });

4. Form Events

4.1 Ways to use form events

Focus (): Focuses event that gets the focal point, triggers, or binds the function to the specified element

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

$ (function () {
        //Add Border style
        $ ("input") to the text box. focus (function () {
          $ (this). AddClass ("MyClass");
        }). Blur (function () {
          $ (this). Removeclass ("MyClass");});
    

5. Binding Events and Removal events

5.1 Binding Events

Grammar:

Bind (TYPE,[DATA],FN), where data is not required

Type: Event types, including blur, Focus, click, Mouseout, and other underlying events, and also custom events

fn: The handler function to bind

$ (function () {      //Give Li binding Click event, and Style modification
      $ ("li"). Bind ("click", Function () {
        $ (this). CSS ("Background", " Red ");
      });
    

5.2 Binding multiple events at the same time

$ (function () {
      $ ("li"). bind {
        mouseover:function () {
          $ (this). CSS ("Background", "pink");
        }, Mouseout:function () {
          $ (this). CSS ("Background", "Gray");}});
    

5.3 Removing events and simultaneously removing multiple events

Unbind ([TYPE],[FN]) is the exact opposite of the binding event, which means that all events are removed if the method has no arguments

Unbind if you want to remove multiple spaces, just add a space between 22

$ (function () {
      $ ("Li"). Unbind ("click");      $ ("Li"). Unbind ("MouseOver mouseout");
    

5.4 Some other ways to bind and remove

1.live () Unbind ()

2.on () after the jQuery1.7 version of the method off ()

3.delegate () undelegate ()

6. Compound Events

6.1 Hover () method

Grammar:

Hover (Enter,leave); This method is equivalent to the combination of mouseover and mouseout events

$ ("Li"). Hover (function () {
        $ ("li"). CSS ("Background", "Gray");
      }, Function () {
        $ ("li"). CSS ("Background" , "green");
      

6.2 Toggle () method

Grammar:

Toggle (fn1,fn2,......, FnN); This method is used to simulate the mouse continuous click event, one mouse click to execute a FN, from the beginning in order, Tolgge () used by the hidden field belongs to

Display, which does not occupy a position in the browser, is occupied by the same visibility as it

$ ("body"). Toggle (function () {
        $ ("li"). CSS ("Background", "Gray");
      }, Function () {
        $ ("li"). CSS (" Background "," green ");
      }, Function () {
        $ (" li "). CSS (" Background "," Blue ");
      });

Next look at part two--animation

1. Control element Display and hide

Grammar:

$ (select). Show ([Speed],[callback]);

Relative to the show () method is the Hide () method, which controls element shadowing.

Grammar:

$ (select). Hide ([speed],[callback]); In addition to controlling the hidden elements, you can also define the effects of hidden elements, such as the hidden speed

Note: In most cases, the hide () method is always used with the show () method

2. Control element Transparency

2.1 Control Element Fade in

Grammar:

$ (select). FadeIn ([Speed],[callback]);

The opposite of the show () method is the Fadeout () method, which controls the fading of elements.

3. Change the height of the element

3.1 Methods Slideup () and Slidedown ()

Slidedown () extends the element from top to bottom, and the Slideup () method is reversed, and the element is shortened from bottom 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);
      });
    

The 4.animate () method is used to customize the animation

When we need more control over animations, using the Animate () method can be more flexible because it replaces all other methods

$ (function () {
      $ (' [Type=button] '). Bind ("click", Function () {
        //Two effects are executed in parallel, not queued:
        $ ("div").
        Animate ({"font-size": "50px"}, 3000)
        . Animate ({"width": "300px"}, {queue:false, duration:3000});
    });

4.1 Animate () method replaces some other methods

Replace the show () method
        //$ ("img"). Show (1000);
        $ ("img"). Animate ({height: "show", Width: "Show", Opacity: "Show"},1000);
        Replace the 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 shorthand for a specific style built into the animate () method that can be "show", "Hide", "toggle", or a custom value

$ ("div"). Click (function () {$ (this). Next (). Toggle (), $ (this). Next (). Fadeto (600,0.2), $ (this). Next () Fadetoggle (); (this). Next (). Slidetoggle (); });

The above jquery in the event and animation of the summary of sharing is a small series to share all the content, hope to give you a reference, but also hope that we support the cloud habitat community.