当前位置:首页 > jquery

jquery语法

2026-04-08 03:45:39jquery

jQuery 语法基础

jQuery 语法基于 CSS 选择器,通过简洁的链式调用操作 DOM 元素。核心语法结构为 $(selector).action(),其中 $ 是 jQuery 的别名,selector 用于查找元素,action() 是对元素执行的操作。

// 示例:隐藏所有 <p> 元素
$("p").hide();

选择器使用

jQuery 支持 CSS 1-3 的所有选择器,并扩展了部分自定义选择器:

// ID 选择器
$("#header").css("color", "red");

// 类选择器
$(".item").addClass("active");

// 属性选择器
$("input[type='text']").val("Hello");

事件处理

通过 .on() 或简写方法(如 .click())绑定事件:

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

// 动态事件委托
$("#container").on("click", ".dynamic-item", function() {
  $(this).toggleClass("selected");
});

DOM 操作

提供丰富的 DOM 操作方法:

// 插入元素
$("#list").append("<li>New Item</li>");

// 修改属性
$("img").attr("src", "new-image.jpg");

// 遍历元素
$("div").each(function(index) {
  console.log(index + ": " + $(this).text());
});

AJAX 请求

简化异步数据请求:

$.ajax({
  url: "api/data",
  method: "GET",
  dataType: "json",
  success: function(response) {
    console.log(response);
  }
});

// 简写形式
$.get("api/data", function(response) {
  $("#result").html(response);
});

动画效果

内置多种动画方法:

// 基础显示/隐藏
$("#box").fadeIn(500);

// 自定义动画
$("#element").animate({
  left: "+=50px",
  opacity: 0.5
}, 1000);

链式调用

jQuery 方法通常返回 jQuery 对象,支持链式操作:

$("#content")
  .css("color", "blue")
  .slideUp(200)
  .slideDown(200);

实用工具方法

提供辅助函数简化开发:

// 数组遍历
$.each([1, 2, 3], function(i, val) {
  console.log(val);
});

// 深度合并对象
var settings = $.extend({}, defaults, options);

插件扩展

支持通过 $.fn 扩展自定义方法:

jquery语法

$.fn.highlight = function(color) {
  this.css("background-color", color || "yellow");
  return this;
};

$("p").highlight("green");

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

相关文章

jquery实现vue

jquery实现vue

jQuery 和 Vue.js 是两种不同理念的前端工具,前者基于 DOM 操作,后者基于数据驱动。虽然 Vue 可以替代 jQuery 的大部分功能,但若需在 Vue 中临时集成 jQuery 或模…

jquery 插入html

jquery 插入html

jQuery 插入 HTML 的方法 jQuery 提供了多种方法来动态插入 HTML 内容到 DOM 中。以下是几种常用的方法: append() 将内容插入到选定元素的内部末尾。 $("#…

使用jquery

使用jquery

引入jQuery库 在HTML文件中通过<script>标签引入jQuery库。可以从CDN加载,例如: <script src="https://code.jquery.com/…

jquery获取元素

jquery获取元素

jQuery 获取元素的方法 jQuery 提供了多种方法来获取 DOM 元素,以下是常见的几种方式: 通过 ID 选择器获取元素 使用 #id 选择器可以获取具有特定 ID 的元素。例如: $(…

jquery 节点

jquery 节点

jQuery 节点操作 jQuery 提供了丰富的 DOM 节点操作方法,可以轻松实现节点的增删改查。 查找节点 使用选择器查找节点是最常见的操作。jQuery 支持 CSS 选择器语法,可以快速定…

jquery上传

jquery上传

jQuery 文件上传的实现方法 jQuery 可以通过多种方式实现文件上传功能,以下介绍几种常见的方法: 使用原生表单和 AJAX 通过 HTML 表单结合 jQuery 的 AJAX 功能实现文…