jQuery錨點跳轉滾動條平滑滾動一句話代碼
$("html,body").animate({scrollTop: $("#box").offset().top}, 1000);
一下是一些jquery的小技巧
1. 控制編譯結果
<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.如果要使用jQuery
var div = document.getElementById("testDiv"); //Dom元素 var domToJQueryObject = $(div); //jQuery包装2.
1.如果要使用jQuery
var domObject = $("#testDiv")[0]; // 得到DOM对象 $("#testDiv").each(function() { $(this).html("修改内容") })//转换为 jQuery包装集操作
2.
1.如果要使用jQueryjQuery( callback ) Returns: jQuery就要首先構造jQuery包裝集.
<!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="隐藏----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("动态创建的div").appendTo(testDiv); //ok //$("<div style=\"border:solid 1px #FF0000\">动态创建的div</div>") //not done $( function() { // alert("loaded!"); //加载完成后才执行 } ); // alert("LODING。。。");//一遇到就执行 </script> <!--============================end js =============================================--> <script type="text/javascript"> //模板 </script> <!-- 表格模板 --> <table> <tr> <td></td><td></td> </tr> </table> <script type="text/javascript"> function first(){//first var an_element=$("div").eq(0); //得到 第一个 Div 整个的 div 如果 直接 输出 an_element会显示 那是一个对象 alert(an_element.html());//输出 } function second(){ var second_e= $("div").filter(".test2");//得到 是与偶有符合的 /*======================这段代码测试是否是一个集合 但是报错 不懂用this==========================*/ // second_e.each( // function(){ //this.html("修改它!") // } // ); /*================================================*/ alert(second_e.html());//测试 得到的 内容 只显示 第一个 div 的内容 alert(second_e.eq(1).html());//得到第二个 } //================================================================================= </script> <div class="filter" onclick="first()"> 第一个 例子:点我运行 <table> <tr> <td> eq( index ) 获取第N个元素 </td> <td> 获取匹配的第二个元素: $("p").eq(1) </td> </tr> </table> </div> <hr/> <div class="second" onclick="second()" > <div class="test2"> 筛选出与指定表达式匹配的元素集合。第一个div</div> <p>第 2 个 例子:点我运行</p> <span > filter( expr ) </span> <div class="test2"> 保留带有 test2类的元素: 在这里是 带有 test2 class的 $("X").filter(".test2") 第2个div </div> </div> <hr /> <div class="test3" onclick="third()" > <script type="text/javascript" > function third(){ //alert("a"); var test3= $("p").filter( //同级 function(index){//遍历 // alert(index); //alert($("ol",this).html()); // alert( "index: "+index+$(this).html());// this 就是 各个 被遍历的对象 在这里是各个 P 标签里面的内容 // 难道 <p> <ol><li>包含 ol </li></ol> </p> 的P标签 里的内容没有? //这样才算 <p> p 的 内容<ol><li>包含 ol </li></ol> </p> $(this).html()= p 的 内容 alert( " 第"+index+" 个 p=> "+$(this).html()+" ol=> "+ $("ol",this).html() ); //可能是版本的问题 我引进的是 * jQuery JavaScript Library v1.3.2-vs //所有的内容都是空 return $("ol",this).length==0;//1多条件筛选 2 返回 false则这个元素被删除 } ); alert(test3.html()); } </script> filter( fn ): 筛选出与指定函数返回值匹配的元素集合 这个函数内部将对每个对象计算一次 (正如 '$.each'). 如果调用的函数返回false则这个元素被删除,否则就会保留。 <p> p 的 html <ol>ol的html<li> li </li></ol>2 </p> <p>How are you? 不 包含 </p> </div> <div class="test4"> <script type="application/javascript"> </script> </div> </body> </html>3.jQuery包裝集轉Dom物件
rrreee
4。 🎜rrreee🎜$(document).ready()的簡寫方式 🎜----------------------------------- --------------------------------------------- 🎜從零開始學習jQuery (三) 管理jQuery包裝集 🎜rrreee🎜更多jQuery 錨點跳轉滾動條平滑滾動一句話代碼相關文章請關注PHP中文網! 🎜