Heim > Artikel > Web-Frontend > jQuery-Anker-Sprung-Bildlaufleiste reibungsloses Scrollen des Codes in einem Satz

jQuery-Anker-Sprung-Bildlaufleiste reibungsloses Scrollen des Codes in einem Satz

高洛峰Original: 2017-01-11 10:03:291573Durchsuche

jQuery-Ankerpunkt-Sprungleiste für reibungsloses Scrollen eines Satzcodes

$("html,body").animate({scrollTop: $("#box").offset().top}, 1000);

Hier sind einige JQuery-Tipps
1. Kontrollieren Sie die Kompilierungsergebnisse

<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. Wenn Sie die von jQuery bereitgestellten Funktionen verwenden möchten, müssen Sie zunächst ein jQuery-Wrapper-Set erstellen.
Konvertieren Sie das Dom-Element in ein jQuery-Wrapper-Set.

var div = document.getElementById("testDiv"); //Dom元素 
var domToJQueryObject = $(div); //jQuery包装

3 auf ein Dom-Objekt setzen

var domObject = $("#testDiv")[0]; // 得到DOM对象 
$("#testDiv").each(function() { $(this).html("修改内容") })//转换为 jQuery包装集操作

jQuery( callback ) 
Returns: jQuery

Abkürzung für $(document).ready()

---------------------------------------- -- ------------------------------------------------ -- -
jQuery von Grund auf lernen (3) jQuery-Verpackungssätze verwalten

<!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 ): 
筛选出与指定函数返回值匹配的元素集合 
这个函数内部将对每个对象计算一次 (正如 &#39;$.each&#39;). 如果调用的函数返回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>

Weitere Artikel zum jQuery-Ankerpunkt, Sprung, Bildlaufleiste, reibungsloses Scrollen und Ein-Satz-Code finden Sie auf der chinesischen PHP-Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：jquery-Methode, um festzustellen, ob die Bildlaufleiste unten oder oben angekommen istNächster Artikel：jquery-Methode, um festzustellen, ob die Bildlaufleiste unten oder oben angekommen ist

In Verbindung stehende Artikel

Mehr sehen