前言
之前一直没有学过JQuery，因为在Vue、React等框架下我们不会直接操作DOM，但如果我们需要直接和DOM打交道，JQuery就是一把不错的瑞士军刀。JQuery是一个轻量级的JavaScript库，封装了大量函数和方法，简化JS的操作，比如DOM操作、事件处理、动画设计和Ajax交互等。
如何引入JQuery
我们可以从官方网站下载最新的3.x版本JQuery的官方网站，不过在学习阶段可以通过CDN来引入 BootCDN,就像这样：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Document</title>
</head>
<body></body>
</html>
JQuery的顶级对象
引入JQuery之后我们就可以使用$()的方式来使用JQuery，$实际上是JQuery的别名，JQuery本质是一个函数，通过传入的参数类型不同实现不同的功能，同时JQuery也是一个对象，上面挂载了很多方法。
比如如果$()传入了一个函数，则表示定义了一个DomContentLoaded事件处理函数，通常我们会将逻辑写在函数里面以保证DOM能够正常获取。
<body>
<script>
// $是JQuery的别名
$(function () {
console.log('DomContentLoaded');
});
jQuery(function () {
console.log('DomContentLoaded');
});
</script>
</body>
JQuery对象和DOM对象
在使用JQuery进行DOM操作时，我们拿到的不是原生的DOM对象，而是封装之后的JQuery对象，这个对象是一个伪数组，里面包裹着DOM对象，因为JQuery要兼容获取一个或者多个DOM对象的情况，于是就用伪数组对象包裹了起来。比如我们看这个例子：
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
console.dir($('ul li'));
</script>
</body>
我们获取li标签元素，获取了三个DOM对象，这三个对象被封装在伪数组形式的JQuery对象中。
DOM对象转换为JQuery对象
由于DOM对象和JQuery对象两者所能够使用的方法不同，所以有时候我们需要互相进行转换。DOM对象转JQuery对象比较简单，只要$(DOM对象)就可以，比如下面这个例子：
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
let ul = document.querySelector('ul');
console.dir(ul);
console.dir($(ul));
</script>
</body>
JQuery对象转DOM对象
JQuery对象是一个伪数组，数组的每一个元素就是原生的DOM对象，所以我们只需要通过索引就可以获取到DOM对象， 主要有两种方式[index]或者get(index)，比如下面这个例子：
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
console.dir($('ul li')[0]);
console.dir($('ul li').get(0));
</script>
</body>
JQuery获取DOM
JQuery最典型的功能就是方便的DOM操作，要想实现DOM操作首先就要获取DOM，JQuery获取DOM的方式和document.querySelector()类似，都是通过CSS选择器进行获取，但JQuery在此基础上又额外扩充了一些选择器和方法便于我们选择DOM元素，我们往下看。
CSS选择器
获取DOM元素最直接的方式就是$('css选择器')，比如下面这个例子：
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
$('ul'); // 获取ul元素
$('ul li'); // 获取ul下面的li元素
</script>
</body>
这里列出常用的一些CSS选择器：
| 名称 | 用法 | 描述 |
|---|---|---|
| ID选择器 | $('#id') | 获取指定ID的元素 |
| 类选择器 | $('.class') | 获取同一类class的所有元素 |
| 全选择器 | $('*') | 获取所有元素 |
| 标签选择器 | $('div') | 获取同一类标签的所有元素 |
| 并集选择器 | $('div,p,li') | 获取多个元素 |
| 交集选择器 | $('div.header') | 同时满足多个条件的交集元素 |
| 子代选择器 | $('ul>li') | 获取直接后代元素，特指儿子元素 |
| 后代选择器 | $('ul li') | 获取所有后代元素，包括孙子、重孙子等所有后代元素 |
隐式迭代
JQuery对象是一个伪数组，当我们对该对象使用方法时，默认会作用于所有DOM元素上，这就是隐式迭代。比如下面这个例子：
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
$('ul li').css('color', 'red');
</script>
</body>
筛选选择器
JQuery在CSS选择器基础上扩充了一些选择器，这些选择器只能在JQuery中使用，主要如下：
| 语法 | 用法 | 描述 |
|---|---|---|
| :first | $('li:first') | 获取第一个li元素 |
| :last | $('li:last') | 获取最后一个li元素 |
| :eq(index) | $('li:eq(2)') | 获取索引为2的li元素，索引从0开始 |
| :odd | $('li:odd') | 获取索引号为奇数的元素 |
| :even | $('li:even') | 获取索引号为偶数的元素 |
我们看一个例子：
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
$('ul li:first').css('color', 'red');
$('ul li:last').css('color', 'blue');
$('ul li:eq(1)').css('color', 'green');
</script>
</body>
这些选择器和CSS中的结构选择器相似，正常使用就可以了，但要记住这些选择器不能用在CSS里，只能用于JQuery。
筛选方法
除了选择器之外，JQuery还提供了一些筛选方法，主要如下：
| 语法 | 用法 | 描述 |
|---|---|---|
| parent() | $('li').parent() | 查找父级 |
| children(selector) | $('ul').children('li') | 获取直接后代元素，相当于$('ul>li') |
| find(selector) | $('ul').find('li') | 获取所有后代元素，相当于$('ul li') |
| siblings(selector) | $('li.first').siblings('li') | 查找兄弟节点，不包括自己 |
| nextAll([selector]) | $('li.first').nextAll() | 查找当前元素后面的兄弟节点，选择器可选 |
| prevtAll([selector]) | $('li.first').prevtAll() | 查找当前元素前面的兄弟节点，选择器可选 |
| hasClass(class) | $('div').hasClass('protected') | 判断当前元素是否包含特定的类，如果包含则返回true |
| eq(index) | $('li').eq(2) | 选择指定索引的元素，同$('li:eq(2)') |
我们看一个例子：
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
$('li:first').parent().css('border', '1px solid green');
$('ul').children().css('color', 'red');
$('li').eq(1).siblings().css('backgroundColor', '#ccc');
</script>
</body>
JQuery样式操作
JQuery对样式的操作封装了原生DOM里对style和class的操作，但使用起来更加方便。
获取CSS样式
我们可以通过$('selector').css('attr')获取到元素的样式，比如下面这个例子：
<body>
<ul>
<li style="color: red">1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
console.log($('li:first').css('color'));
</script>
</body>
设置CSS样式
我们可以通过$('selector').css('attr', value)来设置元素样式，还可以通过$('selector').css({attr1: value1, attr2: value2})来设置多个样式，比如下面这个例子：
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
$('li:first').css('color', 'red');
$('ul').css({
border: 'solid 1px green',
listStyle: 'none', // JQuery可以识别驼峰命名的样式
});
</script>
</body>
通过类(Class)操作样式
一般我们不会直接在DOM中写样式，而是在CSS写好样式后通过切换类名来实现样式的切换，JQuery提供了三种方法操作Class，包含如下：
$('selector').addClass('class')添加类$('selector').removeClass('class')删除类$('selector').toggleClass('class')切换类
我们举个例子：
<head>
<style>
.current {
color: red;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li class="current">3</li>
</ul>
<script>
$('li:first').addClass('current');
$('li:last').removeClass('current');
$('li:last').click(function () {
$(this).toggleClass('current'); // 点击时切换current类，如果存在就删除，不存在就添加
});
</script>
</body>
JQuery动画
JQuery提供了一组动画(效果）API，不过在简单场景下更推荐使用CSS动画，只有在动画比较复杂且需要运用到流程控制的时候才推荐JS动画。
显示隐藏
显示或隐藏元素是一个常用的效果，JQuery提供了三个API，包含如下：
$('selector').show([speed],[easing],[fn])显示- speed: 表示速度，可选项为'slow'/'normal'/'fast'/毫秒值，比如1000
- easing: 表示缓动函数，比如先快后慢，可选项'swing'/'linear'，默认'swing'（慢快慢）
- fn: 动画执行完毕的回调函数
$('selector').hide([speed],[easing],[fn])隐藏$('selector').toggle([speed],[easing],[fn])切换
我们看个例子：
</head>
<style>
.menu {
display: none;
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div>
<button class="show">show</button>
<button class="hide">hide</button>
<button class="toggle">toggle</button>
<div class="menu"></div>
</div>
<script>
$('.show').click(function () {
$('.menu').show(1000, function () {
console.log('menu is shown');
});
});
$('.hide').click(function () {
$('.menu').hide(1000, function () {
console.log('menu is hidden');
});
});
$('.toggle').click(function () {
$('.menu').toggle(1000, function () {
console.log('menu is toggled');
});
});
</script>
</body>
滑动效果
滑动效果指元素向上收起或向下展开，JQuery也提供了三个API，包含如下：
$('selector').slideDown([speed],[easing],[fn])向下展开- speed: 表示速度，可选项为'slow'/'normal'/'fast'/毫秒值，比如1000
- easing: 表示缓动函数，比如先快后慢，可选项'swing'/'linear'，默认'swing'（慢快慢）
- fn: 动画执行完毕的回调函数
$('selector').slideUp([speed],[easing],[fn])向上收起$('selector').slideToggle([speed],[easing],[fn])切换
使用上和显示隐藏差不多，就不再举例。
淡入淡出
淡入淡出指元素透明度上的变化，JQuery提供了四个API，包含如下：
$('selector').fadeIn([speed],[easing],[fn])向下展开- speed: 表示速度，可选项为'slow'/'normal'/'fast'/毫秒值，比如1000
- easing: 表示缓动函数，比如先快后慢，可选项'swing'/'linear'，默认'swing'（慢快慢）
- fn: 动画执行完毕的回调函数
$('selector').fadeOut([speed],[easing],[fn])向上收起$('selector').fadeToggle([speed],[easing],[fn])切换$('selector').fadeTo(speed, opacity, [easing],[fn])淡入至指定透明度- opacity: 表示透明度，取0-1之间的数字，speed和opacity必填
自定义动画
JQuery允许我们自定义动画，本质就是设置想要变化的CSS样式，有点类似CSS中的transition过渡动画，只有一个API，如下：
$('selector').animate(styles,[speed],[easing],[fn])- styles: 要变化的CSS样式名称，以对象的形式传递
- speed/easing/fn: 和上面相同
我们举个例子：
<head>
<style>
.menu {
position: absolute;
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div>
<button class="animate">animate</button>
<div class="menu"></div>
</div>
<script>
$('.animate').click(function () {
$('.menu').animate(
{
left: '500px',
},
500
);
});
</script>
</body>
JQuery属性操作
通常我们需要获取或设置DOM元素里的属性值，比如表单里的value等，JQuery提供了三组API来实现这个操作，包含如下：
$('selector').prop('prop')获取内置属性$('selector').prop('prop', value)设置内置属性$('selector').attr('attr')获取自定义属性$('selector').attr('attr', value)设置自定义属性$('selector').data('attr')获取JQuery缓存数据或者H5中提倡的data-*自定义属性，比如data-index只需要写data(index)即可$('selector').data('attr', value)在特定的DOM元素上缓存数据，作为一个对象属性挂载在DOM上，不在标签中显示
prop和attr
我们首先对比一下prop和attr的区别。在原生DOM操作中，属性操作也有两种方式，一种是通过dom.attr操作，另一种通过dom.getAttribute()/dom.setAttribute()操作，这两者在大部分情况下是一样的，但有两个特例：
- style属性: 当我们通过
element.style获取属性时，得到的是CSSStyleDeclaration对象，而通过element.getAttribute('style')获取属性时，得到的是类似background-color: red的字符串 - 事件处理器: 当我们通过
element.onclick获取属性时，得到的是ƒ onclick(event)函数对象，而通过element.getAttribute('onclick')获取属性时，得到的是类似console.log('click');的字符串
JQuery中的prop和attr对应的就是上述两种获取属性的方式，我们举个例子：
<body>
<div>
<button class="animate" onclick="console.log('click');">animate</button>
<div style="background-color: red" class="menu"></div>
</div>
<script>
console.dir($('.menu').prop('style'));
console.dir($('.animate').prop('onclick'));
console.dir($('.menu').attr('style'));
console.dir($('.animate').attr('onclick'));
</script>
</body>
所以一般来说，我们获取内置属性时使用prop，获取自定义属性时使用attr，不过在设置属性上这俩没什么区别。
data方法
data方法有两个功能，一个是设置和获取缓存数据，另一个是获取data-*格式的自定义属性，我们看个例子：
<body>
<div>
<button class="animate" data-age="14">animate</button>
<div style="background-color: red" class="menu"></div>
</div>
<script>
$('.animate').data('myName', 'zhangsan');
console.dir($('.animate').data('myName'));
console.dir($('.animate').data('age'));
</script>
</body>
JQuery内容操作
在原生DOM中，我们可以设置innerHTML、innerText以及表单中的value，这些统称为内容操作。JQuery提供了三组API实现这些操作，包含如下：
$('selector').html()获取innerHTML$('selector').html('html')设置innerHTML$('selector').text()获取innerText$('selector').text('text')设置innerText$('selector').val()获取表单元素的value$('selector').val(value)设置表单元素的value
我们看个例子：
<body>
<div>
<div class="html"><span>hello jquery</span></div>
<div class="text">hello jquery</div>
<input class="val" value="hello jquery" />
</div>
<script>
console.log($('.html').html());
$('.html').html('<span>123</span>');
console.log($('.text').text());
$('.text').text('<span>123</span>');
console.log($('.val').val());
$('.val').val('123');
</script>
</body>
JQuery元素操作
接下来我们聊聊如何在JQuery中遍历、创建、添加和删除元素。
遍历元素
前面聊过，JQuery对象是一个伪数组，对JQuery对象的所有操作都会隐式迭代到每一个DOM元素上，不过这种迭代是对所有DOM做相同的操作，如果我们想对每个DOM做不同的操作，那么就需要自己进行遍历，JQuery提供了两种方法实现遍历操作，包含如下：
$('selector').each(function(index, domEle) {})遍历选中的DOM元素$.each(object, function(key, value) {})可以遍历任意对象，包括JQuery对象、数组以及普通对象
我们举个例子：
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
let color = ['red', 'green', 'blue'];
let fontSize = ['20px', '30px', '40px'];
$('ul li').each(function (index, domEle) {
$(domEle).css('color', color[index]);
});
$.each($('ul li'), function (index, domEle) {
$(domEle).css('fontSize', fontSize[index]);
});
$.each([1, 2, 3], function (index, value) {
console.log(index, value);
});
$.each({ name: 'zhangsan', age: 20 }, function (key, value) {
console.log(key, value);
});
</script>
</body>
创建添加删除元素
在原生DOM中，我们通过document.createElement()创建元素，再通过appendChild()等方法添加到DOM树中，JQuery也类似，但更简洁，主要提供了如下API：
$('<div>新元素</div>')创建一个元素只需要将标签字符串传入即可，这里的标签字符串可以嵌套多层，比如$(<div><span>新元素</span></div>)多嵌套一层span也是可以的。$('selector').append(el)将元素添加至内部结尾处$('selector').prepend(el)将元素添加至内部开始处$('selector').after(el)将元素添加至选中元素后面$('selector').before(el)将元素添加至选中元素前面$('selector').remove()删除选中元素$('selector').empty()删除选中元素的所有子元素$('selector').html("")删除选中元素的所有子元素，和empty()相同
我们举个例子：
<body>
<div class="container">
<div>inner current element</div>
</div>
<div class="trash">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div class="footer">footer</div>
<script>
let first = $('<div>inner first element</div>');
let last = $('<div>inner last element</div>');
let before = $('<div>outer before element</div>');
let after = $('<div>outer after element</div>');
$('.container').append(last);
$('.container').prepend(first);
$('.container').after(after);
$('.container').before(before);
$('.trash').empty();
$('.footer').remove();
</script>
</body>
JQuery事件操作
绑定事件
在原生DOM中，事件绑定一般有两种方法，一种是通过DOM对象的onxxx属性，另一种是通过dom.addEventListener()方法，JQuery在后者的基础上封装了更加方便的API，包含如下：
$('selector').click(function(){})定义单个事件$('selector').on({mouseenter: function(){}, mouseleave: function(){}})定义多个不同的事件$('selector').on('mouseenter mouseleave', function(){})如果多个事件的处理函数一样，就可以将事件名写在一起，用空格分隔$('selector').on('click', 'selector', function(){})实现事件委托，比如$('ul').on('click', 'li', function(){})中事件绑定在ul上面，但只有当触发对象是li元素时才会执行$('selector').one('click', function(){})one和on功能相同，但只会执行一次$('selector').off()解除所有事件$('selector').off('click')解除某个事件，如果有多个事件也可以写在一起用空格分隔$('selector').off('click', 'selector')解除事件委托
我们举个例子：
<body>
<div class="container">
<button class="btn">close</button>
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<script>
$('.list').on({
mouseover: function () {
console.log('list mouseover');
},
mouseout: function () {
console.log('list mouseout');
},
});
$('.btn').click(function () {
$('.list').off();
console.log('list event is closed');
});
</script>
</body>
触发事件
事件绑定之后通常要等待浏览器捕获到事件后才会执行函数，但有时候我们想要在代码中手动触发事件，JQuery为我们提供了一些API，包含如下：
$('selector').click()触发相应的事件$('selector').trigger('click')触发指定的事件$('selector').triggerHandler('click')触发指定的事件,但会阻止默认行为
我们举个例子：
<body>
<div class="container">
<button class="btn">button</button>
<input type="text" />
</div>
<script>
$('.btn').click(function () {
console.log('button click');
});
$('input').focus(function () {
$(this).val('content');
});
$('.btn').click();
$('.btn').trigger('click');
$('input').triggerHandler('focus');
</script>
</body>
尾声
JQuery的主要内容就介绍到这里，基本上掌握这些就够日常使用了。虽然这篇文章花了整整一天时间才完成，不过这个过程还是非常有收获的，还是那句话输出倒逼输入，希望本文能对你有所帮助。
