jQuery 常用方法详解及示例

jQuery 常用方法详解及示例

jQuery 是一个轻量级、功能强大的 JavaScript 库,简化了 DOM 操作、事件处理、动画以及 Ajax 请求。本文将介绍 jQuery 的常用方法,并附带示例代码,帮助你快速掌握 jQuery 的核心功能。


1. jQuery 选择器

1.1 基本选择器

js 复制代码
$("#id") // 通过 id 选择元素
$(".class") // 通过类名选择元素
$("tag") // 通过标签名选择元素

1.2 层级选择器

js 复制代码
$("div p") // 选择 div 内所有 p 标签
$("div > p") // 选择 div 直接子元素 p
$("div + p") // 选择紧邻 div 之后的 p

1.3 过滤选择器

js 复制代码
$("p:first") // 选择第一个 p
$("p:last") // 选择最后一个 p
$("p:even") // 选择索引为偶数的 p
$("p:odd") // 选择索引为奇数的 p

2. jQuery 操作 DOM

2.1 获取和修改内容

js 复制代码
$("#element").text("新文本") // 修改文本内容
$("#element").html("<b>加粗文本</b>") // 修改 HTML 内容
$("#input").val("新值") // 修改输入框的值

2.2 插入元素

js 复制代码
$("#container").append("<p>追加元素</p>") // 在容器内追加元素
$("#container").prepend("<p>前置元素</p>") // 在容器内前面插入元素
$("#target").after("<p>后插元素</p>") // 在目标元素后插入
$("#target").before("<p>前插元素</p>") // 在目标元素前插入

2.3 删除元素

js 复制代码
$("#element").remove() // 删除元素及子元素
$("#element").empty() // 清空元素内部内容

3. jQuery 事件处理

3.1 绑定事件

js 复制代码
$("#button").click(function() {
    alert("按钮被点击!");
});

3.2 事件委托

js 复制代码
$("#list").on("click", "li", function() {
    alert("列表项被点击!");
});

3.3 移除事件

js 复制代码
$("#button").off("click");

4. jQuery CSS 操作

4.1 获取和设置样式

js 复制代码
$("#element").css("color", "red"); // 修改颜色
var color = $("#element").css("color"); // 获取颜色

4.2 添加、删除、切换类

js 复制代码
$("#element").addClass("new-class"); // 添加类
$("#element").removeClass("old-class"); // 移除类
$("#element").toggleClass("active"); // 切换类

5. jQuery 动画效果

5.1 显示和隐藏

js 复制代码
$("#box").show(); // 显示元素
$("#box").hide(); // 隐藏元素
$("#box").toggle(); // 切换显示状态

5.2 滑动效果

js 复制代码
$("#panel").slideDown(); // 向下滑动
$("#panel").slideUp(); // 向上滑动
$("#panel").slideToggle(); // 切换滑动状态

5.3 淡入淡出

js 复制代码
$("#message").fadeIn(); // 淡入
$("#message").fadeOut(); // 淡出
$("#message").fadeToggle(); // 切换淡入淡出

6. jQuery Ajax

6.1 GET 请求

js 复制代码
$.get("data.json", function(response) {
    console.log(response);
});

6.2 POST 请求

js 复制代码
$.post("submit.php", {name: "张三"}, function(response) {
    console.log(response);
});

6.3 $.ajax 方法

js 复制代码
$.ajax({
    url: "data.json",
    type: "GET",
    success: function(response) {
        console.log(response);
    },
    error: function(error) {
        console.log("请求失败", error);
    }
});

7. jQuery 实用方法

7.1 遍历元素

js 复制代码
$("li").each(function(index, element) {
    console.log(index, $(element).text());
});

7.2 获取和设置属性

js 复制代码
$("#link").attr("href", "https://example.com");
var href = $("#link").attr("href");

7.3 数据存取

js 复制代码
$("#element").data("key", "value"); // 设置数据
var value = $("#element").data("key"); // 获取数据

8. 结论

本文介绍了 jQuery 的核心方法,包括选择器、DOM 操作、事件处理、CSS 操作、动画效果、Ajax 及实用工具方法。希望这些示例能帮助你更好地掌握 jQuery,在实际项目中灵活应用!

相关推荐
wxjlkh2 分钟前
powershell 批量测试ip 端口 脚本
java·服务器·前端
海底火旺2 分钟前
单页应用路由:从 Hash 到懒加载
前端·react.js·性能优化
每天开心2 分钟前
噜噜旅游App(3)——打造个性化用户中心:AI生成头像与交互设计
前端·前端框架
Heo3 分钟前
调用通义千问大模型实现流式对话
前端·javascript·后端
绅士玖5 分钟前
移动端自适应方案:lib-flexible + postcss-pxtorem 实践指南
前端
中微子8 分钟前
React + Vant 入门指南:轻松构建移动端应用
前端
用户40993225021238 分钟前
FastAPI的查询白名单和安全沙箱机制如何确保你的API坚不可摧?
前端·后端·github
前端小巷子1 小时前
深入 npm 模块安装机制
前端·javascript·面试
cypking2 小时前
electron中IPC 渲染进程与主进程通信方法解析
前端·javascript·electron
西陵2 小时前
Nx带来极致的前端开发体验——借助playground开发提效
前端·javascript·架构