jQuery怎么使用

先引入库 → 等页面 DOM 加载完 → $("选择器") 拿到元素 → 调用方法干活

$ 就是 jQuery 的简写，`$("xxx")` 拿到的是 jQuery 对象，不是原生 DOM 对象！

第一步：引入 jQuery（两种办法）

⚠️ 重点：jQuery 的 script 标签必须写在你自己 JS 代码的前面！

方式 1：CDN 在线引入（写作业最省事，不用下载文件）

<!-- 放在head或者body底部都行 --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

方式 2：本地引入

去官网下载 jquery 文件，放到项目 js 文件夹

<script src="./js/jquery-3.6.0.min.js"></script>

第二步：文档就绪（$(function (){})）

作用：等页面上 HTML 标签全部加载完毕，再执行 jQuery 代码，不然找不到元素！

// 简写版（推荐，作业都用这个） $(function(){ // 这里面写所有jQuery代码！ }) // 完整版，等价上面 $(document).ready(function(){ })

对比原生：原生是document.addEventListener('DOMContentLoaded',()=>{})

第三步：基础语法$(选择器).方法()

选择器写法和 CSS 一模一样！

$(function(){ // 1. id选择器 # $("#box") // 2. class选择器 . $(".item") // 3. 标签选择器 $("button") })

第四步：常用操作（带你写可直接运行的小例子）

完整 HTML 示例，你直接复制打开就能跑：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>jQuery测试</title> <!-- 先引入jQuery --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head> <body> <div id="box">我是盒子</div> <button class="btn">点我变色</button> <script> $(function(){ // 1. 文本操作 text() 不传参获取，传参是设置 console.log( $("#box").text() ) $("#box").text("修改后的文字") // 2. css样式操作 $("#box").css("color","red") $("#box").css({ width:"200px", height:"100px", backgroundColor:"#ccc" }) // 3. 事件绑定（on 绑定，对应你学的addEventListener） $(".btn").on("click",()=>{ $("#box").toggle() // 显示隐藏切换 }) // 4. 链式调用：连续点方法 $("#box").css("fontSize","24px").text("链式调用！") }) </script> </body> </html>

重点坑（初学者最容易踩）

1. jQuery 对象 ≠ 原生 DOM 对象

// jQuery对象 let $box = $("#box"); // 转原生DOM：$box[0] let boxDom = $box[0]; // 原生转jQuery：$(boxDom) let $box2 = $(boxDom);

原生 DOM 不能直接调用 jQuery 方法，jQuery 对象也不能直接用原生属性！

1. 引入顺序不能反：先引 jQuery，再写自己的 js，不然报$ is not defined
2. 动态新增的元素，要用事件委托（.on("click","子选择器",()=>{})）才能绑定事件

高频方法速记

• text()：纯文本
• html()：可以识别 html 标签
• val()：获取 / 设置表单 input 的值
• css()：样式
• show()/hide()/toggle()：显示隐藏
• append()/prepend()：添加子元素
• attr()：读写标签属性
• on("事件名",函数)：绑定事件（优先用 on，不推荐老的 click 简写）

和原生 JS 简单对照

原生：找元素 → 赋值属性 → addEventListener

let btn = document.querySelector(".btn") btn.addEventListener("click",()=>{ console.log("点击") })

jQuery：$(".btn").on("click",()=>{console.log("点击")})