JavaScript之jQuery够用即可（事件委托、动画效果、扩展插件）

朱雀 2023-02-09 11:58 13阅读 0赞

### 文章目录 ###

*   *   *   *  一、事件委托
             *  二、JS的动画效果
             *  三、扩展插件

#### 一、事件委托 ####

**1、事件委托**  
其实就是给对象绑定一个事件，但是委托给它所属的每一个子对象了，因此每一个子对象都具有添加进的功能  
书写格式如下：

$("ul").on("click","li",function () { 
            alert(23333);
        })

**2、页面载入**  
意思就是等整个页面都加载完了以后再去启动script的内容  
格式如下：

$(function(){ 
            $("ul li").html(12345);
        })

**3、练习代码**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件委托</title>
    <script src="jquery-3.4.1.js"></script>
    <script>
        //页面载入：意思就是等整个页面都加载完了以后再去启动script的内容
        // $(document).ready(function () { 
        // $("ul li").html(12345); //这样即使放在ul和li的前面也能查询到它们
        // });
        //简写
        // $(function(){ 
        // $("ul li").html(12345);
        // })
    
        //事件委托:其实就是给ul绑定事件，但是委托给它所属的每一个li了，因此每一个li都具有alert(23333)的功能
        $("ul").on("click","li",function () { 
            alert(23333);
        })
    
        //按顺序增加标签
        $(".b1").click(function() { 
            var $ele=$("<li>");  //创建一个li标签，
            var len=$("ul li").length;  //将len赋值为ul列表的长度
            $ele.html((len+1)*1111);
            $("ul").append($ele);
        })
    </script>
    </head>
    
    <body>
    <ul>
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
        <li>4444</li>
        <li>5555</li>
    </ul>
    
    <button class="b1">点我</button>
    
    </body>
    </html>

![1][]

#### 二、JS的动画效果 ####

**1、显示与隐藏**

*  显示：show()
 *  隐藏：hide()
 *  切换显示隐藏：toggle()

**2、滑动效果**

*  滑出：slideDown()
 *  滑入：slideUp()
 *  结合滑入滑出：slideToggle()

**3、练习代码（显示隐藏、滑动）**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>动画效果</title>
        <style>
            .div1{ 
                height: 200px;
                width: 100%;
                background-color: tomato;
            }
        </style>
    </head>
    <body>
    <div class="div1">How amazing!</div>
    
    
    
    
    <button class="b1">滑入</button>
    <button class="b2">滑出</button>
    <button class="b3">滑动</button>
    
    
    <script src="jquery-3.4.1.js"></script>
    <script>
    //显示与隐藏
    // $(".b1").click(function () { 
    // $("div").show(1000); //用1000毫秒事件完成动作
    // })
    //
    // $(".b2").click(function(){ 
    // $("div").hide(1000);
    // })
    //
    // //toggle结合了show和hide，如果显示则隐藏，如果隐藏则显示
    // $(".b3").click(function(){ 
    // $("div").toggle(1000);
    // })
    
    //slideDown滑出，slideUp滑入，slideToggle结合划入划出
        $(".b1").click(function () { 
            $("div").slideUp(1000);  //用1000毫秒事件完成动作
        })
    
        $(".b2").click(function(){ 
            $("div").slideDown(1000);
        })
    
        //slideToggle结合了slideUp和slideDown
        $(".b3").click(function(){ 
            $("div").slideToggle(1000);
        })
    </script>
    </body>
    </html>

**4、渐变效果**

*  渐入：fadeIn()
 *  渐出：fadeOut()
 *  结合渐入渐出fadeToggle()
 *  到指定透明度停止：fadeTo()

**5、练习代码（渐变效果）**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>渐入渐出</title>
        <style>
            .div1{ 
                height: 200px;
                width: 100%;
                background-color: tomato;
            }
        </style>
    </head>
    <body>
    <div class="div1">How amazing!</div>
    <button class="b1">渐入</button>
    <button class="b2">渐出</button>
    <button class="b3">渐变</button>
    <button class="b4">渐停</button>
    
    
    <script src="jquery-3.4.1.js"></script>
    <script>
    //fadeIn渐入，fadeOut渐出，fadeToggle结合渐入渐出，fadeTo到指定透明度停止
        $(".b1").click(function () { 
            $("div").fadeIn(1000,function () {   //第二个参数是回调函数，表示在动画效果执行结束后会触发的操作
                alert("已渐渐出现！");
            });  //用1000毫秒事件完成动作
        })
    
        $(".b2").click(function(){ 
            $("div").fadeOut(1000,function(){ 
                alert("已渐渐隐藏！");
            });
        })
    
        //fadeToggle结合了fadeIn和fadeOut
        $(".b3").click(function(){ 
            $("div").fadeToggle(1000,function () { 
                alert("已完成渐变效果！")
            });
        })
    
        $(".b4").click(function(){ 
            $("div").fadeTo(1000,0.5,function () { 
                alert("已实现渐变效果并停止！")
            });  //表示1000毫秒的动画效果，停止在透明度为0.5的时候
        })
    </script>
    </body>
    </html>

#### 三、扩展插件 ####

简单来说就自定义函数来实现特定的功能  
**1、格式**

//扩展自定义插件Myprint
        $.extend({ 
            Myprint:function(){ 
                alert("我是自定义的动作！");
            }
        })
        //调用自定义插件
        $.Myprint();

**2、练习代码**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>扩展插件</title>
    </head>
    <body>
    <p>1111</p>
    <p>2222</p>
    <p>3333</p>
    <p>4444</p>
    
    
    <script src="jquery-3.4.1.js"></script>
    <script>
        // //扩展自定义插件Myprint
        // $.extend({ 
        // Myprint:function(){ 
        // alert("我是自定义的动作！");
        // }
        // })
        // //调用自定义插件
        // $.Myprint();
    
    
        //定义一个获取文本的插件Gettext
        $.fn.extend({ 
            Gettext:function(){ 
                console.log($(this).html());  //获取每一个标签的文本
            }
        })
        //调用：用jQuery循环each来遍历每一个p标签
        $("p").each(function() { 
            $(this).Gettext();
        })
    </script>
    </body>
    </html>

[1]: https://img-blog.csdnimg.cn/20200518210319868.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1ZpZXdpbmZpbml0ZWx5,size_16,color_FFFFFF,t_70