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 >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 >First paragraph</p>
<p >Second paragraph</p>
<p >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" >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 的强大之处在于其简洁的语法和丰富的功能,能够大大提升前端开发的效率。希望本文对你有所帮助,祝你在前端开发的道路上越走越远!