1. 引入 jQuery
在使用 jQuery 之前，首先需要在 HTML 文件中引入 jQuery 库。可以通过 CDN 引入：
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 示例</title>
<script src="https:///jquery-3.6.0.min.js"></script>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>2. 选择器
jQuery 提供了强大的选择器功能，可以轻松地选择页面中的元素。
2.1 基本选择器
-
ID 选择器：
$("#id") -
类选择器：
$(".class") -
标签选择器：
$("tag") -
属性选择器：
$("[attribute]")和$("[attribute=value]")
html<div id="myDiv">Hello, World!</div>
<p class="myClass">This is a paragraph.</p>
<a href="https://">Link</a>
<script>
$(document).ready(function() {
$("#myDiv").css("color", "red"); // 将 ID 为 myDiv 的元素文本颜色设置为红色
$(".myClass").css("font-size", "20px"); // 将类为 myClass 的元素字体大小设置为 20px
$("p").text("This is a new paragraph text."); // 将所有 p 标签的文本内容设置为新的内容
$("[href]").css("text-decoration", "none"); // 移除所有带有 href 属性的链接的下划线
$("[href='https://']").css("color", "blue"); // 将 href 为 https:// 的链接文本颜色设置为蓝色
});
</script>2.2 层次选择器
-
后代选择器：
$("ancestor descendant") -
子选择器：
$("parent > child") -
相邻兄弟选择器：
$("prev + next") -
通用兄弟选择器：
$("prev ~ siblings")
html<div id="container">
<p class="first">First paragraph</p>
<p class="second">Second paragraph</p>
<p class="third">Third paragraph</p>
</div>
<script>
$(document).ready(function() {
$("#container p").css("color", "blue"); // 选择 container 下的所有 p 元素
$("#container > .first").css("font-weight", "bold"); // 选择 container 的直接子元素 .first
$(".first + .second").css("text-decoration", "underline"); // 选择 .first 的下一个兄弟元素 .second
$(".first ~ .third").css("background-color", "yellow"); // 选择 .first 的所有后续兄弟元素 .third
});
</script>2.3 伪类选择器
-
第一个元素：
$("selector:first") -
最后一个元素：
$("selector:last") -
偶数索引元素：
$("selector:even") -
奇数索引元素：
$("selector:odd") -
可见元素：
$("selector:visible") -
不可见元素：
$("selector:hidden")
html<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li >Item 4</li>
</ul>
<script>
$(document).ready(function() {
$("li:first").css("color", "green"); // 选择第一个 li 元素
$("li:last").css("color", "red"); // 选择最后一个 li 元素
$("li:even").css("background-color", "lightgray"); // 选择索引为偶数的 li 元素
$("li:odd").css("background-color", "lightblue"); // 选择索引为奇数的 li 元素
$("li:visible").css("font-weight", "bold"); // 选择可见的 li 元素
$("li:hidden").css("border", "1px solid red"); // 选择不可见的 li 元素
});
</script>3. 操作 DOM
jQuery 提供了丰富的 DOM 操作方法，可以轻松地修改和操作页面元素。
3.1 获取和设置属性
-
获取属性：
$("element").attr("attribute") -
设置属性：
$("element").attr("attribute", "value") -
移除属性：
$("element").removeAttr("attribute")
<a id="myLink" href="https://">Link</a>
<script>
$(document).ready(function() {
var href = $("#myLink").attr("href"); // 获取 href 属性值
console.log(href); // 输出: https://
$("#myLink").attr("href", "https://new"); // 设置 href 属性值
$("#myLink").removeAttr("href"); // 移除 href 属性
});
</script>3.2 获取和设置样式
-
获取样式：
$("element").css("property") -
设置样式：
$("element").css("property", "value") -
批量设置样式：
$("element").css({ property1: "value1", property2: "value2" })
html<div id="myDiv">Hello, World!</div>
<script>
$(document).ready(function() {
var color = $("#myDiv").css("color"); // 获取 color 属性值
console.log(color); // 输出: rgb(0, 0, 0)
$("#myDiv").css("color", "red"); // 设置 color 属性值
$("#myDiv").css({ "font-size": "20px", "background-color": "yellow" }); // 批量设置样式
});
</script>3.3 添加和删除类
-
添加类：
$("element").addClass("class") -
删除类：
$("element").removeClass("class") -
切换类：
$("element").toggleClass("class")
html<div id="myDiv" class="initial-class">Hello, World!</div>
<script>
$(document).ready(function() {
$("#myDiv").addClass("new-class"); // 添加新类
$("#myDiv").removeClass("initial-class"); // 删除初始类
$("#myDiv").toggleClass("active"); // 切换 active 类
});
</script>3.4 创建和插入元素
-
创建元素：
$(html) -
插入元素：
$("element").append(content)/$("element").prepend(content)/$("element").before(content)/$("element").after(content)
html<div id="container"></div>
<script>
$(document).ready(function() {
var newDiv = $("<div>").text("New Div").addClass("new-div"); // 创建新 div 元素
$("#container").append(newDiv); // 将新 div 插入到 container 的末尾
$("#container").prepend("<p>New Paragraph</p>"); // 将新 p 插入到 container 的开头
$("#container").before("<h1>Title</h1>"); // 在 container 前插入 h1
$("#container").after("<footer>Footer</footer>"); // 在 container 后插入 footer
});
</script>3.5 删除元素
-
删除元素：
$("element").remove() -
清空内容：
$("element").empty()
html<div id="container">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</div>
<script>
$(document).ready(function() {
$("#container").find("p").first().remove(); // 删除第一个 p 元素
$("#container").empty(); // 清空 container 的所有内容
});
</script>4. 事件处理
jQuery 提供了多种事件处理方法，可以轻松地绑定和触发事件。
4.1 常见事件
-
点击事件：
$("element").click(function() { ... }) -
鼠标悬停事件：
$("element").hover(function() { ... }, function() { ... }) -
表单提交事件：
$("form").submit(function() { ... }) -
键盘事件：
$("input").keydown(function() { ... })/$("input").keyup(function() { ... })
html<button id="myButton">Click me</button>
<div id="result"></div>
<input type="text" id="myInput">
<script>
$(document).ready(function() {
$("#myButton").click(function() {
$("#result").text("Button clicked!");
});
$("#myButton").hover(
function() {
$(this).css("background-color", "lightblue");
},
function() {
$(this).css("background-color", "");
}
);
$("#myInput").keydown(function(event) {
console.log("Key pressed: " + event.key);
});
$("#myInput").keyup(function(event) {
console.log("Key released: " + event.key);
});
});
</script>4.2 事件委托
-
事件委托：
$("staticParent").on("event", "dynamicChild", function() { ... })
html<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<button id="addButton">Add Item</button>
<script>
$(document).ready(function() {
$("#addButton").click(function() {
$("#list").append("<li>Item " + ($("#list li").length + 1) + "</li>");
});
$("#list").on("click", "li", function() {
$(this).remove();
});
});
</script>5. 动画效果
jQuery 提供了多种动画方法，可以轻松地实现元素的动画效果。
5.1 常见动画方法
-
显示/隐藏：
$("element").show(duration)/$("element").hide(duration) -
淡入/淡出：
$("element").fadeIn(duration)/$("element").fadeOut(duration) -
滑动展开/收起：
$("element").slideDown(duration)/$("element").slideUp(duration) -
自定义动画：
$("element").animate(properties, duration)
html<div id="myDiv" >Hello, World!</div>
<button id="toggleButton">Toggle</button>
<button id="animateButton">Animate</button>
<script>
$(document).ready(function() {
$("#toggleButton").click(function() {
$("#myDiv").slideToggle(500); // 切换显示和隐藏，持续时间为 500 毫秒
});
$("#animateButton").click(function() {
$("#myDiv").animate({
width: "200px",
height: "100px",
opacity: 0.5
}, 1000); // 自定义动画，持续时间为 1000 毫秒
});
});
</script>6. AJAX 调用
jQuery 简化了 AJAX 调用，使得异步数据请求变得更加容易。
6.1 常见 AJAX 方法
-
GET 请求：
$.get(url, data, callback) -
POST 请求：
$.post(url, data, callback) -
通用 AJAX 请求：
$.ajax(settings)
html<button id="ajaxButton">Fetch Data</button>
<div id="dataResult"></div>
<script>
$(document).ready(function() {
$("#ajaxButton").click(function() {
$.get("https://api./data", function(data) {
$("#dataResult").text(JSON.stringify(data));
}).fail(function() {
$("#dataResult").text("An error occurred.");
});
});
$("#ajaxButton").click(function() {
$.post("https://api./submit", { key: "value" }, function(data) {
$("#dataResult").text(JSON.stringify(data));
}).fail(function() {
$("#dataResult").text("An error occurred.");
});
});
$("#ajaxButton").click(function() {
$.ajax({
url: "https://api./data",
method: "GET",
dataType: "json",
success: function(data) {
$("#dataResult").text(JSON.stringify(data));
},
error: function() {
$("#dataResult").text("An error occurred.");
}
});
});
});
</script>结尾
通过本文的详细介绍，相信你已经对 jQuery 的常用语法有了更全面的了解。jQuery 的强大之处在于其简洁的语法和丰富的功能，能够大大提升前端开发的效率。希望本文对你有所帮助，祝你在前端开发的道路上越走越远！
