当前位置:首页 > jquery

jquery常用函数

2026-02-04 02:49:36jquery

jQuery 常用函数

选择器函数

$()jQuery() 是核心选择器函数,用于选择 DOM 元素。支持 CSS 选择器语法,例如:

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

DOM 操作

html() 获取或设置元素的 HTML 内容:

$("#element").html(); // 获取
$("#element").html("<p>New content</p>"); // 设置

text() 获取或设置元素的文本内容:

$("#element").text(); // 获取
$("#element").text("New text"); // 设置

val() 获取或设置表单元素的值:

$("input").val(); // 获取
$("input").val("New value"); // 设置

事件处理

on() 绑定事件处理程序:

$("#button").on("click", function() {
    alert("Button clicked");
});

click() 简化版的点击事件绑定:

$("#button").click(function() {
    alert("Button clicked");
});

样式操作

css() 获取或设置元素的 CSS 属性:

jquery常用函数

$("#element").css("color"); // 获取
$("#element").css("color", "red"); // 设置

addClass()removeClass() 添加或移除类:

$("#element").addClass("active");
$("#element").removeClass("inactive");

AJAX 请求

$.ajax() 发送异步 HTTP 请求:

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

$.get()$.post() 简化版的 GET/POST 请求:

$.get("example.com/api", function(data) {
    console.log(data);
});

$.post("example.com/api", { key: "value" }, function(data) {
    console.log(data);
});

动画效果

fadeIn()fadeOut() 淡入淡出效果:

jquery常用函数

$("#element").fadeIn();
$("#element").fadeOut();

slideUp()slideDown() 滑动效果:

$("#element").slideUp();
$("#element").slideDown();

遍历函数

each() 遍历 jQuery 对象:

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

find() 查找后代元素:

$("#parent").find(".child");

工具函数

$.trim() 去除字符串两端空格:

$.trim("  hello  "); // "hello"

$.isArray() 检查是否为数组:

$.isArray([]); // true

标签: 函数常用
分享给朋友:

相关文章

vue中实现节流函数

vue中实现节流函数

使用 Lodash 的 _.throttle 方法 安装 Lodash 并导入 throttle 方法: npm install lodash 在 Vue 组件中使用: import { thro…

react函数组件如何混合

react函数组件如何混合

混合 React 函数组件的方法 在 React 中,函数组件可以通过组合、高阶组件(HOC)、自定义 Hook 或 Render Props 等方式实现混合功能。以下是几种常见的方法: 使用自定义…

react箭头函数如何传参

react箭头函数如何传参

箭头函数传参基础语法 箭头函数通过括号内的参数列表接收参数,单参数时可省略括号。例如: const greet = name => `Hello, ${name}!`; console.log…

react类函数中如何获取到props

react类函数中如何获取到props

在React类组件中获取props可以通过以下几种方式实现: 通过构造函数获取 在类组件的构造函数中,props会作为第一个参数传入。可以通过super(props)调用父类构造函数,并将props…

react如何在model层写函数调接口

react如何在model层写函数调接口

React 中 Model 层函数调用接口的实现 在 React 应用中,Model 层通常负责数据管理和接口调用。可以通过以下方式组织代码: 创建独立的 API 服务模块 将接口调用封装在单独的…

react闭包实现函数

react闭包实现函数

在 React 中实现闭包函数 闭包在 React 中常用于保存函数作用域内的变量状态,尤其在处理异步操作或事件回调时。以下是几种常见的实现方式: 使用 useCallback 缓存函数 useCa…