jquery 使用
jQuery 基本用法
jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。以下是其核心用法:
引入 jQuery
在 HTML 文件中通过 <script> 标签引入 jQuery 库:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
选择元素
使用 $() 或 jQuery() 函数选择 DOM 元素:
$('#id') // 通过 ID 选择
$('.class') // 通过类名选择
$('div') // 通过标签名选择
DOM 操作
修改内容
$('#element').text('新文本'); // 设置文本内容
$('#element').html('<b>加粗</b>'); // 设置 HTML 内容
修改属性
$('#img').attr('src', 'new-image.jpg'); // 修改属性
$('#input').val('默认值'); // 修改表单值
添加/删除元素
$('#parent').append('<div>子元素</div>'); // 在末尾添加
$('#target').remove(); // 删除元素
事件处理
绑定事件

$('#button').click(function() {
alert('按钮被点击');
});
常用事件
.hover() // 鼠标悬停
.keypress() // 键盘按下
.submit() // 表单提交
Ajax 请求
GET 请求
$.get('api/data', function(response) {
console.log(response);
});
POST 请求
$.post('api/save', { name: 'John' }, function(response) {
console.log('保存成功');
});
动画效果
显示/隐藏

$('#box').hide(500); // 500ms 隐藏
$('#box').show('slow'); // 慢速显示
自定义动画
$('#box').animate({
opacity: 0.5,
left: '+=50'
}, 1000);
链式调用
jQuery 支持链式调用,允许多个操作串联:
$('#element')
.css('color', 'red')
.slideUp(200)
.slideDown(200);
实用工具方法
遍历元素
$('li').each(function(index) {
console.log(index + ': ' + $(this).text());
});
扩展功能
$.fn.highlight = function() {
this.css('background', 'yellow');
return this;
};
$('p').highlight();
以上是 jQuery 的核心功能概览,适用于快速开发交互式网页。注意现代浏览器已原生支持许多 jQuery 功能,但在旧项目或简化开发时仍具价值。






