当前位置：首页 > jquery

jquery 代码

2026-03-17 12:39:39jquery

jQuery 代码示例

jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。以下是一些常见的 jQuery 代码示例。

基本选择器与操作

通过选择器获取元素并修改内容或样式：

// 修改所有 <p> 元素的内容
$("p").text("Hello, jQuery!");

// 修改元素的 CSS
$("#myDiv").css("color", "red");

// 添加类
$(".myClass").addClass("highlight");

事件处理

绑定点击事件或其他交互事件：

jquery 代码

// 点击事件
$("#myButton").click(function() {
    alert("Button clicked!");
});

// 表单提交事件
$("#myForm").submit(function(e) {
    e.preventDefault();
    console.log("Form submitted");
});

Ajax 请求

发送异步 HTTP 请求：

// GET 请求
$.get("https://api.example.com/data", function(data) {
    console.log("Data received:", data);
});

// POST 请求
$.post("https://api.example.com/save", { name: "John" }, function(response) {
    console.log("Response:", response);
});

动画效果

实现简单的动画：

jquery 代码

// 隐藏元素
$("#myElement").hide();

// 显示元素
$("#myElement").show();

// 淡入淡出
$("#myElement").fadeIn(1000);
$("#myElement").fadeOut(1000);

// 滑动效果
$("#myElement").slideUp();
$("#myElement").slideDown();

DOM 操作

动态添加或删除元素：

// 添加元素
$("#container").append("<p>New paragraph</p>");

// 移除元素
$("#oldElement").remove();

// 替换元素
$("#oldElement").replaceWith("<div>New content</div>");

遍历与过滤

查找和筛选元素：

// 查找子元素
$("#parent").find(".child");

// 过滤元素
$("li").filter(".active").css("font-weight", "bold");

// 遍历元素
$("li").each(function() {
    console.log($(this).text());
});

这些示例涵盖了 jQuery 的基本用法，可以根据实际需求进一步扩展。