jQuery -岩石教程

特点

跨浏览器兼容性：jQuery 提供统一的 API，解决了不同浏览器间的兼容性问题。
简洁的语法：简化了复杂的 JavaScript 操作，使代码更简洁和易于维护。
强大的选择器：基于 CSS 的选择器，可以轻松选择和操作 DOM 元素。
事件处理：提供简单的事件绑定和管理方法，增强了事件处理能力。
动画效果：内置丰富的动画效果和自定义动画的功能。
Ajax 支持：简化了与服务器的异步交互，实现无刷新数据加载。
插件生态：拥有大量社区开发的插件，可以扩展 jQuery 的功能。

使用场景

DOM 操作：轻松进行 DOM 元素的查找、遍历和操作。
事件处理：绑定和管理用户交互事件，如点击、悬停等。
动画和效果：创建和管理动画效果，提高用户体验。
表单处理：验证和处理表单输入，增强表单功能。
Ajax 请求：简化与服务器的异步数据交互，加载和更新数据。
插件开发：利用 jQuery 丰富的插件生态，快速实现复杂功能。

安装方式

通过 npm 安装 jQuery：

npm install jquery

通过 CDN 引入 jQuery：

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

使用示例

DOM 操作

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <button id="btn">Click me</button>
  <p id="text">Hello, world!</p>
  <script>
    $(document).ready(function() {
      $('#btn').click(function() {
        $('#text').text('Button clicked!');
      });
    });
  </script>
</body>
</html>

事件处理

$(document).ready(function() {
  $('button').on('click', function() {
    alert('Button clicked!');
  });
});

动画效果

$(document).ready(function() {
  $('button').click(function() {
    $('#box').fadeOut('slow');
  });
});

Ajax 请求

$(document).ready(function() {
  $('#loadData').click(function() {
    $.ajax({
      url: 'https://api.example.com/data',
      method: 'GET',
      success: function(data) {
        $('#result').html(data);
      }
    });
  });
});

常用 API 介绍

$()：jQuery 的选择器函数，用于选择 DOM 元素。
```
$('div') // 选择所有 div 元素
```

.css()：设置或获取 CSS 样式。

$('p').css('color', 'red'); // 将所有 p 元素的文字颜色设置为红色

.attr()：设置或获取 HTML 属性。

$('img').attr('src', 'image.jpg'); // 设置所有 img 元素的 src 属性

.html()：设置或获取 HTML 内容。

$('#content').html('<h1>Hello</h1>'); // 设置 #content 元素的 HTML 内容

.text()：设置或获取文本内容。

$('#text').text('Hello, world!'); // 设置 #text 元素的文本内容

.on()：绑定事件处理程序。

$('button').on('click', function() {
  alert('Button clicked!');
}); // 绑定点击事件

.fadeIn()：淡入效果。

$('#box').fadeIn('slow'); // 使 #box 元素缓慢淡入

.fadeOut()：淡出效果。

$('#box').fadeOut('slow'); // 使 #box 元素缓慢淡出

.ajax()：发送 Ajax 请求。

$.ajax({
  url: 'https://api.example.com/data',
  method: 'GET',
  success: function(data) {
    $('#result').html(data);
  }
}); // 发送 GET 请求并处理响应数据

官方资料

jQuery 作为一个历史悠久且功能强大的 JavaScript 库，依然在前端开发中占有重要地位。它简化了许多常见的开发任务，帮助开发者更高效地构建和维护 Web 应用。