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 相关文章推荐
背景音乐每次刷新都可以自动更换
Feb 01 Javascript
jquery动态加载图片数据练习代码
Aug 04 Javascript
理解JavaScript的prototype属性
Feb 11 Javascript
js性能优化 如何更快速加载你的JavaScript页面
Mar 17 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
Dec 19 Javascript
Javascript常用小技巧汇总
Jun 24 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
Oct 27 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
Dec 01 Javascript
JS实现图片转换成base64的各种应用场景实例分析
Jun 22 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
Sep 06 Javascript
详解vue v-model
Aug 31 Javascript
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 Vue.js
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
用ODBC的分页显示
2006/10/09 PHP
PHP MemCached 高级缓存应用代码
2010/08/05 PHP
用Php编写注册后Email激活验证的实例代码
2013/03/11 PHP
destoon各类调用汇总
2014/06/20 PHP
PHP读书笔记_运算符详解
2016/07/01 PHP
php微信分享到朋友圈、QQ、朋友、微博
2019/02/18 PHP
PHP实现本地图片转base64格式并上传
2020/05/29 PHP
由浅到深了解JavaScript类
2006/09/08 Javascript
脚本吧 - 幻宇工作室用到js,超强推荐base.js
2006/12/23 Javascript
js中的异常处理try...catch使用介绍
2013/09/21 Javascript
javascript使用输出语句实现网页特效代码
2015/08/06 Javascript
IE6-IE9使用JSON、table.innerHTML所引发的问题
2015/12/22 Javascript
Angularjs 实现分页功能及示例代码
2016/09/14 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
2017/04/25 jQuery
单行 JS 实现移动端金钱格式的输入规则
2017/05/22 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
2017/12/19 jQuery
详解开发react应用最好用的脚手架 create-react-app
2018/04/24 Javascript
vue通过style或者class改变样式的实例代码
2018/10/30 Javascript
JS实现水平遍历和嵌套递归操作示例
2019/08/15 Javascript
JS实现扫码枪扫描二维码功能
2020/01/03 Javascript
浅谈JavaScript中的“!!”作用
2020/08/03 Javascript
Python中map,reduce,filter和sorted函数的使用方法
2015/08/17 Python
Flask框架的学习指南之开发环境搭建
2016/11/20 Python
tensorflow更改变量的值实例
2018/07/30 Python
PyQt4实时显示文本内容GUI的示例
2019/06/14 Python
Python3 sys.argv[ ]用法详解
2019/10/24 Python
聊聊python中的异常嵌套
2020/09/01 Python
Django web自定义通用权限控制实现方法
2020/11/24 Python
canvas绘制文本内容自动换行的实现代码
2019/01/14 HTML / CSS
英国奢侈品牌时尚购物平台:Farfetch(支持中文)
2020/02/18 全球购物
会计专业自我鉴定范文
2013/12/29 职场文书
师范学院美术系毕业生自我鉴定
2014/01/29 职场文书
欢迎领导标语
2014/06/27 职场文书
社区个人对照检查材料(群众路线)
2014/09/26 职场文书
Python函数中的不定长参数相关知识总结
2021/06/24 Python
浅谈TypeScript 索引签名的理解
2021/10/16 Javascript