JavaScript------jQuery（三）_javascript+jquery实验三-优快云博客

本文介绍了如何使用jQuery轻松实现各种动画效果，包括显示/隐藏、滑动、褪色及自定义动画，并展示了如何操作CSS进行位置和尺寸的调整。

动画效果

用JavaScript实现动画，原理非常简单：我们只需要以固定的时间间隔（例如，0.1秒），每次把DOM元素的CSS样式修改一点（例如，高宽各增加10%），看起来就像动画了。
但是要用JavaScript手动实现动画效果，需要编写非常复杂的代码。如果想要把动画效果用函数封装起来便于复用，那考虑的事情就更多了。
使用jQuery实现动画，代码已经简单得不能再简化了：只需要一行代码！
---------------------------------------------------------------------------------------------------------------------

show / hide
直接以无参数形式调用show()和hide()，会显示和隐藏DOM元素。但是，只要传递一个时间参数进去，就变成了动画：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../day48/jquery-3.2.1.js"></script>
</head>
<body>
<img src="http://imgsrc.baidu.com/imgad/pic/item/267f9e2f07082838b5168c32b299a9014c08f1f9.jpg" alt="">
</body>
<script>
    $(document).click(function () {
        $('img').hide(5000)
    });
    $(document).dblclick(function () {
        $('img').show(5000)
    });
</script>
</html>

toggle()方法则根据当前状态决定是show()还是hide()。

<body>
<img src="http://imgsrc.baidu.com/imgad/pic/item/267f9e2f07082838b5168c32b299a9014c08f1f9.jpg" alt="">
</body>
<script>
    $(document).click(function () {
        $('img').toggle(1000)
    });

</script>

slideUp / slideDown 滑动
你可能已经看出来了，show()和hide()是从左上角逐渐展开或收缩的，而slideUp()和slideDown()则是在垂直方向逐渐展开或收缩的。
slideUp()把一个可见的DOM元素收起来，效果跟拉上窗帘似的，slideDown()相反，而slideToggle()则根据元素是否可见来决定下一步动作。
-------------------------------------------------------------------------------------------------------------------

fadeIn / fadeOut 褪色
fadeIn()和fadeOut()的动画效果是淡入淡出，也就是通过不断设置DOM元素的opacity属性来实现，而fadeToggle()则根据元素是否可见来决定下一步动作：

<body>
<img src="http://imgsrc.baidu.com/imgad/pic/item/267f9e2f07082838b5168c32b299a9014c08f1f9.jpg" alt="">
</body>
<script>
    $('img').hide();
    $(document).click(function () {
        $('img').fadeToggle(1000)
    });

</script>

自定义动画
如果上述动画效果还不能满足你的要求，那就祭出最后大招：animate()，它可以实现任意动画效果，我们需要传入的参数就是DOM元素最终的CSS状态和时间，jQuery在时间段内不断调整CSS直到达到我们设定的值。animate()还可以再传入一个函数，当动画结束时，该函数将被调用。实际上这个回调函数参数对于基本动画也是适用的。

<body>
<img src="http://imgsrc.baidu.com/imgad/pic/item/267f9e2f07082838b5168c32b299a9014c08f1f9.jpg" alt="">
</body>
<script>

    $(document).click(function () {
        $('img').animate(
            {opacity:0,width:'100%',height:'100%'}
            ,1000,function () {
                $('body').css('background-color','red')
            })
    });

</script>

串行动画

jQuery的动画效果还可以串行执行，通过delay()方法还可以实现暂停，这样，我们可以实现更复杂的动画效果，而代码却相当简单：

<body>
<img src="http://imgsrc.baidu.com/imgad/pic/item/267f9e2f07082838b5168c32b299a9014c08f1f9.jpg" alt="">
</body>
<script>

    $(document).click(function () {
        $('img').hide();
        $('img').delay(3000);
        $('img').fadeIn(4000);
        $('img').delay(1000);
        $('img').animate(
            {opacity:0,width:'100%',height:'100%'}
            ,1000,function () {
                $('body').css('background-color','red')
            })
    });

</script>

https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014356468967974219593d94f64d06b370c87fc38eade4000

=================================================================

css操作
css位置操作

$("p").offset([coordinates])//获得 <p> 元素当前的偏移/取当前偏移量
	$("p").offset().left;
	$("p").offset().top;
        $("p").position()//返回匹配元素相对于父元素的位置（偏移）。
	该方法返回的对象包含两个整型属性：top 和 left，以像素计。
	此方法只对可见元素有效。
        $("div").scrollTop([val])//设置 <div> 元素中滚动条的垂直偏移/取现在垂直位置
        $("div").scrollLeft([val])//设置 <div> 元素中滚动条的水平偏移/取现在水平位置

跟随方块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: #999999;
        }
    </style>
    <script src="..\day49\jquery-3.2.1.js"></script>
</head>
<body>
<div class="box"></div>

<script>
$('.box').mousedown(function (e) {
    var e1=e.clientX;
    var e2=e.clientY;
     var s1=$('.box').offset().top;
     var s2=$('.box').offset().left;
    $(document).mousemove(function (e) {
        console.log('x',e.clientX);
        console.log('y',e.clientY);
        $('.box').offset({left:e.clientX-e1+s2,top:e.clientY-e2+s1})
    });

    $(document).mouseup(function () {
    $(document).off()
})
});
</script>

</body>
</html>

=================================================================

尺寸操作

        $("").height([val|fn])
        $("").width([val|fn])
        $("").innerHeight()
        $("").innerWidth()
        $("").outerHeight([soptions])
        $("").outerWidth([options])

=================================================================

扩展

https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014356468967974219593d94f64d06b370c87fc38eade4000

================================================================================================================================

jQuery 数据 - jQuery.data() 方法

data() 方法向被选元素附加数据，或者从被选元素获取数据。
注释：这是底层级的方法；使用 .data() 更加方便。

$(selector).data(name,value)//存值

$(selector).data(name)//取值

$(selector).data()//取出所有键值对

testObj.greetingEve="Good Evening!";
 $("div").data(testObj);//将"Good Evening!"赋给$('div')