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 相关文章推荐
JavaScript中令你抓狂的魔术变量
Nov 30 Javascript
js返回前一页刷新本页重载页面
Jul 29 Javascript
Jquery实现由下向上展开效果的例子
Dec 08 Javascript
JS 对象属性相关(检查属性、枚举属性等)
Apr 05 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
Jul 27 Javascript
跟我学习javascript的Date对象
Nov 19 Javascript
JS实现上下左右对称的九九乘法表
Feb 22 Javascript
javascript中对Date类型的常用操作小结
May 19 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
Sep 02 Javascript
js实现GIF动图分解成多帧图片上传
Oct 24 Javascript
js实现AI五子棋人机大战
May 28 Javascript
JS面向对象编程实现的拖拽功能案例详解
Mar 03 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设计模式 Visitor 访问者模式
2011/06/28 PHP
PHP utf-8编码问题,utf8编码,数据库乱码,页面显示输出乱码
2013/04/08 PHP
php session的应用详细介绍
2017/03/22 PHP
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
2011/07/28 Javascript
一个JavaScript变量声明的知识点
2013/10/28 Javascript
js交换排序 冒泡排序算法(Javascript版)
2014/10/04 Javascript
JavaScript利用HTML DOM进行文档操作的方法
2016/03/28 Javascript
BootStrapValidator校验方式
2016/12/19 Javascript
javaScript字符串工具类StringUtils详解
2017/12/08 Javascript
JS中数据结构之栈
2019/01/01 Javascript
js实现页面多个日期时间倒计时效果
2019/06/20 Javascript
SpringBoot在yml配置文件中配置druid的操作
2020/11/16 Javascript
JS removeAttribute()方法实现删除元素的某个属性
2021/01/11 Javascript
[02:57]DOTA2英雄基础教程 风行者
2014/01/16 DOTA
python里将list中元素依次向前移动一位
2014/09/12 Python
python中闭包Closure函数作为返回值的方法示例
2017/12/17 Python
python 寻找优化使成本函数最小的最优解的方法
2017/12/28 Python
Python3 安装PyQt5及exe打包图文教程
2019/01/08 Python
Python shelve模块实现解析
2019/08/28 Python
PyCharm2019 安装和配置教程详解附激活码
2020/07/31 Python
Shopbop中文官网:美国亚马逊旗下时尚购物网站
2020/12/15 全球购物
说出数据连接池的工作机制是什么?
2013/04/19 面试题
super关键字的用法
2012/04/10 面试题
中药专业大学生医药工作求职信
2013/10/25 职场文书
护理实习自我鉴定
2013/12/14 职场文书
生产车间主管岗位职责
2013/12/28 职场文书
客服专员岗位职责
2014/02/28 职场文书
商务日语专业自荐信
2014/04/17 职场文书
文明寝室申报材料
2014/05/12 职场文书
医学检验专业自荐信
2014/09/18 职场文书
司法局群众路线教育实践活动开展情况总结
2014/10/25 职场文书
2014年幼儿园保育工作总结
2014/12/02 职场文书
2015年植树节活动总结
2015/02/06 职场文书
繁星春水读书笔记
2015/06/30 职场文书
准备去美国留学,那么大学申请文书应该怎么写?
2019/08/12 职场文书
Python学习之迭代器详解
2022/04/01 Python