当前位置:首页 > jquery

jquery 或

2026-03-16 10:29:41jquery

以下是关于 jQuery 的常见用途和方法的整理,涵盖基础操作、DOM 处理、事件绑定等内容:

基础语法

使用 $jQuery 选择元素并执行操作:

$(selector).action();

选择器

通过 CSS 选择器获取元素:

$("#id")          // ID 选择器
$(".class")       // 类选择器
$("div")          // 标签选择器
$("div.class")    // 组合选择器

DOM 操作

修改元素内容或属性:

$("#el").html()       // 获取 HTML 内容
$("#el").html("新内容") // 设置 HTML 内容
$("#el").text()       // 获取纯文本
$("#el").attr("href") // 获取属性值
$("#el").css("color", "red") // 修改样式

事件处理

绑定点击、悬停等事件:

$("#btn").click(function() {
  alert("按钮被点击");
});
$("#box").hover(
  function() { /* 鼠标进入 */ },
  function() { /* 鼠标离开 */ }
);

AJAX 请求

发送异步请求:

$.ajax({
  url: "data.php",
  method: "GET",
  data: { param: "value" },
  success: function(response) {
    console.log(response);
  }
});

动画效果

内置动画方法:

$("#box").hide(500);          // 淡出
$("#box").show(500);          // 淡入
$("#box").fadeToggle(300);    // 淡入淡出切换
$("#box").slideUp(200);       // 向上滑动隐藏

链式调用

支持连续操作:

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

实用工具方法

辅助功能:

jquery 或

$.trim(" 字符串 ")   // 去除空格
$.each(array, function(index, value) { /* 遍历 */ });
$.isNumeric("123")  // 检测是否为数字

jQuery 的兼容性覆盖到 IE6+,适合快速开发跨浏览器项目。现代项目可结合原生 JavaScript 或框架(如 React/Vue)使用。

标签: jquery
分享给朋友:

相关文章

jquery库

jquery库

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

jquery 图表

jquery 图表

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

jquery点击

jquery点击

jQuery 点击事件绑定方法 使用 jQuery 绑定点击事件可以通过多种方式实现,以下是几种常见的方法: click() 方法绑定 $("#elementId").click(function…

jquery 添加

jquery 添加

jQuery 添加元素的方法 动态添加 HTML 内容 使用 append()、prepend()、after() 或 before() 方法可以在 DOM 中插入新元素。 // 在元素内部末尾…

jquery 对象

jquery 对象

jQuery 对象简介 jQuery 对象是通过 jQuery 选择器或方法创建的封装了 DOM 元素的集合。它是一个类数组对象,包含一组 DOM 元素并提供 jQuery 特有的方法链式操作。 创…

jquery 删除

jquery 删除

jQuery 删除元素的方法 使用 jQuery 删除 DOM 元素可以通过多种方式实现,具体方法取决于需求。以下是几种常见的删除方式: remove() 方法 remove() 方法会删除选中的元…