jquery实例教程
jQuery 实例教程
jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。以下是一些常见的 jQuery 实例教程，涵盖基础操作和常见功能。
引入 jQuery
在 HTML 文件中引入 jQuery 库，可以通过 CDN 或本地文件加载：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>选择器
jQuery 使用 CSS 选择器来选取元素：
$("p") // 选择所有 <p> 元素
$("#id") // 选择 id 为 "id" 的元素
$(".class") // 选择 class 为 "class" 的元素事件处理
绑定点击事件：
$("button").click(function() {
alert("按钮被点击了");
});DOM 操作
修改元素内容：
$("#demo").text("新的文本内容");
$("#demo").html("<strong>加粗文本</strong>");动画效果
显示和隐藏元素：
$("#hide").click(function() {
$("p").hide();
});
$("#show").click(function() {
$("p").show();
});Ajax 请求
发送 GET 请求：
$.get("url", function(data) {
$("#result").html(data);
});表单操作
获取表单输入值：
$("form").submit(function() {
var value = $("input").val();
console.log(value);
return false; // 阻止表单提交
});遍历元素
遍历列表项：
$("li").each(function() {
console.log($(this).text());
});样式操作
添加或移除类：
$("p").addClass("highlight");
$("p").removeClass("highlight");链式操作
jQuery 支持链式调用：
$("p").css("color", "red").slideUp(2000).slideDown(2000);插件扩展
使用 jQuery 插件：
<script src="jquery-plugin.js"></script>
<script>
$("#element").pluginMethod();
</script>这些实例涵盖了 jQuery 的常见用法，适合初学者快速上手。通过实践这些例子，可以逐步掌握 jQuery 的核心功能。
