Introduction and use of jquery

The current popular JavaScript libraries are:

JQuery, Mootools,prototype, Dojo, Yui,ext_js DWR

jquery, created by the American Johnresig, has now attracted many JavaScript gurus from around the world to join its team.

jquery is another good JavaScript framework after prototype. Its purpose is to--writeless,do more, write less code, do more things.

It is a lightweight JS library (only 21k after compression), which is not the other JS library, it is compatible with CSS3, but also compatible with a variety of browsers (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+).

jquery is a fast, concise JavaScript library that makes it easier for users to handle htmldocuments, events, animation, and easily provide Ajax interaction for the site.

One of the big advantages of jquery is that it has a full documentation and a variety of applications that are detailed, as well as a number of mature plug-ins to choose from.

jquery enables the user's HTML page to keep the code and HTML content separate, that is, you don't have to insert a bunch of JS into the HTML to invoke the command, just define the ID.

The jquery object is the object that is generated after the DOM object is wrapped through jquery.

Introducing jquery: Importing a JS file into a project, introducing a page

jquery objects are unique to jquery. If an object is a jquery object, it can use the method in jquery: $ ("#test"). html ();

Like what:

$ ("#test"). html () means: Gets the HTML code within the element with the ID test. where HTML () is the method in jquery

This code is equivalent to implementing the code with the DOM:

document.getElementById ("Test"). InnerHTML;

Although jquery objects are created after wrapping a DOM object, jquery cannot use any of the methods of the DOM object, nor can the same DOM object use the methods in jquery. Indiscriminate use can be an error

Convention: If you get a jquery object, precede the variable with $.

var$variable =jquery Object

varvariable = Dom Object

Selectors are the foundation of jquery, and in jquery, event handling, traversal DOM, and AJAX operations all depend on selectors

The advantages of the jquery selector:

• A Concise formulation

• Perfect event-handling mechanisms

========================== Basic Selector

$ ("#id")//Find node elements by ID

$ ("label name")//Lookup node element by tag name

$ (". Class value")//Find node element by value of class attribute

$ ("*")//Find all node labels

========================== Hierarchy Selector

$ ("tag or ID or class tag or ID or class")//Find tags or id or all tags or ids or class nodes in the class node---"" spaces represent all tags in the specified label, Class,id

$ ("tag or ID or class> tag or ID or class")//lookup tag or ID or child node tag or ID in class node or class--">" For parent-child relationship

$ ("tag or ID or class+ tag or ID or class")//find tag or ID or class's next tag or ID or class node--"+" Next node

$ ("tag or ID or class~ tag or ID or class")//search for tags or all subsequent tags or ids or class nodes of the ID or class--all nodes after "~"

$ ("ID or Class"). Siblings ("div")//lookup ID or class and is the node element of the specified node

========================== Base Filter Selector

--------$ (node element: condition)

$ ("tag or ID or class:first")/lookup tag or ID or class first node element to appear

$ ("tag or ID or class:last")/lookup tag or ID or class last occurrence node element

$ ("Div:not (tag or ID or Class)")/lookup on a node that is not a label or ID or class node element, note that no ID or class attribute is included

$ ("label or ID or Class:even")//Find the label or the node element with an even number in the order of the ID or class

$ ("tag or ID or class:odd")/lookup tag or ID or class node element with odd order

$ ("tag or ID or class": GT (Index))//lookup tag or ID or class index value is greater than the node element of the specified index; GT is the abbreviation of greater than

$ ("label or ID or CLASS:EQ (index)")/lookup tag or ID or class index value equals the node element of the specified index; EQ is the shorthand for equals

$ ("label or ID or CLASS:LT (index)")/lookup tag or ID or class index value less than the node element of the specified index; LT is a shorthand for less than.

$ (": Header")//Find all header node elements; it's a fixed notation.

$ ("tag or ID or class"). Slidetoggle (800,method)//Let the tag or ID or class node element move, 800 represents the length of the animation's number of milliseconds, method callback methods

========================== Content Filter Selector

$ ("tag or ID or class:contains (' di ')")/lookup tag or ID or the node element in the class content that contains the specified content

$ ("tag or ID or class:empty")/lookup tag or ID or node element with no child elements in class

$ ("label or ID or Class:has (tag or ID or Class)")//Find the tag or ID or class element that contains the tag or ID or class elements

$ ("label or ID or class:parent")//find tag or ID or class element containing child elements

$ ("label or ID or Class:not (: Contains (' di ')")/lookup tag or ID or class element that does not contain the specified text content

========================== Visibility Filter Selector

$ ("label or ID or class:visible")//lookup tag or node element with ID or class as visible element

$ ("label or ID or Class:hidden"). Show ()//Find the label or the node element with the ID or class as the hidden element

Each (function (Index,domele) {

Alert (index+ "= = =" +domele.value);

);//jquery Traversal method: Index is a corner mark, Domele is converting a node element object to a DOM object returns

$.each (object or array to traverse, function (Index,domele) {})//jquery static method

========================== Property Filter Selector

$ ("tag or ID or Class[title]")/lookup tag or node element with ID or class node element attribute as Title

$ ("tag or ID or class[title=test]")/lookup tag or ID or node element with class node element attribute of title and equal to specified value

$ ("tag or ID or class[title!=test]")/lookup tag or the node element with the ID or class node element attribute as title and not equal to the specified value; Note that no title attribute is included

$ ("tag or ID or Class[title^=te]")/lookup tag or ID or class node element property is title and the attribute value to specify the start value of the node element

$ ("label or ID or Class[title$=te]")/lookup tag or ID or class node element property is title and the attribute value is the node element with the specified end value

$ ("label or ID or Class[title*=te]")/lookup tag or ID or class node element property is title and the attribute value contains the node element of the specified value

$ ("tag or ID or class[title*=te][property] ...")/lookup tag or ID or class node element to filter multiple attributes at the same time, node elements

========================== child element Filter Selector

$ ("label or ID or class:nth-child (index)")//Find the tag or ID or the specified child element under the class node; note: Before adding a space, index is starting from 1

$ ("label or ID or class:first-child")/lookup tag or ID or the first child element under the class node

$ ("label or ID or class:last-child")/lookup tag or ID or the first child element under the class node

$ ("tag or ID or class:only-child")/lookup tag or ID or class node if there is only one child element, return

========================== form Selector

Input[type=checkbox]:checked "). length//get the number of selected buttons

$ ("select>option:selected")//Gets the selection of the dropdown box, typically with each traversal

========================== matching Selector

$ (": input")//Return value collection element Description: Match all input, textarea, select and button elements

$ (": Text")//Return value Collection element Description: Matches all single-line text boxes.

$ (":p assword")//Return value Collection element Description: Matches all password boxes.

$ (": Radio")//Return value Collection element Description: Matches all radio buttons.

$ (": checkbox")//Return value collection element Description: Match all check boxes

$ (": Submit")//Return value Collection element Description: Matches all submit buttons.

$ (": Image")//Return value Collection element Description: Matches all image fields.

$ (": Reset")/return value collection element Description: Matches all reset buttons.

$ (": Button")//Return value Collection element Description: Matches all buttons. This includes the element button that is written directly.

$ (": File")//Return value Collection element Description: Matches all file fields.

$ ("Input:hidden")/return value collection element Description: Matches all invisible elements, or elements of type hidden. This selector is not limited to the form, except for matching the hidden in input, those style hidden will be matched.

Note: The use of the above example is the way to select the hidden value in input, but using the word ": hidden" is to match all the invisible elements in the page, including the width or height of 0,

==========================

===== Create node elements

$("

/label How to write how to write, pay attention to the self-closing label writing:

===== Insert Node

$ ("#a"). Append ($ ("#b")//Add a later B node to Node A

$ ("#a"). Appendto ($ ("#b")//Add the previous a node to the B node

$ ("#a"). After ($ ("#b")//Add a later B node to the back of a node

$ ("#a"). Before ($ ("#b")//Add a later B node to the front of a node

$ ("#a"). InsertAfter ($ ("#b")//Insert the previous a node behind the B-node

$ ("#a"). InsertBefore ($ ("#b")//Insert the previous a node before the B node

===== Delete node elements

Remove ()//delete node elements, delete themselves

Empty ()//delete all byte points without deleting the attribute node

===== Clone node elements

Clone (Boolean)//clones a node, by default cloning only nodes, not cloning events, if passed a true on behalf of the event also cloned

===== Replacement Node Element

$ ("#a"). Repalacewith ($ ("#b")//replace a node with B node

$ ("#a"). Repalaceall ($ ("#b")//replace B node with Node A

Basic methods used in =====

Val ()//Gets the value of the node element

Val ("xxx")//change the value of the node element

Text ()//Get the textual content of the node object

Text ("ABCD")//Set the textual node

attr ("name")//Get Name property value

attr ("name", "Zhangsan")//Set Name property value

Removeatt ("name")//delete attribute

==========================

-----. CSS (' property value ', ' property name ')//Style

=====dom/jquery Conversion

-----$ (DOM object) to replace a DOM object with a jquery object

-----var name = $ variable name [index]//convert jquery to DOM object

-----jquery provides a get (index) method to convert jquery to a DOM object

-----$ (document). Ready (function () {});//The contents of all the pages are loaded before executing//abbreviated GUS: $ (). Ready (function () {});

-----$ (window). Load (function () {})//Generally not