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的常见使用场景，通过组合这些方法可以实现复杂的交互效果和动态页面功能。
