jquery用法
jQuery 基本用法
jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互的操作。以下是 jQuery 的核心用法：
引入 jQuery
在 HTML 文件中通过 CDN 引入 jQuery：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>选择器
jQuery 使用 CSS 选择器语法选取 DOM 元素：
$('p') // 选择所有 <p> 元素
$('#myId') // 选择 id 为 myId 的元素
$('.myClass') // 选择 class 为 myClass 的元素DOM 操作
- 修改内容：
$('p').text('新文本'); // 设置文本内容 $('p').html('<b>加粗文本</b>'); // 设置 HTML 内容 - 修改属性：
$('img').attr('src', 'new-image.jpg'); // 修改 src 属性 - 修改样式：
$('p').css('color', 'red'); // 修改文字颜色
事件处理
绑定事件监听：
$('button').click(function() {
alert('按钮被点击');
});常见事件：
click：点击事件mouseenter：鼠标进入keypress：键盘按下
动画效果
- 显示/隐藏：
$('div').hide(); // 隐藏元素 $('div').show(); // 显示元素 $('div').toggle(); // 切换显示状态 - 滑动效果：
$('div').slideUp(); // 向上滑动隐藏 $('div').slideDown(); // 向下滑动显示 - 淡入淡出：
$('div').fadeOut(); // 淡出 $('div').fadeIn(); // 淡入
Ajax 请求
发送 GET 请求：
$.get('url', function(data) {
console.log(data);
});发送 POST 请求：
$.post('url', { key: 'value' }, function(data) {
console.log(data);
});jQuery 实用技巧
链式调用
jQuery 支持链式调用：
$('p')
.css('color', 'blue')
.slideUp(200)
.slideDown(200);遍历元素
使用 each 方法遍历元素：
$('li').each(function(index) {
console.log(index + ': ' + $(this).text());
});动态添加元素
$('body').append('<p>新段落</p>'); // 在末尾添加
$('body').prepend('<p>新段落</p>'); // 在开头添加表单操作
获取表单值：
$('input').val(); // 获取输入框的值提交表单：
$('form').submit(function() {
alert('表单已提交');
});注意事项
- 确保 DOM 加载完成后再执行 jQuery 代码：
$(document).ready(function() { // jQuery 代码 });或简写为：
$(function() { // jQuery 代码 }); - 避免过度使用 jQuery，现代浏览器原生 API 已足够强大。
- 注意 jQuery 版本兼容性，推荐使用最新稳定版。
