Excellent open-source js framework-jQuery User Manual (1)

JQuery is an excellent js Development Library class like prototype, especially its support for css and XPath makes it easier for us to write JavaScript! If you are not a js guru and want to write excellent js effects, jQuery can help you achieve your goal!
: Http://jquery.com

After the download is complete, load it to the document. Then let's take a look at a simple example!
<Script language = "javascript" type = "text/javascript">
$ (Document). ready (function (){
$ ("A"). click (function (){
Alert ("Hello world! ");
});
});
<Script>
The above effect is that a dialog box will pop up when you click all a tags in the document. $ ("a") is a jQuery selector, $ itself represents a jQuery class, all $ () is to construct a jQuery object, click () is the method of this object, similarly $ (document) is also a jQuery object, ready (fn) is the $ (document) method, indicates that the function is executed when all documents are downloaded.
Before proceeding to the following content, I would also like to explain the difference between $ ("p") and $ ("# p"), $ ("p ") elements of all p tags (<p> </p>), $ ("# p ") it indicates that the element with id "p" (<span id = "p"> </span>) is used.

I will explain how to use jQuery from the following:
1: Core
2: DOM operations
3: css operations
4: javascript processing
5: Dynamic Effect
6: event
7. ajax support
8: plug-in program

I. Core Components
$ (Expr)
(This function can be used by css selector, Xpath, or html code to match the target element. All jQuery operations are based on this function .)
Parameter: expr: String, a query expression or an html string
Example:
Before jQuery is executed:

<P> one </p>
<Div>
<P> two </p>
</Div>
<P> three </p>
<A href = "#" id = "test" onClick = "jq ()"> jQuery </a>

JQuery code and functions:
Function jq (){
Alert ($ ("div> p" pai.html ());
}
Run: When you click an element whose id is test, the text in the pop-up dialog box is two, that is, the content of the p element under the div label.
Function jq (){
$ ("<Div> <p> Hello </p> </div>"). appendTo ("body ");
}
Run: When you click an element whose id is test, add "<div> <p> Hello </p> </div>" to the body"

$ (Elem)
Note: jQuery is restricted to act on a specific dom element. This function also accepts xml documents and windows objects.
Parameter: elem: DOM elements compressed by jQuery objects
Example:
Before jQuery is executed:
<P> one </p>
<Div>
<P> two </p>
</Div> <p> three </p>
<A href = "#" id = "test" onClick = "jq ()"> jQuery </a>
JQuery code and functions:
Function jq (){
Alert ($ (document). find ("div> p" document .html ());
}
Run: When you click an element whose id is test, the text in the pop-up dialog box is two, that is, the content of the p element under the div label.
Function jq (){
$ (Document. body). background ("black ");
}
Run: When you click an element whose id is test, the background color turns black.

$ (Elems)
Note: Limits jQuery to act on a specific set of DOM elements.
Parameter: elem: A group of DOM elements compressed by jQuery objects
Example:
Before jQuery is executed:
<Form id = "form1">
<Input type = "text" name = "textfield">
<Input type = "submit" name = "Submit" value = "submit">
</Form>
<A href = "#" id = "test" onClick = "jq ()"> jQuery </a>
JQuery code and functions:
Function jq (){
$ (Form1.elements). hide ();
}
Run: When you click an element whose id is test, all elements in the form1 form are hidden.

$ (Fn)
Note: $ (document). ready () is a shorthand method. When all documents are loaded, the function is executed. Multiple $ (fn) functions can be executed at the same time when the document is loaded!
Parameter: fn (Function): The Function executed when the document is loaded!
Example:
$ (Function (){
$ (Document. body). background ("black ");
})
Run: when the document is loaded, the background turns black, which is equivalent to onLoad.

$ (Obj)
Note: Copy A jQuery object,
Parameter: obj (jQuery): The jQuery object to be copied
Example:
Before jQuery is executed:
<P> one </p>
<Div>
<P> two </p>
</Div>
<P> three </p>
<A href = "#" id = "test" onClick = "jq ()"> jQuery </a>
JQuery code and functions:
Function jq (){
Var f = $ ("div ");
Alert ($ (f). find ("p" example .html ())
}
Run: When you click an element whose id is test, the text in the pop-up dialog box is two, that is, the content of the p element under the div label.

Each (fn)
Note: The function is applied to all matching objects.
Parameter: fn (Function): Function to be executed
Example:
Before jQuery is executed:


<A href = "#" id = "test" onClick = "jq ()"> jQuery </a> jQuery code and functions:
Function jq (){
$ ("Img"). each (function (){
This. src = "2.jpg ";});
}
Run: When I click the element whose ID is test', The srcof the imgtag is changed to 2.jpg.

Eq (pos)
Reduces the number of matching objects to a single dom element.
Parameter: pos (Number): index to be restricted, starting from 0
Example:
Before jQuery is executed:
<P> This is just a test. </p>
<P> So is this </p>
<A href = "#" id = "test" onClick = "jq ()">
JQuery </a> jQuery code and functions:
Function jq (){
Alert ($ ("p" 2.16.eq(12.16.html ())
}
Run: When you click an element whose id is test, the alert dialog box displays: So is this, that is, the content of the second <p> label.

Get () get (num)
Description: gets the matching element. get (num) returns an element of the matching element.
Parameter: get (Number): index to be restricted, starting from 0
Example:
Before jQuery is executed:
<P> This is just a test. </p>
<P> So is this </p>
<A href = "#" id = "test" onClick = "jq ()"> jQuery </a>
JQuery code and functions:
Function jq (){
Alert ($ ("p"). get (1). innerHTML );
}
Run: When you click an element whose id is test, the alert dialog box displays: So is this, that is, the content of the second <p> label.
Note the difference between get and eq. eq returns jQuery objects, get returns the matched dom objects, and all get $ ("p "). the content of the eq (1) object is html () using jQuery, and $ ("p") is used "). use innerHTML to get (1) Content

Index (obj)
Returns an object index.
Parameter: obj (Object): the Object to be searched
Example:
Before jQuery is executed:
<Div id = "test1"> </div>
<Div id = "test2"> </div>
<A href = "#" id = "test" onClick = "jq ()"> jQuery </a>
JQuery code and functions:
Function jq (){
Alert ($ ("div"). index (document. getElementById ('test1 ')));
Alert ($ ("div"). index (document. getElementById ('test2 ')));
}
Run: When you click an element whose id is test, the alert dialog box displays 0, 1 respectively.

Size () Length
Description: Number of matching objects. The two are equivalent.
Example:
Before jQuery is executed:


<A href = "#" id = "test" onClick = "jq ()"> jQuery </a>
JQuery code and functions:
Function jq (){
Alert ($ ("img"). length );
}
Run: When you click an element whose id is test, the alert dialog box displays 2, indicating that two matching objects are found.