jQuery高阶

爱敲代码的狼仔

于 2021-09-07 19:27:15 发布

阅读量102

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/qq_48469083/article/details/120165201

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

2. 事件补充

2.1 事件取消

添加
- $(selector).事件名()
- $(selector).on(事件类型，事件处理函数）

取消

$().off()

//3.取消事件   $().off();
$("div").off();   //取消这个标签上的所有事件
$("div").off("click");  //取消这个标签上的对应类型的事件
$("div").off("click",fun2); //取消其中一个点击事件

2.2 一次性事件

语法：$().one(事件类型，事件处理函数)

作用：事件触发一次会自动销毁

 //1.一次性事件，发生一次以后会自动取消这个事件
var arr = ["5块钱","再来一箱","一箱玉米","200块","10000块"];
$("button").one("click",function(){
    console.log(arr[Math.floor(Math.random()*arr.length)]);
})

2.3 组合事件

语法：$(selector).hover(overFun，outerFun)

$("div").hover(function(){
    //鼠标移入时触发
    $("div").css("background","teal");
},function(){
    //鼠标移出时触发
    $("div").css("background","red");
})

3.预置动画

3.1 显示隐藏

显示隐藏方法 (宽高透明度) ： show():显示 hide():隐藏 toggle()：开关
语法：$(selector).show(speed,easing,callback)

参数：

speed：动画过渡的所需的时间 , 可能的值：num(ms), 关键字："fast":200, "normal":400 , "slow":600
easing:运动方式可能的值：linear：匀速 swing：慢-快-慢

callback:回调函数

//1.点击显示
$(".show").click(function(){
    $("div:eq(0)").show(500,"linear");
    // $("div:eq(1)").show(500,"swing",function(){
    //     alert("回调执行");
    // });
})

//2.点击隐藏
$(".hide").click(function(){
    $("div").hide(1000);
})

//3.开关
$(".toggle").click(function(){
    $("div").toggle(400);
})

3.2 滑入滑出

滑入滑出方法 (高)： slideUp():滑出 slideDown():滑入 slideToggle()：开关
语法：$(selector).slideDown(speed,easing,callback)

参数：

speed：动画过渡的所需的时间 , 可能的值：num(ms), 关键字："fast":200, "normal":400 , "slow":600
easing:运动方式可能的值：linear：匀速 swing：慢-快-慢

callback:回调函数

//1.点击滑入
$(".slideDown").click(function(){
    $("div").slideDown(1000);
})

//2.点击滑出
$(".slideUp").click(function(){
    $("div").slideUp(1000);
})

//3.开关
$(".slideToggle").click(function(){
    $("div").slideToggle(1000);
})

3.3 淡入淡出

淡入淡出方法 (透明度) ： fadeIn():淡入 fadeOut():淡出 fadeToggle()：开关 fadeTo（）：透明度
语法：$(selector).slideDown(speed,easing,callback)
参数：
- speed：动画过渡的所需的时间 , 可能的值：num(ms), 关键字："fast":200, "normal":400 , "slow":600
- easing:运动方式可能的值：linear：匀速 swing：慢-快-慢
- callback:回调函数

语法：$(selector).fadeTo(speed,to,easing,callback)

to:指定透明的数值范围0-1

//1.点击淡入
$(".fadeIn").click(function(){
    $("div").fadeIn(1000);
})
//2.点击开关
$(".fadeToggle").click(function(){
    $("div").fadeToggle(1000);
})

//3.透明到
$(".fadeTo").click(function(){
    $("div").fadeTo(1000,0.3);
})

4.自定义动画

4.1 第一种用法

语法： $(标签).animate({attr},speed,easing,callback)

//1.queue动画队列，每一个animate都会自动加入到动画队列，排队执行
$("div").animate({"width":500});
$("div").animate({"height":500});

//2.同时运动多个属性
$("div").animate({"width":500,"height":500});

//3.自带累加效果
$("div").click(function(){
    $("div").animate({"left":"+=50"});
})

//4. show  hide toggle关键字可以直接作为目标值使用
$("div").animate({"width":"hide"}); //0
$("div").animate({"width":"show"}); //100


//5.链式操作(运动：数值型的属性)
//queue动画队列，每一个animate都会自动加入到动画队列，排队执行，css不是动画，不排队直接跟动画队列中的一个动画一起执行
$("div").animate({"width":500})
    .animate({"height":500})
    .queue(function(next){
        $("div").css("background","teal");
        // $("div").dequeue();  出队
        next(); //让后面的动画继续排队执行
	})
    .animate({"opacity":0.3});

4.2 第二种用法

语法：$(标签).animate({attr},{props})

参数props：

duration - 设置动画的速度

easing - 规定要使用的 easing 函数

callback - 规定动画完成之后要执行的函数

queue - 布尔值。指示是否在效果队列中放置动画。如果为 false，则动画将立即开始。

//$("div").animate({"width":500},600);  紧跟在后面的动画会一起执行
$("div").animate({ "width": 500 }, { "duration": 1000, "queue": false });
$("div").animate({ "height": 500 }, { "duration": 1000, "queue": false });
$("div").animate({ "opacity": 0.5 }, { "duration": 1000 });

4.3 动画方法

stop(clearQueue,gotoEnd):停止动画
- 参数：
clearQueue：是否停止动画队列中的所有动画，默认是false：停止当前正在运动的动画， true：停止所有的动画

gotoEnd:停止动画时当前运动的属性是否立刻到达目标值，默认是false:点那停那 true：停止时立刻到达目标点
```
 $(".start").click(function(){
     $("div").animate({"width":500},1000);
     //3.delay():延迟执行
     $("div").delay(1000);
     $("div").animate({"height":500},1000);
 });

$(".stop").click(function(){
    $("div").stop(false,true);
});
```

finish() : 停止动画，所有动画全部停止，并且都到达目标点

$("div").animate({"width":500},1000);
//3.delay():延迟执行
$("div").delay(1000);
$("div").animate({"height":500},1000);

delay():延迟执行

//2.finish() : 停止动画，所有动画全部停止，并且都到达目标点
$("div").finish();

is(":animated"):判断当前元素上是否有动画，有--true 没有---false

$(".is").click(function(){
    //如果元素上有动画，不加，没有再加
    if($("div").is(":animated") == false){
        $("div").animate({"width":"toggle"});
    } 
})

4.4 运动scrollTop

//2.点击top回到顶部
$("p").click(function(){
    $("html,body").animate({"scrollTop":0})
})

5.$.extend()

5.1 深浅拷贝

5.1.1 浅拷贝

 //数据类型：六大类： number string boolean undefined null Object(function,array,object)
//基本数据类型：变量中直接存值，  引用数据类型：存储的是地址

//赋值：给的是地址，一改全改
var arr1 = [1, 2, 3];
var arr2 = arr1;
arr1.push(4); // [1, 2, 3, 4]
console.log(arr2);

数组的浅拷贝

//浅拷贝：一个对象中内容改变，会影响到另一个（共用一个地址）
var arr3 = ["a", "b", "C", [1, 2]];
var arr4 = [];
//循环将arr3中数据一个一个复制到arr4
for (var i = 0; i < arr3.length; i++) {
    arr4[i] = arr3[i];
}

arr3[3].push(3);
console.log(arr3); // ["a", "b", "C", [1,2,3]]
console.log(arr4); //["a", "b", "C", [1,2,3]]

对象的浅拷贝

var obj1 = {
    "name": "曾庆文",
    "detail": {
        "height":180,
        "yz":9
    }
}
var obj2 = {};
//循环将obj1中的属性，放到obj2中
for(var key in obj1){
    obj2[key] = obj1[key];
}
console.log(obj2);
obj2.name = "曾帅";
console.log(obj2); //{name: "曾帅", detail: {…}}
console.log(obj1); //{name: "曾庆文", detail: {…}}

//拷贝内容中依然有引用数据类型，改这部分数据会一改全改
obj2.detail.yz = 8;
console.log(obj1); //8

5.1.2 深拷贝

//$.extend(): 拷贝对象的属性，返回复制好的对象
//语法：$.extend(deep,目标对象，被拷贝属性的对象) 
//deep:false默认，浅拷贝
var obj1 = {
    "name": "曾庆文",
    "detail": {
        "height": 180,
        "yz": 9
    }
}

//浅拷贝：一改全改
// var obj2 = $.extend(false,{},obj1);
// obj2.detail.yz = 8;
// console.log(obj1);

//深拷贝：相互之间没有任何影响
var obj2 = $.extend(true, {}, obj1);
obj2.detail.yz = 8;
console.log(obj1)

爱敲代码的狼仔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery高阶

2. 事件补充2.1 事件取消添加 $(selector).事件名() $(selector).on(事件类型，事件处理函数）取消 $().off() //3.取消事件 $().off();$("div").off(); //取消这个标签上的所有事件$("div").off("click"); //取消这个标签上的对应类型的事件$("div").off("click",fun2); //取消其中一个点击事件 2.
复制链接

扫一扫

专栏目录