Summary of common and basic knowledge of jquery (i)

Source: Internet
Author: User
Tags getscript

Attribute:

$ ("P"). addclass (style types defined in CSS); Add a style to an element
$ ("img"). attr ({src: "test.jpg", alt: "Test Image"}); To add an attribute/value to an element, the parameter is a 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 (); Get the content within the element (elements, text, etc.)
$ ("element name"). HTML ("<b>new stuff</b>"); Set content to an element
$ ("element name"). Removeattr ("attribute name") deletes the specified attribute and the value of the property to an element
$ ("element name"). Removeclass ("class") deletes the specified style for an element
$ ("element name"). Text (); Gets the text of the element
$ ("element name"). Text (value); Sets the text value of this element to value
$ ("element name"). Toggleclass (Class) is canceled when the element has a style in the argument, and if it does not exist, set the style
$ ("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); Insert content as the element's contents behind the element
$ ("element name"). AppendTo (content); Connect elements after content
$ ("element name"). before (content); Contrary to After method
$ ("element name"). Clone (Boolean expression) when the Boolean expression is true, the cloned element (treated as true when no argument)
$ ("element name"). Empty () sets the content of the element to null
$ ("element name"). InsertAfter (content); After inserting the element 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, at the front of the element
$ ("element"). Prependto (content); Place the element as part of the content and put it in the front 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); Enclose the element with an element


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 an HTML code in the body
$ (Elems) to get an element on the DOM
$ (function () {...}); Execute a function
$ ("div > P"). CSS ("Border", "1px solid Gray"); Find child nodes p for all Div, add style
$ ("Input:radio", Document.forms[0]) Find all the radio buttons in the first form on the current page
$.extend (prop) prop is a jquery object,
Example:

<>  b a:b;}});

JQuery (expression, [context])-$ (expression, [context]); By default, $ () queries the DOM element in the current HTML document.

Each (callback) executes a function with each matching element as the context
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). Was (" #stop ")) {$ (" span "). Text (" Stopped at Div Index # "+ index); return false;});});

JQuery Event:

Ready (FN); $ (document). Ready () Note 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 to a specific event (like click) for each matching element. Possible event attributes are: Blur, focus, load, resize, scroll, unload, click, DblClick, MouseDown, MouseUp, MouseMove,
MouseOver, Mouseout, MouseEnter, MouseLeave, change, select, Submit, KeyDown, KeyPress,
KeyUp, error
single (type, [data], FN) binds one or more event handler functions for a specific event (like click) for each matching element. In each pair
On the image, this event handler function will only be executed once. The other rules are the same as the bind () function.

Trigger (type, [data]) triggers a class of events on each matched 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 () removes all bound events from all paragraphs
$ ("P"). Unbind ("click") removes the Click event on all paragraphs
Hover (over, out) Over,out are methods that trigger the first function specified when the mouse moves over 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 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 an object almost all elements
DblClick () mouse double-click an object almost all elements
Error () A bug occurred when loading a document or Image window, img
The focus () element gets the focal point A, input, textarea, button, select, label, map, area
KeyDown () Key of a keyboard is pressed almost all elements
KeyPress () Key of a keyboard is pressed or held down by almost all elements
KeyUp () Key of one 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 moves almost all elements away from an element
MouseOver (FN) mouse is moved to almost all elements above an element
MouseUp (FN) a mouse button is released almost all elements
Resize (FN) Windows or frames are resized window, IFRAME, frame
Scroll (FN) scrolls the visible part of a document when the window
Select () text selected document, input, textarea
Submit button is clicked form
Unload (FN) User exits the 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 has 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 get to request JavaScript files and executes them.

$.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, a function is executed. This is an AJAX event

$ ("#msg"). Ajaxcomplete (function (request, settings) {$ (this). Append ("<Li> Request complete. </ Li > ");});

Ajaxerror (callback) executes a function when an AJAX request fails. This is an AJAX event

$ ("#msg"). Ajaxerror (function (request, settings) {$ (this). Append ("<li> Error requesting page "+ Settings.url +"</li>") ;

Ajaxstart (callback) executes a function when an AJAX request starts but has not yet been activated. This is an AJAX event
Display loading information when an AJAX request starts (and is not yet active)

$ ("#loading"). Ajaxstart (function () {$ (this). Show ();});

Ajaxstop (callback) executes a function when all Ajax is stopped. This is an AJAX event
Hides loading information when all AJAX requests are stopped.

$ ("#loading"). Ajaxstop (function () {$ (this). Hide ();});

Ajaxsuccess (callback) executes a function when an AJAX request is completed successfully. This is an AJAX event
When the AJAX request completes successfully, the message is displayed.

$ ("#msg"). Ajaxsuccess (function (evt, request, Settings) {$ (this). Append ("<Li> successful request! </ Li > ");});

The Jquery.ajaxsetup (options) is set globally for all AJAX requests. View the $.ajax function to get all the options 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 in the form of a name and a value. Implements the correct form element sequence

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 the form and show them

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 ();

Summary of common and basic knowledge of jquery (i)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.