jQuery 概述

JavaScript 库:即 library,是一个封装好的特定的集合。从封装一大堆函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数在里面,比如动画 animate、hide、show 和获取元素等。

简单理解:就是一个 JS 文件,里面对我们原生 js 代码进行了封装,存放到里面,这样我们可以快速高效的使用这些封装好的功能。比如 jQuery,就是为了快速方便的操作 DOM,里面基本都是函数(方法)。

常见的 JavaScript 库

  • jQuery
  • Prototype
  • YUI
  • Dojo
  • Ext JS
  • 移动端的 zepto

jQuery 的基本使用

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

官网地址:https://jquery.com/
各个版本的下载:https://releases.jquery.com/

入口函数

1
2
3
4
5
6
7
$(function () {
// 此处是页面 DOM 加载完成的入口
});

$(document).ready(function () {
// 此处是页面 DOM 加载完成的入口
});
  1. 等着 DOM 结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完成,jQuery 帮我们完成了封装
  2. 不同于原生 js 中的 load 事件,石凳页面文档、外部的 js 文件、css 文件、图片加载完毕才执行内部代码
  3. 相当于原生 js 中的 DOMContentLoaded
  4. 更推荐使用第一种方式

顶级对象 $

  1. $ 是 jQuery 的别称,在代码中可以使用 jQuery 代替$,但一般为了方便,通常都直接使用 $
  2. $ 是 jQuery 的顶级对象,相当于原生 JavaScript 中的 window

jQuery 对象 和 DOM 对象

只有 jQuery 对象才能使用 jQuery 方法,DOM 对象则使用原生的 JavaScript 方法,不能混用

  1. 用原生 js 获取来的对象就是 DOM 对象
  2. 用 jQuery 方法获取的元素就是 jQuery 对象
  3. 本质:利用 $ 对 DOM 对象包装后产生的对象(伪数组形式存储)

两种相互转换

  1. DOM 对象转换为 jQuery 对象
1
$("div");
  1. jQuery 对象转换为 DOM 对象
1
2
3
// index 是索引号
$("div")[index];
$("div").get(index);

jQuery 选择器

名称用法描述
类选择器$(".class")获取同一类 class 的元素
ID 选择器$("#id")获取指定 ID 的元素
全选选择器$("*")匹配所有元素
标签选择器$("div")获取同一类标签的所有元素
并集选择器$("div,p,li")选取多个元素
交集选择器$("li.current")交集元素
子代选择器$("ul>li")使用>号,获取亲儿子层级的元素
后代选择器$("ul li")使用空格,获取 ul 下的所有 li 元素,包括孙子

隐式迭代

给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作

筛选选择器

语法用法描述
:first$("li:first")获取第一个 li 元素
:last$("li:last")获取最后一个 li 元素
:eq(index)$("li:eq(2)")获取到的 li 元素中,选取索引号为 2 的元素
:odd$("li:odd")获取到的 li 元素中,选取索引号为奇数的元素
:even$("li:even")获取到的 li 元素中,选取索引号为偶数的元素

筛选方法

语法用法说明
parent()$("li").parent()查找 li 的直接父级
parents()$("li").parents()查找 li 的所有父元素
children(selector)$("ul").children("li")相当于 $("ul>li"),最近一级
find(selector)$("ul").find("li")相当于 $("ul li"),所有后代
siblings(selector)$(".first").siblings("li")查找兄弟节点
next()$(".first").next()查找当前元素的下一个同辈元素
nextAll()$(".first").nextAll()查找当前元素之后的所有同辈元素
hasClass(selector)$("li").hasClass("current")检查当前元素是否有某个类名,如果有则返回 true
eq(index)$("li").eq(2)相当于 $("li:eq(2)"),index 从 0 开始

排他思想

1
2
// $(this).css("color", "red");
// $(this).siblings("color", "");

链式编程

1
$(this).css("color", "red").siblings("color", "");

案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(function () {
// 1. 鼠标经过左侧的小li
$("#left li").mouseover(function () {
// 2. 得到当前小li 的索引号
var index = $(this).index();
// console.log(index);
// 3. 让我们右侧的盒子相应索引号的图片显示出来就好了
// $("#content div").eq(index).show();
// 4. 让其余的图片(就是其他的兄弟)隐藏起来
// $("#content div").eq(index).siblings().hide();
// 链式编程
$("#content div").eq(index).show().siblings().hide();
});
});

jQuery 样式操作

操作 CSS 方法

1
2
3
4
5
6
7
8
9
10
11
// 1. 参数只写属性名,则是返回属性值
$(this).css("color");

// 2. 参数是属性名,属性值,逗号分隔,属性名必须加引号,值如果是数字可以不用跟单位和引号
$(this).css("color", "red");

// 3. 参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开,属性名可以不用加引号
$(this).css({
backgroundColor: "red"
width: 20
});

设置类样式方法

作用等同于原生 js 中的 classList,可以操作类样式

1
2
3
4
5
6
7
8
// 1. 添加类
$("div").addClass("current");

// 2. 移除类
$("div").removeClass("current");

// 3. 切换类
$("div").toggleClass("current");

tab 栏切换案例

1
2
3
4
5
6
7
$(function () {
$(".tab_list li").click(function () {
var index = $(this).index();
$(this).addClass("current").siblings().removeClass("current");
$(".tab_con .item").eq(index).show().siblings().hide();
});
});

jQuery 效果

jQuery 封装了很多动画效果,最常见的如下:

  1. 显示隐藏
    • show()
    • hide()
    • toggle()
  2. 滑动
    • slideDown()
    • slideUp()
    • slideToggle()
  3. 淡入淡出
    • fadeIn()
    • fadeOut()
    • fadeToggle()
    • fadeTo()
  4. 自定义动画
    • animate()

显示隐藏效果

1
2
3
4
5
6
7
8
9
show(speed, easing, fn);
hide(speed, easing, fn);
toggle(speed, easing, fn);

$(".hidebtn").click(function () {
$("div").hide(1000, "linear", function () {
alert("Hide() 方法已完成!");
});
});
  • 参数都可以省略
  • speed:三种预定速度之一的字符串(slow,normal,fast)或表示动画时长的毫秒数值(如:1000)
  • easing:用来指定切换效果,默认是 swing,可选参数 linear
  • fn:回调函数,在动画完成时执行的函数,每个元素执行一次

滑动效果

1
2
3
slideDown(speed, easing, fn);
slideUp(speed, easing, fn);
slideToggle(speed, easing, fn);
  • 参数都可以省略
  • speed:三种预定速度之一的字符串(slow,normal,fast)或表示动画时长的毫秒数值(如:1000)
  • easing:用来指定切换效果,默认是 swing,可选参数 linear
  • fn:回调函数,在动画完成时执行的函数,每个元素执行一次

事件切换

1
hover(over, out);
  • over:鼠标移到元素上要触发的函数(相对于 mouseenter)
  • out:鼠标移出元素要触发的函数(相当于 mouseleave)
  • 如果只写一个函数,则鼠标经过和离开都会触发它
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 鼠标经过
$(".nav>li").mouseover(function () {
// $(this) jQuery 当前元素 this不要加引号
// show() 显示元素 hide() 隐藏元素
$(this).children("ul").slideDown(200);
});
// // 鼠标离开
$(".nav>li").mouseout(function () {
$(this).children("ul").slideUp(200);
});
// 1. 事件切换 hover 就是鼠标经过和离开的复合写法
$(".nav>li").hover(
function () {
$(this).children("ul").slideDown(200);
},
function () {
$(this).children("ul").slideUp(200);
}
);
// 2. 事件切换 hover 如果只写一个函数,那么鼠标经过和鼠标离开都会触发这个函数
$(".nav>li").hover(function () {
$(this).children("ul").slideToggle();
});

停止排队

动画或者效果一旦触发就会执行,如果多次触发,就会造成多个动画或者效果排队执行

1
2
3
4
5
6
stop();

$(".nav>li").hover(function () {
// stop 方法必须写到动画的前面
$(this).children("ul").stop().slideToggle();
});
  • stop()方法用于停止动画或效果
  • 必须写到动画或者效果的前面,相对于停止上一次的动画

淡入淡出效果

  1. 淡入淡出效果语法规范
1
2
3
fadeIn(speed, easing, fn);
fadeOut(speed, easing, fn);
fadeToggle(speed, easing, fn);
  • 参数都可以省略
  • speed:三种预定速度之一的字符串(slow,normal,fast)或表示动画时长的毫秒数值(如:1000)
  • easing:用来指定切换效果,默认是 swing,可选参数 linear
  • fn:回调函数,在动画完成时执行的函数,每个元素执行一次
  1. 渐进方式调整到指定的不透明度
1
2
3
4
5
6
fadeTo(speed, opacity, easing, fn);

$("button").click(function () {
// 修改透明度 fadeTo() 这个速度和透明度要必须写
$("div").fadeTo(1000, 0.5);
});
  • speed:三种预定速度之一的字符串(slow,normal,fast)或表示动画时长的毫秒数值(如:1000),必须写
  • opacity: 透明度必须写,取值 0~1 之间
  • easing:用来指定切换效果,默认是 swing,可选参数 linear
  • fn:回调函数,在动画完成时执行的函数,每个元素执行一次

自定义动画 animate

1
2
3
4
5
6
7
8
9
10
11
12
13
animate(params, speed, easing, fn);

$("button").click(function () {
$("div").animate(
{
left: 500,
top: 300,
opacity: 0.4,
width: 500,
},
500
);
});
  • params:更改的样式属性,以对象形式传递,必须写,属性名可以不带引号,其余参数都可以省略
  • speed:三种预定速度之一的字符串(slow,normal,fast)或表示动画时长的毫秒数值(如:1000)
  • easing:用来指定切换效果,默认是 swing,可选参数 linear
  • fn:回调函数,在动画完成时执行的函数,每个元素执行一次

jQuery 属性操作

所谓元素固有属性就是元素自带的属性,比如 <a> 元素里面的 href,<input> 元素里面的 type

1
2
3
4
// 1. 获取属性语法
pror("属性");
// 2. 设置属性语法
pror("属性", "属性值");

设置或获取自定义属性值 attr()

用户自己给元素添加的属性,比如给 div 添加 index="1"

1
2
3
4
// 1. 获取属性语法
attr("属性"); //类似原生getAttribute()
// 2. 设置属性语法
attr("属性", "属性值"); //类似原生setAttribute()

数据缓存 data()

data()方法可以在指定的元素上存取数据,并不会修改 DOm 元素结构,一旦页面刷新,之前存放的数据都会被移除

1
2
3
4
5
6
7
8
9
// 1. 附加数据语法
data("name", "value"); //向被选元素附加数据
// 2. 获取数据语法
data("name"); //向被选元素获取数据

$("span").data("uname", "andy");
console.log($("span").data("uname"));
// 这个方法获取data-index h5自定义属性 第一个 不用写data- 而且返回的是数字型
console.log($("div").data("index"));

jQuery 内容文本值

1
2
3
4
5
6
7
8
9
// 1. 普通元素内容 html() , 相当于原生 innerHTML()
html(); //获取元素的内容
html("内容"); //设置元素内容
// 2. 普通元素文本内容 text() , 相当于原生 innerText()
text(); //获取元素的文本内容
text("文本内容"); //设置元素的文本内容
// 3. 表单的值 val() , 相当于原生 value()
val(); //获取表单的值
val("内容"); //设置表单的值

jQuery 元素操作

主要是遍历、创建、添加、删除元素操作

遍历元素

jQuery 隐式迭代是对同一类元素做了同样的操作,如果想要给同一类元素做不同的操作,就要用到遍历

语法 1:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(selector).each(function(index,element))

// $("div").css("color", "red");
// 如果针对于同一类元素做不同操作,需要用到遍历元素(类似for,但是比for强大)
var sum = 0;
// 1. each() 方法遍历元素
var arr = ["red", "green", "blue"];
$("div").each(function (i, domEle) {
// 回调函数第一个参数一定是索引号 可以自己指定索引号号名称
// console.log(index);
// console.log(i);
// 回调函数第二个参数一定是 dom元素对象 也是自己命名
// console.log(domEle);
// domEle.css("color"); dom对象没有css方法
$(domEle).css("color", arr[i]);
sum += parseInt($(domEle).text());
});
console.log(sum);
  1. each() 方法遍历匹配的每一个元素,主要用 DOM 处理 each 每一个
  2. 回调函数中有两个参数:index 是每个元素的索引号,domEle 是每个 DOM 元素对象,不是 jQuery 对象
  3. 如果要用 jQuery 方法,需要给这个 DOM 元素转换为 jQuery 对象 $(domEle)

语法 2:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$.each(object, callback);

var obj = {
flammable: "inflammable",
duh: "no duh",
};
$.each(obj, function (key, value) {
alert(key + ": " + value);
});

var arr = ["a", "b", "c"];
$.each(arr, function (i, e) {
alert("下标 #" + i + ": " + e);
});
  1. $.each() 方法可用于遍历任何对象,主要用于数据处理,比如数组,对象
  2. 遍历对象时回调函数中两个参数:key 是对象中的属性名,value 是对象中的属性值
  3. 遍历数组时回调函数中两个参数:i 是每个元素的索引号,e 是对应数组中数据

创建元素

1
2
// 动态地创建了一个 <li>
$("<li></li>");

添加元素

  1. 内部添加
1
2
element.append("内容"); // 类似原生 appenChild
element.prepend("内容"); // 雷速原生 insertBefore
  1. 外部添加
1
2
element.after("内容"); // 把内容放入目标元素后面
element.before("内容"); // 把内容放入目标元素前面
  • 内部添加元素,生成之后,它们是父子关系
  • 外部添加元素,生成之后,它们是兄弟关系

删除元素

1
2
3
element.remove(); // 删除匹配的元素(本身)
element.empty(); // 删除匹配的元素集合中所有子节点
element.html(""); // 删除匹配的元素集合中所有子节点
  1. remove 是删除元素本身,自杀
  2. empty() 和 html("") 作用等价,都可以删除元素里面的内容,只不过 html 还可以设置内容

jQuery 尺寸

语法用法
width()/height()取得匹配元素宽度和高度值,只算 width/height
innerWidth()/innerHeight()取得匹配元素宽度和高度值,包含 padding
outerWidth()/outerHeight()取得匹配元素宽度和高度值,包含 padding\border
outerWidth(true)/outerHeight(true)取得匹配元素宽度和高度值,包含 padding\border\margin
  • 以上参数为空,则是获取相应值,返回的是数字型
  • 如果参数为数字,则是修改相应值
  • 参数可以不写单位

jQuery 位置

  1. offset() 设置或获取元素偏移
1
2
3
4
5
6
7
// 1. 获取设置距离文档的位置(偏移) offset
console.log($(".son").offset());
console.log($(".son").offset().top);
$(".son").offset({
top: 200,
left: 200,
});
  • offset() 方法设置或返回被选元素相对于稳当当额偏移坐标,跟父级没有关系
  • 该方法有 2 个属性: offset().top 和 offset.left()
  • 可以设置元素的偏移:offset({top: 10, left: 30});
  1. position() 获取元素偏移
1
2
3
4
5
6
7
// 2. 获取距离带有定位父级位置(偏移) position   如果没有带有定位的父级,则以文档为准
// 这个方法只能获取不能设置偏移
console.log($(".son").position());
// $(".son").position({
// top: 200,
// left: 200
// });
  • position() 方法用于返回被选元素相对于带有定位的父级偏移坐标,如果父级都没有定位,则以文档为准
  • 该方法有 2 个属性:position().top 和 position().left
  • 该方法只能获取,不能设置
  1. scrollTop() / scrollLeft() 设置或获取元素被卷去的头部和左侧
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(document).scrollTop(100);
// 被卷去的头部 scrollTop() / 被卷去的左侧 scrollLeft()
// 页面滚动事件
var boxTop = $(".container").offset().top;
$(window).scroll(function () {
// console.log(11);
console.log($(document).scrollTop());
if ($(document).scrollTop() >= boxTop) {
$(".back").fadeIn();
} else {
$(".back").fadeOut();
}
});
// 返回顶部
$(".back").click(function () {
// $(document).scrollTop(0);
$("body, html").stop().animate({
scrollTop: 0,
});
// $(document).stop().animate({
// scrollTop: 0
// }); 不能是文档而是 html和body元素做动画
});
  • scrollTop() 方法设置或返回被选元素被卷去的头部
  • 不跟参数是获取,参数为不带单位的数字则是设置被卷去的头部

jQuery 事件注册

单个事件注册

1
2
element.事件(function () {});
$("div").click(function () {});

其他事件和原生基本一直
比如 mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等

jQuery 事件处理

绑定事件 on()

on() 方法在匹配元素上绑定一个或多个事件的事件处理函数

1
element.on(events, [selector], fn);
  1. events: 一个或多个用空格分割的事件类型
  2. selector:元素的子元素选择器
  3. fn:回调函数

on() 方法优势 1:

1
2
3
4
5
6
7
8
9
10
11
// 可以绑定多个事件,多个事件处理程序
$("div").on({
click: function () {},
mouseenter: function () {},
mouseleave: function () {},
});

// 如果事件处理程序相同
$("div").on("mouseover mouseout", function () {
$(this).toggleClass("current");
});

on() 方法优势 2:

1
2
3
4
// 可以进行事件委派操作
$("ul").on("click", "li", function () {
alert("11");
});

on() 方法优势 3:

1
2
3
4
5
// on() 可以给动态生成的元素绑定事件
$("div").on("click", "p", function () {
alert("俺可以给动态生成的元素绑定事件");
});
$("div").append("<P>我是动态创建的</p>");

解绑事件 off()

off() 方法可以移除通过 on() 方法添加的事件处理程序

1
2
3
$("p").off(); // 解绑 p 元素所有事件处理程序
$("p").off("click"); // 解绑 p 元素上面的点击事件
$("ul").off("click", "li"); // 解绑事件委托

触发一次事件 one()

如果有的事件只想触发一次,可以使用 one()来绑定事件

1
2
3
$("p").one("click", function () {
alert(11);
});

自动触发事件 trigger()

1
2
3
4
5
6
7
8
9
element.click(); // 第一种简写形式
element.trigger("event"); // 第二种自动触发模式
element.triggerHandler("event"); // 第三种自动触发模式

$("input").on("focus", function () {
$(this).val("你好吗");
});
$("input").trigger("focus"); // 会触发元素的默认行为
$("input").triggerHandler("focus"); // 不会触发元素的默认行为

jQuery 事件对象

事件被触发,就会有事件对象的产生

1
2
3
4
5
6
element.on(events, [selector], function (event) {});

$("div").on("click", function (event) {
console.log("点击了div");
event.stopPropagation();
});

阻止默认行为:event.preventDefault() 或者 return false
阻止冒泡:event.stopPropagation()

jQuery 对象拷贝

将一个或多个对象的内容合并到目标对象,可以使用 $.extend() 方法

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
29
30
31
32
33
34
35
36
37
38
$.extend([deep], target, object1, [objectN]);

var targetObj = {
id: 0,
age: 12,
};
var obj = {
id: 1,
name: "andy",
};
$.extend(targetObj, obj);
console.log(targetObj); // 相同属性会覆盖 targetObj 里面原来的数据

var targetObj = {
id: 0,
msg: {
sex: "男",
},
};
var obj = {
id: 1,
name: "andy",
msg: {
age: 18,
},
};
$.extend(targetObj, obj);
console.log(targetObj); // msg: {age: 18}
// 1. 浅拷贝把原来对象里面的复杂数据类型地址拷贝给目标对象
targetObj.msg.age = 20;
console.log(targetObj); // msg: {age: 20}
console.log(obj); // msg: {age: 20}
// 2. 深拷贝把里面的数据完全复制一份给目标对象 如果里面有不冲突的属性,会合并到一起
$.extend(true, targetObj, obj);
console.log(targetObj); // msg :{sex: "男", age: 18}
targetObj.msg.age = 20;
console.log(targetObj); // msg :{sex: "男", age: 20}
console.log(obj); // msg: {age: 18}
  1. deep:true 为深拷贝,默认为 false 浅拷贝
  2. target:目标对象,其他对象的成员属性将被附加到该对象上
  3. object1:第一个被合并的对象
  4. objectN: 第 N 个被合并的对象
  5. 浅拷贝目标对象引用的被拷贝的对象地址,修改目标对象会影响被拷贝对象的数据
  6. 深拷贝,完全克隆,如果里面有不冲突的属性,会合并到一起,修改目标对象不会影响被拷贝对象

jQuery 多库共存

问题概述:jQuery 使用 $ 作为标识符,其他 js 库也可能会用这 $ 作为标识符,这样一起使用会引起冲突
客观需求:需要一个解决方案,让 jQuery 和其他 js 库不存在冲突,可以同时存在,这就叫多库共存

  1. 把里面的 $ 符号统一改为 jQuery
  2. jQuery 变量规定新的名称:var xx = $.noConflict();
1
2
3
4
5
6
7
8
9
10
function $(ele) {
return document.querySelector(ele);
}
console.log($("div"));
// 1. 如果$ 符号冲突 我们就使用 jQuery
jQuery.each();
// 2. 让jquery 释放对$ 控制权 让用自己决定
var suibian = jQuery.noConflict();
console.log(suibian("span"));
suibian.each();

jQuery 插件

jQuery 插件常用的网站:

  1. jQuery 插件库:https://www.jq22.com/
  2. jQuery 之家:http://www.htmleaf.com/

jQuery 插件使用步骤:

  1. 引入相关文件(jQuery 文件和 插件文件)
  2. 复制相关 html,css,js 调用插件

综合案例

  1. https://case.gahotx.cn/todolist/
  2. https://case.gahotx.cn/shopping-cart/