Jquery anchor jump to the scroll bar and scroll a sentence smoothly Code
Copy code Code: $ ("HTML, body"). animate ({scrolltop: $ ("# box"). offset (). Top}, 1000 );
Here are some tips for jquery.
1. control compilation resultsCopy codeThe Code is as follows: <SCRIPT type = "text/JavaScript" src = "scripts/jquery-1.2.6.min.js"> </SCRIPT>
<% IF (false) {%>
<SCRIPT type = "text/JavaScript" src = "scripts/jquery-1.3.2-vsdoc2.js"> </SCRIPT>
<% }%>
2.
1. If you want to use the functions provided by jquery, you must first construct the jquery packaging set.
Convert DOM elements into jquery packaging SetsCopy codeThe Code is as follows: var DIV = Document. getelementbyid ("testdiv"); // Dom Element
VaR domtojqueryobject =$ (DIV); // jquery Packaging
3. Convert jquery package set to DOM objectCopy codeCode: var domobject = $ ("# testdiv") [0]; // get the DOM object
$ ("# Testdiv"). Each (function () {comment (this).html ("modify content")}) // convert to jquery package set operation
4.Copy codeThe Code is as follows: jquery (callback)
Returns: jquery
$ (Document). Ready ()
--------------------------------------------------------------------------------
Learning jquery from scratch (3) Managing jquery packaging Sets Copy code The Code is as follows: <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Title> Hello World jquery! </Title>
<SCRIPT type = "text/JavaScript" src = "scripts/jquery-1.3.2-vsdoc2.js"> </SCRIPT>
</Head>
<Body>
<HR/>
<Input id = "btnshow" type = "button" value = "---- filter"/>
<Input id = "btnhide" type = "button" value = "Hide ---- filter"/>
<! -- ============================== Begin JS ============ ============================================= -->
<SCRIPT type = "text/JavaScript">
$ (
Function (){
$ ("# Btnshow"). BIND ("click", function (event) {$ (". filter"). Show ();});
$ ("# Btnhide"). BIND ("click", function (event) {$ (". filter"). Hide (500 );});
}
);
// $ ("# Btnchange"). BIND ("click", function (event) {$ ("# divmsg" ).html ("Hello world, too! ");});
</SCRIPT>
<SCRIPT type = "text/JavaScript">
// $ ("<DIV/>" bar .css ("border", "solid 1px # ff0000" bar .html ("dynamically created Div"). appendto (testdiv); // OK
// $ ("<Div style = \" border: solid 1px # ff0000 \ "> dynamically created Div </div>") // not done
$ (
Function ()
{
// Alert ("loaded! "); // Executed after loading is complete
}
);
// Alert ("loding... "); // Execute
</SCRIPT>
<! -- ============================ End JS ========== ============================================= -->
<SCRIPT type = "text/JavaScript">
// Template
</SCRIPT>
<! -- Table template -->
<Table>
<Tr>
<TD> </TD>
</Tr>
</Table>
<SCRIPT type = "text/JavaScript">
Function first () {// first
VaR an_element = $ ("Div"). eq (0 );
// Obtain the entire Div of the first Div. If an_element is directly output, it is displayed as an object.
Alert(an_element.html (); // output
}
Function second (){
VaR second_e = $ ("Div"). Filter (". Test2"); // The result is an occasional match.
/* = ===================================== */
// Second_e.each (
// Function (){
// This.html ("Modify it! ")
//}
//);
/* ===================================================== ============= */
Alert(second_e.html (); // The test result shows only the content of the first Div.
Alert(second_e.eq(1).html (); // obtain the second
}
// ================================================ ========================================================== ===
</SCRIPT>
<Div class = "filter" onclick = "First ()">
Example 1: click I run
<Table>
<Tr>
<TD>
Obtain the nth element by using eq (index ).
</TD>
<TD>
Obtain the Second Matching Element:
$ ("P"). eq (1)
</TD>
</Tr>
</Table>
</Div>
<HR/>
<Div class = "second" onclick = "second ()">
<Div class = "Test2"> filter the element set that matches the specified expression. The first Div </div>
<P> 2nd examples: click I run </P>
<Span> filter (expr) </span>
<Div class = "Test2">
Keep the element with Test2 class: Here it is with Test2 class
$ ("X"). Filter (". Test2") 2nd Div
</Div>
</Div>
<HR/>
<Div class = "test3" onclick = "third ()">
<SCRIPT type = "text/JavaScript">
Function third (){
// Alert ("");
VaR test3 = $ ("p"). Filter (// same level
Function (INDEX) {// traverse
// Alert (INDEX );
// Alert ($ ("ol", this#.html ());
// Alert ("index:" Upload index#((this#.html (); // This is the content of each traversal object in each P tag.
// Is there no content in the p tag of <p> <ol> <li> include ol </LI> </OL> </P>?
// The content of <p> P <ol> <li> contains ol </LI> </OL> </P> contents (this).html () = P
Alert ("th" + index + "P =>" second digit (this).html () + "OL =>" + $ ("ol", this).html ());
// It may be a version issue. I introduced * jquery JavaScript library v1.3.2-.
// All content is empty
Return $ ("ol", this). Length = 0; // 1 multi-condition filtering 2 Return false then this element is deleted
}
);
Alert(test3.html ());
}
</SCRIPT>
Filter (FN ):
Filters out a set of elements that match the specified function return value.
This function will calculate each object once (as in '$. Each'). If the called function returns false, this element will be deleted, otherwise it will be retained.
<P> p html <ol> ol HTML <li> LI </LI> </OL> 2 </P>
<P> how are you? Does not contain </P>
</Div>
<Div class = "test4">
<SCRIPT type = "application/JavaScript">
</SCRIPT>
</Div>
</Body>
</Html>