jquery写法
jQuery 基础语法与常用方法
jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。以下是 jQuery 的基本写法和常用操作。
引入 jQuery 库
在 HTML 文件中引入 jQuery 库,可以通过 CDN 或本地文件:
<!-- 使用 CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 使用本地文件 -->
<script src="path/to/jquery.min.js"></script>
基础语法
jQuery 的核心是通过选择器选取 DOM 元素,并对其进行操作。基本语法为:
$(selector).action()
$是 jQuery 的别名,也可以使用jQuery。selector是 CSS 选择器,用于选取元素。action()是对元素执行的操作。
文档就绪事件
为确保代码在 DOM 完全加载后执行,通常将代码包裹在 $(document).ready() 中:
$(document).ready(function() {
// jQuery 代码
});
// 简写形式
$(function() {
// jQuery 代码
});
常用操作
选择元素

// 通过 ID 选择
$("#elementId");
// 通过类选择
$(".className");
// 通过标签名选择
$("p");
// 组合选择器
$("p.className");
操作元素
// 获取或设置文本内容
$("#elementId").text(); // 获取
$("#elementId").text("New text"); // 设置
// 获取或设置 HTML 内容
$("#elementId").html(); // 获取
$("#elementId").html("<b>New HTML</b>"); // 设置
// 获取或设置属性
$("#elementId").attr("href"); // 获取
$("#elementId").attr("href", "https://example.com"); // 设置
// 获取或设置表单值
$("input").val(); // 获取
$("input").val("New value"); // 设置
CSS 操作
// 获取或设置 CSS 属性
$("#elementId").css("color"); // 获取
$("#elementId").css("color", "red"); // 设置
// 添加或移除类
$("#elementId").addClass("newClass");
$("#elementId").removeClass("oldClass");
$("#elementId").toggleClass("toggleClass");
事件处理

// 点击事件
$("#elementId").click(function() {
alert("Clicked!");
});
// 鼠标悬停事件
$("#elementId").hover(
function() {
$(this).css("background-color", "yellow");
},
function() {
$(this).css("background-color", "white");
}
);
// 表单提交事件
$("form").submit(function(event) {
event.preventDefault();
alert("Form submitted!");
});
动画效果
// 显示和隐藏
$("#elementId").hide();
$("#elementId").show();
$("#elementId").toggle();
// 淡入淡出
$("#elementId").fadeIn();
$("#elementId").fadeOut();
$("#elementId").fadeToggle();
// 滑动效果
$("#elementId").slideUp();
$("#elementId").slideDown();
$("#elementId").slideToggle();
// 自定义动画
$("#elementId").animate({
opacity: 0.5,
left: "+=50",
height: "toggle"
}, 1000);
Ajax 请求
// GET 请求
$.get("url", function(data) {
console.log(data);
});
// POST 请求
$.post("url", { key: "value" }, function(data) {
console.log(data);
});
// Ajax 完整配置
$.ajax({
url: "url",
type: "GET",
dataType: "json",
success: function(data) {
console.log(data);
},
error: function(xhr, status, error) {
console.error(error);
}
});
链式调用
jQuery 支持链式调用,可以在一个语句中对同一个元素执行多个操作:
$("#elementId")
.css("color", "red")
.slideUp(2000)
.slideDown(2000);
遍历元素
// each 方法
$("li").each(function(index) {
console.log(index + ": " + $(this).text());
});
// 查找子元素
$("ul").find("li");
// 父元素
$("li").parent();
// 兄弟元素
$("li").siblings();
以上是 jQuery 的基本写法和常用操作,涵盖了选择元素、操作 DOM、事件处理、动画效果和 Ajax 请求等内容。






