学习jQuery初级中级高级用法 | 一篇就够了

//DOM语法
let arr = document.querySelectorAll('li')

for (let i = 0; i < arr.length; i ++) {
    arr[i].onclick = function() {
        this.style.backgroundColor = '#333'
    }
}

//jQuery语法
$('li').click(function() {
    $(this).css('backgroundColor','#333')
})

二、学习前的准备

2.1 第一步：下包

我们需要把jQuery文件下载到本地

官网地址：jQueryhttps://jquery.com/

官方中文文档：

jQuery API 中文文档 | jQuery 中文网 (jquery123.com)https://www.jquery123.com/

接下来我们点击：Download jQuery

这里有两个版本，第一个是压缩的，第二个没压缩

我们选择第二个文件进行下载学习（因为源码清晰结构工整方便学习）：单击点开，CTRL + S保存文件。

如果要上线一个项目的话，我推荐大家选择第一个min版的压缩文件

2.2 第二步：导包

在需要使用jQuery的页面中导入下载好的jQuery文件

2.2.1 语法

<script src="./jQuery-3.6.1.js"></script> 
<!-- 其中src属性里面填写jQuery文件所在位置-->

2.2.2 测试导入是否成功

<script>
        console.log($)
</script>

在浏览器打开F12如果和下图一样返回了一个函数，说明导入成功：

以上我们的准备工作已经完成了，接下来我们开始正式的学习吧！

三、jQuery基本用法

3.1 jQuery选择器

jQuery中通过选择器来获取DOM节点，功能类似于原生的querySelectorAll方法，其所支持的选择器于CSS的选择器几乎一致。

3.1.1 语法

//语法
$('选择器')

3.1.2模拟面试

提问：这个''$''表示的是什么呢？

其实这个''$''就是我们在测试导入是否成功的地方console.log打印出来的函数，简单来说他就是个函数。

3.2 jQuery对象

jQuery中利用选择器获取到的并非是原生的DOM对象，而是jQuery对象。

3.2.1示例代码

//利用jQuery 获取p标签 改变背景颜色为红色
$('p').css('backgroundColor','red')

//DOM 获取P标签 改变背景颜色为 红色
document.querySelector('p').style.backgroundColor = 'red'

注意：jQuery对象和DOM对象的语法不能混用哦！

3.2.2 语法

//选择器获取
   $('选择器')
//dom对象转换
   $(dom对象)

3.2.3 模拟面试

提问:jQuery对象的方法，比如CSS方法放在什么位置？

答：原型

提问：调用$方法传入选择器或DOM元素获取到的是什么对象？

答：jQuery对象

3.3 事件绑定

在jQuery中以原生事件类型的名称为依据，封装了相应的事件处理方法。

3.3.1 语法

$('选择器').事件名(function () {
    // 逻辑 ...
})

3.3.2 举例：

$('div').dblclick(function () {
    console.log(1)
})

注意：

1、事件名开头不需要写on

2、回调函数中的this就是触发时间的dom元素

3.4 链式编程

链式编程就是通过"."把多个操作（方法）连续的写下去，形成和链子一样的结构。

3.4.1 语法

$('.text').focus(function () {
    console.log('获取焦点')
})
$('.text').blur(function () {
    console.log('失去焦点')
})

也可以这样写哦

$('.text')
    .focus(function () {
        console.log('获取焦点')
    })
    .blur(function () {
        console.log('失去焦点')
    })

更简单的写法是这样的：

$('.text').focus(回调函数).blur(回调函数).change(回调函数)

3.5 内容操纵

jQuery中封装了设置和读取网页元素文本内容的方法。

3.5.1 语法

//设置
$('选择器').html('内容')
$('选择器').text('内容')
//读取
$('选择器').html()
$('选择器').text()

设置时：html方法解析标签，text不解析标签。

取值时：html方法获取标签，text只获取文本。

3.5.2 模拟面试

提问：设置和读取哪一个支持链式编程？

答：设置

3.6 过滤方法

jQuery中封装了过滤方法，它可以对jQuery对象中的DOM元素再次筛选

3.6.1 语法

//匹配的第一个元素 相当于 first-child
.first()
//匹配的最后一个元素 相当于 last-child
.last()
//根据索引匹配元素
.eq(索引号)

注意：

1.eq方法的索引是从0开始的

2.他们三个方法返回的都是jQuery对象

3.6.2 示例

$('li')
 .first()
 .css('backgroundColor','red')

$('li')
 .last()
 .css('backgroundColor','blue')

$('li')
 .eq(1)
 .css('backgroundColor','red')

3.7 样式操纵

jQuery 中对样式的操纵进行封装，可以设置或者获取样式

3.7.1 语法

以下展示了两种表达方式，具体使用哪一种要根据公司的要求咯

// 1.键值对设置
.css('样式名','值')

.css('color','red')
.css('width','200px')
.css('height','200')

// 2.对象方式设置
.css(对象)

.css({
 backgroundColor:'red',
 color:'pink',
 width:'200px',
 height:'200',
})

注意：数值类的样式省略单位，默认会使用px。

3.7.2 示例

$('li').css('backgroundColor','pink')

$('li')
 .css({
    backgroundColor:'pink',
    border:'10px solid yellowgreen',
    width:'200px',
    height: 200,
})

3.8 属性操纵

jQuery 中对属性的操作进行封装，可以设置、获取和删除属性

大家可能忘记了属性是什么呢？我来给大家回顾一下吧！

3.8.1 回顾

<a href="http://www.baidu.com/">百度</a>
<img src="111.jpg" info="你是最帅的(最美的)，给个三连不过分吧哈哈哈哈"/>

其中 href、src、info都是属性，不管是原生的，还是自定义的都可以哦！

3.8.2 语法

// 1.赋值
.attr('属性名','值')

// 2.取值
.attr('属性名')

// 3.删除属性
.removeAttr('属性名')

3.8.3 示例

$('a').attr('href','http://www.baidu.com/')

3.9 操纵value

jQuery中封装了操纵表单元素value属性的方法，可以取值和赋值。

3.9.1 语法

// 1.赋值
.val('参数')

// 2.取值
.val()

3.9.2 示例

// 1.赋值
$('.text').val('来个三连加关注！')

// 2.取值
$('.text').blur(function () {
 let value = $(this).val()
 console.log(value)
}

3.10 查找方法

jQuery中封装了查找元素的方法，可以基于元素的结构关系查找新的元素。

3.10.1 语法

// 1.父元素
.parent()

// 2.子元素
.children()

// 3.兄弟元素
.siblings()

// 4.后代元素
.find('选择器')

注意：

1.find方法需要传入选择器

2.children、siblings 方法支持传入选择器

3.10.2 示例

// 1.父元素

$('li').parent().css('backgroundColor','pink')

// 2.子元素

$('li').children().css('backgroundColor','pink')
$('li').children('.jbc').css('backgroundColor','pink')

// 3. 兄弟元素

$('li').siblings().css('backgroundColor','pink')
$('li').siblings('.jbc').css('backgroundColor','pink')

// 4.后代选择器

$('li').find('jbc').css('backgroundColor','pink')

3.11 操纵类名

jQuery中封装了为网页元素添加、移除、检测、切换类名的方法。

3.11.1 语法

// 1.添加类名
.addClass('类名')

// 2.移除类名
.removeClass('类名')

// 3.判断类名 返回布尔值
.hasClass('类名')

// 4.切换类名
.toggleClass('类名')

3.11.2 示例

$('.add').click(function() {
    $('.text').addClass('active')
})

$('.add').click(function() {
    $('.text').removeClass('active')
})

$('.add').click(function() {
    let res = $('.text').hasClass('active')
})

$('.add').click(function() {
    $('.text').toggleClass('active')
})

4. jQuery进阶

4.1 事件进阶

jQuery中封装了更为灵活的 on/off 、one方法处理DOM事件

4.1.1 语法

// 1.注册事件
.on('事件名', function() {
})

// 2.移除指定事件
.off('事件名')

// 3.移除所有事件
.off()

// 4.注册一次性事件
.one('事件名', function(){
})

注意：

on, one方法回调函数中的this是触发事件的DOM元素

4.1.2 示例

$('.text').on('click',function(){
    console.log(1)
})

$('.text').off('click')

$('.text').off()

$('.text').one('click',function(){
    console.log(1)
})

4.2 事件触发

jQuery中如何通过代码的方式触发绑定的事件呢？

4.2.1 语法

// 1.直接触发
.事件名()

// 2.trigger触发
.trigger('事件名')

// 3.触发自定义事件
.trigger('自定义事件')

// 4.注册自定义事件
.on('自定义事件', function() {
})

注：自定义事件是一种进阶用法，目前了解使用方法即可

4.3 window事件绑定

使用jQuery为window对象绑定事件

4.3.1 语法

// 滚动
$(window).scroll(function(){
})

// 点击
$(window).click(function(){
})

4.4 获取位置

通过jQuery直接获取元素的位置

4.4.1 语法

// 取值
$('选择器').offset()

// 取值
$('选择器').position()

// 返回值
{top: 126, left: 58}

注意：

1.他们之间参照物不同

1）offset参照html标签

2）position参照离他最近有定位的祖先元素

2.margin

1）offset会把外边距margin计算进去

2）position以外边距margin为边界，不计算margin

4.5 滚动距离

通过jQuery获取元素的滚动距离

// 取值
$('选择器').scrollLeft()
$('选择器').scrollTop()

// 赋值
$('选择器').scrollLeft(值)
$('选择器').scrollTop(值)

五、jQuery基本动画

5.1 显示和隐藏动画

通过jQuery以动画的方式切换元素的显示和隐藏

5.1.1 语法

// 显示
$('选择器').show()
//隐藏
$('选择器').hide()
//显示&隐藏
$('选择器').toggle()   //如果显示，调用toggle就会隐藏；如果隐藏，调用toggle就会显示

其中show、hide、toggle可以加一个持续多长时间的参数，例如：

$('.text').show(1000) //毫秒为单位

5.2 淡入&淡出动画

通过jQuery以淡入&淡出的方式切换元素的显示隐藏

5.2.1 语法

// 淡入
$('选择器').fadeIn()
// 淡出
$('选择器').fadeOut()
// 淡入&淡出
$('选择器').fadeToggle()

基本用法与上述5.1的用法基本一致，也可以加参数哦！

5.3 展开&收起动画

通过jQuery以展开（高度增大-显示）&收起（高度减小-隐藏）的方式切换元素的显示隐藏

5.3.1 语法

//展开
$('选择器').slideDown()
//收起
$('选择器').slideUp()
//展开或收起
$('选择器').slideToggle()

用法与上面的动画方法一样哦。可加参数。

5.4 动画队列及停止方法

通过jQuery为元素设置的多个动画会依次添加到动画队列中，并根据添加的顺序依次播放。

5.4.1 语法

// 停止当前动画
$('选择器').stop()
// 清空队列 在动画当前状态停止
$('选择器').stop(true)
// 清空队列 直接到当前动画的结束状态
$('选择器').stop(true, true)

动画方法和stop方法返回的是同一个jQuery对象

5.5 自定义动画

jQuery提供了animate方法来实现更复杂的动画效果

5.5.1 语法

$('选择器').animate(动画属性)

数值类样式支持动画，支持多个

默认单位是px

支持非样式的特殊属性

持续时间的单位是毫秒

举个例子：

$('选择器').animate({
    width: 100,
    height: '100%'
    margin: '100px'
    ...
})

$('选择器').animate({
    scrollTop: 100,
    scrollLeft: 100
})

5.6 插入节点

jQuery中封装了指定位置动态插入元素节点的方法，可以插入节点或者改变节点位置。

5.6.1 语法

//4个方法参数一样  位置不同
$('父元素选择器').append(参数)    //插入到父元素结尾
$('父元素选择器').prepend(参数)    //插入到父元素开头
$('兄弟元素选择器').before(参数)    //插入到兄弟元素前面
$('兄弟元素选择器').after(参数)    //插入到兄弟元素后面

插入节点：传入创建的DOM元素或者html结构

改变位置：传入现有的DOM元素或者jQuery对象

5.7 动画的回调函数

所有的jQuery动画方法都支持传入回调函数

5.7.1 语法

$('选择器').基础动画方法(回调函数)
$('选择器').基础动画方法(持续时间, 回调函数)
$('选择器').animate(属性, 回调函数)
$('选择器').animate(属性, 持续时间，回调函数)

回调函数会在动画执行完毕时立刻执行。

回调函数中的this是执行动画的DOM元素

5.8 动画的延迟方法

jQuery不仅可以设置动画执行的速度，还能在动画执行前设置一定的延时

5.8.1 语法

$('选择器').delay(延迟时间).动画方法()
$('选择器').delay(延迟时间).动画方法().delay(延迟时间).动画方法()

注意：延迟时间的单位是毫秒。

5.9 获取元素尺寸

5.9.1 语法

$().width()    //获取内容宽度
$().height()    //获取内容高度
$().innnerWidth()    //获取内容宽度+内边距
$().innnerHeight()    //获取内容高度+内边距
$().outerWidth()    //获取内容宽度+内边距+边框
$().outerHeight()    //获取内容高度+内边距+边框
$().outerWidth(true)    //获取内容宽度+内边距+边框+外边距
$().outerHeight(true)    //获取内容高度+内边距+边框+外边距

六、jQuery事件

6.1 事件参数

jQuery绑定的事件中可以获取时间参数（事件对象），用法和原生js完全一致

6.1.1 语法

$('选择器').事件(function(event){
    event.stopPropagation() //阻止冒泡
})

注意：不需要考虑兼容性，因为jQuery已经处理好时间参数的兼容性。

6.2 删除节点

jQuery中封装了动态删除元素节点的方法remove（）。

6.2.1 语法

jQuery对象.remove()

remove方法删除的是调用方法的元素节点。

6.2.2 示例

// 删除自己
$('.remove').click(function() {
    $(this).remove()
})

//删除父元素
$('.remove').click(function() {
    $(this).parent().remove()
})

6.3 事件委托

直接通过on方法即可使用

6.3.1 语法

//直接绑定
$('选择器').on('事件名',function(){})
//事件委托
$('祖先选择器').on('事件名','后代选择器',function(){})

作用：

1.可以减少事件注册。

2.可以解决动态增加后代元素的事件绑定问题。

七、入口函数

7.1入口函数原生写法

window.onload = function(){}

7.2jQuery写法

$(window).on('load',function(){})

7.3jQuery中的ready写法

//完整写法
$(document).ready(dunction(){})
//简化写法
$(function(){})

DOM载入完毕就会执行。

八、懒加载

jQuery的懒加载插件lazyload

8.1什么是懒加载

比如：图片用到了再去加载，常见于有大量图片的网页，比如电商网页。

8.2lazyload插件

8.2.1 下包

下载地址：

Lazy Load 中文网 | Javascript延迟加载（LazyLoad.js）图像插件 (lazyloadjs.cn)

8.2.2 导包

先导入jQuery，再导入插件，导入CSS（具体看需求）

<!--先导入jQuery-->
<script src="./jQuery/jQuery-3.6.1.js"></script>
<!--再导入lazyload插件-->
<script src="./assets/jQuery.lazyload.min.js"></script>

8.2.3 用包

根据文档使用

举例：

<!--图片懒加载-->
<img class="lazyload" data-original="./images/1.jpg" alt="" />

//找到希望懒加载的图片并调用lazyload方法
$('.lazyload').lazyload()

九、jQuery更多与用法提交事件submit

利用submit事件阻止默认行为，自己获取数据并提交

9.1提交事件submit

利用submit事件阻止默认行为，自己获取数据并提交

9.1.1 语法

$('form').submit(function(event){
    event.preventDefault()
    //或者
    return false
})

9.2 克隆

9.2.1 语法

// 不带事件
.clone()
// 带事件
.clone(true)

方法返回的还是jQuery对象

传入true事件也会一起克隆

9.3 获取DOM对象

9.3.1 语法

//1.利用trigger触发
$('video').trigger('play')

//2.get方法获取
.get(索引)

//3.中括号获取
[索引]

索引从0开始，索引号表示用哪个对象x，索引号就是index[x] - 1。（因为下标从0开始计数）

获取到的是DOM对象

9.3.2 示例

let $btn = $('button')
console.log($btn)
let sBtn = $btn.get(1)
console.log(Btn)



let pBtn = $btn[0]

9.4 表单序列化

序列化可以快速获取表单数据。

9.4.1 语法

$('form').serialize()

表单元素要有name属性才可以获取到value

获取到的数据格式是 name1 = value1&name2 = value2&.....的字符串

十、版本差异

1.x：兼容低版本的IE，最后一个版本是1.12.4

2.x：不兼容低版本IE，不更新了

3.x：不兼容低版本IE，在更新

Sumpon

关注

11
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
8
评论
学习jQuery初级中级高级用法 | 一篇就够了

本篇文章可以带你快速上手jQuery，本文包括jQuery各种常用以及初中高级用法，为后续学习可以做好铺垫，知识点非常全面。
复制链接

扫一扫

专栏目录