jQuery 完全教程

<!-- 通过 CDN 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- 或者下载到本地 -->
<script src="js/jquery.min.js"></script>

<!-- 使用 npm 安装 -->
npm install jquery

<!-- 使用 yarn 安装 -->
yarn add jquery

// 基本选择器
$('#id')           // ID选择器
$('.class')        // 类选择器
$('element')       // 元素选择器
$('*')             // 通配符选择器

// 组合选择器
$('div, p')        // 多元素选择
$('div p')         // 后代选择器
$('div > p')       // 子元素选择器
$('div + p')       // 相邻兄弟选择器
$('div ~ p')       // 通用兄弟选择器

// 属性选择器
$('[name]')        // 具有name属性的元素
$('[name=value]')  // name属性等于value的元素
$('[name!=value]') // name属性不等于value的元素
$('[name^=value]') // name属性以value开头的元素
$('[name$=value]') // name属性以value结尾的元素
$('[name*=value]') // name属性包含value的元素

// 获取和设置内容
$('#element').html()           // 获取HTML内容
$('#element').html('新内容')   // 设置HTML内容
$('#element').text()           // 获取文本内容
$('#element').text('新文本')   // 设置文本内容
$('#element').val()            // 获取表单值
$('#element').val('新值')      // 设置表单值

// 获取和设置属性
$('#element').attr('name')     // 获取属性
$('#element').attr('name', 'value') // 设置属性
$('#element').removeAttr('name')    // 删除属性

// 获取和设置样式
$('#element').css('color')     // 获取样式
$('#element').css('color', 'red')   // 设置样式
$('#element').addClass('class')     // 添加类
$('#element').removeClass('class')  // 删除类
$('#element').toggleClass('class')  // 切换类

// 向上遍历
$('#element').parent()         // 直接父元素
$('#element').parents()        // 所有父元素
$('#element').parentsUntil()   // 直到指定父元素

// 向下遍历
$('#element').children()       // 直接子元素
$('#element').find()           // 所有后代元素

// 同级遍历
$('#element').siblings()       // 所有兄弟元素
$('#element').next()           // 下一个兄弟元素
$('#element').nextAll()        // 之后所有兄弟元素
$('#element').prev()           // 上一个兄弟元素
$('#element').prevAll()        // 之前所有兄弟元素

// 基本事件绑定
$('#element').click(function() {
  // 点击事件处理
});

$('#element').on('click', function() {
  // 点击事件处理
});

// 事件委托
$('#parent').on('click', '.child', function() {
  // 子元素点击事件处理
});

// 一次性事件
$('#element').one('click', function() {
  // 只执行一次的事件处理
});

// 自定义事件
$('#element').on('customEvent', function() {
  // 自定义事件处理
});
$('#element').trigger('customEvent');

$('#element').on('click', function(event) {
  // 事件对象属性
  event.type;        // 事件类型
  event.target;      // 触发事件的元素
  event.currentTarget; // 当前处理事件的元素
  event.pageX;       // 鼠标相对于文档的X坐标
  event.pageY;       // 鼠标相对于文档的Y坐标
  event.which;       // 鼠标按键或键盘按键
  
  // 事件方法
  event.preventDefault();  // 阻止默认行为
  event.stopPropagation(); // 阻止事件冒泡
  event.stopImmediatePropagation(); // 阻止其他事件处理程序执行
});

// 显示和隐藏
$('#element').show()          // 显示元素
$('#element').hide()          // 隐藏元素
$('#element').toggle()        // 切换显示/隐藏

// 淡入淡出
$('#element').fadeIn()        // 淡入
$('#element').fadeOut()       // 淡出
$('#element').fadeToggle()    // 切换淡入/淡出
$('#element').fadeTo(0.5)     // 淡入到指定透明度

// 滑动
$('#element').slideDown()     // 向下滑动
$('#element').slideUp()       // 向上滑动
$('#element').slideToggle()   // 切换滑动

// 基本动画
$('#element').animate({
  width: '200px',
  height: '200px',
  opacity: 0.5
}, 1000);

// 动画队列
$('#element')
  .animate({width: '200px'}, 1000)
  .animate({height: '200px'}, 1000)
  .animate({opacity: 0.5}, 1000);

// 动画选项
$('#element').animate({
  width: '200px'
}, {
  duration: 1000,
  easing: 'swing',
  complete: function() {
    // 动画完成后的回调
  },
  step: function(now, fx) {
    // 每一步的回调
  }
});

// 基本 AJAX 请求
$.ajax({
  url: 'api/data',
  method: 'GET',
  data: {id: 1},
  success: function(response) {
    // 成功回调
  },
  error: function(xhr, status, error) {
    // 错误回调
  }
});

// 快捷方法
$.get('api/data', {id: 1}, function(response) {
  // 成功回调
});

$.post('api/data', {id: 1}, function(response) {
  // 成功回调
});

// 加载 HTML
$('#element').load('template.html');

// 数组操作
$.each(array, function(index, value) {
  // 遍历数组
});

$.map(array, function(value, index) {
  // 映射数组
  return value * 2;
});

// 对象操作
$.extend(target, object1, object2); // 合并对象
$.isEmptyObject(object);            // 检查空对象
$.isPlainObject(object);            // 检查普通对象

// 类型检查
$.type(value);                      // 获取类型
$.isArray(value);                   // 检查数组
$.isFunction(value);                // 检查函数
$.isNumeric(value);                 // 检查数字

// 字符串操作
$.trim(string);                     // 去除空格
$.parseJSON(string);                // 解析JSON
$.parseXML(string);                 // 解析XML