当前位置:首页 > jquery

jquery 方法

2026-01-13 15:47:14jquery

jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。以下是一些常用的 jQuery 方法及其用途:

选择器方法

$("selector")
用于选择 DOM 元素,支持 CSS 选择器语法。例如:$("#id") 选择 ID 为 id 的元素,$(".class") 选择所有类名为 class 的元素。

find("selector")
在当前选中的元素集合中查找匹配的子元素。例如:$("div").find("span") 查找所有 div 元素下的 span 元素。

DOM 操作

html() / html(content)
获取或设置选中元素的 HTML 内容。例如:$("div").html("<p>New content</p>")div 的内容替换为新的 HTML。

text() / text(content)
获取或设置选中元素的文本内容。例如:$("p").text("New text") 将所有 p 元素的文本替换为 "New text"。

attr("attribute") / attr("attribute", "value")
获取或设置选中元素的属性值。例如:$("img").attr("src", "new-image.jpg") 修改所有 img 元素的 src 属性。

事件处理

on("event", handler)
为选中元素绑定事件处理函数。例如:$("button").on("click", function() { alert("Clicked!"); }) 为所有按钮添加点击事件。

click(handler)
简化版的点击事件绑定。例如:$("button").click(function() { console.log("Button clicked"); })

动画效果

hide() / show()
隐藏或显示选中元素。例如:$("#box").hide() 隐藏 ID 为 box 的元素。

fadeIn() / fadeOut()
通过淡入淡出效果显示或隐藏元素。例如:$("#box").fadeOut(500) 在 500 毫秒内淡出元素。

Ajax 方法

$.ajax(options)
执行异步 HTTP 请求。例如:

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

$.get(url, callback)
发送 GET 请求并处理响应。例如:$.get("api/data", function(data) { console.log(data); })

实用工具

each(function(index, element))
遍历选中元素集合。例如:

$("li").each(function(index) {
  console.log(index + ": " + $(this).text());
});

addClass("className") / removeClass("className")
添加或移除 CSS 类。例如:$("div").addClass("highlight") 为所有 div 元素添加 highlight 类。

这些方法涵盖了 jQuery 的核心功能,适用于大多数常见的网页交互需求。

jquery 方法

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

相关文章

vue实现懒加载的方法

vue实现懒加载的方法

vue实现懒加载的方法 使用Vue的<img>标签结合IntersectionObserver 在Vue组件中,通过IntersectionObserver监听图片是否进入视口,动态加载…

jquery官网

jquery官网

jQuery 官网信息 jQuery 的官方网站是 jQuery.com,提供最新的 jQuery 版本下载、文档、教程和插件资源。 官网主要功能 下载 jQuery:提供压缩版(min…

jquery最新版本

jquery最新版本

jQuery 最新版本 jQuery 是一个广泛使用的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。以下是关于其最新版本的信息: 当前稳定版本 jQue…

Vue组件实现方法

Vue组件实现方法

Vue组件的基本实现方法 Vue组件是Vue.js的核心概念之一,用于构建可复用的UI模块。以下是Vue组件的几种常见实现方式: 单文件组件(SFC) 使用.vue文件格式,将模板、脚本和样式封装…

vue实现懒加载的方法

vue实现懒加载的方法

Vue 实现懒加载的方法 路由懒加载 通过动态导入语法拆分路由组件,减少初始加载时间。适用于 Vue Router 配置: const routes = [ { path: '/hom…

react 如何引入jquery

react 如何引入jquery

引入 jQuery 到 React 项目 在 React 项目中引入 jQuery 可以通过多种方式实现,但需要注意 React 和 jQuery 操作 DOM 的方式可能冲突,因此建议仅在必要时使用…