Jquery anchor jump to the scroll bar to smoothly scroll one sentence code

Source: Internet
Author: User

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>

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.