Document

## 前言之前一直没有学过JQuery，因为在Vue、React等框架下我们不会直接操作DOM，但如果我们需要直接和DOM打交道，JQuery就是一把不错的瑞士军刀。JQuery是一个轻量级的JavaScript库，封装了大量函数和方法，简化JS的操作，比如DOM操作、事件处理、动画设计和Ajax交互等。 ## 如何引入JQuery 我们可以从官方网站下载最新的3.x版本[JQuery的官方网站](https://jquery.com/)，不过在学习阶段可以通过CDN来引入 [BootCDN](https://www.bootcdn.cn/jquery/),就像这样： ```html Document ``` ## JQuery的顶级对象引入JQuery之后我们就可以使用`$()`的方式来使用JQuery，`$`实际上是`JQuery`的别名，`JQuery`本质是一个函数，通过传入的参数类型不同实现不同的功能，同时`JQuery`也是一个对象，上面挂载了很多方法。比如如果`$()`传入了一个函数，则表示定义了一个`DomContentLoaded`事件处理函数，通常我们会将逻辑写在函数里面以保证DOM能够正常获取。 ```html ``` ## JQuery对象和DOM对象在使用JQuery进行DOM操作时，我们拿到的不是原生的DOM对象，而是封装之后的JQuery对象，这个对象是一个伪数组，里面包裹着DOM对象，因为JQuery要兼容获取一个或者多个DOM对象的情况，于是就用伪数组对象包裹了起来。比如我们看这个例子： ```html

``` ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/732fb134bfbb4ed893dda16c2b3c142f~tplv-k3u1fbpfcp-watermark.image) 我们获取`li`标签元素，获取了三个DOM对象，这三个对象被封装在伪数组形式的JQuery对象中。 ### DOM对象转换为JQuery对象由于DOM对象和JQuery对象两者所能够使用的方法不同，所以有时候我们需要互相进行转换。DOM对象转JQuery对象比较简单，只要`$(DOM对象)`就可以，比如下面这个例子： ```html

``` ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6f8e964e4c79497498f3c652c4115b48~tplv-k3u1fbpfcp-watermark.image) ### JQuery对象转DOM对象 JQuery对象是一个伪数组，数组的每一个元素就是原生的DOM对象，所以我们只需要通过索引就可以获取到DOM对象，主要有两种方式`[index]`或者`get(index)`，比如下面这个例子： ```html

``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/277cfa2febec4c2da9638a8e8d4c62e4~tplv-k3u1fbpfcp-watermark.image) ## JQuery获取DOM JQuery最典型的功能就是方便的DOM操作，要想实现DOM操作首先就要获取DOM，JQuery获取DOM的方式和`document.querySelector()`类似，都是通过CSS选择器进行获取，但JQuery在此基础上又额外扩充了一些选择器和方法便于我们选择DOM元素，我们往下看。 ### CSS选择器获取DOM元素最直接的方式就是`$('css选择器')`，比如下面这个例子： ```html

``` ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5100787b4813404ba36b06042501a893~tplv-k3u1fbpfcp-watermark.image) ## JQuery样式操作 JQuery对样式的操作封装了原生DOM里对style和class的操作，但使用起来更加方便。 ### 获取CSS样式我们可以通过`$('selector').css('attr')`获取到元素的样式，比如下面这个例子： ```html

``` ### 设置CSS样式我们可以通过`$('selector').css('attr', value)`来设置元素样式，还可以通过`$('selector').css({attr1: value1, attr2: value2})`来设置多个样式，比如下面这个例子： ```html

``` ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/41913659564b492eb87216e6eccd2aae~tplv-k3u1fbpfcp-watermark.image) ### 通过类(Class)操作样式一般我们不会直接在DOM中写样式，而是在CSS写好样式后通过切换类名来实现样式的切换，JQuery提供了三种方法操作Class，包含如下： - `$('selector').addClass('class')` 添加类 - `$('selector').removeClass('class')` 删除类 - `$('selector').toggleClass('class')` 切换类我们举个例子： ```html

``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3af1ec21e5b74066935cd71c3210741b~tplv-k3u1fbpfcp-watermark.image) ## 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])` 切换我们看个例子： ```html

``` ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2a3baab65ea14cf2ba1062c03c12761c~tplv-k3u1fbpfcp-watermark.image) ### 滑动效果滑动效果指元素向上收起或向下展开，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: 和上面相同我们举个例子： ```html

``` ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a66c71f14fad45fcabe694e5cdd5cd4a~tplv-k3u1fbpfcp-watermark.image) ## 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对应的就是上述两种获取属性的方式，我们举个例子： ```html

``` ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/85e198e9b905400e8ae7a0d8c6bc250b~tplv-k3u1fbpfcp-watermark.image) 所以一般来说，我们获取内置属性时使用prop，获取自定义属性时使用attr，不过在设置属性上这俩没什么区别。 ### data方法 data方法有两个功能，一个是设置和获取缓存数据，另一个是获取`data-*`格式的自定义属性，我们看个例子： ```html

``` ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fef67a59acdb4f9f90076b9dca65f0e8~tplv-k3u1fbpfcp-watermark.image) ## 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 我们看个例子： ```html

hello jquery

``` ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e758c5e4711d4da3a2f16d741c7144aa~tplv-k3u1fbpfcp-watermark.image) ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8b92fe56ae974c30a2bdfc60086a88ce~tplv-k3u1fbpfcp-watermark.image) ## JQuery元素操作接下来我们聊聊如何在JQuery中遍历、创建、添加和删除元素。 ### 遍历元素前面聊过，JQuery对象是一个伪数组，对JQuery对象的所有操作都会**隐式迭代**到每一个DOM元素上，不过这种迭代是对所有DOM做相同的操作，如果我们想对每个DOM做不同的操作，那么就需要自己进行遍历，JQuery提供了两种方法实现遍历操作，包含如下： - `$('selector').each(function(index, domEle) {})` 遍历选中的DOM元素 - `$.each(object, function(key, value) {})` 可以遍历任意对象，包括JQuery对象、数组以及普通对象我们举个例子： ```html

``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9cb8a7fe23ce4a65bd3ca15925f34104~tplv-k3u1fbpfcp-watermark.image) ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c7f1815bf30741bab590e85a462a9c92~tplv-k3u1fbpfcp-watermark.image) ### 创建添加删除元素在原生DOM中，我们通过`document.createElement()`创建元素，再通过`appendChild()`等方法添加到DOM树中，JQuery也类似，但更简洁，主要提供了如下API： - `$('

新元素

')` 创建一个元素只需要将标签字符串传入即可，这里的标签字符串可以嵌套多层，比如`$(

新元素

)`多嵌套一层`span`也是可以的。 - `$('selector').append(el)` 将元素添加至内部结尾处 - `$('selector').prepend(el)` 将元素添加至内部开始处 - `$('selector').after(el)` 将元素添加至选中元素后面 - `$('selector').before(el)` 将元素添加至选中元素前面 - `$('selector').remove()` 删除选中元素 - `$('selector').empty()` 删除选中元素的所有子元素 - `$('selector').html("")` 删除选中元素的所有子元素，和empty()相同我们举个例子： ```html

inner current element

``` ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3d707359926343b09f506511a5034798~tplv-k3u1fbpfcp-watermark.image) ## 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')` 解除事件委托我们举个例子： ```html

``` ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1bc09716e356401eb8265d6cec2989cf~tplv-k3u1fbpfcp-watermark.image) ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0c6e4167a0544384bc1a0a3b430d9260~tplv-k3u1fbpfcp-watermark.image) ### 触发事件事件绑定之后通常要等待浏览器捕获到事件后才会执行函数，但有时候我们想要在代码中手动触发事件，JQuery为我们提供了一些API，包含如下： - `$('selector').click()` 触发相应的事件 - `$('selector').trigger('click')` 触发指定的事件 - `$('selector').triggerHandler('click')` 触发指定的事件,但会阻止默认行为我们举个例子： ```html

``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2a17882fba584be08f65891b471d6bbd~tplv-k3u1fbpfcp-watermark.image) ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/00a8bfd2618241f3858d4f5a0206f367~tplv-k3u1fbpfcp-watermark.image) ## 尾声 JQuery的主要内容就介绍到这里，基本上掌握这些就够日常使用了。虽然这篇文章花了整整一天时间才完成，不过这个过程还是非常有收获的，还是那句话**输出倒逼输入**，希望本文能对你有所帮助。