📕 jQuery 笔记

# jQuery 基础

# 引入

<!--服务器本地库-->
<script src="js/jquery-3.6.0.js"></script>
<!--CDN远程库-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

1
2
3
4

区别 2 种引用 JS 库的方式：

服务器本地库

CDN 远程库

项目上线时，一般使用比较靠谱的 CDN 资源库，减轻服务器负担；

https://www.bootcdn.cn/：搜索 jQuery ，复制 <script> 标签到项目中即可使用；

区别 jQuery 的不同版本：

1.x

兼容老版本 IE

文件更大

2.x

部分 IE8 及以下支持

文件小，执行效率更高

3.x

完全不再支持 IE8 及以下版本

提供了一些新的 API

提供不包含 ajax / 动画 API 的版本

在 codepen 中使用：

在 codepen 中引入 jQuery 包的最新版本：在 Pen Settins - JS - Add External Scripts/Pens 搜索栏中输入 jquery 后选择包：

# 基本语法

核心函数： $ /jQuery 函数
核心对象：执行 $() 返回的对象

# jQuery 核心函数

引入 jQuery 库后，直接使用：

当函数用： $(xxx)
当对象用： $.xxx()

// jQuery函数：直接可用
console.log($, typeof $);  // ƒ ( selector, context ) {}    function
console.log(jQuery === $); // true

1
2
3

# jQuery 核心对象

得到 jQuery 对象：执行 jQuery 函数返回的就是 jQuery 对象；

使用 jQuery 对象： $obj.xxx() ；

console.log($(), typeof $(), $() instanceof Object); 
// jQuery.fn.init {} "object" true

1
2

# jQuery 函数的使用

作为一般函数调用： $(param) ：

参数为函数时：当 DOM 加载完成后，执行此回调函数；
参数为选择器字符：查找所有匹配的标签并将它们封装为 jQuery 对象；
参数为 DOM 对象：将 DOM 对象封装成 jQuery 对象；
参数为 HTML 标签字符串（用得少）：创建标签对象并封装成 jQuery 对象；

作为对象使用： $.xxx() ：

$.each() ：隐式遍历数组；

var arr = [3, 7, 4];
    $.each(arr, function (index, item) {
        console.log(index, item); // 0 3    1 7    2 4
    });

1
2
3
4

$.trim() ：去除两端的空格；

var str = "    my atguigu   ";
    console.log('===' + str + '===');           
// ===    my atguigu   ===
    console.log('===' + str.trim() + '===');    
// ===my atguigu===
    console.log('===' + $.trim(str) + '===');   
// ===my atguigu===

1
2
3
4
5
6
7
8

# jQuery 对象的使用

即执行 jQuery 核心函数返回的对象，jQuery 对象内部包含的是 DOM 元素对象的伪数组（可能只有一个元素），jQuery 对象拥有很多有用的属性和方法，方便操作 DOM；

属性和方法：

基本行为：操作标签的基本方法；
属性：操作内部标签的属性和值；
CSS：操作标签的样式；
文档：对标签进行增、删、改操作；
筛选：根据指定的规则过滤内部的标签；
事件：处理事件的监听相关；
效果：实现动画效果；

jQuery 基本行为

size() 、 length ：获取包含的 DOM 元素的个数

// 统计一共有多少个按钮
var $buttons = $('button');
console.log($buttons.length); // 4

1
2
3

[index] 、 get(index) ：获取对应位置的 DOM 元素；

// 需求2.取出第2个button的文本
console.log($('button:nth-child(2)').text()); // 测试二

console.log($buttons[1].innerHTML, $buttons.get(1).innerHTML);
// 测试二 测试二

1
2
3
4
5

each() ：遍历包含的所有的 DOM 元素；

$buttons.each(function () {
    console.log(this.innerHTML); // 测试一 测试二 测试三 测试四
});

1
2
3

index() ：得到在所在兄弟元素中的下标索引；
```
console.log($("#btn3").index()); // 2
```
1

伪数组：

Object ：对象；
length ：属性；
数组下标的属性
没有数组特别的方法： forEach() 、 push() 、 pop() 、 slice ；

console.log($buttons instanceof Array); // false
//自定义一个伪数组
var weiArr = {}
weiArr.length = 0;
weiArr[0] = 'atguigu';
weiArr.length = 1;
weiArr[1] = 123;
weiArr.length = 2;
for (var i = 0; i < weiArr.length; i++) {
    var obj = weiArr[i];
    console.log(i, obj); // 0 "atguigu"    1 123
}
console.log(weiArr.forEach, $buttons.forEach); //undefined undefined

1
2
3
4
5
6
7
8
9
10
11
12
13

# jQuery 选择器

选择器本身只是一个有特定语法规则的字符串，没有实质用处；
它的基本语法规则使用的就是 CSS 的选择器语法，并对其进行了扩展；
只有调用 $() ，并将选择器作为参数传入才能起作用；

$(selector) 作用：根据选择器规则在整个文档中查找所有匹配的标签的数组（伪数组），并封装成 jQuery 对象；

# 基本选择器

基本选择器	描述
ID 选择器 `#id`	根据给定的 ID 匹配一个元素
标签选择器 `element`	根据给定的元素名匹配所有元素
属性选择器 `.class`	根据给定的类名匹配元素
通用选择器 `*`	匹配所有元素
并集选择器 `selector1,selector2,selectorN`	将每一个选择器匹配到的元素合并后一起返回
交集选择器 `selector1 selector2`

🌰：jQuery-example-selector-1 (codepen.io) (opens new window)

# 层级选择器

层级选择器	描述
后代元素选择器 `ancestor descendant`	在给定的祖先元素下匹配所有的后代元素
子元素选择器 `parent > child`	在给定的父元素下匹配所有的子元素
兄弟选择器 `prev + next`	匹配所有紧接在 prev 元素后的 next 元素
兄弟选择器 `prev ~ siblings`	匹配 prev 元素之后的所有 siblings 元素

🌰：jQuery-example-selector-2 (codepen.io) (opens new window)

# 过滤选择器

在原有的选择器匹配的元素中进一步进行过滤的选择器，选择器的语法中大部分是过滤选择器：

基本；
内容；
可见性；
属性；

分类	过滤选择器	描述
基本	`:first`	获取第一个元素
	`:last`	获取最后一个元素
	`:eq(index)`	匹配一个给定索引值的元素
	`:gt(index)`	匹配所有大于给定索引值的元素
	`:lt(index)`	匹配所有小于给定索引值的元素
	`:even`	匹配所有索引值为偶数的元素，从 0 开始计数
	`:odd`	匹配所有索引值为奇数的元素，从 0 开始计数
	`:not(selector)`	去除所有与给定选择器匹配的元素
内容	`:contains(text)`	匹配包含给定文本的元素
	`:has(selector)`	匹配含有选择器所匹配的元素的元素
	`:empty`	匹配所有不包含子元素或者文本的空元素
	`:parent`	匹配含有子元素或者文本的元素
可见性	`:hidden`	匹配所有不可见元素，或者 type 为 hidden 的元素
	`:visible`	匹配所有的可见元素
属性	`[attribute]`	匹配包含给定属性的元素
	`[attribute=value]`	匹配给定的属性是某个特定值的元素
	`[attribute!=value]`	匹配所有不含有指定的属性，或者属性不等于特定值的元素
	`[attribute*=value]`	匹配给定的属性是以包含某些值的元素
	`[selector1][selector2][selectorN]`	复合属性选择器，需要同时满足多个条件时使用

🌰：jQuery-example-selector-2 (codepen.io) (opens new window)

# 表单选择器

表单；
表单对象属性；

表单选择器	描述
`:input`	匹配所有 `input` , `textarea` , `select` 和 `button` 元素
`:text`	匹配所有的单行文本框
`:password`	匹配所有密码框
`:radio`	匹配所有单选按钮
`:checkbox`	匹配所有复选框
`:submit`	匹配所有提交按钮
`:reset`	匹配所有重置按钮
`:button`	匹配所有按钮
表单对象属性	描述
`:enabled`	匹配所有可用元素
`:disabled`	匹配所有不可用元素
`:checked`	匹配所有选中的被选中元素 (复选框、单选框等，不包括 `select` 中的 `option` )
`:selected`	匹配所有选中的 `option` 元素

🌰： jQuery-example-selector-3 (codepen.io) (opens new window)

# jQuery 工具方法

工具方法	描述
`$.each(object,[callback])`	通用遍历方法，可用于遍历对象和数组
`$.type(obj)`	检测 `obj` 的数据类型
`$.isArray(obj)`	测试对象是否为数组
`$.isFunction(obj)`	测试对象是否为函数
`$.isNumeric(value)`	测试对象是否为数字
`$.parseJSON(json)`	接受一个 JSON 字符串，返回解析后的对象

🌰：jQuery-example-function (codepen.io) (opens new window)

🌰 tab 切换实例： jQuery-example-function tab 切换 (codepen.io) (opens new window)

# jQuery 操作属性

方法	描述
`attr()`	设置或返回被选元素的属性值
`removeAttr()`	从每一个匹配的元素中删除一个属性
`prop()`	获取在匹配的元素集中的第一个元素的属性值
`removeProp()`	用来删除由 `.prop()` 方法设置的属性集
`addClass()`	为每个匹配的元素添加指定的类名
`removeClass()`	从所有匹配的元素中删除全部或者指定的类
`toggleClass()`	如果存在（不存在）就删除（添加）一个类
`html()`	取得第一个匹配元素的 HTML 内容
`text()`	取得所有匹配元素的内容
`val()`	获得匹配元素的当前值

🌰：jQuery-example-attribute (codepen.io) (opens new window)

# jQuery 操作元素样式

方法	描述
`css()`	访问匹配元素的样式属性
`offset()`	获取匹配元素在当前视口的相对偏移
`position()`	获取匹配元素相对父元素的偏移
`scrollTop()`	获取匹配元素相对滚动条顶部的偏移
`scrollLeft()`	获取匹配元素相对滚动条左侧的偏移
`height()`	取得匹配元素当前计算的高度值 `px`
`width()`	取得第一个匹配元素当前计算的宽度值 `px`
`innerHeight()`	获取第一个匹配元素内部区域高度（包括补白、不包括边框）
`innerWidth()`	获取第一个匹配元素内部区域宽度（包括补白、不包括边框）
`outerHeight()`	获取第一个匹配元素外部高度（默认包括补白和边框）
`outerWidth()`	获取第一个匹配元素外部宽度（默认包括补白和边框）

🌰：jQuery-example-css (codepen.io) (opens new window)

# jQuery 对象的过滤和查找

# 对象的过滤

过滤方法	描述
`eq()`	获取第 N 个元素
`first()`	获取第一个元素
`last()`	获取最后一个元素
`hasClass()`	检查当前的元素是否含有某个特定的类，如有则返回 `ture`
`filter()`	筛选出与指定表达式匹配的元素集合
`not()`	删除与指定表达式匹配的元素
`is()`	根据选择器、DOM 元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合给定的表达式就返回 `true`
`has()`	保留包含特定后代的元素，移除不含有指定后代的元素

🌰： jQuery-example-object-filter (codepen.io) (opens new window)

# 对象的查找

查找方法	描述
`children()`	取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合
`find()`	搜索所有与指定表达式匹配的元素，这个函数是找出正在处理的元素的后代元素的好方法
`siblings()`	取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合
`next()`	取得一个包含匹配的元素集合中每一个元素紧邻的后一个同辈元素的元素集合
`nextAll()`	查找当前元素之后所有的同辈元素
`nextUntil()`	查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止
`prev()`	取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合
`prevAll()`	查找当前元素之前所有的同辈元素
`prevUntil()`	查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止
`offsetParent()`	返回第一个匹配元素用于定位的父节点
`parent()`	取得一个包含着所有匹配元素的唯一父元素的元素集合
`parentsUntil()`	查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止

🌰：jQuery-example-object-match (codepen.io) (opens new window)

🌰 过滤和查找的实例爱好选择器：jQuery-example-object 爱好选择器 (codepen.io) (opens new window)

# jQuery 文档处理

	文档处理方法	描述
内部插入	`append()`	向每个匹配的元素内部追加内容
	`appendTo()`	把所有匹配的元素追加到另一个指定的元素元素集合中
	`prepend()`	向每个匹配的元素内部前置内容
	`prependTo()`	把所有匹配的元素前置到另一个、指定的元素元素集合中
外部插入	`after()`	在每个匹配的元素之后插入内容
	`before()`	在每个匹配的元素之前插入内容
	`insertAfter()`	把所有匹配的元素插入到另一个、指定的元素元素集合的后面
	`insertBefore()`	把所有匹配的元素插入到另一个、指定的元素元素集合的前面
包裹	`wrap()`	把所有匹配的元素用其他元素的结构化标记包裹起来
	`unwrap()`	这个方法将移出元素的父元素
	`wrapAll()`	将所有匹配的元素用单个元素包裹起来
	`wrapInner()`	将每一个匹配的元素的子内容 (包括文本节点) 用一个 HTML 结构包裹起来
替换	`replaceWith()`	将所有匹配的元素替换成指定的 HTML 或 DOM 元素
	`replaceAll()`	用匹配的元素替换掉所有 selector 匹配到的元素
删除	`empty()`	删除匹配的元素集合中所有的子节点
	`remove()`	从 DOM 中删除所有匹配的元素
	`detach()`	从 DOM 中删除所有匹配的元素
克隆	`clone()`	克隆匹配的 DOM 元素并且选中这些克隆的副本

🌰：jQuery-example-HTML (codepen.io) (opens new window)

🌰 添加、删除员工信息：jQuery-example-HTML add/delete Node (codepen.io) (opens new window)

# jQuery 事件处理

	事件方法	描述
页面载入	`ready()`	当 DOM 载入就绪可以查询及操纵时绑定一个要执行的函数
事件处理	`on()`	在选择元素上绑定一个或多个事件的事件处理函数
	`off()`	在选择元素上移除一个或多个事件的事件处理函数
	`bind()`	为每个匹配元素的特定事件绑定事件处理函数
	`unbind()`	bind () 的反向操作，从每一个匹配的元素中删除绑定的事件
	`one()`	为每一个匹配元素的特定事件（像 click）绑定一个一次性的事件处理函数
	`trigger()`	在每一个匹配的元素上触发某类事件
	`triggerHandler()`	这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作，也不会产生事件冒泡
事件委派	`delegate()`	指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数
	`undelegate()`	删除由 delegate () 方法添加的一个或多个事件处理程序
事件切换	`hover()`	一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法
	`toggle()`	用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件
事件	`focus()` 、 `focusin()`	当元素获得焦点时，触发 focus、focusin 事件
	`blur()` 、 `focusout()`	当元素失去焦点时，触发 blur、focusout 事件
	`change()`	当元素的值发生改变时，会发生 change 事件
	`click()`	触发每一个匹配元素的 click 事件
	`dblclick()`	当双击元素时，会发生 dblclick 事件
	`error()`	当元素遇到错误（没有正确载入）时，发生 error 事件
	`mousedown()`	当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件
	`mouseup()`	当在元素上放松鼠标按钮时，会发生 mouseup 事件
	`mouseenter()`	当鼠标指针穿过元素时，会发生 mouseenter 事件
	`mouseleave()`	当鼠标指针离开元素时，会发生 mouseleave 事件
	`mouseover()`	当鼠标指针位于元素上方时，会发生 mouseover 事件
	`mouseout()`	当鼠标指针从元素上移开时，发生 mouseout 事件
	`mousemove()`	当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件
	`keypress()`	当键盘或按钮被按下时，发生 keypress 事件
	`keydown()`	当键盘或按钮被按下时，发生 keydown 事件
	`keyup()`	当按钮被松开时，发生 keyup 事件
	`resize()`	当调整浏览器窗口的大小时，发生 resize 事件
	`scroll()`	当用户滚动指定的元素时，会发生 scroll 事件
	`select()`	当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件
	`submit()`	当提交表单时，会发生 submit 事件
	`unload()`	在当用户离开页面时，会发生 unload 事件

mouseover / mouseout 与 mouseenter / mouseleave 的区别在于子元素：

mouseover / mouseout 进入和离开子元素会再次触发
mouseenter / mouseleave 进入和离开子元素不会再次触发

🌰事件绑定、鼠标事件、事件解绑：jQuery-example-event (codepen.io) (opens new window)

坐标相关： offsetX、offsetY、pageX、pageY、clientX、clientY

offsetX 、 offsetY ：相对于触发事件对象的坐标；
pageX 、 pageY ：相对于视口的坐标；
clientX 、 clientY ：相对于屏幕的坐标；

🌰：jQuery-example-event X/Y (codepen.io) (opens new window)

停止冒泡 stopPropagation 、 preventDefault

// 点击.inner区域，外部点击监听不响应
$('.inner').on('click', function (event) {
    alert('click inner');
    event.stopPropagation(); // 停止冒泡
});

// 点击链接，如果当前时间是偶数不跳转
$('#test4').on('click', function (event) {
    if (Date.now() % 2 === 0) {
        event.preventDefault(); // 阻止默认行为
    }
})

1
2
3
4
5
6
7
8
9
10
11
12

# jQuery 事件委派

（事件代理 / 委托）：将多个子元素的事件委派给父元素处理，监听回调加在父元素上：

当操作任何一个子元素时，事件会冒泡给父元素；
父元素不会直接处理事件，而是根据 event.target 得到发生事件的子元素，通过这个子元素调用回调函数；

事件委派的优点：

对于新添加的子元素，自动有事件响应处理；
减少事件监听的数量：从 n 个到 1 个；

# 事件委派 API

设置 / 移除事件委派 delegate / undelegate

设置： $(parentSelector).delegate(childrenSelector, eventName, callback) ；
移除： (parentSelector).undelegate(eventName) ；

🌰：jQuery-example-event delegate/undelegate (codepen.io) (opens new window)

🌰图片切换：jQuery-example 图片切换 (codepen.io) (opens new window)

# jQuery 动画

	动画	描述
基本	`show()`	显示隐藏的匹配元素
	`hide()`	隐藏显示的元素
	`toggle()`	用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 `click` 事件
滑动	`slideDown()`	通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数
	`slideUp()`	通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数
	`slideToggle()`	通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数
淡入淡出	`fadeIn()`	通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数
	`fadeOut()`	通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数
	`fadeTo()`	把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数
	`fadeToggle()`	通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数
自定义	`animate()`	用于创建自定义动画的函数
	`stop()`	停止所有在指定元素上正在运行的动画
	`finish()`	停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画
	`delay()`	设置一个延时来推迟执行队列中之后的项目

# 淡入淡出效果

不断改变元素的透明度 opacity 来实现的：

fadeIn() ：带动画的显示
fadeOut() ：带动画隐藏
fadeToggle() ：带动画切英显示 / 隐藏

🌰：jQuery-example-animation fadeIn/fadeOut/fadeToggle (codepen.io) (opens new window)

# 滑动

不断改变元素的高度（ height ）实现：

slideDown() ：带动画的展开
slideUp() ：带动画的收缩
slideToggle() ：带动画的切换展开 / 收缩

🌰：jQuery-example-animation Slide (codepen.io) (opens new window)

# 显示隐藏

默认没有动画，动画（修改样式 opacity / height / width ）：

show() ：（不）带动画的显示
hide() ：（不）带动画的隐藏
toggle() ：（不）带动画的切换显示 / 隐

例子：jQuery-example-animation Show/Hide (codepen.io) (opens new window)

# jQuery

# `onload` 和 `ready` 区别

window.onload 与 $(document).ready() 区别：

window.onload

包括页面的图片加载完后才会回调（晚）；
只能有 一个监听回调；

$(document).ready()

等同于： $(function(){}) ；
页面加载完就回调（早）；
可以有 多个监听回调；

// 1.直接打印img的宽度,观察其值
console.log('直接', $('#logo').width()); // 直接 0

// 2.在$(function(){})中打印img的宽度
$(function () {
    console.log('ready', $('#logo').width()); // ready 0
});

// 3.在window.onload中打印img的宽度
window.onload = function () {
    console.log('onload', $('#logo').width()); // onload 190
};

// 4.在img加载完成后打印宽度
$('#logo').on('load', function () {
    console.log('img load', $('#logo').width()); // img load 190
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

编辑

#JavaScript #JQuery

📢 上次更新: 2022/09/02, 10:18:16

← 🗂 JSON 笔记 📐 Less 笔记→

📕 jQuery 笔记

# jQuery 基础

# 引入

# 基本语法

# jQuery 核心函数

# jQuery 核心对象

# jQuery 函数的使用

# jQuery 对象的使用

# jQuery 选择器

# 基本选择器

# 层级选择器

# 过滤选择器

# 表单选择器

# jQuery 工具方法

# jQuery 操作属性

# jQuery 操作元素样式

# jQuery 对象的过滤和查找

# 对象的过滤

# 对象的查找

# jQuery 文档处理

# jQuery 事件处理

# jQuery 事件委派

# 事件委派 API

# jQuery 动画

# 淡入淡出效果

# 滑动

# 显示隐藏

# jQuery

# onload 和 ready 区别

# `onload` 和 `ready` 区别