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 相关文章推荐
使用jQuery的ajax功能实现的RSS Reader 代码
Sep 03 Javascript
21个值得收藏的Javascript技巧
Feb 04 Javascript
jquery滚动特效集锦
Jun 03 Javascript
QQ登录背景闪动效果附效果演示源码下载
Sep 22 Javascript
详解Bootstrap按钮
Jan 04 Javascript
Jquery实时监听input value的实例
Jan 26 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
Apr 19 Javascript
js自定义Tab选项卡效果
Jun 05 Javascript
Vue-Router进阶之滚动行为详解
Sep 13 Javascript
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
vue npm install 安装某个指定的版本操作
Aug 11 Javascript
基于javascript实现放大镜特效
Dec 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中比较两个字符串找出第一个不同字符位置例子
2014/04/08 PHP
PHP中rename()函数的妙用讲解
2019/02/28 PHP
ThinkPHP框架实现的微信支付接口开发完整示例
2019/04/10 PHP
xml和web特殊字符
2009/04/28 Javascript
json格式化/压缩工具 Chrome插件扩展版
2010/05/25 Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
2013/06/14 Javascript
Javascript 按位与赋值运算符 (&amp;=)使用介绍
2014/02/04 Javascript
浅谈NodeJS中require路径问题
2015/05/07 NodeJs
asp知识整理笔记3(问答模式)
2015/09/27 Javascript
javascript中的altKey 和 Event属性大全
2015/11/06 Javascript
javascript性能优化之事件委托实例详解
2015/12/12 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
2016/11/21 Javascript
js实现漫天星星效果
2017/01/19 Javascript
使用js获取伪元素的content实例
2017/10/24 Javascript
简易Vue评论框架的实现(父组件的实现)
2018/01/08 Javascript
javascript数组去重方法总结(推荐)
2019/03/20 Javascript
Jquery Datatables的使用详解
2020/01/30 jQuery
wxPython的安装图文教程(Windows)
2017/12/28 Python
浅谈Scrapy框架普通反爬虫机制的应对策略
2017/12/28 Python
Flask-WTF表单的使用方法
2019/07/12 Python
Python Threading 线程/互斥锁/死锁/GIL锁
2019/07/21 Python
如何在Cloud Studio上执行Python代码?
2019/08/09 Python
使用Python的datetime库处理时间(RPA流程)
2019/11/24 Python
Django模板报TemplateDoesNotExist异常(亲测可行)
2020/12/18 Python
HTML5中使用postMessage实现Ajax跨域请求的方法
2016/04/19 HTML / CSS
HTML5 canvas画矩形时出现边框样式不一致的解决方法
2013/10/14 HTML / CSS
如何用H5实现一个触屏版的轮播器的实例
2017/01/09 HTML / CSS
日本整理专家Marie Kondo的官方在线商店:KonMari
2020/06/29 全球购物
Can a struct inherit from another struct? (结构体能继承结构体吗)
2016/09/25 面试题
法学专业应届生求职信
2013/10/16 职场文书
毕业生个人求职信范文分享
2014/01/05 职场文书
出生公证委托书
2014/04/03 职场文书
公司总经理助理岗位职责
2014/07/09 职场文书
2014年管理工作总结
2014/11/22 职场文书
2016大学生诚信考试承诺书
2016/03/25 职场文书
python中的plt.cm.Paired用法说明
2021/05/31 Python