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 功能，但在旧项目或简化开发时仍具价值。