jquery菜鸟

以下是针对 jQuery 初学者的核心知识点和实用方法整理，内容基于最新实践和官方文档：

jQuery 基础引入

在 HTML 文件中通过 <script> 标签引入 jQuery 库（推荐使用 CDN）：

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

DOM 元素选择

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

$('p')                      // 选择所有 <p> 标签
$('#header')                // 选择 id="header" 的元素
$('.active')                // 选择 class="active" 的元素
$('ul li:first-child')      // 选择第一个 <li> 元素

常用操作方法

修改元素内容与属性：

$('#box').html('新内容')    // 修改元素内部HTML
$('#box').text('纯文本')    // 修改纯文本内容
$('img').attr('src', 'new.jpg') // 修改属性值
$('input').val()            // 获取表单元素的值

事件处理

绑定点击事件示例：

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

其他常用事件：

.hover()    // 鼠标悬停
.keypress() // 键盘按键
.submit()   // 表单提交

样式操作

动态修改 CSS：

$('div').css('color', 'red');
$('div').addClass('highlight');  // 添加类
$('div').toggleClass('active');  // 切换类

动画效果

基础动画实现：

$('#box').hide(500);                   // 隐藏元素（带动画时长）
$('#box').fadeIn(1000);                // 淡入效果
$('#box').animate({left: '250px'});    // 自定义动画

AJAX 请求

发送 GET 请求示例：

$.get('api/data', function(response) {
  console.log('收到数据:', response);
});

POST 请求示例：

$.post('api/submit', {name: 'John'}, function(data) {
  alert('提交成功');
});

链式调用

jQuery 支持方法链式调用：

$('p')
  .css('color', 'blue')
  .slideUp(200)
  .slideDown(200);

最佳实践建议

1. 始终使用 $(document).ready() 确保 DOM 加载完成：

   $(document).ready(function() {
   // 初始化代码
   });

2. 缓存 jQuery 对象避免重复查询：

   var $nav = $('#navigation');
   $nav.hide();
   $nav.fadeIn();

3. 优先使用原生 JavaScript 实现简单操作（现代浏览器性能更优）

官方学习资源：

• jQuery API 文档
• Codecademy jQuery 课程
• jQuery Learning Center