html jquery
HTML 与 jQuery 基础
jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。以下是一些常见的使用场景和示例。
引入 jQuery
在 HTML 文件中引入 jQuery 可以通过 CDN 或本地文件。推荐使用 CDN 方式：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>选择器
jQuery 使用 CSS 选择器来选取元素：
// 选取所有段落元素
$("p")
// 选取 ID 为 "myId" 的元素
$("#myId")
// 选取类为 "myClass" 的元素
$(".myClass")事件处理
jQuery 简化了事件绑定：
// 点击事件
$("#myButton").click(function() {
alert("按钮被点击");
});
// 鼠标悬停事件
$("#myElement").hover(
function() {
$(this).css("background-color", "yellow");
},
function() {
$(this).css("background-color", "");
}
);DOM 操作
jQuery 提供了丰富的 DOM 操作方法：
// 修改元素内容
$("#myElement").html("新内容");
// 修改元素属性
$("#myImage").attr("src", "new-image.jpg");
// 添加类
$("#myElement").addClass("highlight");
// 移除类
$("#myElement").removeClass("highlight");动画效果
jQuery 内置了多种动画效果：
// 隐藏元素
$("#myElement").hide();
// 显示元素
$("#myElement").show();
// 淡入淡出
$("#myElement").fadeIn();
$("#myElement").fadeOut();
// 滑动效果
$("#myElement").slideUp();
$("#myElement").slideDown();Ajax 请求
jQuery 简化了 Ajax 请求：
$.ajax({
url: "https://api.example.com/data",
method: "GET",
success: function(response) {
console.log(response);
},
error: function(error) {
console.error(error);
}
});链式调用
jQuery 支持链式调用：
$("#myElement")
.css("color", "red")
.slideUp(200)
.slideDown(200);动态添加元素
可以动态添加或移除元素：
// 添加元素
$("#myList").append("<li>新项目</li>");
// 移除元素
$("#myList li").last().remove();遍历元素
jQuery 提供了遍历 DOM 的方法：
$("li").each(function(index) {
console.log(index + ": " + $(this).text());
});表单操作
jQuery 简化了表单操作：
// 获取表单值
var username = $("#username").val();
// 设置表单值
$("#username").val("新用户名");
// 提交表单
$("#myForm").submit(function(event) {
event.preventDefault();
console.log("表单已提交");
});延迟执行
可以使用 $(document).ready() 确保 DOM 加载完成后再执行代码：
$(document).ready(function() {
console.log("DOM 已加载");
});插件扩展
jQuery 支持插件扩展，可以轻松集成第三方功能：
// 示例插件调用
$("#myElement").pluginName();注意事项
- jQuery 与其他库（如 Prototype）可能冲突，可以使用
jQuery.noConflict()解决。 - 现代浏览器原生 API 已实现许多 jQuery 功能，但在兼容性和简化代码方面 jQuery 仍有优势。
以上内容涵盖了 jQuery 在 HTML 中的基本用法，适合快速上手和日常开发需求。
