欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

前端之jquery1

程序员文章站 2022-04-10 20:14:54
前端之jquery1,内容包括 jquery介绍,jquery加载,jquery选择器,jquery样式操作,绑定click事件,jquery特殊效果,jquery链式调用,jquery动画,元素的尺寸、位置和页面滚动事件。其中,jquery选择器 包括 jquery选择器,对选择集进行修饰过滤,对... ......

jquery介绍

jquery是目前使用最广泛的javascript函数库。据统计,全世界排名前100万的网站,有46%使用jquery,远远超过其他库。微软公司甚至把jquery作为他们的官方库。

jquery的版本分为1.x系列和2.x、3.x系列,1.x系列兼容低版本的浏览器,2.x、3.x系列放弃支持低版本浏览器,目前使用最多的是1.x系列的。

jquery是一个函数库,一个js文件,页面用script标签引入这个js文件就可以使用。

<script type="text/javascript" src="js/jquery-1.12.2.js"></script>
jquery的口号和愿望 write less, do more(写得少,做得多)

1、http://jquery.com/ 官方网站
2、https://code.jquery.com/ 版本下载

jquery加载

将获取元素的语句写到页面头部,会因为元素还没有加载而出错,jquery提供了ready方法解决这个问题,它的速度比原生的 window.onload 更快。

<script type="text/javascript">

$(document).ready(function(){
     ......
});

</script>

可以简写为:

<script type="text/javascript">

$(function(){
     ......
});

</script>

 

jquery加载示例

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>document</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">

        window.onload = function () {
            var odiv = document.getelementbyid('div1');
            alert('原生弹出的' + odiv);
        };
        /*
        
        // ready 比window.onload 要快:
        //原因是,window.onload是等标签加载完后,再渲染完之后才运行,
        // ready是等标签加载完后就运行

        // ready的完整写法:
        $(document).ready(function(){
            var $div = $('#div1');
            alert('jquery弹出的'+$div);

        })
        */

        // ready的简写:
        $(function () {
            var $div = $('#div1');
            alert('jquery弹出的' + $div);
        })
    </script>
</head>
<body>
<div id="div1">这是一个div元素</div>
</body>
</html>

 

jquery选择器

jquery用法思想一

选择某个网页元素,然后对它进行某种操作

jquery选择器

jquery选择器可以快速地选择元素,选择规则和css样式相同,使用length属性判断是否选择成功。

$(document) //选择整个文档对象
$('li') //选择所有的li元素
$('#myid') //选择id为myid的网页元素
$('.myclass') // 选择class为myclass的元素
$('input[name=first]') // 选择name属性等于first的input元素
$('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素

对选择集进行修饰过滤(类似css伪类)

$('#ul1 li:first') //选择id为ul1元素下的第一个li
$('#ul1 li:odd') //选择id为ul1元素下的li的奇数行
$('#ul1 li:eq(2)') //选择id为ul1元素下的第3个li
$('#ul1 li:gt(2)') // 选择id为ul1元素下的前三个之后的li
$('#myform :input') // 选择表单中的input元素
$('div:visible') //选择可见的div元素

对选择集进行函数过滤

$('div').has('p'); // 选择包含p元素的div元素
$('div').not('.myclass'); //选择class不等于myclass的div元素
$('div').filter('.myclass'); //选择class等于myclass的div元素
$('div').first(); //选择第1个div元素
$('div').eq(5); //选择第6个div元素

选择集转移

$('div').prev('p'); //选择div元素前面的第一个p元素
$('div').next('p'); //选择div元素后面的第一个p元素
$('div').closest('form'); //选择离div最近的那个form父元素
$('div').parent(); //选择div的父元素
$('div').children(); //选择div的所有子元素
$('div').siblings(); //选择div的同级元素
$('div').find('.myclass'); //选择div内的class等于myclass的元素

 

jquery选择器示例1

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>document</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var $div = $('#div1');
            $div.css({'color': 'red'});

            var $div2 = $('.box');
            $div2.css({'color': 'green'});
            
            var $li = $('.list li');
            // 带“-”的样式属性,可以写成驼峰式,也可以写成原始
            $li.css({'background-color': 'pink', 'color': 'red'});
        });
    </script>
</head>

<body>
<div id="div1">这是一个div元素</div>
<div class="box">这是第二个div元素</div>
<div class="box">这是第三个div元素</div>

<!-- ul.list>li{$}*8 -->
<ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>

</body>
</html>

选择器过滤和转移示例

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>document</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            /*
            var $div = $('div');
            $div.css({'backgroundcolor':'gold'});
            */
            
            $('div').css({'backgroundcolor': 'gold'});
            $('div').has('p').css({'fontsize': '30px'});
            $('div').eq(4).css({'textindent': '20px'});
            $('div').eq(4).prev().css({'color': 'red'});
            $('div').find('.tip').css({'fontsize': '30px'});
        })
    </script>
</head>
<body>
<div>1</div>
<div><p>2</p></div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div><span>8</span><span class="tip">9</span></div>
</body>
</html>

判断是否选中元素示例

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>document</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $div = $('#div1');
            alert($div.length);
            
            // 没有选中元素,也不会报错,程序正常运行
            $div2 = $('#div2');
            
            alert($div2.length);
            // if($div2.length>0) 通过length属性来判断是否选中了元素
        })
    </script>
</head>
<body>
<div id="div1">div元素</div>

</body>
</html>

 

jquery样式操作

jquery用法思想二
同一个函数完成取值和赋值

操作行间样式

// 获取div的样式
$("div").css("width");
$("div").css("color");

//设置div的样式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontsize:"30px",color:"red"});

特别注意
选择器获取的多个元素,获取信息获取的是第一个,比如:$("div").css("width"),获取的是第一个div的width。

操作样式类名

$("#div1").addclass("divclass2") //为id为div1的对象追加样式divclass2
$("#div1").removeclass("divclass") //移除id为div1的对象的class名为divclass的样式
$("#div1").removeclass("divclass divclass2") //移除多个样式
$("#div1").toggleclass("anotherclass") //重复切换anotherclass样式,有就删除,没有就添加

 

css方法示例

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>document</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var $div = $('#box');

            // 读取属性值
            var str = $div.css('fontsize');
            alert(str);

            // 写属性值
            $div.css({'color': 'red', 'backgroundcolor': 'pink', 'fontsize': '20px'});
            
            /*
            原生js无法读取行间没有定义的css属性值
            var odiv = document.getelementbyid('box');
            alert(odiv.style.fontsize);
            */
        })
    </script>
</head>
<body>
<div id="box">div元素</div>
</body>
</html>

样式名操作示例

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>document</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var $div = $('.box');

            // 在原来样式名的基础上加上“big”的样式名
            $div.addclass('big');

            // 在原来样式名的基础上去掉“red”的样式名
            $div.removeclass('red');
        })
    </script>
    <style type="text/css">
        .box {
            width: 100px;
            height: 100px;
            background-color: gold;
        }
        .big {
            font-size: 30px;
        }
        .red {
            color: red;
        }
    </style>
</head>
<body>
<div class="box red">div元素</div>
</body>
</html>

 

绑定click事件

给元素绑定click事件,可以用如下方法:

$('#btn1').click(function(){

    // 内部的this指的是原生对象

    // 使用jquery对象用 $(this)

})

 

绑定click事件-toggleclass使用示例

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>document</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            // 绑定click事件
            $('#btn').click(function () {
                
                // if ($('.box').hasclass('col01')) {
                //     $('.box').removeclass('col01');
                // } else {
                //     $('.box').addclass('col01');
                // }
                //
                // // 简化成下面的写法:
                
                $('.box').toggleclass('col01');
            })
        })
    </script>
</head>
<style type="text/css">
    .box {
        width: 200px;
        height: 200px;
        background-color: gold;
    }

    .col01 {
        background-color: green;
    }
</style>
<body>
<input type="button" name="" value="切换样式" id="btn">
<div class="box">div元素</div>
</body>
</html>

 

索引值-选项卡

获取元素的索引值
有时候需要获得匹配元素相对于其同胞元素的索引位置,此事时可以用index()方法进行获取;

获取元素索引值示例

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>document</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var $li = $('.list li');

            //alert($li.length); 弹出 8
            //alert($li.eq(3).index()); 弹出3
            alert($li.filter('.myli').index());
        })
    </script>
</head>
<body>
<ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li class="myli">5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>
</body>
</html>

选项卡示例

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>document</title>
    <style type="text/css">
        .btns input {
            width: 100px;
            height: 40px;
            background-color: #ddd;
            border: 0;
        }

        .btns .current {
            background-color: gold;
        }
        
        .cons div {
            width: 500px;
            height: 300px;
            background-color: gold;
            display: none;
            text-align: center;
            line-height: 300px;
            font-size: 30px;
        }

        .cons .active {
            display: block;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var $btn = $('.btns input');
            var $div = $('.cons div');

            $btn.click(function () {
                // this 指的是原生的this,它表示当前点击的对象,使用jquery的对象需要用$(this)

                // 当前点击的按钮加上current样式后,除了当前,其他的按钮去掉current样式
                $(this).addclass('current').siblings().removeclass('current');

                //alert( $(this).index() ; //弹出当前按钮的索引值
                // 当前点击的按钮对应索引值的div加上active样式,其他的去掉active样式
                $div.eq($(this).index()).addclass('active').siblings().removeclass('active');
            })
        })
    </script>
</head>
<body>
<div class="btns">
    <input type="button" name="" value="01" class="current">
    <input type="button" name="" value="02">
    <input type="button" name="" value="03">
</div>
<div class="cons">
    <div class="active">选项卡一的内容</div>
    <div>选项卡二的内容</div>
    <div>选项卡三的内容</div>
</div>
</body>
</html>

 

 

jquery特殊效果

fadein() 淡入

    $btn.click(function(){
        $('#div1').fadein(1000,'swing',function(){
            alert('done!');
        });
    });

fadeout() 淡出
fadetoggle() 切换淡入淡出
hide() 隐藏元素
show() 显示元素
toggle() 依次展示或隐藏某个元素
slidedown() 向下展开
slideup() 向上卷起
slidetoggle() 依次展开或卷起某个元素

 

jquery特殊效果示例

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>document</title>
    <style type="text/css">
        .box {
            width: 300px;
            height: 300px;
            background-color: gold;
            display: none;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {

                /*$('.box').fadein(1000,function(){
                    alert('动画完了!');
                });
                */

                /*$('.box').fadetoggle(1000,function(){
                    alert('动画完了!');
                });
                */

                // $('.box').show();

                //$('.box').toggle();

                //$('.box').slidedown();

                $('.box').slidetoggle(1000, function () {
                    alert('动画完了')
                });
            })
        })
    </script>
</head>

<body>
<input type="button" name="" value="动画" id="btn">
<div class="box"></div>
</body>
</html>

 

jquery链式调用

jquery对象的方法会在执行完后返回这个jquery对象,所有jquery对象的方法可以连起来写:

$('#div1') // id为div1的元素
.children('ul') //该元素下面的ul子元素
.slidedown('fast') //高度从零变到实际高度来显示ul元素
.parent() //跳到ul的父元素,也就是id为div1的元素
.siblings() //跳到div1元素平级的所有兄弟元素
.children('ul') //这些兄弟元素中的ul子元素
.slideup('fast'); //高度实际高度变换到零来隐藏ul元素

 

链式调用-层级菜单示例

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>层级菜单</title>
    <style type="text/css">
        body {
            font-family: 'microsoft yahei';
        }

        body, ul {
            margin: 0px;
            padding: 0px;
        }

        ul {
            list-style: none;
        }
        
        .menu {
            width: 200px;
            margin: 20px auto 0;
        }

        .menu .level1, .menu li ul a {
            display: block;
            width: 200px;
            height: 30px;
            line-height: 30px;
            text-decoration: none;
            background-color: #3366cc;
            color: #fff;
            font-size: 16px;
            text-indent: 10px;
        }

        .menu .level1 {
            border-bottom: 1px solid #afc6f6;
        }

        .menu li ul a {
            font-size: 14px;
            text-indent: 20px;
            background-color: #7aa1ef;
        }

        .menu li ul li {
            border-bottom: 1px solid #afc6f6;
        }

        .menu li ul {
            display: none;
        }

        .menu li ul.current {
            display: block;
        }

        .menu li ul li a:hover {
            background-color: #f6b544;
        }
    </style>

    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.level1').click(function () {

                //当前点击的元素紧挨的同辈元素向下展开,再跳到此元素的父级(li),再跳到此父级的其他的同辈元素(li),
                // 选择其他同辈元素(li)的子元素ul,然后将它向上收起。
                // 通过stop() 可以修正反复点击导致的持续动画的问题
                $(this).next().stop().slidetoggle().parent().siblings().children('ul').slideup();
            })
        })
    </script>
</head>
<body>
<ul class="menu">
    <li>
        <a href="#" class="level1">水果</a>
        <ul class="current">
            <li><a href="#">苹果</a></li>
            <li><a href="#">梨子</a></li>
            <li><a href="#">葡萄</a></li>
            <li><a href="#">火龙果</a></li>
        </ul>
    </li>
    <li>
        <a href="#" class="level1">海鲜</a>
        <ul>
            <li><a href="#">蛏子</a></li>
            <li><a href="#">扇贝</a></li>
            <li><a href="#">龙虾</a></li>
            <li><a href="#">象拔蚌</a></li>
        </ul>
    </li>
    <li>
        <a href="#" class="level1">肉类</a>
        <ul>
            <li><a href="#">内蒙古羊肉</a></li>
            <li><a href="#">进口牛肉</a></li>
            <li><a href="#">野猪肉</a></li>
        </ul>
    </li>
    <li>
        <a href="#" class="level1">蔬菜</a>
        <ul>
            <li><a href="#">娃娃菜</a></li>
            <li><a href="#">西红柿</a></li>
            <li><a href="#">西芹</a></li>
            <li><a href="#">胡萝卜</a></li>
        </ul>
    </li>
    <li>
        <a href="#" class="level1">速冻</a>
        <ul>
            <li><a href="#">冰淇淋</a></li>
            <li><a href="#">湾仔码头</a></li>
            <li><a href="#">海参</a></li>
            <li><a href="#">牛肉丸</a></li>
        </ul>
    </li>
</ul>
</body>
</html>

 

 

 

jquery动画

通过animate方法可以设置元素某属性值上的动画,可以设置一个或多个属性值,动画执行完成后会执行一个函数。

$('#div1').animate({
    width:300,
    height:300
},1000,swing,function(){
    alert('done!');
});

参数可以写成数字表达式:

$('#div1').animate({
    width:'+=100',
    height:300
},1000,swing,function(){
    alert('done!');
});

 

animate动画实例

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>document</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                $('.box').animate({'width': 600}, 1000, function () {
                    $('.box').animate({'height': 400}, 1000, function () {
                        $('.box').animate({'opacity': 0});
                    });
                });
            });

            $('#btn2').click(function () {
                $('.box2').stop().animate({'width': '+=100'});
            })
        })
    </script>
    <style type="text/css">
        .box, .box2 {
            width: 100px;
            height: 100px;
            background-color: gold;
        }
    </style>
</head>
<body>
<input type="button" name="" value="动画" id="btn">
<div class="box"></div>

<br/>
<br/>
<input type="button" name="" value="动画" id="btn2">
<div class="box2"></div>
</body>
</html>

滑动选项卡

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>document</title>
    <style type="text/css">
        .btns input {
            width: 100px;
            height: 40px;
            background-color: #ddd;
            border: 0;
            outline: none;
        }

        .btns .current {
            background-color: gold;
        }

        .cons {
            width: 500px;
            height: 300px;
            overflow: hidden;
            position: relative;
        }

        .slides {
            width: 1500px;
            height: 300px;
            position: absolute;
            left: 0;
            top: 0;
        }

        .cons .slides div {
            width: 500px;
            height: 300px;
            background-color: gold;
            text-align: center;
            line-height: 300px;
            font-size: 30px;
            float: left;
        }

        .cons .active {
            display: block;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var $btn = $('.btns input');
            var $slides = $('.cons .slides');

            $btn.click(function () {
                // this 指的是原生的this,它表示当前点击的对象,使用jquery的对象需要用$(this)

                // 当前点击的按钮加上current样式后,除了当前,其他的按钮去掉current样式
                $(this).addclass('current').siblings().removeclass('current');
                $slides.stop().animate({'left': -500 * $(this).index()});
            })
        })
    </script>
</head>
<body>
<div class="btns">
    <input type="button" name="" value="01" class="current">
    <input type="button" name="" value="02">
    <input type="button" name="" value="03">
</div>
<div class="cons">
    <div class="slides">
        <div>选项卡一的内容</div>
        <div>选项卡二的内容</div>
        <div>选项卡三的内容</div>
    </div>
</div>
</body>
</html>

 

 

元素的尺寸、位置和页面滚动事件

1、获取和设置元素的尺寸

width()、height() 获取元素width和height 
innerwidth()、innerheight() 包括padding的width和height 
outerwidth()、outerheight() 包括padding和border的width和height 
outerwidth(true)、outerheight(true) 包括padding和border以及margin的width和height

2、获取元素相对页面的绝对位置

offse()

3、获取可视区高度

$(window).height();

4、获取页面高度

$(document).height();

5、获取页面滚动距离

$(document).scrolltop(); 
$(document).scrollleft();

6、页面滚动事件

$(window).scroll(function(){  
    ......  
})

 

获取元素尺寸示例

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>document</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var $div = $('.box');

            // 盒子内容的尺寸
            console.log($div.width());
            console.log($div.height());
            
            // 盒子内容加上padding的尺寸
            console.log($div.innerwidth());
            console.log($div.innerheight());
            
            //盒子的真实尺寸,内容尺寸+padding+border
            console.log($div.outerwidth());
            console.log($div.outerheight());

            // 盒子的真实尺寸再加上margin
            console.log($div.outerwidth(true));
            console.log($div.outerheight(true));
        })
    </script>
    <style type="text/css">
        .box {
            width: 300px;
            height: 200px;
            padding: 20px;
            border: 10px solid #000;
            margin: 20px;
            background-color: gold;
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

获取元素绝对位置示例

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>document</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var $div = $('.box');
            $div.click(function () {
                var opos = $div.offset();

                document.title = opos.left + "|" + opos.top;
            })
            //console.log(opos);
        })
    </script>
</head>
<style type="text/css">
    .box {
        width: 200px;
        height: 200px;
        background-color: gold;
        margin: 50px auto 0;
    }
</style>
<body>
<div class="box">

</div>
</body>
</html>

加入购物车动画示例

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>document</title>
    <style type="text/css">

        .chart {
            width: 150px;
            height: 50px;
            border: 2px solid #000;
            text-align: center;
            line-height: 50px;
            float: right;
            margin-right: 100px;
            margin-top: 50px;
        }

        .chart em {
            font-style: normal;
            color: red;
            font-weight: bold;
        }


        .add {
            width: 100px;
            height: 50px;
            background-color: green;
            border: 0;
            color: #fff;
            float: left;
            margin-top: 300px;
            margin-left: 300px;
        }

        .point {
            width: 16px;
            height: 16px;
            background-color: red;
            position: fixed;
            left: 0;
            top: 0;
            display: none;
            z-index: 9999;
            border-radius: 50%;
        }

    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var $chart = $('.chart');
            var $count = $('.chart em');
            var $btn = $('.add');
            var $point = $('.point');

            var $w01 = $btn.outerwidth();
            var $h01 = $btn.outerheight();

            var $w02 = $chart.outerwidth();
            var $h02 = $chart.outerheight();

            $btn.click(function () {
                var opos01 = $btn.offset();
                var opos02 = $chart.offset();
                $point.css({'left': opos01.left + parseint($w01 / 2) - 8, 'top': opos01.top + parseint($h01 / 2) - 8});
                $point.show();

                $point.stop().animate({
                    'left': opos02.left + parseint($w02 / 2) - 8,
                    'top': opos02.top + parseint($h02 / 2) - 8
                }, 800, function () {
                    $point.hide();
                    var inum = $count.html();
                    $count.html(parseint(inum) + 1);
                });
            })
        });
    </script>
</head>
<body>
<div class="chart">购物车<em>0</em></div>
<input type="button" name="" value="加入购物车" class="add">
<div class="point"></div>
</body>
</html>

scrollleft-top-悬浮菜单的使用
可视区尺寸-文档尺寸示例

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>document</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            console.log('可视区的宽度:'+$(window).width() );
            console.log('可视区的高度:'+$(window).height() );
            console.log('文档的宽度'+$(document).width() );
            console.log('文档的高度:'+$(document).height() );
        })
    </script>
</head>
<body>
    <p>文档内容</p>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <p>文档内容</p>
    ...
    <p>文档内容</p>
</body>
</html>

置顶菜单示例

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>document</title>
    <style type="text/css">
        body {
            margin: 0;
        }
        .banner {
            width: 960px;
            height: 200px;
            background-color: cyan;
            margin: 0 auto;
        }
        .menu {
            width: 960px;
            height: 80px;
            background-color: gold;
            margin: 0 auto;
            text-align: center;
            line-height: 80px;
        }

        .menu_back {
            width: 960px;
            height: 80px;
            margin: 0 auto;
            display: none;
        }

        p {
            text-align: center;
            color: red;
        }

        .totop {
            width: 60px;
            height: 60px;
            background-color: #000;
            color: #fff;
            position: fixed;
            right: 20px;
            bottom: 50px;
            line-height: 60px;
            text-align: center;
            font-size: 40px;
            border-radius: 50%;
            cursor: pointer;
            display: none;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $menu = $('.menu');
            $menu_back = $('.menu_back');
            $totop = $('.totop');

            $(window).scroll(function () {
                //console.log('abc');
                var inum = $(document).scrolltop();
                //document.title = inum;

                if (inum > 200) {
                    $menu.css({
                        'position': 'fixed',
                        'left': '50%',
                        'top': 0,
                        'marginleft': -480
                    });
                    $menu_back.show();
                } else {
                    $menu.css({
                        'position': 'static',
                        'marginleft': 'auto'
                    });
                    $menu_back.hide();
                }
                
                if (inum > 400) {
                    $totop.fadein();
                } else {
                    $totop.fadeout();
                }
            });
            $totop.click(function () {
                $('html,body').animate({'scrolltop': 0});
            })
        })
    </script>
</head>
<body>
<div class="banner"></div>
<div class="menu">菜单</div>
<div class="menu_back"></div>
<div class="totop">↑</div>
<p>文档内容</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<p>文档内容</p>
...
<p>文档内容</p>
</body>
</html>