当前位置:首页 > 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

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

相关文章

react如何调用函数

react如何调用函数

React 函数调用的方法 在 React 中调用函数可以通过多种方式实现,具体取决于函数的作用和调用时机。以下是常见的几种方法: 直接在组件中调用函数 函数可以在组件的 render 方法或其他…

react组建中如何调用函数

react组建中如何调用函数

在 React 组件中调用函数的方法 React 组件中调用函数的方式取决于函数的定义位置和作用域。以下是常见的几种方法: 在组件内部定义并调用函数 函数可以直接在组件内部定义,并通过事件或生命周期…

react高阶函数如何写

react高阶函数如何写

高阶函数的基本概念 高阶函数(Higher-Order Function)是指接收函数作为参数或返回函数的函数。在React中,高阶函数常用于逻辑复用、组件增强或事件处理封装。 接收函数作为参…

react箭头函数如何传参

react箭头函数如何传参

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

react如何控制函数组件更新

react如何控制函数组件更新

控制函数组件更新的方法 在React中,函数组件的更新通常由状态(state)或属性(props)的变化触发。以下是几种常见的控制函数组件更新的方法: 使用React.memo进行浅比较 Reac…

react类函数中如何获取到props

react类函数中如何获取到props

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