2018-08-22-Python全栈开发day44-滚动条

scrolltop

利用滚动条来监听滑轮状态并且可以直接回到顶部

    <style>
        div{
            position: fixed;
            right: 20px;
            bottom: 20px;
            width: =50px;
            height: 50px;
            background-color: yellow;

        }
        p{
            height: 200px;
            background-color: aqua;
        }
    </style>
</head>
<body>
<p>helldjfhkjsdhfsdkjfhsdjfh djsbfdfbhsdfgdsi</p>
<p>helldjfhkjsdhfsdkjfhsdjfh djsbfdfbhsdfgdsi</p>
<p>helldjfhkjsdhfsdkjfhsdjfh djsbfdfbhsdfgdsi</p>
<p>helldjfhkjsdhfsdkjfhsdjfh djsbfdfbhsdfgdsi</p>
<p>helldjfhkjsdhfsdkjfhsdjfh djsbfdfbhsdfgdsi</p>
<p>helldjfhkjsdhfsdkjfhsdjfh djsbfdfbhsdfgdsi</p>
<p>helldjfhkjsdhfsdkjfhsdjfh djsbfdfbhsdfgdsi</p>

<div onclick="f1()">回到顶部</div>
<script src="jquery-3.3.1.js"></script>
<script>
    window.onscroll=function () {
        var ele=$(window).scrollTop();
        console.log(ele)
    };
    function f1() {
        $(window).scrollTop(0);
    }

2.绑定函数

$('div').bind(function () {
        alert(555)
    })
$('div').unbind('click')
取消绑定

问题：如果给所有的div标签加上绑定，但是如果后期通过点击等新建了个div，则没有绑定函数，如何解决？

通过on

$('div').on('click','p',function f() {
        alert
    })
其实是给div标签绑定函数，委托给div下的p，当有新的p标签产生时，会自动绑定上函数

3.特效

$('div').show(1000);
    $('div').hide(1000);
1秒钟之后显示和隐藏
$('div').slideDown(1000);
    $('div').slideUp(1000);
滑动，上和下

淡入淡出

$('div').fadeOut(1000);
    $('div').fadeIn(1000);
    $('div').fadeTo(1000,0.4);直到透明度为0.4

回调函数

当完成某一个动作之后再去执行的函数

$('div').hide(1000,function f() {
        alert(111)
    });

拓展方法

jq也相当于是js的一个模块，底层使用的还是js语句，可以通过自己对jq修改，来定制自己需要的jq方法

<div>hello</div>
<script src="jquery-3.3.1.js"></script>
<script>
    $.extend({newfunc:function(a,b) {
        return a < b ? a:b;
    }});
    var a=$.newfunc(3,6);
    console.log(a)


给jq封装一个newfunc方法，来判断值的大小，并且返回。
注意extend的格式

 

 

三元运算符

a<b?a:b
如果a小于b则返回a，否则返回b

 

posted @ 2018-08-22 23:28  brownbearye  阅读(104)  评论(0)    收藏  举报