[Sharp jQuery] learning notes 04, jquery learning notes

[Sharp jQuery] learning notes 04, jquery learning notes
Chapter IV events and animations in jQuery I. Events in jQuery

• Load DOM

In JS, the window. onload method is usually used to wait for page loading to complete, while in jQuery, the $ (document). ready () method is used to replace the traditional window. onload method. The two are very different:

The window. onload method is executed only after all the elements (including the files associated with the elements) on the webpage are fully loaded into the browser. The $ (document). ready () method in the Query can be manipulated and called after the DOM is loaded. At this time, all elements in the webpage may not be downloaded.

Sometimes the image we need is not loaded, and the image width and height we need may not be effective. In this case, you can use jQuery's load () method. The load () method binds a processing function to the onload of the element. If the processing function is bound to the window object, it is triggered after all the content is loaded. If the handler function is bound to an element, it is triggered after the element content is loaded.

$ (Window). load (function ({}) is equivalent to window. onload = function () {} of js (){}

2. Multiple Use

The window. onload method can only be used once. Otherwise, the window. onload method will overwrite the previous one. This is especially troublesome when multiple JavaScript files are introduced, but $ (document) in jQuery ). each call of the ready () method will chase new behaviors on the existing behaviors and execute them in the order of registration.

3. Abbreviations

$ (Document ). the ready () method can be abbreviated to $ (function () {}) or $ (). ready (), which has been processed in jQuery source code, and their functions are the same.

• Event binding

Bind () method to bind a specific event to the matching element.

The format is bind (type [. data] fn );

The first parameter is the event type, including: blur, focus, load, resize, scroll, unload, click, dbclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error, etc. You can also customize the name.

The second parameter is an optional parameter, which is an additional data object passed to the event object as the event. data Attribute Value.

The third parameter is the processing function used to bind events.

1 $ (function () {2 $ (". head "). bind ("click", function () {//. add a click event 3 var $ content = $ (this) to the head element ). next (); // define a local variable to save $ (this ). next 4 if ($ content. is (": visible") {// click to display and then click hide to switch between 5 $ content. hide (); 6} else {7 $ content. show (); 8} 9}) 10 });

Such as blur, focus, load, resize, scroll, unload, click, dbclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress jQuery, keyup, error, and other common events provide abbreviations, eg: $ (". head "). mouseover (function (){}). mouseout (function (){});

PS: other usage of the bind () method

1 $(function(){2     $("div").bind("mouseover mouseout",function(){3         $(this).toggleClass("over");4     });5 });

2. Add an event namespace for ease of Management

1 $ (function () {2 $ ("div "). bind ("mouseover. plugin ", function () {3 $ (" body "). append ("<p> mouseover event </p>"); 4}); 5 $ ("div "). bind ("click. plugin ", function () {6 $ (" body "). append ("<p> click event </p>"); 7}); 8 $ ("div "). click (function () {9 $ ("div "). unbind (". plugin "); 10}); 11 });

3. Different namespace execution methods with the same event name

1 $ (function () {2 $ ("div "). bind ("click", function () {3 $ ("body "). append ("<p> click event </p>"); 4}); 5 $ ("div "). bind ("click. plugin ", function () {6 $ (" body "). append ("<p> click. plugin event </p> "); 7}); 8 $ (" button "). click (function () {9 $ ("div "). trigger (". click! ");//! The function is to match all the click methods not included in the namespace 10}); 11 });

 

• Merging events

The hover () method is used to simulate the cursor hover effect. When you move the cursor up, the first function is triggered, and the mouse is removed to trigger the second function. Used to replace bind ("mouseenter") and bind ("mouseleave") in jQuery ").

Format:Hover (enter, leave );

The preceding code can be abbreviated:

1 $(function () {2     $(".head").hover(function(){3         $(this).next().show();4     },function(){5         $(this).next().hide();6     });7 });

PS: the hover () method must pass in two functions. If there is one operation function, you must enter it.

2. toggle ()

The toggle () method is used to simulate consecutive Mouse clicking events. Click to trigger the first function for the first time, and then click to trigger the second function for the second time. If more functions are available, trigger them one by one, and then repeatedly call these functions each time you click.

PS: The toggle () method can also switch the visible state of elements.

 

1 $(function () {2     $(".head").toggle(function(){3          $(this).next().toggle();4      },function(){5          $(this).next().toggle();6      });7  });

 

• Event bubbling and event capture

When a page element triggers an event, the container and page of the element respond to the trigger event of the element in a specific order. The event propagation sequence is called the event process. Event streams are classified into the bubble type and capture type. All browsers support the bubble event stream, which is triggered from an explicit event source to an unknown event source in turn. Due to the existence of event streams, it is necessary to limit the time range. Capture event streams are not supported by all mainstream browsers. They trigger events from unknown event sources to specific event sources in turn. Such defects cannot be solved through JS, therefore, jQuery does not support event capture.

To create a jQuery event object, you only need to add a parameter to the function. Only the event processing function can access the created event object. After the event is executed, the event object is destroyed.

1 $ ("element"). bind ("click", function (e) {// e: event object 2 //... 3 });

2. Stop event bubbling

Use the stopPropagation () method to stop event bubbling.

1 $ ("span "). bind ("click", function (e) {// e is the event object 2 var txt =$ ("# msg" cmd.html () + "<p> the inner span element is clicked </p>"; 3 $ ("# msg" ).html (txt); 4 e. stopPropagation (); // stop event bubbling 5 });

3. prevent default behavior

Use preventDefault () to block the default behavior of an element.

1 $ ("input "). bind ("click", function (e) {// e is the event object 2 var txt =$ ("# msg" cmd.html () + "<p> the inner span element is clicked </p>"; 3 $ ("# msg" ).html (txt); 4 e. preventDefault (); // stop default event behavior 5 });

If you want to stop bubbling and default behavior on the event object at the same time, you can return false in the event processing function. This is a shorthand method for calling the stopPrapagation () method and preventDefault () method at the same time on the event object. E. Change preventDefault () to return false;

• Event object attributes

• Remove event

Remove an event using the unbind () method.

Unbind ([type], [data]);

The first parameter is the event type, and the second parameter is the function to be removed. If no parameter exists, all bound events are deleted. If the event type is provided as a parameter, only binding events of this type are deleted. If the handler passed during binding is used as the second parameter, only this specific event handler function will be deleted.

1 $("p").click(function(){2      $("#btn").unbind();3 });

You can use the one () method to delete the binding immediately after one trigger. The one () method can bind a handler to an element. When the processing function is triggered once, it is deleted immediately.

• Simulated operation

Use the trigger () method to complete the simulation operation. Eg: $ ("# btn"). trigger ("click"); can also be abbreviated as $ ("# btn"). click ();

2. trigger a Custom Event

1 $ (function () {2 $ ("div "). bind ("myclick", function () {3 $ ("body "). append ("<p> my custom events </p>"); 4}); 5 $ ("div "). trigger ("myclick"); 6 });

3. Transmit data

The trigger (type, [data]) method has two parameters. The first parameter is the trigger event type, and the second parameter is the additional data to be passed to the event processing function, transmitted as an array.

4. Perform the default operation

When the trigger () method triggers an event, the default browser operation is performed. Use the triggerHandler () method if you only want to trigger the binding event and do not want to perform the default browser operation.

Ii. animations in jQuery

• Animation type

Method	Description
Hide () and show ()	Modify the height and width opacity at the same time.
FadeIn () and fadeOut ()	Change opacity
SlideUp () and slideDown ()	Change height
FadeTo ()	Change opacity
Toggle ()	Used to replace hide () and show ()
SlideToggle ()	Used to replace slideUp () and slideDown ()
FadeToggle ()	Used to replace fadeIn () and fadeOut ()
Animate ()	The animation above the Custom Animation actually calls the animate method.

• Stop Animation

To stop an animation somewhere, use the stop () method.

Stop ([clearQueue], [gotoEnd]);

ClearQueue and gotoEnd are both optional parameters and are Boolean values. ClearQueue indicates whether to clear the animation queue that has not been executed, and gotoEnd indicates whether to directly jump the animation being executed to the final state.

• Determines whether an element is animated.

To avoid the inconsistency between the animation and user behavior caused by the animation accumulation, first determine whether the element is in the animation State. If the element is not in the animation state, add a new animation to the element. Otherwise, no animation is added.

1 if ($ (element). is (": animated") {// determines whether the element is in the animation state. 2 // if no animation is ongoing, add a new animation. 3}

• Delayed Animation

Use the delay () method to delay the animation. The delay () method can be used to delay the execution of functions in the animation queue or customize the queue.

$(this).animate({left:"400px"},3000)          .delay(1000);

• Animation queue

When multiple attributes are applied to an animate () method, the animation occurs simultaneously. When the method of linking should be 0 with the animation method, the animation occurs in order (unless the queue option value is false ).