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('表单已提交');
});

注意事项

1. 确保 DOM 加载完成后再执行 jQuery 代码：

   $(document).ready(function() {
     // jQuery 代码
   });

   或简写为：

   $(function() {
     // jQuery 代码
   });

2. 避免过度使用 jQuery，现代浏览器原生 API 已足够强大。
3. 注意 jQuery 版本兼容性，推荐使用最新稳定版。