the basis of jQuery and AJAX
jQuery Basics:
1.jQuery selector:
Element selector: $ ( "p"); #id selector: $ ( "# test"); .class selector: $ ( "test.");
Example Sub: Select all elements $ ( "*"); the current HTML elements selected $ (the this); Select all type = "button" of <input> element and <button> element $ ( ": Button");
2.jQuery event selector:
1) $ (document) .ready (): $ (document) .ready () method allows us to perform a function after the document is fully loaded.
2) dblclick (): When you double-click an element, will dblclick event.
3) mouseenter (): When the mouse pointer through the elements, will mouseenter event.
4) focus (): when the element gets focus, focus events.
5) blur (): when the element loses focus, blur event occurs.
3.jQuery effect
1) hide and show:. $ ( "# Icon") toggle (); id = icon elements the switching between display and hide;
2) Fade: $ (selector) .fadeIn (speed, callback); // jQueryfadeIn () used to fade in the hidden elements.
$ (Selector) .fadeOut (speed, callback); // jQuery fadeOut () method to fade visible elements.
$ (Selector) .fadeToggle (speed, callback); // jQuery fadeToggle () method can be switched between fadeIn (). FadeOut and () method.
$ (Selector) .fadeTo (speed, opacity, callback); // jQuery fadeTo () method allows the opacity for a given gradient (a value between 0 and 1).
3) slidably: $ (selector) .slideDown (speed, callback); // jQueryslideDown () method for the sliding element downwards.
$ (Selector) .slideUp (speed, callback); // jQuery slideUp () method for a sliding element upward.
$ (Selector) .slideToggle (speed, callback); // jQuery slideToggle () method can be switched between slideDown () and slideUp () method.
4) Animation: $ (selector) .animate ({params}, speed, callback); // jQueryanimate () method is used to create custom animations; CSS property forming the params parameter defines the animation.
$ (Selector) .stop (stopAll, goToEnd); // stop the animation, by default, stop () clears the specified on the selected element in the current animation.
5) chain (Chaining): by jQuery, can be linked together operation / method. Chaining multiple jQuery methods allow us to run in a single statement (on the same element).
4.jQuery HTML
1) obtain the content and attributes:
$ ( "Selector") .text () - Set or returns the text of the selected elements;
$ ( "Selector") .html () - sets or returns the contents of the selected element (HTML tags);
$ ( "Selector") .val () - Set or return the form field values;
$ ( "Selector") .atrr () - Set Attribute Value
2) Removing elements:
$ ( "Selector") .remove (); - delete the selected element and its children;
$ ( "Selector") .empty (); - delete the selected element and its children;
3) CSS class:
$ ( "Selector") .addClass () to add one or more elements to the selected class, the class may be changed using the CSS style;
$ ( "Selector") .removeClass () - Deletes one or more elements selected from the class, one can remove a CSS style;
$ ( "Selector") .toggleClass () - a switching operation to add / delete selected elements of the class
$ ( "Selector") .css ( "background-color") - Returns the color value of the background color;
$ ( "Selector") .css ({ "background-color": "yellow", "font-size": "200%"}) - changing the CSS style selector element;
4) Size:
$ ( "Selector") .width () and height (): Set the return element or the width / height (not including padding, borders or margins);
$ ( "Selector") .innerWidth () and innerHeight, () Method: Returns the element's width / height (including the margin);
$ ( "Selector") .outerWidth () and outerHeight () Method: Returns the element's width / height (including padding and border).
Introduction to AJAX
1. Concept: AJAX with server data exchange technology, it is without reloading the entire page, to achieve the update part of the page, AJAX = Asynchronous JavaScript and XML (Asynchronous JavaScript and XML).
Briefly, without reloading the entire page, AJAX load background data, and displayed on the page. jQuery - AJAX load () method
2.jQuery - AJAX load () method
$ (Selector) .load (URL, data, callback); // server load data, and returns data into the selected element. url Required, other optional;
NOTE: The optional callback parameter when a predetermined load () method to allow the completion of a callback function. The callback function can set different parameters:
responseTxt - contains the result when the contents of the call is successful
statusTXT - state calls included
xhr - contains the XMLHttpRequest object
3.jQuery - AJAX get () and post () method
1) jQuery $ .get () method
$ .Get (URL, callback); // url Required: URL requests, callback optional;
2) jQuery $ .post () Method:. $ Post () method requests data from the server through the HTTP POST request.
$ .Post (URL, data, callback); // url mandatory, others optional;
Miscellaneous:
null to a subject, for undefined variables, properties, and methods.
The object is defined only possible is null, otherwise it is undefined.
if (typeof myObj !== "undefined" && myObj !== null)
