JQuery anchor Jump scroll bar Smooth scrolling One sentence code _jquery

Source: Internet
Author: User
Tags wrapper
jquery anchor Jump scroll bar Smooth scrolling One sentence code
Copy Code code as follows:
$ ("Html,body"). Animate ({scrolltop: $ ("#box"). Offset (). Top}, 1000;

Here are some of the little jquery tricks
1. Control the results of the compilation
Copy Code code 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 will first construct the jquery wrapper set.

Converts a DOM element into a jquery wrapper set
Copy Code code as follows:

var div = document.getElementById ("Testdiv"); DOM element
var domtojqueryobject = $ (div); jquery Packaging

3.jQuery wrapper set Turn DOM object
Copy Code code as follows:

var domobject = $ ("#testDiv") [0]; Get DOM Objects
$ ("#testDiv"). each (function () {$ (this). HTML ("Modify content"})//Convert to jquery wrapper set operation

4.
Copy Code code as follows:

JQuery (callback)
Returns:jquery

$ (document). Shorthand for Ready ()
--------------------------------------------------------------------------------
Learn jquery from scratch (iii) Manage jquery packaging set
Copy Code code as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<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>
<body>
<input id= "btnshow" type= "button" value= "Display----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/>"). CSS ("border", "solid 1px #FF0000"). HTML ("dynamically created Div"). Appendto (Testdiv); Ok
$ ("<div style=\" border:solid 1px #FF0000 \ "> Dynamically created div</div>")//not done
$(
function ()
{
Alert ("loaded!"); Execution only after loading is complete
}
);
Alert ("Loding ...) ")//One encounter on the execution
</script>
<!--============================end JS =============================================-->
<script type= "Text/javascript" >
Template
</script>
<!--form template-->
<table>
<tr>
<td></td><td></td>
</tr>
</table>
<script type= "Text/javascript" >
function A () {//first
var an_element=$ ("div"). EQ (0);
Get the first div whole DIV if the direct output an_element will show that is an object
Alert (an_element.html ());//Output
}
function second () {
var second_e= $ ("div"). Filter (". Test2");//Get is in accordance with even
/*====================== This code tests whether it is a collection, but the error does not know how to use this==========================*/
Second_e.each (
function () {
This.html ("Modify it!") ")
// }
// );
/*================================================*/
Alert (second_e.html ());//The contents of the test only show the contents of the first div
Alert (Second_e.eq (1). html ());//Get a second
}
//=================================================================================
</script>
<div class= "Filter" onclick= "a" () >
First example: Dot I run
<table>
<tr>
<td>
EQ (index) gets the nth element
</td>
<td>
Gets the second element of the match:
$ ("P"). EQ (1)
</td>
</tr>
</table>
</div>
<div class= "Second" onclick= "second ()" >
<div class= "Test2" > Filters out the collection of elements that match the specified expression. The first one div</div>
<p> 2nd Example: Dot I run </p>
<span > Filter (expr) </span>
<div class= "Test2" >
Preserve elements with Test2 classes: Here is the Test2 class.
$ ("X"). Filter (". Test2") 2nd Div
</div>
</div>
<div class= "Test3" onclick= "third ()" >
<script type= "Text/javascript" >
function third () {
Alert ("a");
var test3= $ ("P"). Filter (//Sibling
function (index) {//traversal
alert (index);
Alert ($ ("ol", this). html ());
Alert ("Index:" +index+$ (this). HTML ())//This is the object being traversed here is the contents of each P tag
Does <p> <ol><li> contain the contents of the P tag in ol </li></ol> </p>?
This is the content of <p> p <ol><li> contains ol </li></ol> </p> $ (this). html () = content of P
Alert ("First" +index+ "p=>" +$ (this). html () + "ol=>" + $ ("ol", this). html ());
May be the version of the problem I introduced is * jQuery JavaScript Library V1.3.2-vs
All the content is empty
return $ (' ol ', this). LENGTH==0;//1 Multiple Condition Filter 2 returns FALSE, this element is deleted
}
);
Alert (test3.html ());
}
</script>
Filter (FN):
Filters out the collection of elements that match the return value of the specified function
Within this function, each object is evaluated once (as ' $.each '). If the called function returns False, the element is deleted, otherwise it is preserved.
<p> P's 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>

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.