跳到主要内容jQuery 前端开发核心知识详解 | 极客日志JavaScript大前端
jQuery 前端开发核心知识详解
综述由AI生成系统讲解 jQuery 库的核心知识,涵盖其简介、优势及引入方式。详细介绍了 jQuery 选择器语法、文档就绪方法 ready。重点阐述了 DOM 元素操作,包括内容、属性、样式(宽高、行内、类)的获取与设置。讲解了事件绑定机制,区分直接绑定与委托绑定。深入解析节点操作,涉及创建、插入、替换、删除及遍历。最后介绍了 jQuery Validate 插件的基础使用步骤与验证规则配置,帮助开发者简化前端交互逻辑。
修罗20 浏览 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 会自动遍历集合并批量处理。
- 丰富插件生态:社区提供大量成熟插件,降低开发成本。
3. 下载与引入
- 下载:从 jQuery 官网 下载最新版本,推荐选择 jQuery 3.x。
- 引入:在 HTML 文件中通过
<script> 标签引入本地 jQuery 文件,需注意引入顺序(先引入 jQuery,再引入自定义 JS):
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
二、jQuery 语法:基础与选择器
jQuery 的核心语法是 $(选择器|DOM 元素),返回的是一个 jQuery 对象集合,需通过 jQuery 方法操作。
1. 常用选择器
| 选择器类型 | 语法示例 | 说明 |
|---|
| 标签选择器 | $("h1") | 选择页面中所有 <h1> 标签 |
| 类选择器 | $(".box") | 选择所有类名为 box 的元素 |
| ID 选择器 | $("#loginBtn") | 选择 ID 为 loginBtn 的元素 |
| 并集选择器 | $("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> 中下标为偶数/奇数的元素 |
| 过滤选择器 - 指定下标 | $("div:eq(2)") | 选择所有 <div> 中下标为 2 的元素 |
| 过滤选择器 - 范围下标 | $("div:gt(1)")/$("div:lt(1)") | 选择所有 <div> 中下标大于 1/小于 1 的元素 |
| 过滤选择器 - 焦点 | $("input:focus") | 选择当前获得焦点的 <input> 元素 |
| 文档选择器 | $(document) | 选择整个文档对象 |
注意:jQuery 选择器返回的是 jQuery 对象集合,若需使用原生 DOM 方法,需通过下标或 get(0) 转换为原生 DOM 元素。
2. ready 方法:确保文档加载完成
ready 方法用于指定'DOM 树加载完成后执行的代码',有两种常用写法:
$(document).ready(function(){
console.log("DOM 已加载完成(完整写法)");
});
$(function(){
console.log("DOM 已加载完成(简化写法)");
});
区别于 window.onload:ready 仅需 DOM 树加载完成即可执行,无需等待图片、样式表等资源;而 window.onload 需等待所有资源加载完成后才执行。
三、DOM 元素操作:内容、属性、样式
1. 操作元素内容
text():获取/设置元素的 纯文本内容(不解析 HTML 标签)。
html():获取/设置元素的 HTML 内容(会解析 HTML 标签)。
$(function(){
$(".error").text("账号或密码错误");
$(".info").html("<h1>欢迎登录系统</h1>");
console.log($(".error").text());
console.log($(".info").html());
$("div").text("批量设置文本");
});
2. 操作元素属性
val():获取/设置 <input>、<select>、<textarea> 等表单元素的 value 属性。
attr(属性名):获取元素指定属性的值。
attr(属性名,属性值):设置元素指定属性的值。
removeAttr(属性名):删除元素指定属性。
$(function(){
let inputVal = $("#userInput").val();
$("#userInput").val("修改后的 value");
let inputType = $("#userInput").attr("type");
$("#userInput").attr("type","password");
let userData = $("#userInput").attr("data-user");
$("#content").removeAttr("data-info");
});
3. 操作元素样式
(1)操作宽度与高度
width() / height():获取/设置元素宽高(默认内容区)。
innerWidth() / outerWidth():包含 padding/border 的宽高。
(2)操作行内样式
css() 方法用于获取/设置元素的行内样式,支持单个样式和批量样式设置。
$(function(){
let info = $(".info");
info.css("backgroundColor","skyblue");
info.css("fontSize","18px");
info.css({
color:"white",
padding:"10px 15px",
border:"1px solid #ccc"
});
let bgColor = info.css("backgroundColor");
});
(3)操作类样式
addClass(类名):添加类样式。
removeClass(类名):移除类样式。
toggleClass(类名):切换类样式。
hasClass(类名):判断是否包含类样式。
$(function(){
let text = $(".text");
text.toggleClass("active");
if(text.hasClass("active")){
text.addClass("highlight");
} else {
text.removeClass("highlight");
}
});
四、jQuery 事件绑定:响应用户操作
1. 常用事件类型
| 事件名 | 说明 | 适用元素 |
|---|
click | 鼠标左键单击 | 所有可交互元素 |
dblclick | 鼠标左键双击 | 同 click |
blur | 元素失去焦点 | 表单元素 |
focus | 元素获得焦点 | 同 blur |
keydown | 键盘按键按下 | 所有可获取焦点的元素 |
keyup | 键盘按键释放 | 同 keydown |
mouseenter | 鼠标移入元素 | 所有元素 |
mouseleave | 鼠标移出元素 | 同 mouseenter |
change | 元素内容改变 | 表单元素 |
submit | 表单提交 | <form> 元素 |
2. 事件绑定方式
(1)直接绑定:适用于静态元素
- 语法 1:
$(选择器).事件名 (回调函数)。
- 语法 2:
$(选择器).on("事件名", 回调函数)。
$(function(){
$("#userInput").focus(function(){
$(this).css("border","2px solid #4CAF50");
}).blur(function(){
$(this).css("border","1px solid #ccc");
});
$("#submitBtn").click(function(){
alert("按钮被点击");
});
});
(2)委托绑定:适用于动态元素
动态元素指页面加载后通过 JS 动态生成的元素,需用 on() 委托绑定。
- 语法:
$(静态父元素).on("事件名", 动态元素选择器,回调函数)。
$(function(){
$("#addRowBtn").click(function(){
let newRow = `
<tr>
<td>用户${rowCount}</td>
<td><button class="deleteBtn">删除</button></td>
</tr>
`;
$("#tableBody").append(newRow);
rowCount++;
});
$("#tableBody").on("click",".deleteBtn",function(){
let isConfirm = confirm("确定要删除这一行吗?");
if(isConfirm){
$(this).closest("tr").remove();
}
});
});
五、jQuery 节点操作:创建、插入、删除、遍历
1. 创建与获取节点
- 创建节点:通过
$(HTML 字符串) 语法创建 jQuery 节点对象。
- 获取节点:通过 jQuery 选择器获取已存在的节点。
- 转换节点:通过
$(原生 DOM 元素) 将原生 DOM 元素转换为 jQuery 对象。
2. 插入节点
| 插入类型 | 方法 | 说明 |
|---|
| 内部插入 - 末尾 | parent.append(child) | 将 child 节点插入到 parent 节点的内部末尾 |
| 内部插入 - 开头 | parent.prepend(child) | 将 child 节点插入到 parent 节点的内部开头 |
| 外部插入 - 后面 | sibling.after(newNode) | 将 newNode 节点插入到 sibling 节点的外部后面 |
| 外部插入 - 前面 | sibling.before(newNode) | 将 newNode 节点插入到 sibling 节点的外部前面 |
$(function(){
let newNode = $("<div>这是插入的节点</div>");
$("#container").append(newNode.clone());
$("#container").prepend(newNode.clone());
$("#sibling").after(newNode.clone());
$("#sibling").before(newNode);
});
3. 替换与删除节点
- 替换节点:
target.replaceWith(newNode)。
- 清空节点:
node.empty()(保留节点本身)。
- 删除节点:
node.remove()(彻底移除)。
$(function(){
$("#oldDiv").replaceWith($("<div>新节点</div>"));
$("#deleteDiv").empty();
$("#deleteDiv").remove();
});
4. 查找节点
| 方法 | 说明 |
|---|
children([选择器]) | 获取当前节点的直接子节点 |
parent() | 获取当前节点的直接父节点 |
closest(选择器) | 沿 DOM 树向上查找最近的匹配选择器的父节点 |
next([选择器]) | 获取当前节点的紧邻的下一个同辈节点 |
prev([选择器]) | 获取当前节点的紧邻的上一个同辈节点 |
siblings([选择器]) | 获取当前节点的所有同辈节点 |
find(选择器) | 在当前节点的所有子节点中查找匹配选择器的节点 |
5. 遍历节点
使用 each() 方法遍历集合,回调函数中可获取每个节点的下标和原生 DOM 元素。
$(function(){
$("#fruitList li").each(function(index, nativeDom){
let fruitName = nativeDom.textContent;
console.log(`下标 ${index}:${fruitName}`);
let $currentLi = $(nativeDom);
if(index % 2 === 0){
$currentLi.css("color","red");
} else {
$currentLi.css("color","blue");
}
});
});
六、jQuery Validate 插件
表单验证是前端常见需求,jQuery Validate 插件提供了丰富的验证规则和自定义功能。
1. 核心验证规则
| 规则 | 描述 | 适用场景 |
|---|
required: true | 必须输入的字段 | 账号、密码等必填项 |
email: true | 必须输入正确格式的电子邮件 | 邮箱输入框 |
url: true | 必须输入正确格式的网址 | 链接输入框 |
number: true | 必须输入合法的数字 | 年龄、金额等 |
digits: true | 必须输入整数 | 手机号等 |
equalTo: "#targetId" | 输入值必须与目标元素一致 | 确认密码 |
maxlength: 15 | 输入长度最多为 15 个字符 | 账号限制 |
minlength: 8 | 输入长度最少为 8 个字符 | 密码限制 |
range: [0, 100] | 输入值必须介于 0~100 之间 | 分数、年龄 |
2. 基础使用步骤
步骤 1:引入必要文件
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/messages_zh.js"></script>
步骤 2:编写表单结构
表单元素需添加 name 属性,且建议为必填项添加 required 属性。
<form id="registerForm" method="post" action="register.php">
<div class="form-item">
<label for="username">账号:</label>
<input type="text" id="username" name="username" placeholder="请输入账号">
</div>
<div class="form-item">
<label for="password">密码:</label>
<input type="password" id="password" name="password" placeholder="请输入密码">
</div>
<div class="form-item">
<label for="confirmPwd">确认密码:</label>
<input type="password" id="confirmPwd" name="confirmPwd" placeholder="请再次输入密码">
</div>
<div class="form-item">
<button type="submit" class="submit-btn">注册</button>
</div>
</form>
步骤 3:初始化验证配置
$(function(){
$("#registerForm").validate({
rules: {
username: { required:true, minlength:8, maxlength:15 },
password: { required:true, minlength:8, maxlength:20 },
confirmPwd: { required:true, equalTo:"#password" },
email: { required:true, email:true },
age: { required:true, number:true, range:[0,120] }
},
messages: {
username: { required:"请输入账号", minlength:"账号长度不能小于 8 个字符" },
password: { required:"请输入密码", minlength:"密码长度不能小于 8 个字符" },
confirmPwd: { required:"请确认密码", equalTo:"两次输入的密码不一致" },
email: { required:"请输入邮箱", email:"请输入正确的邮箱格式" },
age: { required:"请输入年龄", number:"请输入合法的数字", range:"年龄必须在 0~120 之间" }
},
submitHandler:function(form){
form.submit();
}
});
});
3. 效果说明
- 实时验证:用户输入过程中会自动触发验证。
- 提交验证:点击提交按钮时,会对所有表单项进行验证。
- 中文提示:引入
messages_zh.js 后,默认提示文本会改为中文。
相关免费在线工具
- Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具,Keycode 信息在线工具,online
- Escape 与 Native 编解码
JavaScript 字符串转义/反转义;Java 风格 \uXXXX(Native2Ascii)编码与解码。 在线工具,Escape 与 Native 编解码在线工具,online
- JavaScript / HTML 格式化
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具,JavaScript / HTML 格式化在线工具,online
- JavaScript 压缩与混淆
Terser 压缩、变量名混淆,或 javascript-obfuscator 高强度混淆(体积会增大)。 在线工具,JavaScript 压缩与混淆在线工具,online
- Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online
- Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online