总结：

常用的jQuery方法 - 详细解释与示例

text(): 用于获取或设置所选元素的文本内容。这是最常用的方法之一，特别是在动态更新页面内容时。

// 获取文本

var text = $("#elementId").text();

console.log(text); // 打印出元素的文本内容

// 设置文本

$("#elementId").text("新的文本内容");

// 此时，页面上的 #elementId 元素的文本内容会变为 "新的文本内容"

html(): 用于获取或设置所选元素的HTML内容。这对于更新包含HTML标签的内容非常有用。

// 获取HTML内容

var htmlContent = $("#elementId").html();

console.log(htmlContent); // 打印出元素的HTML内容

// 设置HTML内容

$("#elementId").html("<strong>新的HTML内容</strong>");

// 此时，#elementId 的内容将被替换为粗体的“新的HTML内容”

val(): 用于获取或设置表单元素的值，特别是在表单交互过程中非常有用。

// 获取表单值

var inputValue = $("#inputId").val();

console.log(inputValue); // 打印出输入框的当前值

// 设置表单值

$("#inputId").val("新值");

// 用户在 inputId 输入框中会看到值被更新为 "新值"

css(): 获取或设置CSS属性，能够动态地改变元素的样式，是实现动态交互效果的重要工具。

// 获取CSS属性

var backgroundColor = $("#elementId").css("background-color");

console.log(backgroundColor); // 打印出背景颜色属性的值

// 设置CSS属性

$("#elementId").css("background-color", "blue");

// 此时，#elementId 元素的背景颜色会变为蓝色

attr(): 获取或设置HTML元素的属性值，例如链接的href、图片的src等。

// 获取属性值

var hrefValue = $("#linkId").attr("href");

console.log(hrefValue); // 打印出链接的 href 属性值

// 设置属性值

$("#linkId").attr("href", "https://new-url.com");

// 链接的目标地址会被更新为 "https://new-url.com"

addClass(): 为元素添加一个或多个类，通常用于动态控制样式的应用。

$("#elementId").addClass("newClass anotherClass");

// 现在，#elementId 元素上会有 "newClass" 和 "anotherClass" 两个类

removeClass(): 移除元素的一个或多个类，通常与addClass()配合使用，用于动态样式切换。

$("#elementId").removeClass("oldClass anotherOldClass");

// "oldClass" 和 "anotherOldClass" 类将被从 #elementId 元素上移除

toggleClass(): 切换元素的类，即如果元素已经有该类，则移除；如果没有，则添加。适合用于开关状态的切换。

$("#elementId").toggleClass("activeClass");

// 如果 #elementId 元素当前有 "activeClass" 类，则移除它，否则添加它

事件处理拓展 - 详细解释与示例

focus(): 当元素获得焦点时触发，常用于输入框的交互。

$("#inputId").focus(function(){

$(this).css("background-color", "yellow");

});

// 当用户点击或 Tab 键进入 #inputId 输入框时，背景颜色会变为黄色

blur(): 当元素失去焦点时触发，通常用于验证用户输入。

$("#inputId").blur(function(){

$(this).css("background-color", "white");

});

// 当用户离开 #inputId 输入框时，背景颜色会恢复为白色

hover(): 当鼠标悬停在元素上时触发两个不同的函数，分别用于鼠标移入和移出。通常用于增强用户体验。

$("#elementId").hover(

function(){

$(this).css("background-color", "lightblue");

},

function(){

$(this).css("background-color", "lightgrey");

}

);

// 当鼠标进入 #elementId 元素时，背景颜色变为浅蓝色；移出时，变为浅灰色

keydown(): 当用户按下键盘按键时触发，适合处理键盘事件。

$(document).keydown(function(event){

alert("你按下了键盘上的按键: " + event.key);

});

// 当用户按下任意键时，弹出一个包含按键字符的警告框

submit(): 当表单提交时触发，通常用于在提交前进行验证或提交确认。

$("form").submit(function(){

alert("表单已提交!");

});

// 用户提交表单时，弹出提示

change(): 当表单元素的值发生变化时触发，适用于下拉菜单或单选按钮等。

$("#selectElement").change(function(){

alert("选择的值是: " + $(this).val());

});

// 当用户选择不同的选项时，弹出当前选择的值

其他拓展内容

除了这些基本功能外，jQuery还提供了一些高级功能，例如：

animate(): 用于制作复杂动画。

$("#elementId").animate({

opacity: 0.25,

left: "+=50",

height: "toggle"

}, 5000, function() {

// 动画完成后执行的回调函数

alert("动画完成");

});

// 此代码将使 #elementId 渐渐变透明，同时向右移动50px，并在5秒内切换高度

ajax(): 用于进行异步HTTP请求，可以加载数据而无需重新加载页面。

$.ajax({

url: "https://api.example.com/data",

type: "GET",

success: function(response) {

$("#elementId").html(response);

},

error: function(error) {

console.log("请求失败", error);

}

});

// 使用GET方法从指定URL加载数据，并在成功时将其显示在 #elementId 元素中

fadeIn() / fadeOut(): 处理淡入淡出效果，常用于显示或隐藏内容。

$("#elementId").fadeIn(1000); // 元素将在1秒内淡入

$("#elementId").fadeOut(1000); // 元素将在1秒内淡出

slideUp() / slideDown(): 实现滑动隐藏和显示效果。

$("#elementId").slideUp(1000); // 元素将在1秒内向上滑动隐藏

$("#elementId").slideDown(1000); // 元素将在1秒内向下滑动显示

以上就是关于【前端基础篇】JavaScript之jQuery介绍的内容啦，各位大佬有什么问题欢迎在评论区指正，您的支持是我创作的最大动力！❤️