前端之jquery1

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选择器

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>

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 = $('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>

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');

            // 在原来样式名的基础上加上“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>

绑定click事件-toggleclass使用示例

索引值-选项卡

获取元素的索引值
有时候需要获得匹配元素相对于其同胞元素的索引位置，此事时可以用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对象，所有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>

animate动画实例

滑动选项卡

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

置顶菜单示例

巴特西

前端之jquery1

jquery介绍

jquery加载

jquery选择器

jquery选择器

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

对选择集进行函数过滤

选择集转移

jquery样式操作

操作行间样式

操作样式类名

绑定click事件

索引值-选项卡

jquery特殊效果

jquery链式调用

jquery动画

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

最新文章

热门文章