JavaScript------jQuery（三）

来源：互联网发布：福州seo基础培训班编辑：程序博客网时间：2024/06/12 23:44

动画效果

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

阅读全文

0 0