当前位置:首页 > jquery

jquery写法

2026-02-03 10:01:29jquery

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 代码
});

常用操作

选择元素

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");

事件处理

jquery写法

// 点击事件
$("#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 请求等内容。

标签: 写法jquery
分享给朋友:

相关文章

jquery库

jquery库

jQuery 库简介 jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。其核心特点是“Write Less, Do More”,…

jquery手册

jquery手册

jQuery手册概览 jQuery是一个快速、简洁的JavaScript库,简化了HTML文档遍历、事件处理、动画和Ajax交互。以下是核心功能和常用方法的分类整理。 核心方法 $(selecto…

jquery怎么读

jquery怎么读

jQuery的正确发音 jQuery的发音为 "jay-query"(/ˈdʒeɪkwɪəri/)。其中: "jay" 发音类似字母 "J" 的英文读法。 "query" 发音与英文单词 "que…

jquery作用

jquery作用

jQuery的作用概述 jQuery是一个快速、简洁的JavaScript库,主要用于简化HTML文档遍历、事件处理、动画设计和Ajax交互等操作。其核心目标是让开发者以更少的代码完成更多功能,同时解…

锋利的jquery

锋利的jquery

jQuery 简介 jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画设计和 Ajax 交互。其核心特点是“写得更少,做得更多”,适合快速开发动态网…

jquery的

jquery的

jQuery 简介 jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画设计和 Ajax 交互。它的核心理念是“写得更少,做得更多”(Write Le…