jQuery 常用方法详解及示例
jQuery 是一个快速、简洁的 JavaScript 库，它极大地简化了 HTML 文档操作、事件处理、动画效果以及 AJAX 交互。本文将详细介绍 jQuery 的一些常用方法，并通过示例说明它们的使用方法。
1. 基本选择器和过滤方法
$(selector)
用于选择 DOM 元素。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器示例</title>
</head>
<body>
<p>段落 1</p>
<p>段落 2</p>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("p").css("color", "blue"); // 选择所有段落，并将其文本颜色设置为蓝色
});
</script>
</body>
</html>
filter(selector)
筛选出与选择器匹配的元素。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>filter 示例</title>
</head>
<body>
<p>段落 1</p>
<p class="selected">段落 2</p>
<p>段落 3</p>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("p").filter(".selected").css("color", "red"); // 选择具有 'selected' 类的段落，并将其文本颜色设置为红色
});
</script>
</body>
</html>
not(selector)
移除与选择器匹配的元素。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>not 示例</title>
</head>
<body>
<p>段落 1</p>
<p class="exclude">段落 2</p>
<p>段落 3</p>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("p").not(".exclude").css("color", "green"); // 选择不具有 'exclude' 类的段落，并将其文本颜色设置为绿色
});
</script>
</body>
</html>
eq(index)
选择具有指定索引值的元素。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>eq 示例</title>
</head>
<body>
<p>段落 1</p>
<p>段落 2</p>
<p>段落 3</p>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("p").eq(1).css("color", "purple"); // 选择第二个段落，并将其文本颜色设置为紫色
});
</script>
</body>
</html>
2. 操作 DOM 元素
html(content)
获取或设置元素的 HTML 内容。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html 示例</title>
</head>
<body>
<div id="content">原始内容</div>
<button id="changeContent">更改内容</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#changeContent").click(function() {
$("#content").html("<p>新的内容</p>"); // 设置新的 HTML 内容
});
});
</script>
</body>
</html>
text(content)
获取或设置元素的文本内容。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text 示例</title>
</head>
<body>
<div id="content">原始内容</div>
<button id="changeContent">更改内容</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#changeContent").click(function() {
$("#content").text("新的文本内容"); // 设置新的文本内容
});
});
</script>
</body>
</html>
attr(attributeName, value)
获取或设置元素的属性。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>attr 示例</title>
</head>
<body>
<img id="image" src="original.jpg" alt="Original Image">
<button id="changeImage">更改图像</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#changeImage").click(function() {
$("#image").attr("src", "new.jpg"); // 更改图像的 src 属性
});
});
</script>
</body>
</html>
removeAttr(attributeName)
移除元素的属性。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>removeAttr 示例</title>
</head>
<body>
<img id="image" src="image.jpg" alt="Image" title="Sample Image">
<button id="removeTitle">移除标题</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#removeTitle").click(function() {
$("#image").removeAttr("title"); // 移除图像的 title 属性
});
});
</script>
</body>
</html>
addClass(className)
为元素添加一个或多个类。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>addClass 示例</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<p id="paragraph">这是一个段落。</p>
<button id="highlightBtn">高亮段落</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#highlightBtn").click(function() {
$("#paragraph").addClass("highlight"); // 添加 'highlight' 类
});
});
</script>
</body>
</html>
removeClass(className)
移除元素的一个或多个类。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>removeClass 示例</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<p id="paragraph" class="highlight">这是一个段落。</p>
<button id="removeHighlightBtn">移除高亮</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#removeHighlightBtn").click(function() {
$("#paragraph").removeClass("highlight"); // 移除 'highlight' 类
});
});
</script>
</body>
</html>
toggleClass(className)
切换元素的一个或多个类。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>toggleClass 示例</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<p id="paragraph">这是一个段落。</p>
<button id="toggleHighlightBtn">切换高亮</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#toggleHighlightBtn").click(function() {
$("#paragraph").toggleClass("highlight"); // 切换 'highlight' 类
});
});
</script>
</body>
</html>
val(value)
获取或设置表单元素的值。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>val 示例</title>
</head>
<body>
<input type="text" id="textInput" value="原始值">
<button id="changeValueBtn">更改值</button>
<button id="getValueBtn">获取值</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#changeValueBtn").click(function() {
$("#textInput").val("新值"); // 设置新值
});
$("#getValueBtn").click(function() {
alert($("#textInput").val()); // 获取值并弹出
});
});
</script>
</body>
</html>
3. 样式和 CSS
css(propertyName, value)
获取或设置元素的 CSS 属性。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css 示例</title>
</head>
<body>
<p id="paragraph">这是一个段落。</p>
<button id="changeColorBtn">更改颜色</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#changeColorBtn").click(function() {
$("#paragraph").css("color", "red"); // 设置颜色为红色
});
});
</script>
</body>
</html>
height(value)
获取或设置元素的高度。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>height 示例</title>
</head>
<body>
<div id="box" style="background-color: lightblue; width: 100px; height: 100px;"></div>
<button id="changeHeightBtn">更改高度</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#changeHeightBtn").click(function() {
$("#box").height(200); // 设置高度为 200 像素
});
});
</script>
</body>
</html>
width(value)
获取或设置元素的宽度。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>width 示例</title>
</head>
<body>
<div id="box" style="background-color: lightblue; width: 100px; height: 100px;"></div>
<button id="changeWidthBtn">更改宽度</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#changeWidthBtn").click(function() {
$("#box").width(200); // 设置宽度为 200 像素
});
});
</script>
</body>
</html>
show()
显示匹配的元素。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>show 示例</title>
</head>
<body>
<p id="paragraph" style="display: none;">这是一个段落。</p>
<button id="showBtn">显示段落</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#showBtn").click(function() {
$("#paragraph").show(); // 显示段落
});
});
</script>
</body>
</html>
hide()
隐藏匹配的元素。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hide 示例</title>
</head>
<body>
<p id="paragraph">这是一个段落。</p>
<button id="hideBtn">隐藏段落</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#hideBtn").click(function() {
$("#paragraph").hide(); // 隐藏段落
});
});
</script>
</body>
</html>
toggle()
切换元素的显示状态。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>toggle 示例</title>
</head>
<body>
<p id="paragraph">这是一个段落。</p>
<button id="toggleBtn">切换段落显示状态</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#toggleBtn").click(function() {
$("#paragraph").toggle(); // 切换段落的显示状态
});
});
</script>
</body>
</html>
4. 事件处理
on(event, selector, handler)
为元素及其子元素绑定事件处理程序。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>on 示例</title>
</head>
<body>
<button class="btn">按钮 1</button>
<button class="btn">按钮 2</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$(".btn").on("click", function() {
alert("按钮被点击！"); // 绑定点击事件
});
});
</script>
</body>
</html>
off(event, selector, handler)
移除事件处理程序。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>off 示例</title>
</head>
<body>
<button class="btn">按钮 1</button>
<button class="btn">按钮 2</button>
<button id="removeEventBtn">移除事件</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
function alertMessage() {
alert("按钮被点击！");
}
$(".btn").on("click", alertMessage); // 绑定点击事件
$("#removeEventBtn").click(function() {
$(".btn").off("click", alertMessage); // 移除点击事件
});
});
</script>
</body>
</html>
click(handler)
绑定点击事件处理程序。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>click 示例</title>
</head>
<body>
<button id="clickBtn">点击我</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#clickBtn").click(function() {
alert("按钮被点击！"); // 绑定点击事件
});
});
</script>
</body>
</html>
dblclick(handler)
绑定双击事件处理程序。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dblclick 示例</title>
</head>
<body>
<button id="dblclickBtn">双击我</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#dblclickBtn").dblclick(function() {
alert("按钮被双击！"); // 绑定双击事件
});
});
</script>
</body>
</html>
hover(handlerIn, handlerOut)
绑定鼠标悬停事件处理程序。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hover 示例</title>
<style>
#hoverBox {
width: 100px;
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div id="hoverBox"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#hoverBox").hover(
function() {
$(this).css("background-color", "yellow
"); // 鼠标悬停时
},
function() {
$(this).css("background-color", "lightblue"); // 鼠标移开时
}
);
});
</script>
</body>
</html>
focus(handler)
绑定聚焦事件处理程序。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>focus 示例</title>
</head>
<body>
<input type="text" id="textInput" value="聚焦我">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#textInput").focus(function() {
$(this).css("background-color", "yellow"); // 聚焦时改变背景颜色
});
});
</script>
</body>
</html>
blur(handler)
绑定失焦事件处理程序。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>blur 示例</title>
</head>
<body>
<input type="text" id="textInput" value="失焦我">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#textInput").blur(function() {
$(this).css("background-color", "lightblue"); // 失焦时改变背景颜色
});
});
</script>
</body>
</html>
5. 动画效果
animate(properties, duration, easing, complete)
用于创建自定义动画。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animate 示例</title>
<style>
#box {
width: 100px;
height: 100px;
background-color: lightblue;
position: relative;
}
</style>
</head>
<body>
<div id="box"></div>
<button id="animateBtn">开始动画</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#animateBtn").click(function() {
$("#box").animate({
left: "200px",
height: "200px"
}, 1000); // 创建自定义动画，动画时间为 1000 毫秒
});
});
</script>
</body>
</html>
fadeIn(duration, complete)
淡入效果。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fadeIn 示例</title>
<style>
#box {
width: 100px;
height: 100px;
background-color: lightblue;
display: none;
}
</style>
</head>
<body>
<div id="box"></div>
<button id="fadeInBtn">淡入显示</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#fadeInBtn").click(function() {
$("#box").fadeIn(1000); // 淡入显示，动画时间为 1000 毫秒
});
});
</script>
</body>
</html>
fadeOut(duration, complete)
淡出效果。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fadeOut 示例</title>
<style>
#box {
width: 100px;
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div id="box"></div>
<button id="fadeOutBtn">淡出隐藏</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#fadeOutBtn").click(function() {
$("#box").fadeOut(1000); // 淡出隐藏，动画时间为 1000 毫秒
});
});
</script>
</body>
</html>
fadeToggle(duration, complete)
淡入或淡出效果的切换。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fadeToggle 示例</title>
<style>
#box {
width: 100px;
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div id="box"></div>
<button id="fadeToggleBtn">切换淡入淡出</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#fadeToggleBtn").click(function() {
$("#box").fadeToggle(1000); // 切换淡入或淡出效果，动画时间为 1000 毫秒
});
});
</script>
</body>
</html>
slideDown(duration, complete)
向下滑动显示元素。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>slideDown 示例</title>
<style>
#box {
width: 100px;
height: 100px;
background-color: lightblue;
display: none;
}
</style>
</head>
<body>
<div id="box"></div>
<button id="slideDownBtn">向下滑动显示</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#slideDownBtn").click(function() {
$("#box").slideDown(1000); // 向下滑动显示，动画时间为 1000 毫秒
});
});
</script>
</body>
</html>
slideUp(duration, complete)
向上滑动隐藏元素。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>slideUp 示例</title>
<style>
#box {
width: 100px;
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div id="box"></div>
<button id="slideUpBtn">向上滑动隐藏</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#slideUpBtn").click(function() {
$("#box").slideUp(1000); // 向上滑动隐藏，动画时间为 1000 毫秒
});
});
</script>
</body>
</html>
slideToggle(duration, complete)
向下或向上滑动显示或隐藏元素。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>slideToggle 示例</title>
<style>
#box {
width: 100px;
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div id="box"></div>
<button id="slideToggleBtn">切换滑动显示隐藏</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#slideToggleBtn").click(function() {
$("#box").slideToggle(1000); // 切换滑动显示或隐藏效果，动画时间为 1000 毫秒
});
});
</script>
</body>
</html>
6. AJAX
$.ajax(options)
执行 AJAX 请求。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$.ajax 示例</title>
</head>
<body>
<button id="loadDataBtn">加载数据</button>
<div id="dataContainer"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#loadDataBtn").click(function() {
$.ajax({
url: "data.json", // 数据源 URL
method: "GET",
dataType: "json",
success: function(data) {
$("#dataContainer").html(JSON.stringify(data)); // 显示数据
},
error: function() {
alert("加载数据失败！");
}
});
});
});
</script>
</body>
</html>
$.get(url, data, success)
使用 HTTP GET 请求从服务器加载数据。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$.get 示例</title>
</head>
<body>
<button id="loadDataBtn">加载数据</button>
<div id="dataContainer"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#loadDataBtn").click(function() {
$.get("data.json", function(data) {
$("#dataContainer").html(JSON.stringify(data)); // 显示数据
}).fail(function() {
alert("加载数据失败！");
});
});
});
</script>
</body>
</html>
$.post(url, data, success)
使用 HTTP POST 请求向服务器发送数据并获取响应。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$.post 示例</title>
</head>
<body>
<form id="myForm">
<input type="text" name="name" placeholder="姓名">
<input type="email" name="email" placeholder="电子邮件">
<button type="submit">提交</button>
</form>
<div id="responseContainer"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#myForm").submit(function(event) {
event.preventDefault(); // 阻止表单默认提交行为
$.post("submit.php", $(this).serialize(), function(response) {
$("#responseContainer").html(response); // 显示响应
}).fail(function() {
alert("提交数据失败！");
});
});
});
</script>
</body>
</html>
$.getJSON(url, data, success)
使用 HTTP GET 请求从服务器加载 JSON 编码的数据。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$.getJSON 示例</title>
</head>
<body>
<button id="loadDataBtn">加载数据</button>
<div id="dataContainer"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#loadDataBtn").click(function() {
$.getJSON("data.json", function(data) {
$("#dataContainer").html(JSON.stringify(data)); // 显示数据
}).fail(function() {
alert("加载数据失败！");
});
});
});
</script>
</body>
</html>
$.getScript(url, success)
使用 HTTP GET 请求加载并执行 JavaScript 文件。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$.getScript 示例</title>
</head>
<body>
<button id="loadScriptBtn">加载脚本</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#loadScriptBtn").click(function() {
$.getScript("script.js", function() {
alert("脚本加载并执行成功！");
}).fail(function() {
alert("加载脚本失败！");
});
});
});
</script>
</body>
</html>
这些是 jQuery 提供的一些常用方法。通过这些方法，你可以更方便地操作 DOM 元素、处理事件、创建动画效果以及与服务器进行交互。掌握这些方法将极大提高你的前端开发效率。
465
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
