速通已经“逝去“的jQuery-笔记打卡

jQuery ⭐️

1. 什么是jQuery？

---

• javaScript + Query 提倡写更少的代码做更多的事情

• jQuery封装了javaScript 常用的功能代码，优化了DOM操作、事务处理、动画设计和Ajax交互

• 学习jQuery的本质就是学习调用这些函数，提高开发的效率

2. jQuery的基础语法

2.1 $ 是jQuery的象征,是jQuery的另一个名字

---

$(function() {}) 等价于 $(document).ready(function(){})
hide(); show();
1
2

$(‘div’) 从div获取到的jQuery对象

2.2 jQuery和原生dom对象可以相互转换

2.2.1 dom对象转化为jQuery对象

---

var dom = document.querySelector('video');
$(dom);
1
2

2.2.2 jQuery转化为dom对象

---

$('video')[0].play();
$('video').get(0).play;
1
2

3. jQuery API

3.1 使用类选择器并且赋值颜色

---

$(".div").css("background", "blue");  将.div类的背景颜色全部修改为蓝色

$("ul li").css("color", "cyan"); 
1
2
3

3.2 使用筛选择器

---

3.3 案例

3.3.1 隐式迭代 除了点击按钮，其余兄弟按钮全为原色!

---

$("button").click(function () {
    // 隐式迭代 除了点击按钮，其余兄弟按钮全为原色! 
   $(this).css("background","cyan")siblings("button").css("background","");
    
})
1
2
3
4
5

3.3.2 点击按钮，对应功能实现并且能够控制变化的速度

---

$("button").eq(0).click(function () {
    $(this).css("background", "cyan").siblings("button").css("background", "");
    $("div").show(1000, function () {
        alert("回调函数!");
    })
});
$("button").eq(1).click(function () {
    $(this).css("background", "cyan").siblings("button").css("background", "");
    $("div").hide(1000, function () {
        alert("回调函数!");
    })
});
$("button").eq(2).click(function () {
    $(this).css("background", "cyan").siblings("button").css("background", "");
    $("div").toggleClass("r");
});
$("button").eq(3).click(function () {
    $(this).css("background", "cyan").siblings("button").css("background", "");
    $("div").slideDown(1000, function () {
        alert("回调函数!");
    })
});
$("button").eq(4).click(function () {
    $(this).css("background", "cyan").siblings("button").css("background", "");
    $("div").slideUp(1000, function () {
        alert("回调函数!");
    })
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

3.4 jQuery的样式

---

addClass("") 添加类

removeClass("") 删除类

toggleClass("") 切换类

3.4.1 hover 鼠标经过和离开的复合写法

---

语法：hover([over], out);

当写两个函数时，第一个函数表示鼠标经过事件，第二个函数表示鼠标离开事件

当写一个函数时，每次执行函数都会触发鼠标经过和离开事件

$(".nav>li").hover(function() {
    $(this).children("ul").slideDown(200);
}, function() {
    $(this).children("ul").slideUp(200);
})
stop(); 暂停动画效果
1
2
3
4
5
6

3.4.2 淡入淡出效果

---

fadein、fadeout、fadeToggle

修改透明度

fadeTo(“时间”， 透明度)

$(".nav>li").hover(function() {
    $(this).children("ul").fadein(200);
}, function() {
    $(this).children("ul").fadeout(200);
})
1
2
3
4
5

3.4.3 自定义动画 animate(params, speed, easing, func)

---

$("button").click(function () {
    $("div").animate({
        left: 200,
        opacity: .3 // 透明度
    })
})
1
2
3
4
5
6

3.4.4 把全选按钮的状态赋值给所有小按钮

---

prop = properties (配置修改)

data = hashMap 设置key 和 value

$(".checkAll").change(function() {
    // 这里的checked 为boolean值
    $("checkBox").prop("checked", $(this).prop("checked"))
})
1
2
3
4

3.5 修改文件内容

---

• $("h1").html("修改后") 修改元素内容
• $("h1").text("修改后") 修改文本内容
• $("input").val("修改后") 修改表单值

3.6 遍历元素

---

$("div").each(function(i, domEle) {
    // 回调函数中 第一个是获取对象下标 第二个是索引号名称,并且为dom对象
    console.log(index);
    $(domEle).css("color", "blue");
})
1
2
3
4
5

3.7 创建元素

---

let li = $("
新
");
$("ul").append(li); 追加创建元素
$("ul").prepend(li); 前部添加元素

element.after("内容"); 放在元素后边
element.before("内容"); 放在元素前边
1
2
3
4
5
6

3.8 位置获取

---

offset() 获取距离页面的距离

$("").offset({
   top: 200,
    left: 200
});
设置距离文档顶部和左侧的距离

$("").postion({
	不能设置偏移值，只能获取带有定位的父级距离，如果没有父级，以文档距离为准
});
1
2
3
4
5
6
7
8
9

scrollTop() 超出指定元素的距离，一般设置该元素为文档或者窗口

4. jQuery 事件

4.1 事件绑定机制

---

$("").on("")通过on来为获取到的对象赋予绑定事件

$("div").on({
    mouseenter: function(){},
    click: function(){},
    mouseleave: function(){}
});
on 绑定多个事件
$("div").on("mouseenter mouseleave", function(){});

on 事件委派功能
$("ul").on("click", "li", function(){}); 事件绑定在ul上，但是触发对象是li
1
2
3
4
5
6
7
8
9
10

4.2 事件解绑机制

---

$("").off("") 通过off来为对象解除绑定

4.3 事件单次生效机制

---

$("").one("") 通过one来为对象赋予绑定事件，单次生效

4.4 自动触发事件

---

$("").trigger("click") 自动触发click事件

5. jQuery otherMethod

5.1 对象copy

---

$.extend("false 为浅拷贝 true 深拷贝", "对象", "目标对象")

• 浅拷贝使用同一个地址
• 深拷贝使用的是不同的地址
• 目标对象可以有多个

5.2 jQuery 多库共存

---

为了避免其他js库也会使用$继而发生冲突的问题

• 可以将$改为jQuery
• 用户自改$符号为其他符号
  • let tmp = $.noConflict(); 将$符号改为tmp符号

---

由于jQuery已经不再使用，所以jQuery插件就不再了解了