jquery function Daquan

Source: Internet
Author: User
Tags getscript prev

$ ("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:
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, $ () 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). Is ("#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>");
});
Ajaxsend (callback) executes a function when an AJAX request is sent. This is an AJAX event
$ ("#msg"). Ajaxsend (function (evt, request, settings) {
$ (this). Append ("<li<starting request at" + 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 ();
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 when the display is complete.
Hide () hides all matching elements.
Hide (speed, [callback]) hides all matching elements in an elegant animation 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 a height change (increase downward), which is selectable after the display is complete
To trigger a callback function. This animation effect only adjusts the height of the element, allowing the matching elements to be
"Swipe" to show it.
Slideup (speed, [callback]) dynamically hides all matching elements by a height change (decrease up), optionally
Triggers a callback function. This animation effect only adjusts the height of the element, allowing the matching elements to "slide"
In a way that hides itself.
Slidetoggle (speed, [callback]) toggles the visibility of all matching elements through a height change and optionally triggers a return after the switch is complete
Tuning function. This animation effect only adjusts the height of the element, allowing the matching elements to be "slid" in a way that implicitly
Hidden or displayed.
FadeIn (speed, [callback]) fades the fade of all matched elements by changing the opacity and, when the animation is complete, optionally touches the
Sends a callback function. This animation only adjusts the opacity of the element, which means that all matching elements
The height and width are not changed.
FadeOut (speed, [callback]) fades out all matched elements by changing the opacity, and optionally touches the animation after it finishes
Sends a callback function. This animation only adjusts the opacity of the element, which means that all matching elements
The height and width are not changed.
FadeTo (speed, opacity, [callback]) adjusts the opacity of all matching elements incrementally to the specified opacity and completes the animation
Optionally, a callback function is triggered. This animation only adjusts the opacity of the element, which means that the
There is no change in the height and width of the matched element.
Stop () stops all matching elements that are currently running animations. If there are animations in the queue, they will start immediately.
Queue () Gets a reference to the animation sequence of the first matching element (returns an array of contents as a function)
Queue (callback) adds an executable function at the end of each matching element's event sequence as an event function for this element
Queue (queue) replaces the original animation sequence of all matching elements with a new animation sequence
Dequeue () performs and removes animation from the front of the animation sequence
Animate (params, [duration], [easing], [callback]) is used to create a function of a custom animation.
Animate (params, options) creates another method of custom animation. function Ibid.
JQuery Traversing Method Description
EQ (index) gets a specified position element from the matching element collection, with index starting at 0
The filter (expr) returns a collection of elements that match the specified expression, and you can use the "," number to split multiple expr to implement multiple conditional filters
Filter (FN) uses a special function to remove the mismatched elements in the collection as a filter condition.
Is (expr) uses an expression to examine the currently selected collection of elements if at least one of the elements conforms to the given
An expression returns TRUE.
Map (callback) converts a set of elements in a jquery object to its value using the callback method, and then adds it to a jquery array.
Not (expr) removes the element that matches the specified expression from the matching element collection.
Slice (start, [end]) gets a subset from the collection of matching elements, and the slice method for the built-in array is the same.
Add (expr) adds an element that matches an expression to a jquery object.
Children ([expr]) gets a collection of elements that contain all the child elements of each element in the matching element collection. Optional filters
Will make this method match only the elements that fit (including only the element nodes, excluding the text nodes).
Contents () Gets a collection of all descendant nodes that contain each element of the matching element collection (including only the element nodes, not
including the text node), if the element is an IFRAME, the document element in which it is obtained
Find (expr) searches all elements that match the specified expression.
Next ([expr]) gets a collection of elements that contain the following sibling elements that are immediately adjacent to each element in the matching element collection.
Nextall ([expr]) gets a collection of elements containing all of the following sibling elements for each element in the matching element collection
The parent ([expr]) obtains a collection of elements that contain a unique parent element for all matching elements.
Parents ([expr]) gets a collection of elements (without root elements) that contains the unique ancestor elements of all matching elements.
Prev ([expr]) gets a collection of elements that contain the first sibling element that is immediately adjacent to each element in the matching element collection.
Prevall ([expr]) gets a collection of elements that contain all the previous sibling elements of each element in the matching element collection.
Siblings ([expr]) gets a collection of elements that contain all the sibling elements of each element in the matching element collection.
Andself () adds the previous matched collection of elements to the current collection
Gets all DIV elements and the P element within it, adding the Border class attribute. Gets the P element in all DIV elements,
Adding 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 in all p elements, and then returns a 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 with this class style value
$ ("*") matches all elements
$ ("Div,span,p.myclass") union of all matching selectors
Cascade Selector
$ ("form input") descendant selector, select all descendant nodes of ancestor
$ ("#main > *") Sub-selector, select all child nodes of parent
$ ("label + input") Pro selector, select Prev 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 all elements of the matching selector from the collection of original elements (there is a pro selector)
$ ("Tr:even") matches all elements of an even position in the collection (starting at 0)
$ ("tr:odd") matches all elements of an odd position in the collection (starting at 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 containing only text are not empty elements)
$ ("Div:has (P)") again matches all elements containing at least one selector from the original element collection
$ ("td:parent") matches all elements that are not empty (also counted as elements containing text)
$ ("Div:hidden") matches all hidden elements and also includes hidden fields of the form
$ ("div:visible") matches all visible elements
Attribute Filter Selector
$ ("Div[id]") matches all elements with the specified attribute
$ ("input[name= ' newsletter ')" matches all elements with the specified attribute value
$ ("input[name!= ' newsletter ')" matches all elements that do not have the specified attribute value
$ ("input[name^= ' News ']") matches all elements of the specified attribute value starting with value
$ ("input[name$= ' letter ')") matches all elements of the specified attribute value ending with value
$ ("input[name*= ' Man ']") matches all elements of the specified attribute value that contain the value character
$ ("input[id][name$= ' Man ']") matches all elements that match multiple selectors simultaneously
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 a parent element
$ ("div span:last-child") matches the last 1 child elements of a parent element
$ ("div button:only-child") matches only 1 child elements of a 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 all input elements of type hidden or hidden fields of form
Form Element Filter Selector
$ (": Enabled") matches all actionable form elements
$ (":d isabled") matches all non-actionable form elements
$ (": Checked") matches all selected elements
$ ("Select Option:selected") matches all selected elements
JQuery CSS Method Description
The CSS (name) accesses the style attributes of the first matching element.
CSS (properties) sets a "name/value pair" object to the style attributes 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 of the match relative to the current visual window. The returned object has 2 properties,
Top and left, 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 value of the current first matching element,
Width (val) Sets the specified width value for each matching element.
Height () Gets the altitude value of the element that is currently the first match,
Height (val) sets the specified height value for each matching element.
JQuery Utilities Method Description
Jquery.browser
. MSIE represents IE
JQuery.browser.version read the version information of the user's browser
Jquery.boxmodel detects whether the display of the user's browser for the current page is based on the box model of the CSS
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 spaces at both ends of a string, using regular expressions to clear spaces at the ends of a given character
Jquery.each (object, callback) a generic iterator that can be used to iterate objects and arrays seamlessly
Jquery.extend (Target, Object1, [objectn]) extends an object, modifies the original object and returns, which is a powerful implementation of the inherited
Tool, this inheritance is implemented in a value-based way, not in JavaScript
Prototype chain mode.
Merges the settings and Options objects, returning the modified settings object
var settings = {validate:false, limit:5, Name: "foo"};
var options = {validate:true, name: "Bar"};
Jquery.extend (settings, options);
Merging the defaults and Options objects, the Defaults object has not been modified. Values in the Options object
Instead of the value of the defaults object, it is passed to empty.
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 by using 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 selected set of DIV elements into an array
var arr = Jquery.makearray (document.getElementsByTagName ("div"));
Arr.reverse (); Use a Array method on List of DOM elements
$ (arr). AppendTo (Document.body);
Jquery.map (Array, callback) modifies an item in an array using a method, and then returns a new array
Jquery.inarray (value, array) returns the position of value in the array, or 1 if not found
Jquery.unique (array) deletes all repeating elements in the array, returning the sorted array

jquery function Daquan

Related Article

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.