1. 页面加载（必学）
2. 元素选择器（含eq详解）
3. 属性&样式&类名
4. 内容&元素操作
5. 全部事件大全
6. 动画&停止动画
7. AJAX全套用法
8. 遍历&索引详解
9. 常用工具方法
✅ 所有jQuery代码必须写在页面加载函数内，否则会失效！

1. 页面加载（必学核心）

$(function(){}) 【推荐最简写法】

【大白话作用】等页面的HTML结构全部加载完成后，再执行里面的代码，避免代码找不到元素而报错。

【参数说明】无参数，直接把你的所有代码写在大括号里即可。

【小白注意】这是所有jQuery代码的“家”，所有代码必须放这里面！

$(function(){ // 你的所有jQuery代码，全部写在这里面 console.log("页面加载完成，代码可以执行了"); });

$(document).ready(function(){}) 【标准写法】

【大白话作用】和上面的最简写法功能完全一样，是完整的标准写法，适合老项目兼容。

【小白注意】和上面的写法二选一即可，推荐用上面的最简写法。

$(window).on('load',function(){})

【大白话作用】等页面的所有资源（图片、视频、样式、字体）全部加载完成后，才执行代码。

【使用场景】需要获取图片的实际宽高、等视频加载完成再操作的时候用。

jQuery.noConflict()

【大白话作用】释放$符号，解决jQuery和其他JS框架的冲突（比如$符号被别的代码占用了）。

【小白示例】

// 把$换成$jq，避免冲突 var $jq = jQuery.noConflict(); $jq(function(){ $jq(".box").hide(); });

2. 元素选择器（含eq()索引超详细讲解）

✅ 选择器就是jQuery用来“找到”页面上的标签的方法，和CSS选择器用法完全一样！

$("#id名") ID选择器

【大白话作用】选中页面上id="xxx"的元素，id是唯一的，只能选中1个元素。

【小白示例】页面上有 <div id="header"></div>，就这么写：

$("#header") // 选中id为header的元素

$(".class名") 类选择器

【大白话作用】选中页面上所有class="xxx"的元素，可以选中多个。

【小白示例】页面上有 <li class="item"></li>，就这么写：

$(".item") // 选中所有class为item的元素

$("标签名") 标签选择器

【大白话作用】选中页面上所有对应的标签，比如所有div、所有p、所有li。

【小白示例】

$("div") // 选中页面所有div $("p") // 选中页面所有p标签 $("li") // 选中页面所有li标签

🔥 eq() 索引选择器 小白超详细全解

✅ eq() 是jQuery里最常用的序号选择器，专门用来选中「第几个」元素，小白必学！

1. 基础核心：索引从0开始！

【小白必记死规则】jQuery里的序号（索引），永远是从0开始数的！

0 = 第一个元素

1 = 第二个元素

2 = 第三个元素

以此类推，第N个元素，索引就是 N-1

⚠️ 小白踩坑重灾区：不要从1开始数！比如要选第一个，必须填0，不是1！

2. 选择器写法：:eq(索引)

【大白话作用】在选择器里直接写，选中匹配的元素里，指定序号的那一个。

【语法】$("选择器:eq(索引)")

【小白示例】页面有5个li标签：

$("li:eq(0)") // 选中第1个li $("li:eq(1)") // 选中第2个li $("li:eq(2)") // 选中第3个li $("li:eq(4)") // 选中第5个li（最后一个）

3. 方法写法：.eq(索引)

【大白话作用】先选中一堆元素，再用eq()方法筛选出指定序号的那一个，链式调用更灵活，推荐用这种写法！

【语法】$("选择器").eq(索引)

【小白示例】

// 先选中所有li，再筛选出第2个（索引1） $("li").eq(1).css("color", "red"); // 链式调用，先选第3个，再绑定点击事件 $(".btn").eq(2).on("click", function(){ alert("第三个按钮被点击了"); });

4. 高级用法：负数索引（倒着数）

【大白话作用】eq()里填负数，就会从最后一个元素开始倒着数！

-1 = 最后一个元素

-2 = 倒数第二个元素

-3 = 倒数第三个元素

【小白示例】

$("li:eq(-1)") // 选中最后一个li $("li").eq(-2) // 选中倒数第二个li

5. 小白常用实战场景

场景1：给tab导航的第几个按钮加选中样式

// 给第1个tab按钮加active类 $(".tab-btn").eq(0).addClass("active");

场景2：给列表的偶数行变色

// 给第2、4、6...行（索引1、3、5...）加背景色 $("tr").eq(1).css("background", "#f5f5f5"); $("tr").eq(3).css("background", "#f5f5f5");

场景3：点击按钮，显示对应序号的内容

$(".btn").on("click", function(){ // 获取点击的按钮是第几个 var idx = $(this).index(); // 显示对应序号的内容，隐藏其他 $(".content").hide().eq(idx).show(); });

6. 小白踩坑提醒

⚠️ 索引超出范围，会选中不到任何元素，不会报错，但是代码不生效

⚠️ 永远记住索引从0开始，不是从1开始！

⚠️ 推荐用 .eq() 方法写法，比 :eq() 选择器兼容性更好，链式调用更灵活

:first / :last 首尾选择器

【大白话作用】选中第一个元素 / 最后一个元素，和 eq(0)、eq(-1) 效果一样

$("li:first") // 选中第一个li，等价于 $("li").eq(0) $("li:last") // 选中最后一个li，等价于 $("li").eq(-1)

$("[属性名='值']") 属性选择器

【大白话作用】选中带有指定属性和值的元素，比如选中所有type="text"的输入框。

$("[type='text']") // 选中所有文本输入框 $("[href]") // 选中所有带href属性的元素

3. 属性 & 样式 & 类名操作

.attr("属性名") 获取属性

【大白话作用】获取元素的HTML属性值，比如图片的src、链接的href、标签的title。

【参数说明】括号里填要获取的属性名，返回对应的属性值。

// 获取图片的地址 var imgSrc = $("img").attr("src");

.attr("属性名", "值") 设置属性

【大白话作用】给元素设置HTML属性，修改图片地址、链接地址、自定义属性。

【参数说明】第1个参数是属性名，第2个参数是要设置的值。

// 修改图片的地址 $("img").attr("src", "new.jpg"); // 给链接设置新地址 $("a").attr("href", "https://www.baidu.com");

.prop("属性名", true/false) 表单属性操作

【大白话作用】专门用来操作表单的状态属性：复选框勾选、单选框选中、按钮禁用/启用，必须用这个方法！

【参数说明】第1个参数是属性名，第2个参数是布尔值true=选中/启用，false=取消/禁用。

// 勾选复选框 $(":checkbox").prop("checked", true); // 禁用按钮 $("button").prop("disabled", true);

.css("样式名") 获取样式

【大白话作用】获取元素的样式值，比如颜色、宽度、高度。

// 获取元素的颜色 var color = $(".box").css("color");

.css("样式名", "值") 设置单个样式

【大白话作用】给元素设置行内样式，修改颜色、宽高、边距等。

【小白注意】带单位的样式必须写单位，比如px、%。

// 修改文字颜色为红色 $(".box").css("color", "red"); // 修改宽度为200px $(".box").css("width", "200px");

.css({样式对象}) 设置多个样式

【大白话作用】一次性给元素设置多个样式，不用写多行代码。

$(".box").css({ "color": "red", "width": "200px", "height": "100px", "background": "#eee" });

.addClass("类名") 添加类名

【大白话作用】给元素添加一个CSS类名，通过CSS来控制样式，推荐使用这种方式，不要频繁用css()方法。

// 给元素添加show类名 $(".box").addClass("show");

.removeClass("类名") 删除类名

【大白话作用】给元素删除指定的CSS类名。

// 给元素删除show类名 $(".box").removeClass("show");

.toggleClass("类名") 切换类名

【大白话作用】元素有这个类名就删掉，没有就加上，适合做点击切换、开关效果。

// 点击按钮，切换盒子的show类名 $(".btn").click(function(){ $(".box").toggleClass("show"); });

.hasClass("类名") 判断是否有类名

【大白话作用】判断元素是否有指定的类名，返回true/false，用来做条件判断。

if($(".box").hasClass("show")){ alert("盒子是显示的"); }

4. 内容 & 元素增删改查

.html() 获取HTML内容

【大白话作用】获取元素里面的所有内容，包括HTML标签。

var content = $(".box").html();

.html("内容") 设置HTML内容

【大白话作用】给元素里面写入内容，支持HTML标签，会覆盖原来的内容。

// 给盒子写入带标签的内容 $(".box").html("

标题

这是内容

");

.text() 获取纯文本

【大白话作用】获取元素里面的纯文字，自动过滤掉HTML标签，只保留文字。

.text("文字") 设置纯文本

【大白话作用】给元素里面写入纯文字，不会识别HTML标签，安全不会被XSS攻击。

.val() 获取表单值

【大白话作用】获取输入框、下拉框、文本域里面用户输入的内容，表单专用。

// 获取输入框里用户输入的内容 var inputVal = $("input").val();

.val("内容") 设置表单值

【大白话作用】给输入框、下拉框设置默认值，自动填充内容。

// 给输入框设置默认值 $("input").val("请输入你的姓名");

.append("内容") 内部末尾追加

【大白话作用】在元素的内部最后面添加内容，不会覆盖原来的内容。

// 在ul的最后面添加一个li $("ul").append("
  • 新的列表项
    • ");

    .prepend("内容") 内部开头添加

    【大白话作用】在元素的内部最前面添加内容，不会覆盖原来的内容。

    .after("内容") 同级后面添加

    【大白话作用】在元素的后面，添加同级的兄弟元素。

    .before("内容") 同级前面添加

    【大白话作用】在元素的前面，添加同级的兄弟元素。

    .remove() 删除元素

    【大白话作用】把整个元素从页面上彻底删掉，包括元素本身和里面的所有内容、事件。

    // 删除整个盒子 $(".box").remove();

    .empty() 清空内容

    【大白话作用】只清空元素里面的所有内容，保留元素本身，不会删掉元素。

    5. 全部事件大全（用户交互专用）

    ✅ 事件就是用户做了什么操作，比如点击、输入、滑动，我们就执行对应的代码。

    .on("事件名", function(){}) 【万能绑定推荐】

    【大白话作用】给元素绑定事件，所有事件都能用这个方法，支持动态新增的元素，兼容性最好，推荐所有事件都用这个绑定。

    【参数说明】第1个参数是事件名（小写），第2个参数是事件触发后要执行的函数。

    // 给按钮绑定点击事件 $(".btn").on("click", function(){ alert("按钮被点击了"); });

    鼠标事件（最常用）

    【click】鼠标左键单击一下触发

    【dblclick】鼠标左键快速双击触发

    【mouseenter】鼠标划入元素时触发（推荐，不会冒泡卡顿）

    【mouseleave】鼠标划出元素时触发（推荐，和mouseenter配对）

    【mousedown】鼠标按键按下的瞬间触发

    【mouseup】鼠标按键松开的瞬间触发

    【mousemove】鼠标在元素内移动时持续触发

    // 鼠标划入划出效果 $(".box").on("mouseenter", function(){ $(this).css("background", "red"); }).on("mouseleave", function(){ $(this).css("background", "#fff"); });

    键盘事件

    【keydown】键盘上任意按键按下的瞬间触发（所有按键都触发，包括回车、空格、删除）

    【keypress】键盘上的字符按键按下时触发（字母、数字、符号，功能键不触发）

    【keyup】键盘上的按键松开的瞬间触发

    // 按下回车触发 $("input").on("keydown", function(e){ if(e.keyCode == 13){ alert("你按下了回车"); } });

    表单事件

    【focus】输入框获得焦点时触发（用户点击输入框，光标进去了）

    【blur】输入框失去焦点时触发（用户点击别处，光标离开输入框）

    【input】输入框内容实时变化时触发（用户一边打字一边触发）

    【change】输入框/下拉框/单选框内容改变，且失去焦点时触发

    【submit】表单提交时触发

    【reset】表单重置时触发

    窗口&页面事件

    【scroll】页面滚动条滚动时触发

    【resize】浏览器窗口大小改变时触发

    .one("事件名", function(){}) 一次性事件

    【大白话作用】事件只会执行一次，执行完之后自动失效，再也不会触发。

    // 按钮只会触发一次点击 $(".btn").one("click", function(){ alert("只会弹一次"); });

    .off("事件名") 解绑事件

    【大白话作用】取消元素上已经绑定的事件，解绑之后，事件就不会再触发了。

    // 取消按钮的点击事件 $(".btn").off("click"); // 取消元素上的所有事件 $(".box").off();

    6. 动画 & 停止动画（防抖动必备）

    .show(时间, 回调函数) 显示元素

    【大白话作用】让隐藏的元素显示出来，带动画效果。

    【参数说明】

    1. 时间：动画执行的时长，单位是毫秒（1秒=1000毫秒），常用值：0=瞬间显示、200=快、300=标准、500=慢、1000=1秒

    2. 回调函数：动画执行完之后，要执行的代码，可选，不需要可以不写。

    // 0.3秒显示盒子 $(".box").show(300);

    .hide(时间, 回调函数) 隐藏元素

    【大白话作用】让显示的元素隐藏起来，带动画效果，参数规则和show()完全一样。

    .toggle(时间, 回调函数) 切换显示隐藏

    【大白话作用】元素显示就隐藏，隐藏就显示，一键切换，参数规则和show()一样。

    .fadeIn(时间, 回调函数) 淡入

    【大白话作用】元素从透明慢慢变成不透明，柔和显示，只有透明度动画，不改变宽高，适合弹窗、浮层。

    【参数说明】时间规则和show()完全一样，推荐填300。

    .fadeOut(时间, 回调函数) 淡出

    【大白话作用】元素从不透明慢慢变成透明，柔和隐藏，参数规则和fadeIn()一样。

    .slideDown(时间, 回调函数) 下拉展开

    【大白话作用】元素高度从0慢慢展开到完整高度，向下拉开，适合下拉菜单、折叠面板。

    【参数说明】时间推荐填200-300。

    .slideUp(时间, 回调函数) 上拉收起

    【大白话作用】元素高度从完整慢慢收缩到0，向上收起，参数规则和slideDown()一样。

    .slideToggle(时间, 回调函数) 滑动切换

    【大白话作用】元素收起就展开，展开就收起，一键切换，适合折叠菜单。

    .stop(清空队列, 跳到结尾) 停止动画【防抖动必备】

    【大白话作用】停止元素上正在执行的动画，解决鼠标快速来回滑动、动画排队、卡顿抖动的问题，动画前必须加这个！

    【参数说明】

    1. 清空队列：true=清空所有排队的动画，彻底停止；false=只停止当前动画，后面排队的动画继续执行（默认）

    2. 跳到结尾：true=直接瞬间跳到动画的最终状态；false=停在动画当前的位置（默认）

    【小白万能写法】.stop(true, false) 99%的场景都用这个！

    // 防抖动的下拉菜单，不会卡顿 $(".menu").on("mouseenter", function(){ $(this).find(".sub").stop(true,false).slideDown(300); }).on("mouseleave", function(){ $(this).find(".sub").stop(true,false).slideUp(300); });

    .finish() 结束所有动画

    【大白话作用】不管动画执行到哪，直接瞬间完成所有动画，元素直接定格在动画的最终样式。

    .animate({样式}, 时间, 回调函数) 自定义动画

    【大白话作用】自定义复杂动画，宽高、定位、透明度、边距都可以做动画变化。

    【参数说明】第1个参数是要变化的样式对象，第2个参数是动画时间。

    // 盒子向右移动100px，同时变宽 $(".box").animate({ "left": "100px", "width": "300px" }, 500);

    7. AJAX 全套用法（和后台交互）

    ✅ AJAX就是和后台服务器交互，获取数据、提交数据，不用刷新页面。

    $.ajax({}) 【基础万能写法】

    【大白话作用】AJAX的底层方法，所有参数都可以自定义，功能最全，最常用。

    【参数详细说明】

    url：请求的后台接口地址（必填）

    type：请求方式，GET=获取数据，POST=提交数据（必填）

    data：要传给后台的参数，对象格式

    dataType：后台返回的数据格式，一般填json

    async：是否异步，true=异步（默认），false=同步（本地用可以避免跨域）

    success：请求成功后执行的函数，参数res就是后台返回的数据

    error：请求失败后执行的函数

    $.ajax({ url: "https://api.example.com/getData", type: "GET", data: { id: 1, name: "test" }, dataType: "json", async: false, // 关闭异步，本地不跨域 success: function(res){ console.log("请求成功", res); }, error: function(err){ console.log("请求失败", err); } });

    $.get(url, data, 成功回调) GET简写

    【大白话作用】专门用来从后台获取数据的简写方法，代码更短。

    【参数说明】

    url：接口地址（必填）

    data：传给后台的参数，可选

    成功回调：请求成功后执行的函数

    $.get("https://api.example.com/getData", {id:1}, function(res){ console.log("拿到数据了", res); });

    $.post(url, data, 成功回调) POST简写

    【大白话作用】专门用来向后台提交数据的简写方法，比如登录、注册、提交表单。

    【参数说明】和$.get()完全一样。

    $.getJSON(url, data, 成功回调) 获取JSON数据

    【大白话作用】专门用来获取JSON格式的数据，自动解析JSON，不用手动转换。

    $.ajaxSetup({}) 全局AJAX配置

    【大白话作用】给所有AJAX请求统一设置默认参数，不用每个请求都重复写。

    // 全局关闭异步，统一设置json格式 $.ajaxSetup({ async: false, dataType: "json" });

    .serialize() 表单序列化

    【大白话作用】一键获取表单里所有输入框的内容，自动拼接成后台需要的格式，不用一个一个获取输入框的值。

    // 提交表单 $("form").on("submit", function(e){ e.preventDefault(); // 阻止默认刷新 var formData = $(this).serialize(); // 一键获取表单所有数据 $.post("https://api.example.com/submit", formData, function(res){ alert("提交成功"); }); });

    8. 遍历 & 索引详解（批量操作）

    .each(function(index, item){}) 循环遍历

    【大白话作用】循环遍历选中的多个元素，给每个元素做批量操作，比如给所有li改样式、给所有图片加地址。

    【参数详细说明】

    index：索引，当前遍历到的是第几个元素，从0开始数（0=第一个，1=第二个）

    item：当前遍历到的元素，是原生DOM对象，要转成jQuery对象用$(this)或者$(item)

    【小白示例】

    // 给所有li加上序号，改颜色 $("li").each(function(index, item){ // index 就是当前是第几个li $(this).text("第" + (index+1) + "个列表项"); $(this).css("color", "blue"); });

    索引小白必懂核心规则

    【大白话】jQuery里的所有索引，永远都是从0开始数的！

    0 = 第一个元素

    1 = 第二个元素

    2 = 第三个元素

    以此类推，第N个元素，索引就是 N-1

    eq() 和 index() 的区别（小白必看）

    【eq()】：通过索引找元素 → 你告诉它序号，它给你对应的元素

    【index()】：通过元素找索引 → 你给它一个元素，它告诉你这个元素是第几个（序号）

    // eq()：找第2个li var $li = $("li").eq(1); // index()：找这个li是第几个 var idx = $li.index(); // 返回1

    .index() 获取元素的索引

    【大白话作用】获取当前元素在它的兄弟元素中的位置，也就是序号，比如点击li，知道用户点击了第几个。

    // 点击li，弹出是第几个 $("li").on("click", function(){ var idx = $(this).index(); alert("你点击了第" + (idx+1) + "个"); });

    层级关系查找

    【parent()】找到当前元素的直接父级元素

    【parents()】找到当前元素的所有上级祖先元素

    【children()】找到当前元素的直接子元素

    【find("选择器")】找到当前元素里面所有符合选择器的后代元素

    【siblings()】找到当前元素的所有同级兄弟元素

    【next()】找到当前元素的下一个兄弟元素

    【prev()】找到当前元素的上一个兄弟元素

    9. 常用工具方法

    $.trim("字符串") 去除首尾空格

    【大白话作用】去掉字符串开头和结尾的空格，用户输入内容的时候用，避免多余空格影响判断。

    var str = " 你好 "; var newStr = $.trim(str); // 结果："你好"

    $.isArray(对象) 判断是否是数组

    【大白话作用】判断一个变量是不是数组，返回true/false。

    $.isFunction(对象) 判断是否是函数

    【大白话作用】判断一个变量是不是函数，返回true/false。

    $.extend() 合并对象

    【大白话作用】把多个对象合并成一个对象，常用在配置参数合并。

    .width() / .height() 获取元素宽高

    【大白话作用】获取元素的内容宽度/高度，不包含内边距和边框。

    .innerWidth() / .innerHeight()

    【大白话作用】获取元素的宽度/高度，包含内边距，不包含边框。

    .outerWidth() / .outerHeight()

    【大白话作用】获取元素的完整宽度/高度，包含内边距+边框，布局常用。

    $(window).scrollTop() 获取页面滚动距离

    【大白话作用】获取页面滚动条向下滚动了多少像素，用来做回到顶部、导航吸顶效果。

    // 滚动页面，显示回到顶部按钮 $(window).on("scroll", function(){ var top = $(this).scrollTop(); if(top > 500){ $(".back-top").show(); }else{ $(".back-top").hide(); } });

    $(window).width() / $(window).height()

    【大白话作用】获取浏览器窗口的宽度和高度。