"Sharp jquery" 4–6 Chapter

Chapter fourth events and animations in JQuery

1. Events in jQuery

1) Loading the DOM

	Window.onload	$ (document). Ready ()
Timing of execution	You must wait for all content in the Web page to finish loading (including pictures) to perform	When all the DOM structures in the Web page are drawn, the things that may be associated with the DOM element are not loaded
Write multiple	You cannot write multiple	can simultaneously write multiple
Simplified notation	No	$ (document). Ready (function () {}); Jane writes $ (function () {}); or $ (). Ready (function () {});

2) Event binding:bind (type, data, FN); The first argument is the event type, and the second argument is an optional parameter, which acts as a Event.data The extra data object that the property value is passed to the event object, and the third argument is the handler function used to bind.

3) Synthesis Event:

Hover () method:hover (enter, leave); used to simulate a cursor hover event that triggers the first specified function when the cursor moves over an element ( Enter ), when the cursor moves out of this element, the specified second function is triggered ( Leave ).

Toggle () method:Toggle (fn1, fn2, ... fnN); used to simulate a mouse continuous Click event that triggers the first function when clicked First ( fn1 ), triggering the second function on a second click ( fn2 ) , if there are more functions, it is triggered in turn until the last one, or it can be used to toggle the courseware state of an element, if the element is visible, after the click Switch is hidden, and if the element is hidden, then the click Toggle is visible.

4) Event bubbling

Event object:$ ("element"). Bind ("click", Function (event) {});

Stop event bubbling:stoppropagation () method, or use renturn false;

$ ("element"). Bind ("click", Function (event) {event.stoppropagation ();});

$ ("element"). Bind ("click", Function (event) {Renturn false;});

Block default behavior: thepreventdefault () method, or you can use renturn false;

$ ("element"). Bind ("click", Function (event) {Event.preventdefault ();});

$ ("element"). Bind ("click", Function (event) {Renturn false;});

5) Event capture:jQuery does not support event capture

6) Properties of the event object

Event.type: Gets the type of event

Event.stoppropagation () Method: Block event bubbling

Event.preventdefault () method: Block The default behavior of an event

Event.target: Gets the element that triggered the event

Event.relatedtarget: Gets the relevant element of the triggering event

Event.pagex and event.pagey: Gets the X-and y-coordinates of the cursor relative to the page

Event.which: Gets the left and right mouse button in the mouse click event (which 1,2, 3); Get keyboard keys in keyboard events

Event.metakey: Getting <ctrl> keys in keyboard events

7) Removal of events

Unbind (type, data); The first parameter is the event type, and the second parameter is the function to be removed;

One (type, data, FN); handler function for event binding, which is deleted immediately after the handler is triggered.

8) Analog operation

Common simulation: Thetrigger () method is used to simulate an operation or to trigger a custom event;

Pass data:trigger (type, data) method The first parameter is the event type, the second parameter is the additional data to be passed to the event handler, passed as an array;

Perform the default action: theTrigger () method executes the browser's default action after the event is triggered.

9) Other usage: Bind multiple event types, add event namespaces for ease of administration, same event name, different namespace execution methods.

2, the animation in JQuery

1) Show () method and hide () method: Show and hide matching elements, specify a speed parameter--normal( milliseconds),slow( milliseconds),fast( milliseconds) or specify a number (in milliseconds)

2) FadeIn () method and fadeOut () Method: Change the transparency of the matching elements, and let the matched elements fade in or out

3) Slideup () method and Slidedown () method: Change the height of the matched element so that the matching element is hidden from bottom to top or extended from top to bottom

4) Custom animate animate () method:animate (params, speed, callback); The first parameter contains the mapping of the style attribute and the value, the second parameter is optional for speed, and the third argument is the function that executes when the animation is complete.

5) Animation callback function

6) Stop animation: TheStop (Clearqueue, gotoend) method, the first parameter indicates whether to empty an unfinished animation team, the second parameter indicates whether the animation being executed jumps to the end state, two parameters are optional Boolean VALUES ( true or false )

7) Determine if the element is in an animated state: Is(": Animated") method

8) Delay Animation: Delay() method

9) Other animation methods

The toggle () method toggles the visible state of the matching element

The Slidetoggle () method toggles the visibility of matching elements by a height change

The FadeTo () method adjusts the element's opacity incrementally to the specified value by setting the

Fadetoggle () method toggles the visibility of matching elements through opacity changes

Fifth. JQuery 's operation of forms, forms and more applications

1. Form Application

1) Single-line text box application

2) Multi-line text box application

3) check box apply

4) drop-down box application

5) Form Validation

2. Application Form

1) Form discoloration

2) Form open close

3) Table content filtering

3. Other applications

1) Web page font size

2) page tab

3) Web page skin Change

The sixth chapter the application of jQuery and Ajax

1, The advantages of Ajax:

1) No plug-in support required

2) Excellent user experience: Ability to update data without refreshing the entire page

3) Improve The performance of WEB programs: simply Submit the data you want to submit via the XMLHttpRequest object to the server, i.e. Send on demand

4) Reduce the burden on the server and bandwidth: Create Ajax engines in the client , in the traditional way some of the workload of the server to transfer to the client, easy client resources to handle

2, the lack of Ajax

1) The browser has insufficient support for XMLHttpRequest objects

2) Destroy the normal function of the browser "forward" and "back" button

3) Lack of support for search engines

4) Lack of development and commissioning tools

3. Ajax xmlhttprequest objects: Sending asynchronous requests, receiving responses, and executing callbacks

4, install the Web Environment--Appserv

5. Write the first Ajax Example

1) Define a function that asynchronously obtains information through the function.

function Ajax () {

//...

}

2) Declare an empty object to load the xmlhttprequest Object

var xmlhttpreq = null;

3) assigning values to xmlhttprequest objects

If (window. Activeobject) {

Xmlhttpreq = new Active XObject ("Microsoft.XMLHTTP");

}else If (window. XMLHttpRequest) {

Xmlhttpreq = new XMLHttpRequest ();

}

4) Initialize the xmlhttprequest Object

Xmlhttpreq.open ("GET", "test.php", true);

5) Register callback event handler

Xmlhttpreq.onreadystatechange = Requestcallback;

function Requestcallback () {

if (xmlhttpreq.readystate = = 4) {// request completed loading

if (xmlhttpreq.readystate = =) {// response succeeded

//...

}

}

}

6) Send request

Xmlhttpreq.send (NULL);

6. Ajax in jQuery: The bottom-level method $.ajax (), the second-tier method load (),$. Get (),$.post (), third-tier method $.getscript (),$.getjson ()

1) Load ()Method:load (URL, data, callback)The first parameter represents a requestHTMLof the pageURLaddress, the second parameter is an optional representation of the data sent to the serverKey/valuedata, the third parameter optionally represents the callback function at the completion of the request;Datathe transfer takesGETmethod, and vice versa, is automatically converted toPOSTThe callback function has three parameters that indicate what the request returned, the request status (Success,Error,notmodified,Timeout) andXMLHttpRequestthe object;load ()method, regardless ofAjaxthe request was successful, as long as the request was completed and the callback function was triggered.

2) $.get ()Method:$.get (URL, data, callback, type)The first parameter represents a requestHTMLof the pageURLaddress, the second parameter is an optional representation of the data sent to the serverKey/valuedata, the third parameter optionally represents the callback function when loading succeeds, and the fourth parameter represents the format of the server-side return content (XML,HTML,Script,JSON,textand the_default);The callback function has two parameters that indicate what the request returned, the request status (Success,Error,notmodified,Timeout); in$.get ()method, the callback function is triggered only if the data is successfully returned.

3) $.post () method: The structure and use of the $.get () method are the same

	$.get () method	$.post () method
Requested parameters	followed by the URL after delivery	Send the entity content as HTTP information to the Web Server
The data size of the transfer	Less than 2KB	Not theoretically restricted
Security	The requested data is cached by the browser and is not secure.	Relatively safe
How the data passed is fetched on the server side	$_get[] or $_request[]	$_post[] or $_request[]

4) $.getscript () method: for loading . js files;the$.getscript () method will be used in JavaScript run the callback function after the file is loaded successfully.

5) $.getjson () method: For loading the JSON file;the$.getjson () method is used in the JSON Run the callback function after the file is loaded successfully.

6) $.ajax (Options) method

7. Serialization of elements

1) The Serialize ( ) method is used for a jQuery object that serializes the contents of the DOM element to a string for Ajax Request

2) the Serializearray ( ) method is used for a jQuery object that serializes the contents of the DOM element into a string JSON format of Data

3) The $.param () method is used to serialize An array or an object according to Key/value

8. Ajax Global Events in jQuery

Method name	Description
Ajaxstart (callback)	functions executed at the start of an Ajax request
Ajaxstop (callback)	functions executed after the AJAX request ends
Ajaxcomplete (callback)	functions that are executed when an Ajax request completes
Ajaxerror (callback)	The function that the Ajax request executes when an error occurs, and the catch error can be passed as the last argument
Ajaxsend (callback)	functions executed before Ajax request is sent
Ajaxsuccess (callback)	functions executed when the Ajax request succeeds

"Sharp jquery" 4–6 Chapter