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("点击")})