jQuery 补充

àì夳堔傛蜴生んèń 2023-07-07 11:27 11阅读 0赞

### jQuery事件机制 ###

一般通过on、off方法来实现，不过也有简写的形式。

###### 1、事件处理 命名函数法： ######

$("<div></div>").appendTo("body").css({ 
        width: 50,
        height: 50,
        backgroundColor: "red"
    }).on("click", clickHandler);
    function clickHandler(e) { 
        console.log(e); // 触发事件类型
        console.log(this);  // this--->事件侦听者 DOM元素
        // this.removeEventListener("click",clickHandler); //不起作用
        //虽然上下这两种写法一样，但是不能写成DOM的方法，因为这是jQuery，按谁的方法添加，就按谁的方法删除。
        $(this).off("click", clickHandler);//jQuery移除事件语法
    }

![在这里插入图片描述][20200223101154323.png]

###### 2、事件处理 匿名函数法： ######

*  一般都用匿名函数来处理事件，不怎么用命名函数，但是咱们DOM里面是用命名函数的。

$("<div></div>").appendTo("body").css({ 
        width: 50,
        height: 50,
        backgroundColor: "red"
    }).on("click", function () { 
        // $(this).off("click");
        // 匿名函数可以不使用函数名清除
        // 会将当前jQuery对象所有的click事件清除
    
        // 可以使用事件的命名空间username namespace
    }).on("click.a", function () { 
        console.log("aaa");
        $(this).off("click.a"); //click.a使用事件的命名空间
        // 这样就能达到只删除这个的事件的效果了
    }).on("click.b", function () { 
        console.log("bbb");
    })

![在这里插入图片描述][20200223100624412.png]

*  阻止默认事件、阻止冒泡的方法：

$("<div></div>").appendTo("body").css({ 
        width:50,
        height:50,
        backgroundColor:"red"
    }).on("click",function(e){ 
        e.preventDefault();//阻止默认事件
    
        // 以下这些方法如果能分清冒泡，一般没啥用处
        e.isDefaultPrevented();//判断是否设置阻止冒泡
        e.stopPropagation();//阻止冒泡
        e.isPropagationStopped();//判断是否阻止了冒泡
        e.isImmediatePropagationStopped();//阻止默认事件和冒泡
        e.stopImmediatePropagation();//判断是否阻止冒泡和默认事件
    })

###### 3、事件传参 ######

*  事件不能直接传参，不过on方法的第二个参数可以用来传参，但只能传递一个，所以可以用对象、数组来传递多个参数。
 *  参数可以在事件的data属性里面取。
 *  简写的事件也可以通过第二个参数传参，比如.click(o,clickHandler)。

![在这里插入图片描述][20200223103427554.png]  
![在这里插入图片描述][20200223103418635.png]

###### 4、事件简写 ######

*  简写事件本身是不能够用命名空间的。

<1> 事件简写，如.click（）
    $("<div></div>").appendTo("body").css({ 
        width: 50,
        height: 50,
        backgroundColor: "red"
    }).click(function () { 
        // 等同于直接增加click事件
    })
    
    <2> 添加多个事件的简写方式
    $("<div></div>").appendTo("body").css({ 
        width: 50,
        height: 50,
        backgroundColor: "red"
    }).on("mousedown mouseover mouseout", function (e) { 
        console.log(e.type); // 打印当前事件类型
        $(this).off("mousedown mouseover");//也是可以删除多个事件的
    })

![在这里插入图片描述][20200223104728365.png]

###### 5、onload、ready 需注意一下 ######

*  window.onload激活：  
    当页面的css加载完，script加载完，img图像加载完，HTML已经生成树了，CSS已经创建好了，HTML与CSS合成了DOM树了，然后效果已经出来了，此时window.onload被激活。

window.onload=function(){ 
      
    }

*  document.ready  
    当DOM已经构建完毕，CSS已经构建完毕，已经形成DOM树了，这个时候去加载document.ready；但这个时候图片可能没有加载完，异步的script可能没有加载完。

$(document).ready(function(){ 
    
    })

###### 6、hover ######

*  hover事件简写：

$("<div></div>").appendTo("body").css({ 
        width: 50,
        height: 50,
        backgroundColor: "red"
    }).hover(function(){ 
        // 鼠标经过时执行的函数
        console.log("鼠标经过");
    },function(){ 
        // 鼠标离开时执行的函数
        console.log("鼠标离开");
    })

![在这里插入图片描述][20200223111451700.png]

###### 7、trigger模拟事件抛发 ######

*  自定义一个事件，进行抛发：

![在这里插入图片描述][20200223115357678.png]

*  trigger与triggerHandler的区别：  
    （1）trigger不会阻止冒泡，但triggerHandler会自动阻止冒泡。  
    （2）不过，trigger会影响到所有元素，triggerHandler只会影响到第一个匹配到的元素。  
    （3）triggerHandler()方法会返回当前事件执行的返回值，如果没有返回值，则返回undefined；而trigger()则返回当前包含事件触发元素的jQuery对象（方便链式连缀调用）。但是，不要用return返回，**事件函数当中是不允许有return返回值的**，因为会造成之前链式连缀方式直接失效。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70]

### jQuery动画 ###

###### 1、css里的动画 ######

简单说一下：transition、@keyframes、animation、transform

*  transition 缓动动画，交互时触发，加快速度、减慢速度 ；  
    transition：第一个参数是什么属性缓动，第二个参数是多长时间，第三个参数是缓动效果 。
 *  自动动画，增加关键帧 @keyframes；  
    animation: name duration timing-function delay iteration-count direction fill-mode；  
    animation参数：(关键帧)名字 时长 缓动效果 间隔时间 往返次数 方向 动画填充模式 。  
    （timing-function：https://cubic-bezier.com/ 曲线网站，设置好效果直接把数据拿过来用）
 *  transform 属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

div{ 
        width: 50px;
        height: 50px;
        background-color: red;
        position: absolute;
        /* animation: move 10s cubic-bezier(.1,.91,.9,.12) 100ms 4; */
        /* 交互时触发 第一个参数是什么属性缓动，第二个参数是多长事件，第三个参数是欢动效果 */
        /* transition: background-color 1s ease-in; */
        transition: all 1s ease-in;
        left:0px;
    } 
    div:hover{ 
        left:100px;
        background-color:aquamarine;
    }
    
    /* @keyframes move{ //起个名叫move，animation里有用到 0%{ left:0px; } 50%{ left:100px; } 100%{ left:300px; } } */
    /*div { transform: rotate(); }*/

能够看出，transition，交互时触发。效果是，鼠标滑过，向左平移，颜色改变。  
![在这里插入图片描述][20200223201524629.gif]

###### 2、jQuery动画 显示：.show()、隐藏：.hide() ######

*  参数除了是数字（ms），也可以用slow、fast。

<1> 匿名函数方法
    $("<div></div>").appendTo("body").css({ 
        width:50,
        height:50,
        backgroundColor:"red"
    }).hide(1000,function(){ 
        $(this).show(1000);//隐藏完成时再触发显示，持续时间1000ms=1s
    }) 
    
    <2> 链式连缀法
    $("<div></div>").appendTo("body").css({ 
       width:50,
        height:50,
        backgroundColor:"red"
    }).hide(1000).show(1000);
    
    <3> 不断的hide、show
    $("<div></div>").appendTo("body").css({ 
       width:50,
       height:50,
       backgroundColor:"red"
    }).hide(500,animation);
    function animation(){ 
       $(this).show(500).hide(500,animation);
    }

如果设置不断隐藏显示，就能有下面的效果，如果换成心的话，就是一颗心放大缩小，很浪漫吧。  
![在这里插入图片描述][20200223200904824.gif]

###### 3、向上收缩：.slideUp()、向下展开：.slideDown() ######

*  改变元素高度。

$("<div></div>").appendTo("body").css({ 
        width:50,
        height:50,
        backgroundColor:"red"
    }).slideUp(1000).slideDown(1000);

![在这里插入图片描述][20200223202707657.gif]  
这里有个小栗子，[js || jQuery 元素收起展开][js _ jQuery]。

###### 4、透明度淡入：.fadeIn()、淡出：.fadeOut() ######

*  专门用于透明度变化

$("<div></div>").appendTo("body").css({ 
        width:50,
        height:50,
        backgroundColor:"red"
    }).fadeOut(1000).fadeIn(1000);

![在这里插入图片描述][2020022320565421.gif]

*  为了能够设置淡入淡出的指定值，jQuery提供了.fadeTo()方法。
 *  不过，如果元素本身透明度大于指定值，会淡出，否则相反。

$("<div></div>").appendTo("body").css({ 
        width:50,
        height:50,
        backgroundColor:"red"
    }).fadeTo(1000,0.3);

从不透明淡出到透明度为0.3：  
![在这里插入图片描述][2020022321013225.png]

###### 5、.animate() 自定义动画 ######

*  上面是jQuery 提供的几种简单常用的固定动画方法，但有些时候，这些简单动画无法满足我们更加复杂的需求。这个时候，jQuery 提供了一个.animate()方法来创建我们的自定义动画，满足更多复杂多变的要求。
 *  animate有三个参数：css变化样式对象、速度、回调函数

下面通过几个小栗子，自己体会一下。

（1）实现方块的自动移动，可以完成类似于css里的动画效果，不过不是曲线。

$("<div></div>").appendTo("body").css({ 
        width: 50,
        height: 50,
        backgroundColor: "red",
        position: "absolute"
    }).animate({ 
        left: 100,
        top: 100
    }, 1000)

![在这里插入图片描述][20200223211043112.gif]  
（2）不但可以自动运行，还可以交互运行；比如放到事件里，当点击了方块，才会发生上面的滑动。

$("<div></div>").appendTo("body").css({ 
        width: 50,
        height: 50,
        backgroundColor: "red",
        position: "absolute"
    }).click(function () { 
        $(this).animate({ 
            left: 200,
            top: 200
        }, 2000)
    })

（3）交互小栗子，animate实现随点随到的特效：

var div=$("<div></div>").appendTo("body").css({ 
        width: 50,
        height: 50,
        backgroundColor: "teal",
        position: "absolute",
        transform: "rotate(30)"
    });
    $(document).click(function(e){ 
        div.animate({ 
            left:e.clientX-div.width()/2,
            top:e.clientY-div.height()/2,
            width:150,
        },1000);
    })

![在这里插入图片描述][20200223212251675.gif]  
（4）animate还可以使用连缀法，小栗子如下，实现自动画正方形：

$("<div></div>").appendTo("body").css({ 
        width:50,
        height:50,
        backgroundColor:"red",
        position:"absolute",
        left:0,
        top:0
    }).animate({ 
        left:200
    },2000).animate({ 
        top:200
    },2000).animate({ 
        left:0
    },2000).animate({ 
        top:0
    },2000)

![在这里插入图片描述][20200223213327259.gif]

### jQuery插件 ###

我们可以用别人已经开发好的插件，也可以自己写。

###### 开发步骤 ######

1.  使用闭包  
    (function( $ ))\{ \}(jQuery)；  
    优点：避免全局依赖、避免第三方破坏 、兼容jquery操作符’$‘和’jQuery’ 。
2.  可扩展  
    JQuery提供了2个供用户扩展的**基类**– $ .extend和 $ .fn.extend 。  
    $ .extend用于自身方法 ；  
    $ .fn.extentd用户扩展jquery类 。
3.  选择器  
    a) 尽量使用Id选择器 ；  
    b) 样式选择器应该尽量明确指定的tagName，例如className为jq的div，要写成 $ (‘div.jq’)而不是 $ (’.jq’) 。

###### $.fn 加入新的功能属性 ######

编写一个jQuery插件开始于给jQuery.fn加入新的功能属性，此处添加的对象属性的名称就是你插件的名称：

// 生成不同的形状，叫控件，可以直接拿来用
    (function () { 
        $.fn.bc = function (color) {  //背景
            this.css("backgroundColor", color);
            return this;
        }
        $.fn.rect = function (w, h) {  //矩形
            this.css({ 
                width: w,
                height: h
            })
            return this;
        }
        $.fn.square = function (w, c) {  //正方形
            this.css({ 
                width: w,
                height: w,
                backgroundColor: c
            });
            return this;
        }
        $.fn.createMenu = function () {  //下拉菜单外形
            $("<button><span></span><span></span></button>").appendTo(this).css({ 
                width: 120,
                height: 35,
                border: "1px solid #000000",
                backgroundColor: "#FFFFFF",
                position: "relative"
            }).children().eq(1).css({ 
                width: 0,
                height: 0,
                display: "inline-block",
                borderTop: "10px solid #000000",
                borderLeft: "10px solid transparent",
                borderRight: "10px solid transparent",
                right: 5,
                top: 10,
                position: "absolute"
            })
            return this;
        }
    })();
    
    $("<div></div>").width(50).height(50).bc("tomato").appendTo("body");
    $("<div></div>").square(100, "teal").appendTo("body");
    
    $("<div></div>").createMenu().appendTo("body");

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][20200223221401972.png]

###### $.extend() 向 jQuery中添加函数例 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 2]

### jQuery通信AJAX ###

jQuery的ajax部分单独抽出，与原生js的放在一起了。后期贴链接。

[20200223101154323.png]: https://img-blog.csdnimg.cn/20200223101154323.png
[20200223100624412.png]: https://img-blog.csdnimg.cn/20200223100624412.png
[20200223103427554.png]: https://img-blog.csdnimg.cn/20200223103427554.png
[20200223103418635.png]: https://img-blog.csdnimg.cn/20200223103418635.png
[20200223104728365.png]: https://img-blog.csdnimg.cn/20200223104728365.png
[20200223111451700.png]: https://img-blog.csdnimg.cn/20200223111451700.png
[20200223115357678.png]: https://img-blog.csdnimg.cn/20200223115357678.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200223120623678.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ==,size_16,color_FFFFFF,t_70
[20200223201524629.gif]: https://img-blog.csdnimg.cn/20200223201524629.gif
[20200223200904824.gif]: https://img-blog.csdnimg.cn/20200223200904824.gif
[20200223202707657.gif]: https://img-blog.csdnimg.cn/20200223202707657.gif
[js _ jQuery]: https://blog.csdn.net/weixin_43297321/article/details/104466730
[2020022320565421.gif]: https://img-blog.csdnimg.cn/2020022320565421.gif
[2020022321013225.png]: https://img-blog.csdnimg.cn/2020022321013225.png
[20200223211043112.gif]: https://img-blog.csdnimg.cn/20200223211043112.gif
[20200223212251675.gif]: https://img-blog.csdnimg.cn/20200223212251675.gif
[20200223213327259.gif]: https://img-blog.csdnimg.cn/20200223213327259.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200223221345939.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ==,size_16,color_FFFFFF,t_70
[20200223221401972.png]: https://img-blog.csdnimg.cn/20200223221401972.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200223220419236.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ==,size_16,color_FFFFFF,t_70