jQuery 锚点跳转滚动条平滑滚动一句话代码

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>

时间: 2010-04-28

js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码

获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下.IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码 复制代码 代码如下: document.body.offsetWidth document.body.offsetHeight 在声明了DOCTYPE的浏览器中,可以用以下来获取浏览器显示窗口大小: 代码如下复制代码 复制代码 代码如下: document.documentElement.clientWidth document.documentElement.cli

jQuery判断div随滚动条滚动到一定位置后停止

实现代码: 复制代码 代码如下: <script type="text/javascript">var rollSet = $('#widget');    var offset = rollSet.offset();    var fwidth = $("#footer").height();    $(window).scroll(function() {        var scrollTop = $(window).scrollTop();  

JS JQUERY实现滚动条自动滚到底的方法

设置页面加载时滚动条自动滚到底的方法: jQuery: 复制代码 代码如下: $(function(){   var h = $(document).height()-$(window).height();   $(document).scrollTop(h); }); JavaScript: 复制代码 代码如下: window.onload = function(){   var h = document.documentElement.scrollHeight || document.bod

jQuery 顶部导航跟随滚动条滚动固定浮动在顶部

  复制代码 代码如下: <section> <article class="left"> <p> </p> <ul> <li><a href="http://freejs.net/article_jquerywenzi_149.html" title="Ajax 动态加载内容">Ajax 动态加载内容</a></li> <li>

基于jquery的横向滚动条(滑动条)

查找了很多方法,有些不能实现(被滚动内容的宽度未知,但使用这种方法必须已知),其它的不能完全兼容这些浏览器(IE6,Firefox,Chrome).最后决定使用JQuery的Slider控件. 1. 下载jquery-1.3.2.min.js,jquery-ui-1.7.1.custom.min.js 2. Html 复制代码 代码如下: <div id="topslider" runat="server"></div> <div id

JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合

因为浏览器的兼容问题,如果使用javascript获取这些数值是一个相当痛苦的过程.好在JQuery提供了简单优雅,并且兼容的解决方法. 获取浏览器和页面文档的宽度和高度 复制代码 代码如下: //获取浏览器显示区域的高度 $(window).height(); //获取浏览器显示区域的宽度 $(window).width(); //获取页面的文档高度 $(document.body).height(); //获取页面的文档宽度 $(document.body).width(); 获取滚动条的位

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="

jQuery实现将div中滚动条滚动到指定位置的方法

本文实例讲述了jQuery实现将div中滚动条滚动到指定位置的方法.分享给大家供大家参考,具体如下: 一.Js代码: onload = function () { //初始化 scrollToLocation(); }; function scrollToLocation() { var mainContainer = $('#thisMainPanel'), scrollToContainer = mainContainer.find('.son-panel:last');//滚动到<div

jQuery scroll事件实现监控滚动条分页示例

scroll事件适用于window对象,但也可滚动iframe框架与CSS overflow属性设置为scroll的元素. 复制代码 代码如下: $(document).ready(function () { //本人习惯这样写了    $(window).scroll(function () {        //$(window).scrollTop()这个方法是当前滚动条滚动的距离        //$(window).height()获取当前窗体的高度        //$(docume

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"> <hea

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"> <

JS实现为动态添加的元素增加事件功能示例【基于事件委托】

本文实例讲述了JS实现为动态添加的元素增加事件功能.分享给大家供大家参考,具体如下: 我们在日常开发中有时会通过js创建一些元素,但是如果使用原始的for循环给创建的节点添加事件的方法往往行不通: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net js动态添加事件</title>

jQuery实现的分页功能示例

本文实例讲述了jQuery实现的分页功能.分享给大家供大家参考,具体如下: 1.分页栏HTML码 <div class="g-cf g-pagerwp"> <div style="visibility:hidden" class="g-pager"> </div> </div> 2.CSS样式文件 .g-cf:after {clear: both;content: "";disp

jquery实现网页查找功能示例分享

本文以查找车站名为例,仿12306官网查找车站售票时间页面效果,当用户输入关键字点击查找按钮或按回车键时,jQuery通过正则匹配内容,准确匹配关键字,并迅速将页面定位滚动到第一个匹配的位置,并显示相关信息(本例中附加信息为车站开始售票时间). HTML页面需要放置一个输入框用来输入要查找的关键字,以及一个查找按钮,然后就是主体内容#content,里面包含着n个<p>,即每个时间段开售车票的车站名.  复制代码 代码如下: <div id="search_box"&

jQuery响应鼠标事件并隐藏与显示input默认值

分享下jQuery如何隐藏和显示 input 默认值的例子. <!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> <

jQuery实现的事件绑定功能基本示例

本文实例讲述了jQuery实现的事件绑定功能.分享给大家供大家参考,具体如下: HTML正文: 用户名:<input type="text" value="邮箱/用户名/手机号" id="login"/><br> 密 码:<input type="password" id="passwd"><br> <input type="button&qu

使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例

使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下拉跟着变化,市级下拉变化时区下拉跟着变化. 使用chinastates表查询 Ajax加载数据 1.这是chinastates表 2.做一个简单php:Ajax_eg.php <!DOCTYPE html> <html> <head> <meta charset=&q

jQuery实现的鼠标响应缓冲动画效果示例

本文实例讲述了jQuery实现的鼠标响应缓冲动画效果.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>js动画-缓冲动画</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.js&q

jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】

本文实例讲述了jQuery实现响应鼠标事件的图片透明效果.分享给大家供大家参考,具体如下: 实现的思想: 1.当鼠标放在图片上面的时候触发mouseover mouseenter两个事件(图片变得透明) 2.当鼠标离开图片的时候触发mouseleave mouseout两个事件(图片变为不透明) 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or