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>