jquery怎么用

jQuery的基本用法

jQuery是一个快速、简洁的JavaScript库，简化了HTML文档遍历、事件处理、动画和Ajax交互。以下是其核心用法：

引入jQuery库 在HTML文件中通过CDN或本地文件引入jQuery：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

文档就绪事件 确保DOM加载完成后再执行代码：

$(document).ready(function() {
    // 代码在这里执行
});

// 简写形式
$(function() {
    // 代码在这里执行
});

选择器与DOM操作

元素选择 使用CSS选择器语法选取元素：

$('p')              // 所有<p>元素
$('#myId')          // ID为myId的元素
$('.myClass')       // class为myClass的元素
$('ul li:first')    // 第一个<li>元素

修改内容与属性

$('#myDiv').html('<b>新内容</b>');  // 修改HTML内容
$('#myDiv').text('纯文本内容');     // 修改文本内容
$('img').attr('src', 'new.jpg');    // 修改属性
$('input').val('默认值');           // 表单元素的值

样式操作

$('p').css('color', 'red');                  // 单个样式
$('p').css({'color': 'red', 'font-size': '20px'}); // 多个样式
$('div').addClass('highlight');               // 添加类
$('div').removeClass('oldClass');             // 移除类

事件处理

绑定事件

$('#btn').click(function() {
    alert('按钮被点击');
});

$('input').keypress(function(event) {
    if(event.which == 13) {
        alert('回车键被按下');
    }
});

常见事件

• click() 点击事件
• dblclick() 双击事件
• mouseenter() 鼠标进入
• mouseleave() 鼠标离开
• keydown() 键盘按下
• submit() 表单提交

动画效果

显示/隐藏

$('#box').hide(1000);        // 1秒内隐藏
$('#box').show(500);         // 0.5秒内显示
$('#box').toggle();          // 切换显示状态

滑动效果

$('#panel').slideUp();       // 向上滑动隐藏
$('#panel').slideDown();     // 向下滑动显示
$('#panel').slideToggle();   // 切换滑动状态

淡入淡出

$('#img').fadeOut(300);      // 0.3秒淡出
$('#img').fadeIn(600);       // 0.6秒淡入
$('#img').fadeTo(400, 0.5);  // 0.4秒淡至50%透明度

AJAX请求

GET请求

$.get('data.php', {name: 'John'}, function(data) {
    $('#result').html(data);
});

POST请求

$.post('submit.php', {email: 'user@example.com'}, function(response) {
    console.log(response);
});

完整AJAX

$.ajax({
    url: 'api/data',
    type: 'GET',
    dataType: 'json',
    success: function(data) {
        // 处理成功响应
    },
    error: function(xhr, status, error) {
        // 处理错误
    }
});

实用方法

遍历元素

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

创建元素

var newDiv = $('<div>', {
    'class': 'box',
    'text': '新创建的div'
});
$('body').append(newDiv);

链式调用 jQuery支持方法链式调用：

$('#content')
    .find('p')
    .eq(0)
    .css('color', 'blue')
    .end()
    .eq(1)
    .hide();

这些核心功能涵盖了jQuery的常见使用场景，通过组合这些方法可以实现复杂的交互效果和动态页面功能。