jquery Common Methodology Basics Tutorial

Attribute:
$ ("P"). AddClass (CSSThe style defined inclassType); Add a style to an element
$ ("img"). attr ({src: "test.jpg", alt: "Test Image"}); Add attribute/value to an element, parameter is map
$ ("img"). attr ("src", "test.jpg"); Add an attribute/value to an element
$ ("img"). attr ("title", function () {return this.src}); Add an attribute/value to an element
$ ("element name"). HTML (); Gets the contents of the element (element, text, etc.)
$ ("element name"). HTML ("new stuff"); Set content for an element
$ ("element name"). Removeattr ("property name") deletes the specified property and the value of the property to an element
$ ("element name"). Removeclass ("class") deletes the specified style to an element
$ ("element name"). Text (); Get the text of the element
$ ("element name"). Text (value); Sets the text value of this element to
$ ("element name"). Toggleclass (Class) If the element has a style in the argument, set it if it does not exist
$ ("INPUT element name"). Val (); Gets the value of the INPUT element
$ ("INPUT element name"). val (value); Sets the value of the INPUT element to
Manipulation:
$ ("element name"). After (content); Add content after a matching element
$ ("element name"). Append (content); Inserts content as an element into the back of the element
$ ("element name"). Appendto (content); To connect elements after content
$ ("element name"). before (content); And afterMethodInstead
$ ("element name"). Clone (Boolean expression) when a Boolean expression is true, the clone element (when no argument is treated as true)
$ ("element name"). Empty () sets the content of the element to null
$ ("element name"). InsertAfter (content); After the element is inserted into the content
$ ("element name"). InsertBefore (content); Before inserting the element into the content
$ ("element"). prepend (content); Place the content as part of the element and put it at the front of the element
$ ("element"). Prependto (content); Take the element as part of the content and place the top of the content
$ ("element"). Remove (); Delete all the specified elements
$ ("element"). Remove ("exp"); Delete all elements that contain exp
$ ("element"). Wrap ("HTML"); Surround the element with HTML
$ ("elements"). Wrap (Element); Use element to surround the elements
Traversing:
Add (expr)
Add (HTML)
Add (elements)
Children (expr)
Contains (str)
End ()
Filter (expression)
Filter (FILTER)
Find (expr)
Is (expr)
Next (expr)
Not (EL)
Not (expr)
Not (Elems)
Parent (expr)
Parents (expr)
Prev (expr)
Siblings (expr)

Core:
$ (HTML). Appendto ("Body") is equivalent to writing a piece of HTML code in the body
$ (Elems) get an element on the DOM
$ (function () {...}); Perform a function
$ ("div > P"). CSS ("Border", "1px solid Gray"); Find all Div's child node p, add style
$ ("Input:radio", Document.forms[0] finds all radio buttons in the first form of the current page
$.extend (prop) prop is a jquery Object ,
Example:
Jquery.extend ({
Min:function (A, b) {return a < b a:b;},
Max:function (A, b) {return a > b a:b;}
});
JQuery (expression, [context])-$ (expression, [context]); By default, the $ () query is the DOM element in the current HTML document.

Each (callback) performs a function as a context for each matching element
Example: 1
$ ("span"). Click (function) {
$ ("Li"). each (function () {
$ (this). Toggleclass ("example");
});
});
Example: 2
$ ("button"). Click (function () {
$ ("div"). each (function (index, domele) {
Domele = = This
$ (Domele). CSS ("BackgroundColor", "yellow");
if ($ (this). Is ("#stop")) {
$ ("span"). Text ("Stopped at Div Index #" + index);
return false;
}
});
});

JQuery Event:

Ready (FN); $ (document). Ready () Note that there is no onload event in the body, otherwise the function cannot be executed. On each page, you can
There are a number of functions that are loaded and executed in the order of FN.
Bind (type, [data], FN) binds one or more event handler functions for each specific event (like click) for each matching element. Possible event properties are: Blur, focus, load, resize, scroll, unload, click, DblClick, MouseDown, MouseUp, MouseMove,
MouseOver, Mouseout, MouseEnter, MouseLeave, change, select, Submit, KeyDown, KeyPress,
KeyUp, error
One (type, [data], FN) binds a single or multiple event handler functions for each specific event (like click) for each matching element. In each of the
On the elephant, this event handler is only executed once. The other rules are the same as the bind () function.

Trigger (type, [data]) triggers a class of events on each matching element.
Triggerhandler (type, [data]) This particular method triggers a specific event on an element (specifying an event type) while canceling the browser 's default action for this event
Unbind ([Type], [data]) is bound to remove the binding event from each matching element.
$ ("P"). Unbind () Remove all bound events on all paragraphs
$ ("P"). Unbind ("click") removes the Click event on all paragraphs
Hover (over, out) Over,out are methods that trigger the specified first function when the mouse is moved above a matching element. When the mouse moves out of this element, the specified second function is triggered.
$ ("P"). Hover (function () {
$ (this). addclass ("over");
},
function () {
$ (this). AddClass ("Out");
}
);

Toggle (FN, fn) if a matching element is clicked, the first specified function is triggered, and when the same element is clicked again, the specified second function is triggered.
$ ("P"). Toggle (function () {
$ (this). AddClass ("selected");
},
function () {
$ (this). Removeclass ("selected");
}
);

Element Event List Description
Note: A function with no parameters, whose argument is an optional FN. jquery does not support the reset event for form elements.
Event description Support Element or object
Blur () element loses focus A, input, textarea, button, select, label, map, area
Change () user changes the contents of the domain input, textarea, select
Click () mouse clicks on almost all elements of an object
DblClick () mouse double-clicks almost all elements of an object
Error window occurs when loading a document or image, img
Focus () Element gets focused a, input, textarea, button, select, label, map, area
KeyDown () The key of a keyboard is pressed almost all elements
KeyPress () The key of a keyboard is pressed or pressed almost all elements
KeyUp () Key of a keyboard is loosened almost all elements
Load (FN) a page or image is finished loading window, img
MouseDown (FN) a mouse button is pressed for almost all elements
MouseMove (FN) mouse is moved almost all elements
Mouseout (FN) mouse removes almost all elements from an element
MouseOver (FN) mouse is moved to almost all elements on top of an element
MouseUp (FN) a mouse button is loosened almost all elements
Resize (FN) window or frame adjusted size window, IFRAME, frame
Scroll (FN) scrolls through the visual part of a document window
Select () text selected by document, input, textarea
Submit () button is clicked form
Unload (FN) User exits page window

JQuery Ajax Method Description:

Load (URL, [data], [callback]) loads a remote HTML content into a DOM node.
$ ("#feeds"). Load ("feeds.html"); Load the feeds.html file into a div with ID feeds
$ ("#feeds"). Load ("feeds.php", {limit:25}, function () {
Alert ("The last entries in the feed have been loaded");
});

Jquery.get (URL, [data], [callback]) uses get to request a page.
$.get ("test.cgi", {name: "John", Time: "2pm"}, function (data) {
Alert ("Data Loaded:" + data);
});

Jquery.getjson (URL, [data], [callback]) uses get to request JSON data.
$.getjson ("Test.js", {name: "John", Time: "2pm"}, function (JSON) {
Alert ("JSON Data:" + json.users[3].name);
});

Jquery.getscript (URL, [callback]) uses the GET request JavaScript file and executes it.
$.getscript ("Test.js", function () {
Alert ("Script loaded and executed.");
});
Jquery.post (URL, [data], [callback], [type]) uses post to request a page.

Ajaxcomplete (callback) when an AJAX request finishes, executes a function. This is an AJAX event
$ ("#msg"). Ajaxcomplete (function (request, settings) {
$ (this). Append ("

request complete.

");
});
Ajaxerror (callback) executes a function when an AJAX request fails. This is an AJAX event
$ ("#msg"). Ajaxerror (function (request, settings) {
$ (this). Append ("

error requesting page" + Settings.url + "

");
});

Ajaxsend (callback) executes a function when an AJAX request is sent. This is an AJAX event
$ ("#msg"). Ajaxsend (function (evt, request, settings) {
$ (this). Append ("+ "});

Ajaxstart (callback) executes a function when an AJAX request begins but has not yet been activated. This is an AJAX event
Display loading information when an AJAX request starts (and is not activated)
$ ("#loading"). Ajaxstart (function () {
$ (this). Show ();
});

Ajaxstop (callback) executes a function when all Ajax stops. This is an AJAX event
Hides loading information when all AJAX requests are stopped.
$ ("#loading"). Ajaxstop (function () {
$ (this). Hide ();
});

Ajaxsuccess (callback) when an AJAX request completes successfully, a function is executed. This is an AJAX event
When the AJAX request completes successfully, the information is displayed.
$ ("#msg"). Ajaxsuccess (function (evt, request, settings) {
$ (this). Append ("

successful request!

");
});

Jquery.ajaxsetup (options) makes global settings for all AJAX requests. View the $.ajax function to get all the option information.
Sets the default global AJAX request option.
$.ajaxsetup ({
URL: "/XMLhttp/",
Global:false,
Type: "POST"
});
$.ajax ({data:mydata});

Serialize () joins a set of input elements by name and value. The correct form element sequence is implemented
function ShowValues () {
var str = $ ("form"). Serialize ();
$ ("#results"). Text (str);
}
$ (": CheckBox,: Radio"). Click (showvalues);
$ ("select"). Change (ShowValues);
ShowValues ();

Serializearray () connects all forms and form elements (similar to the. Serialize () method), but returns a JSON data format.
Get a set of values from a form and show it
function ShowValues () {
var fields = $ (": Input"). Serializearray ();
alert (fields);
$ ("#results"). empty ();
Jquery.each (fields, function (i, field) {
$ ("#results"). Append (Field.value + "");
});
}
$ (": CheckBox,: Radio"). Click (showvalues);
$ ("select"). Change (ShowValues);
ShowValues ();

JQuery Effects Method Description

Show () shows hidden matching elements.
Show (speed, [callback]) displays all matching elements in an elegant animation and optionally triggers a callback function after the display is complete.
Hide () Hides all of the matching elements.
Hide (speed, [callback]) hides all matching elements with graceful animations and optionally triggers a callback function after the display is complete
Toggle () Toggles the visible state of the element. If the element is visible, switch to hidden, or if the element is hidden,
Switch to visible.
Slidedown (speed, [callback]) dynamically displays all matching elements by changing the height (downward), and optionally when the display is complete
To trigger a callback function. This animation effect adjusts only the height of the element so that the matching element can be
"Slide" the way to show it.
Slideup (speed, [callback]) dynamically hides all matching elements by changing the height (up to a decrease), optionally after the hide is completed
Triggers a callback function. This animation effect only adjusts the height of the element so that the matching elements can be "sliding"
Way to hide.
Slidetoggle (speed, [callback]) toggles the visibility of all matching elements by changing the height, and optionally triggers a callback after the switch completes
Tuning function. This animation effect only adjusts the height of the elements, allowing the matching elements to be hidden in a "sliding" way
Hidden or displayed.
FadeIn (speed, [callback]) implements the fade effect of all matching elements through opacity changes and optionally touches the animation when it is completed
Sends a callback function. This animation only adjusts the opacity of the element, which means that all matching elements
Height and width do not change.
Fadeout (speed, [callback]) implements the fading effect of all matching elements through opacity changes and optionally touches the animation when it is completed
Sends a callback function. This animation only adjusts the opacity of the element, which means that all matching elements
Height and width do not change.
Fadeto (speed, opacity, [callback]) adjusts the opacity of all matching elements in a progressive manner to the specified opacity and completes the animation
Optionally triggers a callback function. This animation only adjusts the opacity of the element, which means that the
The height and width of the elements that have a match are not changed.
Stop () stops the animation that all matching elements are currently running. If there are animations in the queue, they will start immediately.
Queue () Gets the animation sequence of the first matching element.Reference(Returns a function that contains theArray)
Queue (callback) adds an executable function to the end of the sequence of events for each matching element as an event function for this element
Queue (queue) replaces the original animation sequence of all matching elements with a new animation sequence
Dequeue () Executes and removes animation from the front of the animation sequence
Animate (params, [duration], [easing], [callback]) are the functions used to create custom animations.
Animate (params, options) is another way to create custom animations. function Ibid.

JQuery Traversing Method Description

EQ (index) Gets an element of a specified position from a matching set of elements, and index starts at 0
Filter (expr) returns a collection of elements that match a specified expression, which can be used to split multiple expr to implement multiple conditional filters
Filter (FN) uses a special function to remove elements that do not match in the collection as a filter condition.
Is (expr) examines the collection of currently selected elements with an expression, if at least one of the elements conforms to the given
An expression returns TRUE.
Map (callback) utilizes the callback method for a set of elements in a jquery objectConvertIts value, and then adds it to a jquery array.
Not (expr) deletes an element that matches the specified expression from a matching set of elements.
Slice (start, [end]) obtains a subset from the set of matching elements, the same as the slice method of the built-in array.
Add (expr) adds an element that matches an expression to the jquery object.
Children ([expr]) gets a collection of elements that contain all the child elements of each element in a matching set of elements. Optional filter
Will make this method match only the element nodes, excluding the text nodes.
Contents () Gets a collection of all descendant nodes that contain each element in a matching set of elements (only element nodes, not
Include the text node, and if the element is an IFRAME, get the document element
Find (expr)SearchAll elements that match the specified expression.
Next ([expr]) gets a collection of elements that contain the next sibling element immediately following each element in the matching element collection.
Nextall ([expr]) gets a collection of elements that contain all of the following sibling elements for each element in a matching set of elements
Parent ([expr]) gets a collection of elements that contain the unique parent element of all matching elements.
Parents ([expr]) gets a collection of elements (without the root element) that contains the unique ancestor element of all matching elements.
Prev ([expr]) gets a collection of elements that contain the first sibling element immediately preceding each element in the matching element collection.
Prevall ([expr]) gets a collection of elements that contain all previous sibling elements of each element in a matching set of elements.
Siblings ([expr]) gets an element collection that contains all the sibling elements of each element in a matching set of elements.
Andself () adds the previously matched collection of elements to the current collection
Gets all the DIV elements and the P elements therein, adding the Border class attribute. Gets the P element in all DIV elements,
Add Background class Properties
$ ("div"). Find ("P"). Andself (). addclass ("border");
$ ("div"). Find ("P"). addclass ("background");
End () ends the current operation, returning to the previous action of the current operation
Finds the collection of span elements within all p elements, and then returns the collection of P elements, adding CSS Properties
$ ("P"). FIND ("span"). End (). CSS ("Border", "2px red Solid");

JQuery Selectors Method Description

Basic Selector
$ ("#myDiv") matches unique element with this ID value
$ ("div") matches all elements of the specified name
$ (". MyClass") matches all elements that have this class style value
$ ("*") matches all elements
$ ("Div,span,p.myclass") union of all matching selectors
Cascade Selector
$ ("form input") descendant selector, select all Descendants node of ancestor
$ ("#main > *") Child selector, select all child nodes of parent
$ ("label + input") Pro selector, select Prev's Next pro node
$ ("#prev ~ div") Sibling selector, select all sibling nodes of Prev
Basic Filter Selector
$ ("Tr:first") matches the first selected element
$ ("Tr:last") matches the last selected element
$ ("Input:not (: Checked) + span") filters out all elements of the matching selector from the set of original elements (here is a pro selector)
$ ("Tr:even") matches all elements of an even position in the collection (starting from 0)
$ ("tr:odd") matches all elements of the odd position in the collection (starting from 0)
$ ("Td:eq (2)") matches the element at the specified position in the collection (starting from 0)
$ ("TD:GT (4)") matches all elements after the specified position in the collection (starting from 0)
$ ("TD:GL (4)") matches all elements before the specified position in the collection (starting from 0)
$ (": Header") matches all headings
$ ("div:animated") matches all elements that are running the animation
Content Filter Selector
$ ("Div:contains (' John ')") matches all elements that contain the specified text
$ ("Td:empty") matches all empty elements (elements that contain only text are not empty)
$ ("Div:has (P)") matches all elements that contain at least one selector from the original element collection again
$ ("td:parent") matches all elements that are not empty (including elements that contain text)
$ ("Div:hidden") matches all hidden elements, including hidden fields of the form
$ ("div:visible") matches all visible elements
Attribute Filter Selector
$ ("Div[id]") matches all elements with the specified property
$ ("input[name= ' newsletter ']") matches all elements with the specified property value
$ ("input[name!= ' newsletter ']") matches all elements that do not have the specified property value
$ ("input[name^= ' News ')" matches all elements with the specified property value starting with
$ ("input[name$= ' letter ']") matches all elements that specify the value of the property to end at value
$ ("input[name*= ' Man ')" matches all elements that have the specified property value containing a value character
$ ("input[id][name$= ' Man ')" matches all elements that meet multiple selectors at the same time
child element Filter Selector
$ ("UL Li:nth-child (2)"),
$ ("ul Li:nth-child (Odd)"), matching the nth child element of the parent element
$ ("ul Li:nth-child (3n + 1)")

$ ("div span:first-child") matches the 1th child element of the parent element
$ ("div span:last-child") matches the last 1 child elements of the parent element
$ ("div button:only-child") matches only 1 child elements of the parent element
Form element Selector
$ (": input") matches all form input elements, including all types of input, textarea, select and button
$ (": Text") matches all input elements of type text
$ (":p Assword") matches all input elements of type password
$ (": Radio") matches all input elements of type radio
$ (": checkbox") matches all input elements of type checkbox
$ (": Submit") matches all input elements of type submit
$ (": Image") matches all input elements of type image
$ (": Reset") matches all input elements of type reset
$ (": Button") matches all input elements of type button
$ (": File") matches all input elements of type file
$ (": hidden") matches the hidden fields of all input elements or forms that are of type hidden
Form Element Filter Selector
$ (": Enabled") matches all operable form elements
$ (":d isabled") matches all non-manipulated form elements
$ (": Checked") matches all selected elements
$ ("Select Option:selected") matches all selected elements

JQuery CSS Method Description

CSS (name) accesses the style properties of the first matching element.
CSS (properties) sets a "name/value pair" object to the style properties of all matching elements.
$ ("P"). Hover (function () {
$ (this). CSS ({backgroundcolor: "Yellow", FontWeight: "Bolder"});
}, function () {
var cssobj = {
BackgroundColor: "#ddd",
FontWeight: ",
Color:" RGB (0,40,244) "
}
$ (this). CSS ( Cssobj);
});
CSS (name, value) sets the value of a style property in all matching elements.
Offset () Gets the position of the first element that matches relative to the current visual window. The returned object has 2 properties,
Top and left, and the property value is an integer. This function can only be used for visible elements.
var p = $ ("P:last");
var offset = p.offset ();
P.html ("Left:" + Offset.left + ", Top:" + offset.top);
Width () Gets the width value of the element that is currently first matched,
width (val) Sets the specified width value for each matching element.
Height () Gets the height value of the element that is the first match,
Height (val) sets the specified height value for each matching element.

JQuery Utilities Method Description
Jquery.browser
. MSIE means IE
JQuery.browser.version read the version information of the user's browser
Jquery.boxmodel detects whether the user browser's display for the current page is based on the CSS box model of the Web
Jquery.isfunction (obj) detects whether the passed parameter is a function
function stub () {}
var OBJS = [
function () {},
{x:15, y:20},
Null
Stub
"Function"
];
Jquery.each (OBJS, function (i) {
var isfunc = jquery.isfunction (Objs[i]);
$ ("Span:eq (" + i + ")"). Text (Isfunc);
});
Jquery.trim (str) clears the spaces at each end of the string, using regular expressions to clear the spaces at both ends of the given character
Jquery.each (object, callback) a general-purpose iterator that can be used to seamlessly iterate over objects and arrays
Jquery.extend (Target, Object1, [objectn]) extends an object, modifies the original object and returns, which is a powerful implementation inherited
Tool, this inheritance is implemented by means of a value-transfer method, not in JavaScript
Prototype chain mode.
Merge the settings and Options objects to return the modified Settings object
var settings = {validate:false, limit:5, Name: "foo"};
var options = {validate:true, name: "Bar"};
Jquery.extend (settings, options);

Merging defaults and Options objects, defaults objects are not modified. The value in the Options object
The value passed to the empty instead of the defaults object.

var empty = {}
var defaults = {Validate:false, limit:5, Name: "foo"};
var options = {validate:true, name: "Bar"};
var settings = $.extend (empty, defaults, options);
Jquery.grep (Array, callback, [invert]) removes items from an array through a filter function
$.grep ([0,1,2], function (n,i) {
return n > 0;
});
Jquery.makearray (obj) converts an array-like object into a true array
Converts the collection of selected DIV elements into an array
var arr = Jquery.makearray (document.getElementsByTagName ("div"));
Arr.reverse (); Use a Array method on the list of DOM elements
$ (arr). Appendto (Document.body);
Jquery.map (Array, callback) modifies an item in an array by using a method, and then returns a new array
Jquery.inarray (value, array) returns the position of value in the array, or 1 if it is not found
Jquery.unique (array) deletes all repeating elements in the array, returning the sorted array