当前位置：首页 > jquery

jquery常用函数

2026-03-16 23:37:10jquery

选择器函数

$() 是 jQuery 最核心的函数，用于选择 DOM 元素。可以通过 CSS 选择器、元素标签名或 DOM 对象来获取匹配的元素集合。

// 通过 ID 选择元素
$('#elementId')

// 通过类名选择元素
$('.className')

// 通过标签名选择元素
$('div')

// 组合选择器
$('div.className')

DOM 操作函数

html() 用于获取或设置元素的 HTML 内容。不带参数时获取内容，带参数时设置内容。

// 获取 HTML 内容
var content = $('#elementId').html()

// 设置 HTML 内容
$('#elementId').html('<p>New content</p>')

text() 用于获取或设置元素的文本内容，会自动转义 HTML 标签。

// 获取文本内容
var text = $('#elementId').text()

// 设置文本内容
$('#elementId').text('Plain text content')

事件处理函数

on() 是 jQuery 推荐的事件绑定方法，可以绑定一个或多个事件处理函数。

// 绑定单击事件
$('#elementId').on('click', function() {
    alert('Element clicked')
})

// 绑定多个事件
$('#elementId').on({
    click: function() { /* 点击处理 */ },
    mouseenter: function() { /* 鼠标进入处理 */ }
})

click() 是单击事件的快捷方法，可以直接绑定单击事件处理函数。

$('#elementId').click(function() {
    console.log('Clicked')
})

AJAX 相关函数

$.ajax() 是 jQuery 最底层的 AJAX 实现，可以自定义各种请求参数。

$.ajax({
    url: 'api/data',
    type: 'GET',
    dataType: 'json',
    success: function(data) {
        console.log(data)
    },
    error: function(xhr, status, error) {
        console.error(error)
    }
})

$.get() 和 $.post() 是简化的 AJAX 方法，分别用于 GET 和 POST 请求。

// GET 请求
$.get('api/data', function(data) {
    console.log(data)
})

// POST 请求
$.post('api/save', {name: 'John'}, function(response) {
    console.log(response)
})

动画效果函数

fadeIn() 和 fadeOut() 用于实现元素的淡入淡出效果。

// 淡入效果
$('#elementId').fadeIn(1000) // 1秒淡入

// 淡出效果
$('#elementId').fadeOut(500) // 0.5秒淡出

slideUp() 和 slideDown() 用于实现元素的滑动显示/隐藏效果。

// 滑动显示
$('#elementId').slideDown()

// 滑动隐藏
$('#elementId').slideUp()

工具函数

$.each() 用于遍历数组或对象。

// 遍历数组
$.each([1, 2, 3], function(index, value) {
    console.log(index + ': ' + value)
})

// 遍历对象
$.each({name: 'John', age: 30}, function(key, value) {
    console.log(key + ': ' + value)
})

$.extend() 用于合并多个对象的属性。

jquery常用函数

var defaults = {color: 'red', size: 'medium'}
var options = {size: 'large', weight: 'heavy'}
var settings = $.extend({}, defaults, options)
// 结果: {color: 'red', size: 'large', weight: 'heavy'}