当前位置:首页 > 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 操作方法:

jquery语法

// 插入元素
$("#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);
});

动画效果

内置多种动画方法:

jquery语法

// 基础显示/隐藏
$("#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 扩展自定义方法:

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

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

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

相关文章

jquery 图表

jquery 图表

jQuery 图表库推荐 jQuery 本身不直接提供图表功能,但可以通过插件或集成其他库实现图表绘制。以下是几种常用的 jQuery 图表解决方案: Chart.js 集成 Chart.js 是一…

jquery 判断

jquery 判断

jQuery 判断元素是否存在 使用 jQuery 判断元素是否存在通常通过检查选择器匹配的元素长度来实现。如果长度大于 0,表示元素存在;否则不存在。 if ($('selector').leng…

jquery标签

jquery标签

jQuery 标签操作 jQuery 提供了多种方法来操作 HTML 标签(元素),包括创建、修改、删除和遍历等。以下是常用的 jQuery 标签操作方法: 选择标签 使用选择器获取 HTML 元素…

jquery 下载

jquery 下载

jQuery 下载方法 官方网站下载 访问 jQuery 官网,点击页面上的“Download”按钮。官网提供两个版本: 压缩版(Production):文件名类似 jquery-x.x.x.m…

jquery切换

jquery切换

jQuery切换操作 jQuery提供了多种切换方法,用于在元素状态之间进行切换,包括显示/隐藏、类名切换、属性切换等。以下是常见的jQuery切换方法: 显示与隐藏切换 使用toggle()方法可…

jquery赋值

jquery赋值

jQuery 赋值操作 jQuery 提供了多种方法对 HTML 元素的属性、内容、样式等进行赋值操作。以下是常见的几种赋值方式: 文本内容赋值 使用 text() 方法可以设置元素的文本内容,该…