jQuery 补充

最新推荐文章于 2022-09-28 21:17:15 发布

weixin_43297321

最新推荐文章于 2022-09-28 21:17:15 发布

阅读量102

点赞数

分类专栏：线上原生js 相关笔记文章标签： jquery js

本文链接：https://blog.csdn.net/weixin_43297321/article/details/104456528

版权

线上原生js 相关笔记专栏收录该内容

12 篇文章 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移除事件语法
}

在这里插入图片描述

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");
})

在这里插入图片描述

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

$("<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)。

var obj={
    a:function(){
        var o={
            a:1,b:2
        }
        $("<div></div>").appendTo("body").css({
            width:50,
            height:50,
            backgroundColor:"red"

            // on  事件可以使用第二个参数用来传参
        }).on("click",o,this.clickHandler); //以对象形式o传入a、b两个值
    },
    clickHandler(e){
        console.log(e);
        console.log(e.data.a);//传入的参数在触发事件的data属性里,e.data.a将值拿出来
    }
}
obj.a();

在这里插入图片描述

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");//也是可以删除多个事件的
})

在这里插入图片描述

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("鼠标离开");
})

在这里插入图片描述

7、trigger模拟事件抛发

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

var obj={
    a:function(){
        $(document).on("abc",this.abcHandler); //监听abc事件
    },
    abcHandler:function(e,a,b){
        console.log(e.type,a,b);// e.type事件类型是abc
        // 从抛发的事件传参过来的内容将会放在事件函数中后面参数一一调用
    }
/*  abcHandler(e,a,b){
    	// 对象里函数也可以这么写
    }*/
}
var obj1={
    b:function(){
        $(document).trigger("abc",[10,20]);//创建并抛发abc事件，传入参数10，20

        // 对应原生js里面的做法，如下
        // documen.dispatchEvent(new Event("abc"));

        // 来看下之前学过的完整的事件创建、然后抛发的过程
        // var evt=new Event("abc");//创建事件，类型为abc
        // evt.a=10;//传参
        // evt.b=20;//传参
        // document.dispatchEvent("evt");//抛发，然后在其他地方就可以监听到了
    }
}
obj.a();
obj1.b();

在这里插入图片描述

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

var obj={
    a:function(){
        $(".ab").click(function(){
            console.log("aaa");
        });
        $(".cd").click(function(){
            console.log("bbb");
        })
    }
}
var obj1={
    b:function(){
        // $(".cd").trigger("click"); 
        $(".cd").triggerHandler("click"); //会自动阻止冒泡
    }
}
obj.a();
obj1.b();

在这里插入图片描述

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，交互时触发。效果是，鼠标滑过，向左平移，颜色改变。
在这里插入图片描述

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);
}

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

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

改变元素高度。

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

在这里插入图片描述
这里有个小栗子，js || jQuery 元素收起展开。

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

专门用于透明度变化

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

在这里插入图片描述

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

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

从不透明淡出到透明度为0.3：
在这里插入图片描述

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)

在这里插入图片描述
（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);
})

在这里插入图片描述
（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)

在这里插入图片描述

jQuery插件

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

开发步骤

使用闭包
(function( $ )){ }(jQuery)；
优点：避免全局依赖、避免第三方破坏、兼容jquery操作符’$‘和’jQuery’ 。
可扩展
JQuery提供了2个供用户扩展的基类– $ .extend和 $ .fn.extend 。
$ .extend用于自身方法；
$ .fn.extentd用户扩展jquery类。
选择器
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");

在这里插入图片描述

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

(function () {
    $.extend({
        randomColor: function () { //颜色随机
            var col = "#";
            for (let i = 0; i < 6; i++) {
                col += Math.floor(Math.random() * 16).toString(16);
            }
            return col;
        },
        each1: function (obj, fn) { //遍历
            if (typeof obj !== "object") return obj;
            if (Array.isArray(obj) || obj.constructor === $) {
                for (let i = 0; i < obj.length; i++) {
                    if (obj[i] === undefined) continue;
                    fn(i, obj[i]);
                }
            } else {
                for (var prop in obj) {
                    fn(prop, obj[prop])
                }
            }
        }
    })
})();

for (var i = 0; i < 4; i++) {
    $("<div></div>").css({
        width: 50,
        height: 50,
        backgroundColor: $.randomColor()
    }).appendTo("body");
}

var obj = { a: 1, b: 2, c: 3 };
$.each1(obj, function (index, item) {
    console.log(index, item);
})

在这里插入图片描述

jQuery通信AJAX

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

weixin_43297321

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 补充

jQuery事件机制一般通过on、off方法来实现，不过也有简写的形式。1、事件处理命名函数法：$("<div></div>").appendTo("body").css({ width: 50, height: 50, backgroundColor: "red"}).on("click", clickHandler);function...
复制链接

扫一扫