html jquery
HTML 与 jQuery 基础
HTML 是构建网页结构的标记语言，而 jQuery 是一个快速、简洁的 JavaScript 库，用于简化 HTML 文档遍历、事件处理、动画和 Ajax 交互。
在 HTML 中引入 jQuery
从 CDN 引入 jQuery：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>或者下载本地文件引入：
<script src="jquery-3.6.0.min.js"></script>jQuery 基础语法
jQuery 使用 $ 符号作为简写，基本语法为：
$(selector).action()selector用于查询 HTML 元素action()是对元素执行的操作
常见 jQuery 方法
选择元素
$("p") // 选择所有 <p> 元素
$("#test") // 选择 id="test" 的元素
$(".test") // 选择 class="test" 的元素修改内容
$("#test").text("Hello World") // 设置文本内容
$("#test").html("<b>Hello</b>") // 设置 HTML 内容
$("#test").val("Doe") // 设置表单字段的值修改 CSS
$("p").css("color", "red") // 修改颜色
$("p").addClass("important") // 添加类
$("p").removeClass("important") // 移除类事件处理
$("button").click(function() {
alert("Button clicked")
})动画效果
$("#box").hide() // 隐藏元素
$("#box").show() // 显示元素
$("#box").toggle() // 切换显示/隐藏
$("#box").fadeOut() // 淡出
$("#box").fadeIn() // 淡入Ajax 请求
使用 jQuery 发起 Ajax 请求：
$.ajax({
url: "test.html",
success: function(result) {
$("#div1").html(result)
}
})DOM 操作
遍历 DOM
$("div").parent() // 获取父元素
$("div").children() // 获取所有子元素
$("div").siblings() // 获取兄弟元素创建/添加元素
$("body").append("<p>新段落</p>") // 在末尾添加
$("body").prepend("<p>新段落</p>") // 在开头添加
$("p").after("<div>新内容</div>") // 之后插入
$("p").before("<div>新内容</div>") // 之前插入实用技巧
链式调用
$("#p1").css("color", "red").slideUp(2000).slideDown(2000)延迟执行
$(document).ready(function() {
// 文档加载完成后执行的代码
})简写形式
$(function() {
// 等同于 $(document).ready()
})注意事项
- 确保在 jQuery 代码之前加载 jQuery 库
- 选择器尽量具体以提高性能
- 避免在循环中频繁操作 DOM
- 考虑使用事件委托处理动态添加的元素
替代方案
虽然 jQuery 仍然广泛使用，但现代浏览器已原生支持许多 jQuery 功能。对于新项目，可以考虑使用原生 JavaScript 或现代框架如 React、Vue 等。
