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 相关文章推荐
ECMAScript 基础知识
Jun 29 Javascript
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
Nov 11 Javascript
jquery 操作日期、星期、元素的追加的实现代码
Feb 07 Javascript
JavaScript实现简单图片滚动附源码下载
Jun 17 Javascript
Node.js文件操作详解
Aug 16 Javascript
一个不错的仿携程自定义数据下拉选择select
Sep 01 Javascript
基于javascript简单实现对身份证校验
Jan 25 Javascript
js判断复选框是否选中及选中个数的实现代码
May 30 Javascript
老生常谈js动态添加事件--- 事件委托
Jul 19 Javascript
jQuery自动或手动图片切换效果
Oct 11 jQuery
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
node省市区三级数据性能测评实例分析
Nov 06 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
php魔术方法与魔术变量、内置方法与内置变量的深入分析
2013/06/03 PHP
javascript 一个自定义长度的文本自动换行的函数
2007/08/19 Javascript
javascript图像处理—仿射变换深度理解
2013/01/16 Javascript
jQuery自带的一些常用方法总结
2014/09/03 Javascript
js实现点击图片改变页面背景图的方法
2015/02/28 Javascript
js拖拽功能实现代码解析
2016/11/28 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
2016/12/12 Javascript
React组件的三种写法总结
2017/01/12 Javascript
Vue2递归组件实现树形菜单
2017/04/10 Javascript
js+html5实现页面可刷新的倒计时效果
2017/07/15 Javascript
Angular2监听页面大小变化的解决方法
2017/10/09 Javascript
完美解决iview 的select下拉框选项错位的问题
2018/03/02 Javascript
javascript中this的用法实践分析
2019/07/29 Javascript
JS中间件设计模式的深入探讨与实例分析
2020/04/11 Javascript
天翼开放平台免费短信验证码接口使用实例
2013/12/18 Python
python中cPickle用法例子分享
2014/01/03 Python
Python引用模块和查找模块路径
2016/03/17 Python
Django日志模块logging的配置详解
2017/02/14 Python
Python文件操作基本流程代码实例
2017/12/11 Python
Python2和Python3.6环境解决共存问题
2018/11/09 Python
python 遍历列表提取下标和值的实例
2018/12/25 Python
django Admin文档生成器使用详解
2019/07/22 Python
python爬虫 爬取58同城上所有城市的租房信息详解
2019/07/30 Python
Python检查图片是否损坏及图片类型是否正确过程详解
2019/09/30 Python
谈一谈数组拼接tf.concat()和np.concatenate()的区别
2020/02/07 Python
Django 项目布局方法(值得推荐)
2020/03/22 Python
Spotahome意大利:公寓和房间出租
2020/02/21 全球购物
Herschel美国官网:背包、手提袋及配件
2020/03/10 全球购物
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/09/18 面试题
应用电子技术专业个人求职信
2013/09/21 职场文书
前台领班岗位职责
2013/12/04 职场文书
船舶专业个人求职信范文
2014/01/02 职场文书
调解员先进事迹材料
2014/02/07 职场文书
向国旗敬礼活动小结
2014/09/27 职场文书
餐厅收银员岗位职责
2015/04/07 职场文书
学校教学管理制度
2015/08/06 职场文书