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解决ie6下png透明的方法实例
Aug 02 Javascript
封装好的javascript前端分页插件pagination
Jan 04 Javascript
深入理解JavaScript中的浮点数
May 18 Javascript
Bootstrap前端开发案例一
Jun 17 Javascript
关于input全选反选恶心的异常情况
Jul 24 Javascript
JavaScript表单验证开发
Nov 23 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
Jan 10 Javascript
JavaScript获取用户所在城市及地理位置
Apr 21 Javascript
详解vue+webpack+express中间件接口使用
Jul 17 Javascript
vue中axios请求的封装实例代码
Mar 23 Javascript
Vue+Element实现动态生成新表单并添加验证功能
May 23 Javascript
微信小程序全局变量改变监听的实现方法
Jul 15 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
评分9.0以上的动画电影,剧情除了经典还很燃
2020/03/04 日漫
PHP 和 MySQL 基础教程(三)
2006/10/09 PHP
php动态生成JavaScript代码
2009/03/09 PHP
php数组函数序列之rsort() - 对数组的元素值进行降序排序
2011/11/02 PHP
php生成xml时添加CDATA标签的方法
2014/10/17 PHP
PHP扩展开发入门教程
2015/02/26 PHP
Zend Framework教程之Zend_Registry对象用法分析
2016/03/22 PHP
js正则表达式中exec用法实例
2015/07/23 Javascript
js实现的简单图片浮动效果完整实例
2016/05/10 Javascript
基于JavaScript实现购物网站商品放大镜效果
2016/09/06 Javascript
利用Vue.js实现checkbox的全选反选效果
2017/01/18 Javascript
js实现5秒倒计时重新发送短信功能
2017/02/05 Javascript
jQuery动态移除和添加背景图片的方法详解
2017/03/07 Javascript
Vue.js中extend选项和delimiters选项的比较
2017/07/17 Javascript
Angular浏览器插件Batarang介绍及使用
2018/02/07 Javascript
vue实现动态列表点击各行换色的方法
2018/09/13 Javascript
ES6基础之解构赋值(destructuring assignment)
2019/02/21 Javascript
浅析Vue中拆分视图层代码的5点建议
2019/08/15 Javascript
layui form.render('select', 'test2') 更新渲染的方法
2019/09/27 Javascript
Vant 在vue-cli 4.x中按需加载操作
2020/11/05 Javascript
在Python中处理字符串之isdecimal()方法的使用
2015/05/20 Python
Python 实现 贪吃蛇大作战 代码分享
2016/09/07 Python
python3.6+django2.0开发一套学员管理系统
2018/03/03 Python
python实现验证码识别功能
2018/06/07 Python
使用pandas的box_plot去除异常值
2019/12/10 Python
Python3 实现减少可调用对象的参数个数
2019/12/20 Python
pycharm 对代码做静态检查操作
2020/06/09 Python
德国街头和运动文化高品质商店:BSTN Store
2017/08/26 全球购物
法国在线宠物店:zooplus.fr
2018/02/23 全球购物
安全责任书范文
2014/03/12 职场文书
2014大学生中国梦主题教育学习思想汇报
2014/09/10 职场文书
社区领导班子四风问题原因分析及整改措施
2014/09/28 职场文书
2014年内部审计工作总结
2014/12/09 职场文书
公司财务部岗位职责
2015/04/14 职场文书
《草船借箭》教学反思
2016/02/23 职场文书
Vue提供的三种调试方式你知道吗
2022/01/18 Vue.js