jQuery 锚点跳转滚动条平滑滚动一句话代码


Posted in Javascript onApril 30, 2010

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提供的函数, 就要首先构造jQuery包装集.

将Dom元素转换成jQuery包装集

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

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

4。
jQuery( callback ) 
Returns: jQuery

$(document).ready()的简写方式
--------------------------------------------------------------------------------
从零开始学习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>
Javascript 相关文章推荐
js实现在同一窗口浏览图片
Sep 17 Javascript
jquery实现ajax加载超时提示的方法
Jul 23 Javascript
jQuery中ajax错误调试分析
Dec 01 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
Dec 05 Javascript
Javascript实现倒计时(防页面刷新)实例
Dec 13 Javascript
node文件批量重命名的方法示例
Oct 23 Javascript
jquery写出PC端轮播图实例
Jan 26 jQuery
webpack项目轻松混用css module的方法
Jun 12 Javascript
详解webpack运行Babel教程
Jun 13 Javascript
解决layer.prompt无效的问题
Sep 24 Javascript
JavaScript 实现同时选取多个时间段的方法
Oct 17 Javascript
原生js实现弹幕效果
Nov 29 Javascript
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
Apr 29 #Javascript
匹配任意字符的正则表达式写法
Apr 29 #Javascript
jquery ajax提交表单数据的两种实现方法
Apr 29 #Javascript
jQuery 动画弹出窗体支持多种展现方式
Apr 29 #Javascript
jQuery 工具函数学习资料
Apr 29 #Javascript
IE JS无提示关闭窗口不提示的方法
Apr 29 #Javascript
比Jquery的document.ready更快的方法
Apr 28 #Javascript
You might like
不用iconv库的gb2312与utf-8的互换函数
2006/10/09 PHP
php查询mysql数据库并将结果保存到数组的方法
2015/03/18 PHP
phpStudy中升级MySQL版本到5.7.17的方法步骤
2017/08/03 PHP
Jquery Validation插件防止重复提交表单的解决方法
2010/03/05 Javascript
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
2010/07/06 Javascript
js Form.elements[i]的使用实例
2011/11/13 Javascript
Javascript之this关键字深入解析
2013/11/12 Javascript
javascript中验证大写字母、数字和中文
2014/01/15 Javascript
js判断某个方法是否存在实例代码
2015/01/10 Javascript
Vue2实现组件props双向绑定
2016/12/02 Javascript
webstrom Debug 调试vue项目的方法步骤
2018/07/17 Javascript
学习RxJS之JavaScript框架Cycle.js
2019/06/17 Javascript
layer.open组件获取弹出层页面变量、函数的实例
2019/09/25 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
2019/11/15 Javascript
JavaScript将数组转换为链表的方法
2020/02/16 Javascript
vue element 关闭当前tab 跳转到上一路由操作
2020/07/22 Javascript
微信小程序input抖动问题的修复方法
2021/03/03 Javascript
[02:29]DOTA2英雄基础教程 陈
2013/12/17 DOTA
[01:03]PWL开团时刻DAY6——别打我
2020/11/05 DOTA
python实现批量按比例缩放图片效果
2018/03/30 Python
flask-restful使用总结
2018/12/04 Python
12个步骤教你理解Python装饰器
2019/07/01 Python
Python将列表中的元素转化为数字并排序的示例
2019/12/25 Python
给keras层命名,并提取中间层输出值,保存到文档的实例
2020/05/23 Python
python“静态”变量、实例变量与本地变量的声明示例
2020/11/13 Python
英国时尚泳装品牌:Maru Swimwear
2019/10/06 全球购物
怎样声明接口
2014/09/19 面试题
UNIX命令速查表
2012/03/10 面试题
医校毕业生自我鉴定
2014/01/25 职场文书
经典洗发水广告词
2014/03/13 职场文书
创建学习型党组织实施方案
2014/03/29 职场文书
校长竞聘演讲稿
2014/05/16 职场文书
大学生读书笔记范文
2015/07/01 职场文书
行政处罚告知书
2015/07/01 职场文书
深入浅出讲解Java8函数式编程
2022/01/18 Java/Android
Nginx配置之禁止指定IP访问
2022/05/02 Servers