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

jQuery is a js development library class that is as good as prototype, especially its support for css and XPath, making it more convenient for us to write js! If you are not a js expert and want to write excellent js effects, jQuery can help you achieve your goal!
Download address: http://jquery.com

After downloading, load it into the document first, and then let’s take a look at a simple example!
<script> <BR> $(document).ready(function(){<BR> $("a").click(function() {<BR> alert("Hello world!");<BR> });<BR>});<BR><script><BR> The effect above is that a dialog box will pop up when you click on all a tags in the document. $("a") is a jQuery selector, and $ 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 method of $(document), which means when the document is all Execute the function when the download is complete. <BR> Before proceeding with the following content, I would also like to explain the difference between $("p") and $("#p"). $("p") means taking all p tags (<p></script>

) Element, $("#p") represents the element whose id is "p" ().

I will explain the use of jQuery from the following contents:
1 :Core part
2:DOM operation
3:css operation
4:javascript processing
5:Dynamic effect
6:event event
7:ajax support
8: Plug-in

1: Core part
$(expr)
Description: This function can be matched by css selector, Xpath or html code Target element, all jQuery operations are based on this
Parameters: expr: string, a query expression or an html string
Example:
Before jQuery is executed:

one

 

three

 jQuery

jQuery code and functions:
function jq(){
alert($("div > p").html());
}
Run: When the click id is When testing the element, the text of the pop-up dialog box is two, which is the content of the p element under the div tag
function jq(){
$(""). appendTo("body");
}
Run: When clicking the element with id test, add ""

to body $(elem)
Description: Limit jQuery to a specific dom element. This function also accepts xml documents and windows objects
parameters: elem: DOM elements compressed by jQuery objects
Example:
Before executing jQuery:

one

three

jQuery
jQuery code and function:
function jq(){
alert($(document).find("div > p").html());
}
Run: When you click on the element with id test, the pop-up dialog box text is two, which is the content of the p element under the div tag
function jq(){
$(document.body) .background("black");
}
Run: When you click on the element with id test, the background color changes to black

$(elems)
Description: Limit jQuery to a specific group of DOM elements
Parameters: elem: A group of DOM elements compressed by jQuery objects
Example:
Before jQuery is executed:

jQuery
jQuery code and function:
function jq(){
$(form1.elements) .hide();
}
Run: When the element with id test is clicked, all elements in the form1 form are hidden.

$(fn)
Description: A shorthand for $(document).ready(), which executes the function when the document is fully loaded. There can be multiple $(fn) and when the document is loaded, all functions are executed at the same time!
Parameter: fn (Function): function executed when the document is loaded!
Example:
$( function(){
$(document.body).background("black");
})
Run: When the document is loaded, the background becomes black , equivalent to onLoad.

$(obj)
Description: Copy a jQuery object,
Parameters: obj (jQuery): The jQuery object to be copied
Example:
Not Before executing jQuery:

one

three

jQuery
jQuery code and function:
function jq(){
var f = $("div");
alert($(f).find("p").html())
}
Run: When you click the element with the id as test, the pop-up dialog box text is two, that is, p under the div tag The content of the element.

each(fn)
Description: Apply the function to all matching objects
Parameter: fn (Function): The function that needs to be executed
Example:
Before executing jQuery:


jQueryjQuery code and function:
function jq(){
$("img" ).each(function(){
this.src = "2.jpg"; });
}
Run: When you click on the element with the id as test, the src of the img tag becomes 2. jpg.

eq(pos)
Description: Reduce the matching object to a separate dom element
Parameter: pos (Number): Index of the desired limit, starting from 0
Example:
Before jQuery is executed:

This is just a test.

So is this

jQueryjQuery code and functions:
function jq(){
alert($("p").eq(1).html())
}
Run: When click the id is test element, the alert dialog box displays: So is this, that is, the content of the second

tag

get() get(num)
Description: Get the matching element, get(num) returns an element among the matching elements
Parameters: get (Number): The index of the desired limit, starting from 0
Example:
Before jQuery is executed:

This is just a test.

So is this

jQuery
jQuery code and function:
function jq(){
alert ($("p").get(1).innerHTML);
}
Run: When you click on the element with id test, the alert dialog box displays: So is this, that is, the second

The content of the tag
pay attention to the difference between get and eq. eq returns a jQuery object, and get returns the matched dom object. All the contents of the $("p").eq(1) object are obtained using the jQuery method html (), and take the content of $("p").get(1) with innerHTML

index(obj)
Description: Return object index
Parameter: obj (Object): The object to be found
Example:
Before jQuery is executed:

jQuery
jQuery code and functions:
function jq(){
alert($("div").index(document.getElementById('test1')));
alert($("div" ).index(document.getElementById('test2')));
}
Run: When you click the element with the id test, the alert dialog box pops up twice and displays 0 and 1 respectively

size() Length
Description: The number of current matching objects, both are equivalent
Example:
Before jQuery is executed:


jQuery
jQuery code and function:
function jq(){
alert($("img").length);
}
Run: When you click on the element with the id of test, the alert dialog box pops up and displays 2, indicating that two matching objects were found.