JQuery基础知识学习1

1.JQuery是javascript的类库

 

2.下载JQuery

 

3.导入JQuery

<script src="jquery-3.0.0.js"></script>

 

4.JQuery的基本功能

http://www.php100.com/manual/jquery/

 

5.用JQuery实现点击按钮返回页面顶部的功能

//里面用到了Jquery里面的事件-scroll ，当页面滚动条发生变化执行的函数

$(window).scroll( function() { /* ...do something... */ } );

//里面还用到了Jquery里面的CSS对应的scorllTop，查看当前距离头部的位置
 
//removeClass和addClass分别是Jquery里面属性中对应的内容，添加css样式类
//初始的时候是hide样式被添加到，滚动的时候这个样式被移除
//$('#id');id选择器
方法1
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>欢迎来到我的网站</title>
    <style>
        .returnTop{
            position:fixed;
            width:50px;
            height: 60px;
            right: 20px;
            bottom: 20px;
            background-color: red;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<div id='return_top' class='returnTop hide' onclick="Go();">返回顶部</div>
<!-- <div id='return_top' class='returnTop hide'>返回顶部</div> -->
<div style="height:3000px;">asd</div>



<script src="jquery-3.0.0.js"></script>
<script type="text/javascript">

    // $(function(){
    //     //当页面加载完成之后默认会执行的一个函数
    //     $('#return_top').click(function(){
    //         $(window).scrollTop(0);
    //     });
    // })

    $(window).scroll( function() {
        // console.log(123);
        //每滚动一下滑轮，就执行下consolg.log
        var height = $(window).scrollTop();
        if(height>0){
            //显示返回顶部
            $('#return_top').removeClass('hide');
        }else{
            //影藏返回顶部
            $('#return_top').addClass('hide');
        }
    } );
    function Go() {
        // body...
        $(window).scrollTop(0);
    }
</script>
</body>
</html>

 

posted @ 2016-06-14 00:08  SpecialSpeculator  阅读(249)  评论(0)  编辑  收藏  举报