jQuery 核心语法与 jQuery AJAX

jQuery 是 JS 的工具库，核心目标：写更少代码，搞定 DOM、事件、动画、AJAX，早期解决浏览器兼容大坑

jQuery 解决什么问题

DOM 操作代码写起来巨麻烦 ：原生 JS 获取元素、改内容、增删节点、改样式代码很长，jQuery 用$()，CSS 选择器直接拿元素。
浏览器兼容问题（历史核心）：早年 IE、Chrome、Firefox 的事件、DOMAPI 不一样，jQuery 内部帮你抹平差异，不用自己写兼容判断。
事件绑定麻烦：原生 addEventListener 要自己处理委托、批量绑定，jQuery 简化事件写法。
动画手写复杂：原生 JS 写渐变、滑入滑出动画要写定时器，jQuery 一行搞定。
AJAX 原生请求代码繁琐 ：原生 XMLHttpRequest 代码量大，jQuery 封装好 AJAX，发请求几行代码。
老旧后台管理系统、老官网维护（最常见），很多老项目用 jQuery 开发。
页面简单交互：弹窗、tab 切换、轮播、折叠面板、表单校验。
简单 AJAX 前后端交互，提交表单、加载列表数据。
快速做动画效果：淡入淡出、滑动显示隐藏。

大量现成插件 ：表单校验 jquery-validate、日期选择器、图表插件。

1.怎么使用
第一步：引入 jQuery

复制代码

<!-- 放在head或者body底部，必须在你自己js代码前面引入！ -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>

第二步：等待页面 DOM 加载完成再执行代码

复制代码

/ 写法1（简写，推荐）
$(function(){
  // 这里写所有jquery代码，页面DOM加载完才执行
})

// 写法2 完整写法，等价
$(document).ready(function(){

})

常用基础示例

复制代码

<button id="btn">点我弹窗</button>
<div class="box">我是盒子</div>

$(function(){
  // 1.选择元素 $("css选择器")
  let $box = $('.box');
  let $btn = $('#btn');

  // 2.点击事件绑定
  $btn.on('click', function(){
    // 修改文本
    $box.text('文字被修改啦')
    // 修改css样式
    $box.css('color','red')
    // 动画：淡入淡出
    $box.fadeToggle()
  })
})

jQuery AJAX 请求（作业高频考点）

复制代码

$.ajax({
  url:'/api/getData',
  type:'GET',
  dataType:'json',
  success:function(res){
    console.log('拿到后端返回数据',res)
  },
  error:function(err){
    console.log('请求失败',err)
  }
})

Query 对象和原生 DOM 对象不能混用

// jquery对象，要用jquery方法
$('.box').text() // 原生dom对象，用原生js方法 document.querySelector('.box').innerText // 互相转换$ ('.box')[0] // jquery转原生
$(dom元素) // 原生转jquery
必须先引入 jquery，再写自己的 js 代码 ，顺序错直接报错 $ is not defined
$(function(){}) 是等 DOM 加载完成，不是等图片加载完成。