jQuery 核心知识详解：语法、DOM 操作与插件使用

从零开始学 jQuery

在前端开发中，JavaScript 虽能实现 DOM 操作、事件处理等核心功能，但代码往往冗长繁琐，且浏览器兼容性问题突出。而 jQuery 的出现，以'write less, do more'为设计理念，对 JavaScript 进行了高效封装，极大简化了前端开发流程。

jQuery 核心知识🥝

一、jQuery 简介：为什么选择它？

jQuery 由美国人 John Resig 于 2006 年创建，是对 JavaScript 对象和函数的轻量级封装库，至今仍是前端开发中处理 DOM、事件的常用工具。

1. 核心用途

便捷访问和操作 DOM 元素（替代繁琐的原生 JS DOM 方法）。
灵活控制页面样式（行内样式、类样式的添加/移除/切换）。
简化页面事件处理（点击、焦点、键盘等事件的绑定与解绑）。
支持扩展插件（如表单验证插件 Validate、轮播图插件 Slick 等）。
与 Ajax 技术无缝结合（简化前后端数据交互代码）。

2. 核心优势

体积小：压缩后的 jQuery 3.x 版本仅约 100KB，加载速度快，对页面性能影响小。
强大选择器：支持 CSS 选择器、过滤选择器等，可快速定位单个或多个元素。
DOM 封装完善：将原生 JS 中复杂的 DOM 操作（如插入、删除节点）封装为简单方法（如 append()、remove()）。
浏览器兼容性好：自动处理 IE6+、Chrome、Firefox 等浏览器的差异，无需手动编写兼容代码。
隐式迭代：操作多个元素时无需循环，jQuery 会自动遍历集合并批量处理（例：$("li").css("color", "red") 可将所有 <li> 文字设为红色）。
丰富插件生态：社区提供大量成熟插件，覆盖表单验证、图表、动画等场景，降低开发成本。

3. 下载与引入

下载：从 jQuery 官网下载最新版本，推荐选择 jQuery 3.x（不支持 IE6-8，若需兼容旧浏览器可选择 1.x 版本）。

引入：在 HTML 文件中通过 <script> 标签引入本地 jQuery 文件，需注意引入顺序（先引入 jQuery，再引入自定义 JS）：

<!-- 引入本地 jQuery 文件（路径需根据实际项目结构调整） -->
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<!-- 引入自定义 JS（需在 jQuery 之后） -->
<script type="text/javascript" src="js/custom.js"></script>

二、jQuery 语法：基础与选择器

jQuery 的核心语法是 $(选择器|DOM 元素)，返回的是一个jQuery 对象集合（即使仅匹配一个元素，也会封装为集合），需通过 jQuery 方法操作（而非原生 DOM 方法）。

1. 常用选择器

jQuery 支持多种选择器，覆盖大多数场景，以下是高频用法及示例：

选择器类型	语法示例	说明
标签选择器	`$("h1")`	选择页面中所有 `<h1>` 标签
类选择器	`$(".box")`	选择所有类名为 `box` 的元素
ID 选择器	`$("#loginBtn")`	选择 ID 为 `loginBtn` 的元素（仅返回第一个，ID 应唯一）
并集选择器	`$("h1, div, .box")`	选择所有 `<h1>`、`<div>` 标签及类名为 `box` 的元素
后代选择器	`$(".box input")`	选择类名为 `box` 的元素下所有层级的 `<input>`（含子、孙级）
子代选择器	`$(".box > input")`	选择类名为 `box` 的元素下直接子级的 `<input>`（仅一级）
属性选择器	`$("[type='text']")`	选择所有 `type` 属性值为 `text` 的元素
过滤选择器 - 首/尾	`$("div:first")`/`$("div:last")`	选择所有 `<div>` 中的第一个/最后一个
过滤选择器 - 奇偶下标	`$("div:even")`/`$("div:odd")`	选择所有 `<div>` 中下标为偶数/奇数的元素（下标从 0 开始）
过滤选择器 - 指定下标	`$("div:eq(2)")`	选择所有 `<div>` 中下标为 2 的元素（精准匹配单个元素）
过滤选择器 - 范围下标	`$("div:gt(1)")`/`$("div:lt(1)")`	选择所有 `<div>` 中下标大于 1/小于 1 的元素
过滤选择器 - 焦点	`$("input:focus")`	选择当前获得焦点的 `<input>` 元素
文档选择器	`$(document)`	选择整个文档对象（常用于绑定文档加载事件）

注意：jQuery 选择器返回的是 jQuery 对象集合，若需使用原生 DOM 方法（如 innerHTML、textContent），需通过下标（$("div")[0]）或 get(0) 转换为原生 DOM 元素。

2. ready 方法：确保文档加载完成

ready 方法用于指定'DOM 树加载完成后执行的代码'，避免因 DOM 未加载而导致的元素查找失败问题，有两种常用写法：

// 1. 完整写法：明确绑定 document 对象
$(document).ready(function(){
    // DOM 加载完成后执行的代码（如操作 DOM、绑定事件）
    console.log("DOM 已加载完成（完整写法）");
});

// 2. 简化写法（推荐）：省略 document 和 ready 关键字
$(function(){
    // 功能与完整写法一致，代码更简洁
    console.log("DOM 已加载完成（简化写法）");
});

区别于 window.onload：ready 仅需 DOM 树加载完成即可执行，无需等待图片、样式表等资源；而 window.onload 需等待所有资源加载完成后才执行，因此 ready 执行时机更早。

三、DOM 元素操作：内容、属性、样式

jQuery 提供了简洁的方法操作 DOM 元素的内容、属性和样式，无需手动处理原生 DOM 对象的兼容性问题。

1. 操作元素内容

根据需求选择 text() 或 html() 方法，前者处理纯文本，后者支持 HTML 标签解析：

text()：获取/设置元素的纯文本内容（不解析 HTML 标签）。
html()：获取/设置元素的HTML 内容（会解析 HTML 标签，生成对应 DOM 结构）。

示例：

<body>
<div class="error"></div>
<div class="info"></div>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
    // 1. 设置纯文本（不解析 HTML 标签）
    $(".error").text("账号或密码错误");
    // 若用 text() 设置 HTML 标签，会原样显示标签文本
    // $(".error").text("<span>账号或密码错误</span>"); // 显示：<span>账号或密码错误</span>
    
    // 2. 设置 HTML 内容（解析 HTML 标签）
    $(".info").html("<h1>欢迎登录系统</h1>");
    // 会生成 <h1> 标签并显示
    
    // 3. 获取内容
    console.log($(".error").text()); // 输出：账号或密码错误
    console.log($(".info").html()); // 输出：<h1>欢迎登录系统</h1>
    
    // 4. 处理 jQuery 集合：若匹配多个元素，text()/html() 会批量操作
    $("div").text("批量设置文本"); // 所有 <div> 都会显示'批量设置文本'
});
</script>
</body>

在这里插入图片描述

2. 操作元素属性

根据属性类型选择对应方法，val() 专门处理表单元素的 value 属性，attr() 处理普通属性和自定义属性：

val()：获取/设置 <input>、<select>、<textarea> 等表单元素的 value 属性。
attr(属性名)：获取元素指定属性的值（支持原生属性和自定义属性）。
attr(属性名，属性值)：设置元素指定属性的值。
removeAttr(属性名)：删除元素指定属性（包括自定义属性）。

示例：

<body>
<!-- 表单元素 -->
<input type="text" value="初始值" id="userInput" data-user="admin">
<!-- 自定义属性元素 -->
<div id="content" data-info="这是测试内容"></div>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
    // 1. 操作表单元素的 value 属性（推荐用 val()）
    let inputVal = $("#userInput").val();
    console.log("初始 value：", inputVal); // 输出：初始值
    $("#userInput").val("修改后的 value"); // 设置新的 value
    
    // 2. 操作普通属性（如 type）
    let inputType = $("#userInput").attr("type");
    console.log("input 类型：", inputType); // 输出：text
    $("#userInput").attr("type","password"); 
    
    
     userData = $().();
    .(, userData); 
     contentInfo = $().();
    .(, contentInfo); 
    
    
    $().(,);
    
    
    $().(); 
    .(, $().()); 
});

在这里插入图片描述

3. 操作元素样式

jQuery 支持操作行内样式和类样式，类样式更适合批量样式管理，行内样式适合动态修改单个样式。

（1）操作宽度与高度

width() 和 height() 方法用于获取/设置元素的宽高，默认操作'内容区'尺寸（不含 padding、border、margin）：

width()：获取/设置元素宽度。
height()：获取/设置元素高度。
补充方法：innerWidth()（内容区+padding）、outerWidth()（内容区+padding+border）、outerWidth(true)（内容区+padding+border+margin），高度同理。

示例：

<body>
<div class="box" style="width: 200px;padding: 10px;border: 2px solid #000;margin: 5px;"></div>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
    let box = $(".box");
    
    // 1. 获取宽度（默认获取内容区宽度，不含 padding、border）
    let contentWidth = box.width();
    console.log("内容区宽度：", contentWidth); // 输出：200
    
    // 2. 获取包含 padding 的宽度
    let innerW = box.innerWidth();
    console.log("内容区+padding 宽度：", innerW); // 输出：200 + 10*2 = 220
    
    // 3. 获取包含 padding+border 的宽度
    let outerW = box.outerWidth();
    console.log("内容区+padding+border 宽度：", outerW); // 输出：220 + 2*2 = 224
    
    // 4. 获取包含 padding+border+margin 的宽度
    let outerWWithMargin = box.outerWidth(true);
    console.log("完整宽度（含 margin）：", outerWWithMargin); // 输出：224 + 5*2 = 234
    
    // 5. 设置宽度（默认设置内容区宽度）
    box.();
    .(, box.()); 
});

（2）操作行内样式

css() 方法用于获取/设置元素的行内样式，支持单个样式和批量样式设置，需注意样式属性的命名规则（驼峰命名法）：

css(样式属性名)：获取元素指定行内样式的值（若未设置行内样式，会返回计算后的样式值）。
css(样式属性名，样式属性值)：设置元素指定行内样式。
css({样式 1: 值 1, 样式 2: 值 2, ...})：批量设置行内样式（样式属性含中横线时，需改为驼峰命名，如 font-size → fontSize）。

示例：

<body>
<div class="info">这是测试文本</div>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
    let info = $(".info");
    
    // 1. 单个样式设置（驼峰命名）
    info.css("backgroundColor","skyblue"); // 等价于 CSS 中的 background-color: skyblue
    info.css("fontSize","18px"); // 等价于 CSS 中的 font-size: 18px
    
    // 2. 批量样式设置（对象形式）
    info.css({ 
        color:"white", // 文本颜色（无中横线，直接写 color）
        padding:"10px 15px", // 内边距（无中横线，直接写 padding）
        border:"1px solid #ccc", // 边框（复合属性可直接写）
        borderRadius:"5px" // 等价于 CSS 中的 border-radius: 5px
    });
    
    // 3. 获取样式值
    let bgColor = info.css("backgroundColor");
    console.log("背景色：", bgColor); // 输出：rgb(135, 206, 235)（浏览器计算后的颜色值）
    let fontSize = info.css();
    .(, fontSize); 
});

（3）操作类样式

类样式通过预定义 CSS 类来管理样式，适合批量样式切换（如'激活态''隐藏态'），常用方法如下：

addClass(类名)：为元素添加指定类样式（可添加多个类，用空格分隔，如 addClass("active highlight")）。
removeClass(类名)：为元素移除指定类样式（可移除多个类，用空格分隔）。
toggleClass(类名)：切换类样式（元素有该类则移除，无则添加）。
hasClass(类名)：判断元素是否包含指定类样式，返回布尔值（true 包含，false 不包含）。

示例：

<style>
/* 预定义类样式 */
.active{
    background-color: #4CAF50;
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
}
.highlight{
    border: 2px solid #ff9800;
    box-shadow: 0 0 5px rgba(255, 152, 0, 0.5);
}
</style>
<body>
<button id="btn">点击切换样式</button>
<div class="text">这是一段可激活的文本</div>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
    let btn = $("#btn");
    let text = $(".text");
    
    // 按钮点击事件：切换类样式
    btn.click(function(){
        
        text.();
        
        
        (text.()){
            text.();
        }{
            text.();
        }
        
        
        .(, text.());
        .(, text.());
    });
});

四、jQuery 事件绑定：响应用户操作

jQuery 简化了事件绑定流程，支持直接绑定（静态元素）和委托绑定（动态元素），覆盖大多数用户交互场景。

1. 常用事件类型

事件名	说明	适用元素
`click`	鼠标左键单击	所有可交互元素（按钮、链接、div 等）
`dblclick`	鼠标左键双击	同 click
`blur`	元素失去焦点	表单元素（input、select、textarea 等）
`focus`	元素获得焦点	同 blur
`keydown`	键盘按键按下（按住时持续触发）	所有可获取焦点的元素
`keyup`	键盘按键释放	同 keydown
`mouseenter`	鼠标移入元素（不冒泡，子元素不触发）	所有元素
`mouseleave`	鼠标移出元素（不冒泡，子元素不触发）	同 mouseenter
`mousemove`	鼠标在元素内移动（持续触发）	所有元素
`change`	元素内容改变（失去焦点后触发）	表单元素（input、select、textarea 等）
`submit`	表单提交（点击提交按钮或按 Enter 触发）	`<form>` 元素

2. 事件绑定方式

（1）直接绑定：适用于静态元素

静态元素指页面加载时已存在的元素，可通过'事件名方法'或 on() 方法直接绑定事件：

语法 1（事件名方法）：$(选择器).事件名 (回调函数)。
语法 2（on() 方法）：$(选择器).on("事件名", 回调函数)（更灵活，支持解绑）。

示例：

<body>
<input type="text" id="userInput" placeholder="请输入内容">
<button id="submitBtn">提交</button>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
    // 1. 输入框焦点事件（focus + blur）
    $("#userInput").focus(function(){
        // 获得焦点：添加边框样式
        $(this).css("border","2px solid #4CAF50");
    }).blur(function(){
        // 失去焦点：恢复默认边框
        $(this).css("border","1px solid #ccc");
        // 失去焦点时获取输入值
        let inputVal = $(this).val();
        console.log("输入内容：", inputVal);
    });
    
    // 2. 按钮点击事件（两种写法）
    // 写法 1：事件名方法
    $("#submitBtn").click(function(){
        ();
    });
    
    
    
    
    
    
    
    
});

在这里插入图片描述

（2）委托绑定：适用于动态元素

动态元素指页面加载后通过 JS 动态生成的元素（如点击按钮添加的 <tr>、<div> 等），直接绑定事件无效，需用 on() 委托绑定（将事件委托给静态父元素）：

语法：$(静态父元素).on("事件名", 动态元素选择器，回调函数)。
原理：事件委托利用事件冒泡机制，将事件绑定到静态父元素上，当动态元素触发事件时，事件冒泡到父元素，再通过'动态元素选择器'匹配目标元素，执行回调函数。

示例：

<body>
<button id="addRowBtn">添加表格行</button>
<table border="1" cellpadding="8" cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tableBody">
<!-- 动态生成的行将插入这里 -->
</tbody>
</table>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
    let rowCount = 1; // 行计数器，用于生成不同姓名
    
    // 1. 点击按钮添加动态行
    $("#addRowBtn").click(function(){
        let newRow = `
            <tr>
                <td>用户${rowCount}</td>
                <td>
                    <button>删除</button>
                </td>
            </tr>
        `;
        $().(newRow); 
        rowCount++;
    });
    
    
    
    $().(,,(){
        
         isConfirm = ();
        (isConfirm){
            
            $().().();
            .();
        }
    });
});

在这里插入图片描述

五、jQuery 节点操作：创建、插入、删除、遍历

节点操作是 DOM 操作的核心，jQuery 提供了直观的方法处理节点的创建、插入、替换、删除和遍历，简化原生 JS 的复杂流程。

1. 创建与获取节点

创建节点：通过 $(HTML 字符串) 语法创建 jQuery 节点对象（后续可通过插入方法添加到 DOM 树）。
获取节点：通过 jQuery 选择器（如 $("#id")、$(".class")）获取已存在的节点，返回 jQuery 集合。
转换节点：通过 $(原生 DOM 元素) 将原生 DOM 元素转换为 jQuery 对象，以便使用 jQuery 方法。

示例：

<body>
<div id="container"></div>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
    // 1. 创建节点：创建一个 <div> 节点（包含子元素和属性）
    let newDiv = $(`
        <div>
            <p>这是创建的新节点</p>
            <button>节点按钮</button>
        </div>
    `);
    
    // 2. 获取节点：获取页面中已存在的 #container 节点
    let container = $("#container");
    
    // 3. 转换节点：将原生 DOM 元素转换为 jQuery 对象
    let nativeDom = document.getElementById("container"); // 原生 DOM 元素
    let jqueryDom = $(nativeDom); // 转换为 jQuery 对象
    
    console.log("原生 DOM 元素：", nativeDom);
    console.log("转换后的 jQuery 对象：", jqueryDom);
    
    // 4. 将创建的节点添加到容器（后续'插入节点'会详细讲解）
    container.append(newDiv);
});
</script>
</body>

2. 插入节点

插入节点用于将创建的节点添加到 DOM 树的指定位置，jQuery 提供了多种插入方法，可根据需求选择'内部插入'或'外部插入'：

插入类型	方法	说明	示例
内部插入 - 末尾	`parent.append(child)`	将 child 节点插入到 parent 节点的内部末尾（子元素的最后一位）	`$("#container").append(newDiv)`
内部插入 - 末尾	`child.appendTo(parent)`	与 `append()` 相反，将 child 节点插入到 parent 节点的内部末尾	`newDiv.appendTo($("#container"))`
内部插入 - 开头	`parent.prepend(child)`	将 child 节点插入到 parent 节点的内部开头（子元素的第一位）	`$("#container").prepend(newDiv)`
内部插入 - 开头	`child.prependTo(parent)`	与 `prepend()` 相反，将 child 节点插入到 parent 节点的内部开头	`newDiv.prependTo($("#container"))`
外部插入 - 后面	`sibling.after(newNode)`	将 newNode 节点插入到 sibling 节点的外部后面（与 sibling 同级）	`$("#box").after(newDiv)`
外部插入 - 后面	`newNode.insertAfter(sibling)`	与 `after()` 相反，将 newNode 节点插入到 sibling 节点的外部后面	`newDiv.insertAfter($("#box"))`
外部插入 - 前面	`sibling.before(newNode)`	将 newNode 节点插入到 sibling 节点的外部前面（与 sibling 同级）	`$("#box").before(newDiv)`
外部插入 - 前面	`newNode.insertBefore(sibling)`	与 `before()` 相反，将 newNode 节点插入到 sibling 节点的外部前面	`newDiv.insertBefore($("#box"))`

示例：

<body>
<div id="container"><p>容器内原有内容</p></div>
<div id="sibling">参考同级元素</div>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
    // 创建要插入的节点
    let newNode = $("<div>这是插入的节点</div>");
    
    // 1. 内部插入：插入到 #container 内部
    // 内部末尾（原有 <p> 后面）
    $("#container").append(newNode.clone()); // clone() 复制节点，避免节点被移动
    // 内部开头（原有 <p> 前面）
    $("#container").prepend(newNode.clone());
    
    // 2. 外部插入：插入到 #sibling 同级位置
    // 外部后面（#sibling 后面）
    $("#sibling").after(newNode.clone());
    // 外部前面（#sibling 前面）
    $("#sibling").before(newNode);
});
</script>
</body>

3. 替换与删除节点

替换节点：target.replaceWith(newNode)：用 newNode 节点替换 target 节点（target 节点会从 DOM 树中移除）。
删除节点：
- node.empty()：清空 node 节点的所有子内容（包括子节点和文本），但 node 节点本身保留。
- node.remove()：将 node 节点（包括所有子内容）从 DOM 树中彻底移除，后续无法再使用该节点。

示例：

<body>
<div id="oldDiv">这是要被替换的旧节点</div>
<div id="deleteDiv"><p>这是要被删除的内容</p><input type="text" placeholder="输入框"></div>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
    // 1. 替换节点：用新节点替换 #oldDiv
    let newDiv = $("<div>这是替换后的新节点</div>");
    $("#oldDiv").replaceWith(newDiv); // 替换后，#oldDiv 已从 DOM 树中移除，无法再获取
    console.log("替换后 #oldDiv 是否存在：", $("#oldDiv").length); // 输出：0
    
    // 2. 清空节点：清空 #deleteDiv 的子内容（节点本身保留）
    $("#deleteDiv").empty();
    console.log("清空后 #deleteDiv 的子内容：", $("#deleteDiv").html()); // 输出：""
    
    // 3. 彻底删除节点：删除 #deleteDiv（包括节点本身）
    $("#deleteDiv").();
    .(, $().); 
});

4. 查找节点

查找节点用于在已有的 DOM 树中查找指定关系的节点（如父节点、子节点、同辈节点等），常用方法如下：

方法	说明	示例
`children([选择器])`	获取当前节点的直接子节点（仅一级，不含孙级），可选参数'选择器'用于筛选子节点	`$("#container").children("div")`（获取 #container 下直接子级的 div）
`parent()`	获取当前节点的直接父节点（仅一级）	`$(".child").parent()`（获取 .child 的直接父节点）
`closest(选择器)`	沿 DOM 树向上查找最近的匹配选择器的父节点（包括当前节点本身）	`$(".btn").closest("form")`（查找 .btn 最近的 form 父节点）
`next([选择器])`	获取当前节点的紧邻的下一个同辈节点，可选参数'选择器'用于筛选	`$("li:first").next()`（获取第一个 li 的下一个同辈 li）
`prev([选择器])`	获取当前节点的紧邻的上一个同辈节点，可选参数'选择器'用于筛选	`$("li:last").prev()`（获取最后一个 li 的上一个同辈 li）
`siblings([选择器])`	获取当前节点的所有同辈节点（不包括自身），可选参数'选择器'用于筛选	`$("li.active").siblings()`（获取 .active li 的所有同辈 li）
`find(选择器)`	在当前节点的所有子节点（包括子、孙、曾孙等）中查找匹配选择器的节点	`$("#container").find(".item")`（获取 #container 下所有 .item 节点）
`first()`	获取 jQuery 集合中的第一个节点	`$("li").first()`（获取所有 li 中的第一个）
`last()`	获取 jQuery 集合中的最后一个节点	`$("li").last()`（获取所有 li 中的最后一个）

示例：

<body>
<div class="grandparent">
    <div class="parent">
        <div class="child item">子节点 1</div>
        <div class="child">子节点 2</div>
        <div class="child item">子节点 3</div>
    </div>
    <div class="sibling">同辈节点</div>
</div>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
    let child2 = $("div.child:eq(1)"); // 获取'子节点 2'
    
    // 1. 查找直接子节点
    let parentChildren = $(".parent").children();
    console.log("parent 的直接子节点数量：", parentChildren.length); // 输出：3
     parentItemChildren = $().();
    .(, parentItemChildren.); 
    
    
     child2Parent = child2.();
    .(, child2Parent.()); 
    
    
     closestGrandparent = child2.();
    .(, closestGrandparent.()); 
    
    
     child2Next = child2.(); 
    .(, child2Next.()); 
     child2Prev = child2.(); 
    .(, child2Prev.()); 
     child2Siblings = child2.(); 
    .(, child2Siblings.); 
    
    
     allItems = $().();
    .(, allItems.); 
    
    
     firstChild = $().();
    .(, firstChild.()); 
     lastChild = $().();
    .(, lastChild.()); 
});

5. 遍历节点

当需要对 jQuery 集合中的每个节点执行相同操作时，可使用 each() 方法遍历集合，回调函数中可获取每个节点的下标和原生 DOM 元素：

语法：$(选择器).each(function(index, nativeDom) { ... })。
- index：当前节点在集合中的下标（从 0 开始）。
- nativeDom：当前节点的原生 DOM 元素（如需使用 jQuery 方法，需转换为 jQuery 对象：$(nativeDom)）。

示例：

<body>
<ul id="fruitList">
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
<li>葡萄</li>
</ul>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
    // 遍历所有 li 节点
    $("#fruitList li").each(function(index, nativeDom){
        // 1. 获取下标和原生 DOM 元素的内容
        let fruitName = nativeDom.textContent; // 原生 DOM 方法
        console.log(`下标 ${index}：${fruitName}`); // 输出：下标 0：苹果，下标 1：香蕉，等
        
        // 2. 转换为 jQuery 对象，执行 jQuery 方法
        let $currentLi = $(nativeDom);
        
        // 下标为偶数的 li 设为红色，奇数设为蓝色
        if(index % 2 === 0){
            $currentLi.css("color",);
        }{
            $currentLi.(,);
        }
        
        
        $currentLi.((){
            ();
        });
    });
});

六、jQuery Validate 插件🚀🚀🚀

表单验证是前端常见需求（如注册、登录表单），jQuery Validate 插件提供了丰富的验证规则和自定义功能，无需手动编写复杂的验证逻辑，极大提升开发效率。

1. 核心验证规则🧾

jQuery Validate 内置了多种常用验证规则，可直接在表单元素或配置中使用：

规则	描述	适用场景
`required: true`	必须输入的字段（不能为空）	账号、密码、邮箱等必填项
`remote: "url"`	通过 Ajax 请求验证输入值（如验证账号是否已存在）	唯一性验证（账号、手机号等）
`email: true`	必须输入正确格式的电子邮件（如 `[email protected]`）	邮箱输入框
`url: true`	必须输入正确格式的网址（如 `http://xxx.com` 或 `https://xxx.com`）	个人主页、链接输入框
`date: true`	必须输入正确格式的日期（如 `2024/05/20`），注意：IE6 不兼容	日期输入框（需谨慎使用）
`dateISO: true`	必须输入 ISO 格式的日期（如 `2024-05-20`），仅验证格式，不验证有效性	日期输入框（推荐使用）
`number: true`	必须输入合法的数字（支持负数、小数）	年龄、金额等数字输入框
`digits: true`	必须输入整数（不支持负数、小数）	手机号、身份证号（纯数字部分）等
`creditcard: true`	必须输入合法的信用卡号（验证格式和校验位）	信用卡号输入框
`equalTo: "#targetId"`	输入值必须与 `#targetId` 元素的值一致	确认密码、确认邮箱等
`accept: ".(jpg 或 png 或 gif)$"`	输入的文件后缀必须匹配指定格式（仅用于文件上传）	文件上传输入框（如头像上传）
`maxlength: 15`	输入长度最多为 15 个字符（汉字算 1 个字符）	账号、昵称等（限制最大长度）
`minlength: 8`	输入长度最少为 8 个字符（汉字算 1 个字符）	密码等（限制最小长度）
`rangelength: [8, 15]`	输入长度必须介于 8~15 个字符之间（汉字算 1 个字符）	账号、密码等（限制长度范围）
`max: 100`	输入值不能大于 100（适用于数字）	年龄（如最大 100 岁）、数量等
`min: 0`	输入值不能小于 0（适用于数字）	金额、数量等（非负）
`range: [0, 100]`	输入值必须介于 0~100 之间（适用于数字）	年龄（0~~100 岁）、分数（0~~100 分）等

2. 基础使用步骤

使用 jQuery Validate 插件需遵循以下步骤，核心是'引入文件→编写表单→初始化验证'：

步骤 1：引入必要文件

需引入 3 个文件（jQuery 核心库、Validate 插件核心库、中文提示库，中文提示库可选）：

<!-- 1. 引入 jQuery 核心库（必须在 Validate 之前） -->
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<!-- 2. 引入 Validate 插件核心库 -->
<script type="text/javascript" src="js/jquery.validate.js"></script>
<!-- 3. 引入中文提示库（可选，用于将默认英文提示改为中文） -->
<script type="text/javascript" src="js/messages_zh.js"></script>

步骤 2：编写表单结构

表单元素需添加 name 属性（Validate 插件通过 name 绑定验证规则），且建议为必填项添加 required 属性（或在配置中设置 required: true）：

<form id="registerForm" method="post" action="register.php">
<!-- 账号：必填，长度 8~15 字符 -->
<div class="form-item">
<label for="username">账号：</label>
<input type="text" id="username" name="username" placeholder="请输入账号（8-15 字符）">
</div>
<!-- 密码：必填，长度 8~20 字符 -->
<div class="form-item">
<label for="password">密码：</label>
<input type="password" id="password" name="password" placeholder="请输入密码（8-20 字符）">
</div>
<!-- 确认密码：必填，需与密码一致 -->
<div class="form-item">
<label for=>确认密码：




邮箱：




年龄：




注册

步骤 3：初始化验证配置

通过 $("#formId").validate({ ... }) 初始化验证，配置中可设置验证规则（rules）、提示信息（messages）、验证通过后的回调（submitHandler）等：

$(function(){
    // 初始化表单验证
    $("#registerForm").validate({
        // 1. 验证规则：key 为表单元素的 name 属性，value 为规则对象
        rules:{
            username:{
                required:true, // 必填
                minlength:8, // 最小长度 8
                maxlength:15 // 最大长度 15
            },
            password:{
                required:true,
                minlength:8,
                maxlength:20
            },
            confirmPwd:{
                required:true,
                equalTo:"#password" // 必须与 #password 的值一致
            },
            email:{
                required:true,
                email:true // 验证邮箱格式
            },
            age:{
                required:true,
                number:true, // 必须是数字
                range:[0,120] // 范围 0~120
            }
        },
        // 2. 自定义提示信息：key 与 rules 对应，value 为提示文本
        messages:{
            username:{
                :,
                :,
                :
            },
            :{
                :,
                :,
                :
            },
            :{
                :,
                :
            },
            :{
                :,
                :
            },
            :{
                :,
                :,
                :
            }
        },
        
        :(){
            
            form.();
        }
    });
});

3. 效果说明

实时验证：用户输入过程中（如失去焦点时），会自动触发验证，若不符合规则，会显示自定义的错误提示。
提交验证：点击提交按钮时，会对所有表单项进行验证，若存在未通过项，会阻止表单提交并显示错误提示；若全部通过，会执行 submitHandler 中的逻辑（如 Ajax 提交）。
中文提示：引入 messages_zh.js 后，默认提示文本会改为中文（如'这是必填字段''请输入正确的邮箱格式'），无需手动编写所有提示信息。

在这里插入图片描述

jQuery 核心知识详解：语法、DOM 操作与插件使用

从零开始学 jQuery

jQuery 核心知识🥝

一、jQuery 简介：为什么选择它？

1. 核心用途

2. 核心优势

3. 下载与引入

二、jQuery 语法：基础与选择器

1. 常用选择器

2. ready 方法：确保文档加载完成

三、DOM 元素操作：内容、属性、样式

1. 操作元素内容

2. 操作元素属性

3. 操作元素样式

（1）操作宽度与高度

（2）操作行内样式

（3）操作类样式

四、jQuery 事件绑定：响应用户操作

1. 常用事件类型

2. 事件绑定方式

（1）直接绑定：适用于静态元素

（2）委托绑定：适用于动态元素

五、jQuery 节点操作：创建、插入、删除、遍历

1. 创建与获取节点

2. 插入节点

3. 替换与删除节点

4. 查找节点

5. 遍历节点

六、jQuery Validate 插件🚀🚀🚀

1. 核心验证规则🧾

2. 基础使用步骤

步骤 1：引入必要文件

步骤 2：编写表单结构

步骤 3：初始化验证配置

3. 效果说明

更多推荐文章

相关免费在线工具

jQuery 核心知识详解：语法、DOM 操作与插件使用

从零开始学 jQuery

jQuery 核心知识🥝

一、jQuery 简介：为什么选择它？

1. 核心用途

2. 核心优势

3. 下载与引入

二、jQuery 语法：基础与选择器

1. 常用选择器

2. ready 方法：确保文档加载完成

三、DOM 元素操作：内容、属性、样式

1. 操作元素内容

2. 操作元素属性

3. 操作元素样式

（1）操作宽度与高度

（2）操作行内样式

（3）操作类样式

四、jQuery 事件绑定：响应用户操作

1. 常用事件类型

2. 事件绑定方式

（1）直接绑定：适用于静态元素

（2）委托绑定：适用于动态元素

五、jQuery 节点操作：创建、插入、删除、遍历

1. 创建与获取节点

2. 插入节点

3. 替换与删除节点

4. 查找节点

5. 遍历节点

六、jQuery Validate 插件🚀🚀🚀

1. 核心验证规则🧾

2. 基础使用步骤

步骤 1：引入必要文件

步骤 2：编写表单结构

步骤 3：初始化验证配置

3. 效果说明

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具