李莎_20210120李莎

知识点总结



jQuery相关应用

@TOC

1.1 jQuery动画

1.1.1 默认效果
  1. show([speed],[easing],[fn]) 显示
  2. hide([speed],[easing],[fn]) 隐藏
  3. toggle([speed],[easing],[fn]) 切换
  4. 参数介绍 : slow,数字

jQuery效果实现相关学习网站

https://animate.style/
http://kristofferandreasen.github.io/wickedCSS/
https://www.swiper.com.cn/

动画效果

show():显示
hide()隐藏
$().toggle():显示和隐藏效果切换
都可以传入参数,speed.

fadeOut(淡出)
fadeIn(淡入)
fadeToggle();淡入淡出切换
fadeTo(2000,0.3)将图片显示到透明度为30%的程度

1.1.2 滑动效果
  1. slideDown 向下滑入显示
  2. slideUp 向上滑入隐藏

滑动显示

slideDown():
slideUp():
slideToggle():
都可以传入一个speed参数。

\((':animated');获取正在执行动画的元素。
将正在执行动画的元素停止:
\)(':animated').stop():停止当前的动画。
stop(true)表示清除队列中的所有的动画,即动画立即停止,如果不传递参数,只是立刻停止当前的动画。
$(':animated').stop(false,true)第二个参数为true表示停止当前正在执行的动画,并且将元素设置为当前动画执行结束处的位置。

1.1.3 淡入淡出效果
  1. fadeIn() 淡入
  2. fadeOut() 淡出

相关效果实现代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box{
                width: 500px;
                height: 600px;
                background-color: #0000FF;
            }
        </style>
    </head>
    <body>
        <div class="box">
            
        </div>
        <button id="show">显示</button>
        <button id="hide">隐藏</button>
        <button id="toggle">切换</button>
        <button id="slideDown">下滑</button>
        <button id="slideUp">上滑</button>
        <button id="fadeIn">淡入</button>
        <button id="fadeOut">淡出</button>
        
        <script src="js/jquery-3.4.1.js"></script>
        <script type="text/javascript">
            var showBtn=$("#show");
            var hideBtn=$("#hide");
            var toggleBtn=$("#toggle");
            var slideDownBtn=$("#slideDown");
            var slideUpBtn=$("#slideUp");
            var fadeInBtn=$("#fadeIn");
            var fadeOutBtn=$("#fadeOut");
            
            var box=$(".box");
            
            showBtn.click(function(){
                box.show('slow');
            });
            hideBtn.on('click',function(){
                box.hide('slow');
            })
            toggleBtn.on('click',function(){
                box.toggle(1000);
            })
            slideDownBtn.on('click',function(){
                box.slideDown(1000);
            })
            slideUpBtn.on('click',function(){
                box.slideUp(1000);
            })
            fadeInBtn.on('click',function(){
                box.fadeIn(1000);
            })
            fadeOutBtn.on('click',function(){
                box.fadeOut(1000);
            })
            
            
        </script>
    </body>
</html>

1.2 遍历

jQuery 遍历,意为“移动”,用于根据其相对于其他元素的关系来“查找”(或选取)HTML 元素。以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止。

下图展示了一个家族树。通过 jQuery 遍历,您能够从被选(当前的)元素开始,轻松地在家族树中向上移动(祖先),向下移动(子孙),水平移动(同胞)。这种移动被称为对 DOM 进行遍历。

遍历 DOM

jQuery 提供了多种遍历 DOM 的方法。
遍历方法中最大的种类是树遍历(tree-traversal)。

1.3 事件

事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件。

学习心得

​ 今天主要学习了jQuery的应用,运用jQuery实现各种动画效果,并学习了jQuery的相关事件。

​ 通过学习jQuery,我们了解导论更多在前端界面能够实现的功能,能够做出更好的界面。

​ 今天开始做自己的网站,我们知道做好一个网站是很不容易的,之前的学习都是铺垫,只有自己真正做页面的时候才能学习到更多的知识,应用是相当重要的。学习前端界面,不只要了解每个功能的单独实现,更重要的是能够让功能在自己的界面中应用自如。

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1