jquery基础知识
jQuery 基础知识
jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。以下是 jQuery 的核心概念和常用方法。
引入 jQuery
在 HTML 文件中通过 CDN 引入 jQuery：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>基本语法
jQuery 使用 $ 符号作为快捷方式，基本语法为：
$(selector).action()selector：用于选择 HTML 元素。action()：对选中元素执行的操作。
选择器
jQuery 使用 CSS 选择器语法选取元素：
$("p") // 选择所有 <p> 元素
$("#id") // 选择 id 为 "id" 的元素
$(".class") // 选择 class 为 "class" 的元素DOM 操作
-
获取或设置内容：
$("#element").text(); // 获取文本内容 $("#element").text("New text"); // 设置文本内容 $("#element").html(); // 获取 HTML 内容 $("#element").html("<b>New HTML</b>"); // 设置 HTML 内容 -
修改属性：
$("#element").attr("href"); // 获取属性 $("#element").attr("href", "https://example.com"); // 设置属性
事件处理
jQuery 简化了事件绑定：
$("#button").click(function() {
alert("Button clicked");
});
$("#input").keypress(function(event) {
console.log("Key pressed: " + event.key);
});动画效果
jQuery 提供内置动画方法：
$("#box").hide(); // 隐藏元素
$("#box").show(); // 显示元素
$("#box").toggle(); // 切换显示/隐藏
$("#box").fadeIn(); // 淡入
$("#box").fadeOut(); // 淡出
$("#box").slideUp(); // 向上滑动隐藏
$("#box").slideDown(); // 向下滑动显示Ajax 请求
jQuery 简化了 Ajax 调用：
$.ajax({
url: "https://api.example.com/data",
method: "GET",
success: function(data) {
console.log(data);
},
error: function(error) {
console.error(error);
}
});链式调用
jQuery 支持链式调用，可以在一个语句中执行多个操作：
$("#element")
.css("color", "red")
.slideUp(2000)
.slideDown(2000);遍历 DOM
jQuery 提供多种方法遍历 DOM：
$("ul li").each(function() {
console.log($(this).text());
});
$("#parent").children(); // 获取子元素
$("#child").parent(); // 获取父元素插件扩展
jQuery 支持通过插件扩展功能，例如表单验证插件 jQuery Validation：
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/jquery.validate.min.js"></script>注意事项
- jQuery 的
$(document).ready()确保代码在 DOM 加载完成后执行：$(document).ready(function() { // 代码在这里执行 }); - 简写形式：
$(function() { // 代码在这里执行 });
以上是 jQuery 的基础知识，涵盖选择器、DOM 操作、事件处理、动画和 Ajax 等核心功能。
