🌈个人主页：前端青山
🔥系列专栏：JavaScript篇
🔖人终将被年少不可得之物困其一生
依旧青山,本期给大家带来JavaScript篇专栏内容:jquery语法
前言
jQuery 是一个快速、小巧且功能丰富的库，它极大地简化了 JavaScript 编程。通过 jQuery，你可以轻松地操作 DOM、处理事件、执行动画和进行 AJAX 调用。本文将详细介绍一些常用的 jQuery 语法，并通过示例代码帮助你更好地理解和应用这些语法。
目录
前言
1. 引入 jQuery
2. 选择器
2.1 基本选择器
2.2 层次选择器
2.3 伪类选择器
3. 操作 DOM
3.1 获取和设置属性
3.2 获取和设置样式
3.3 添加和删除类
3.4 创建和插入元素
3.5 删除元素
4. 事件处理
4.1 常见事件
4.2 事件委托
5. 动画效果
5.1 常见动画方法
6. AJAX 调用
6.1 常见 AJAX 方法
结尾
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://code.jquery.com/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://example.com">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://example.com']").css("color", "blue"); // 将 href 为 https://example.com 的链接文本颜色设置为蓝色
});
</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 style="display: none;">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://example.com">Link</a>
<script>
$(document).ready(function() {
var href = $("#myLink").attr("href"); // 获取 href 属性值
console.log(href); // 输出: https://example.com
$("#myLink").attr("href", "https://newexample.com"); // 设置 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" style="display: none;">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.example.com/data", function(data) {
$("#dataResult").text(JSON.stringify(data));
}).fail(function() {
$("#dataResult").text("An error occurred.");
});
});
$("#ajaxButton").click(function() {
$.post("https://api.example.com/submit", { key: "value" }, function(data) {
$("#dataResult").text(JSON.stringify(data));
}).fail(function() {
$("#dataResult").text("An error occurred.");
});
});
$("#ajaxButton").click(function() {
$.ajax({
url: "https://api.example.com/data",
method: "GET",
dataType: "json",
success: function(data) {
$("#dataResult").text(JSON.stringify(data));
},
error: function() {
$("#dataResult").text("An error occurred.");
}
});
});
});
</script>结尾
通过本文的详细介绍，相信你已经对 jQuery 的常用语法有了更全面的了解。jQuery 的强大之处在于其简洁的语法和丰富的功能，能够大大提升前端开发的效率。希望本文对你有所帮助，祝你在前端开发的道路上越走越远！
