共计 5039 个字符，预计需要花费 13 分钟才能阅读完成。
引言 ： jQuery 是一个轻量级的 JavaScript 库，自 2006 年发布以来，它迅速成为 Web 开发中不可或缺的工具。它通过 提供简洁的语法和强大的功能 ，简化了 HTML 文档操作、事件处理、动画效果以及 AJAX 请求 的实现。jQuery 允许开发者以更少的代码实现复杂的任务，提升开发效率。此外，jQuery 还具备良好的跨浏览器兼容性，使得开发者无需关注不同浏览器间的差异，能够专注于构建更好的用户体验。无论是初学者还是经验丰富的开发者，jQuery 都是实现现代 Web 应用的强大助手。
因为使用 jQuery 需要引入 jQuery 的 js 文件，所以大家需要下载 jQuery 相应的 js 文件
下载步骤：
jQuery 官网：jQuery
点击显示下面的网页，然后 使用快捷键 ctrl+ s 进行保存到文件夹中，就可以在 vscode 上直接使用了（我下的就是 3.7.1 版本的）
jQuery 的使用：
1. 对象：
1.1jQuery 包装级对象：
jquery
输出语句如下图所示：
1.2jQuery 包装级对象和 dom 对象之间的转换
// DOM 对象转 jQuery 对象
var domDiv = document.querySelector('#mydiv')
mydiv = $(domDiv)
// jQuery 转 DOM 对象
var div = $('mydiv')
var dom = div[0]2. 选择器：
2.1 基础选择器
1. 元素选择器 元素名
2. 类选择器 . 类名
3. id 选择器 #id 名
4. 通用选择器 *
5. 混合选择器 选择器 1，选择器 2
！- – 这个是标准的使用 jQuery 的框架，下面再书写代码时外面的 js 引入以及 script 元素将会省略 – –！
id
class
元素名
p
// id 选择器
let idiv = $('#idiv')
// 类选择器
let cdiv = $('.cdiv')
// 元素选择器
let div = $('div')
// 通用选择器
let divAll = $('*')
// 混合选择器
let divSome = $('div,p')
console.log(idiv)
console.log(cdiv)
console.log(div)
console.log(divAll)
console.log(divSome)以下是输出语句
关于第四个，通用选择器有 12 个：
html head meta meta title body div#idiv div.cdiv div p script script
2.2 层次选择器
1. 后代选择器(父元素 指定元素)
2. 子选择器(父元素> 指定元素)
3. 相邻选择器(父元素 + 指定元素)
4. 同辈选择器(父元素~ 指定元素)
子选择器
![]()
![]()
let div1 = $('#parent div')
console.log(div1)
let div2 = $('#parent>div')
console.log(div2)
let div3 = $('#child>img')
console.log(div3)
let div4 = $('img+img')
console.log(div4)
2.3 表单选择器：
// 表单选择器：input，会匹配所有的 input textarea select button 元素
let input = $(':input')
console.log(input)
3. 操作元素：
3.1 操作元素的属性;
获取属性
(
元素分类
固有属性：元素本身有的属性 id,name,class，style
返回值是 boolean 类型的属性 (checked,selected,disabled)
自定义属性 用户自己定义的属性
)
attr(‘ 属性名 ’) 获取的是属性值 没有属性值就是 undefined
prop(‘ 属性名 ’) 对于固有属性获得的是属性值，对于 boolean 类型获得 true 和 false, 本可获得 prop()
设置属性
移除属性
获取元素的属性
// 固有属性
let name = $('#aa').attr('name')
console.log(name) //box
//boolean 属性
let check1 = $('#aa').attr('checked') //checked
let check2 = $('#aa').prop('checked') //true
let check3 = $('#bb').attr('checked') //undefined
let check4 = $('#bb').prop('checked') //false
// 自定义属性
let aaa1 = $('#aa').attr('abc') //aaa
let aaa2 = $('#aa').prop('abc') //undefined设置元素属性
// 设置属性 value 是固有属性
$("#aa").attr('value', '1')
$("#bb").prop('value', '2')
// 设置 boolean 属性
$("#bb").attr('checked', '') // 让第二个选框也被选中
$("#bb").prop('checked', false) // 设置第二个选框的属性值为 false 不被选中
// 自定义属性 prop 不可设置
$("#aa").attr('uname', 'admin') // 设置 uname='admin'
$("#aa").prop('uname1', 'admin1')3.2 获取元素样式
attr(‘class’) 获取元素的样式名
attr(‘class’, ‘ 样式名 ’) 设置元素的样式
addClass(‘ 样式名 ’) 添加样式 在原来基础上添加样式
css() 添加具体样式 (行内样式) css(‘ 样式名 ’,’ 样式值 ’) 设置单个样式 css({‘ 样式名 ’:’ 样式值 ’,’ 样式名 ’:’ 样式值 ’})设置多个
removeClass(‘ 样式名 ’) 移除样式
css()方法设置
蓝色
红色
无色 .blue {
width: 100px;
height: 100px;
background-color: blue;
}
.red {
width: 100px;
height: 100px;
background-color: red;
}
.green {
width: 100px;
height: 100px;
background-color: green;
}let a1 = $("#1").attr("class") //blue
// 设置元素属性(如果之前有那么 class 属性就替换, 没有就添加)
$("#1").attr('class', 'red')
$("#3").attr('class', 'green')
// 添加样式 后面的 css 会覆盖上面的 css 样式，显示后面的 css 样式(覆盖不替换)
$("#1").addClass('green')
// 通过 css 添加样式
$("h3").css('font-size', '20px')
$("h3").css('color', 'blue')
// 删除 class 属性
$("#1").removeClass('green')3.3 操作元素内容
html() 获取元素内容 包括 HTML 标签 非表单标签
html(‘ 内容 ’) 设置元素内容 包括 HTML 标签 非表单标签
text() 获得元素的纯文本内容，不包括 HTML 标签(非表单元素)
text(‘ 内容 ’) 设置元素的纯文本内容，不包括 HTML 标签(非表单元素)
val() 获取元素的值(表单元素)
val(‘ 值 ’) 设置元素的值(表单元素)
表单元素：text, password, radio, checkbox, 隐藏寓 hidden, textarea, select
html()和 text()方法设置元素内容
// 设置元素
$("#html1").html('年后') // 页面显示年后
$("#html2").html('年后') // 年后
// 获得元素
let a1 = $("#html1").html() //年后
let a2 = $("#html2").html() // 年后
// 设置元素
$("#text1").text('上海
') // 页面中显示 上海
$("#text2").text('上海') // 上海
// 获得元素
let b1 = $("#text1").text() //上海
let b2 = $("#text2").text() // 上海
let val1 = $("#o").val()
console.log(val1) //0
let val2 = $("#o").val("你好")
console.log(val2.val()) // 你好下面为浏览器中显示的内容
4. 删除元素
删除元素
remove()
删除元素及其子元素 标签内容一起删除
empty()
清空元素内容，保留标签
删除元素
1
2
1
2 $('.blue').remove()
$('.green').empty()5. 遍历内容：
通过使用 each（）方法遍历内容
1
2
3
4$('.green').each(function (index, element) {console.log(index)
console.log(element)
console.log($(element))
console.log($(this))
})6. 事件：
6.1 加载事件：
ready 加载事件
当页面中的 dom 结构加载完毕后执行
类似 js 中的 load 事件
加载事件的语法：
语法
$(document).ready(function () {})
简写
$(function () {})文本
$(document).ready(function () {console.log($('#p1'))
})
6.2 绑定事件：
基础语法：
$(selector).bind(eventType, eventData, handler)
—————————————————————-
eventType：要绑定的事件类型，例如 ‘click’、’mouseover’、’resize’ 等。
eventData：可选参数，传递给事件处理器的额外数据。
handler：事件发生时要执行的函数。
绑定单个事件 — 1. 直接绑定 2.bind 绑定
绑定多个事件（不常用(大家理解即可)）
为多个事件绑定同一个函数
指定元素.bind(‘ 事件类型 1, 事件类型 2, 事件类型 3 ’, function () {})
1. 指定元素.bind(‘ 事件类型 ’, function () {
}).bind(‘ 事件类型 ’, function () {
})
2 指定元素.bind({
‘ 事件类型 ’: function () {}, ‘ 事件类型 ’: function () {}
})
// bind()绑定
$('#myButton').bind('click', function () {console.log('按钮被点击了！');
});
// 直接绑定
$('#myButton').click(function () {console.log('按钮被点击了！');
})
7.ajax
jQuery 调用 ajax 方法：
格式：$.ajax({})
参数：type: 请求方式 GET/POST
url 请求地址
async 是否异步
data 发送红岛服务器的数据
dataType 预期服务器返回的数据类型
contentType 设置请求头
succes 请求成功调用此函数
error 请求失败后调用此函数
$.ajax({
url: 'https://api.example.com/data', // 请求的 URL
type: 'GET', // 请求类型（GET 或 POST）dataType: 'json', // 预期服务器返回的数据类型
success: function(data) {console.log('成功:', data);
},
error: function(jqXHR, textStatus, errorThrown) {console.error('请求失败:', textStatus, errorThrown);
}
});
输出如下：
jQuery 分享到这里基本解释了，感谢大家的观看！
原文地址: 【前端】-jQuery（带你让你深入了解学习使用 jQuery）
