jQuery从入门到AJAX实战
jQuery 是一个快速、简洁的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互，让网页开发变得更加简单高效。本文将详细介绍 jQuery 的基础知识和实际应用。
什么是 jQuery？
jQuery 是一个轻量级的 JavaScript 函数库，它封装了许多常用的功能，提供了简洁的 API，使开发者能够用更少的代码实现丰富的网页交互效果。
jQuery 的优势
- 代码简洁：使用 jQuery 可以大大减少代码量
- 跨浏览器兼容：解决了不同浏览器之间的兼容性问题
- 链式操作：支持多个操作连接在一起执行
- 丰富的插件：拥有庞大的插件生态系统
需要具备的基础知识
在使用 jQuery 之前，建议掌握以下前端技术：
|
技术名称 |
描述 |
|
HTML |
网页结构标记语言 |
|
CSS |
网页样式设计语言 |
|
JavaScript |
网页交互脚本语言 |
jQuery 能做什么？
jQuery 提供了丰富的功能，主要包括：
- HTML 元素选取与操作
- CSS 样式操作
- HTML 事件处理
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX 异步数据交互
- 工具函数
jQuery 的基本使用
引入 jQuery 库
在使用 jQuery 之前，需要在 HTML 文件中引入 jQuery 库。以下是几种常用的引入方式:
<!-- 方式一：使用微软 CDN -->
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<!-- 方式二：使用静态文件库 -->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<!-- 方式三：使用本地文件 -->
<script src="js/jquery.min.js"></script>
jQuery 基础语法
jQuery 的基本语法是：$(selector).action()
- $ 符号是 jQuery 的标识符
- selector 用于查找 HTML 元素
- action() 是对元素执行的操作
示例：
<!DOCTYPE html>
<html>
<head>
<title>jQuery 基础语法示例</title>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<style>
.hd {
color: red;
}
#he {
color: yellow;
}
</style>
</head>
<body>
<div id="he" class="hd">这是一个 div 元素</div>
<script>
// jQuery 语法示例：$("#he").action()
$(document).ready(function(){
$("#he").click(function(){
$(this).hide();
});
});
</script>
</body>
</html>
文档就绪事件
在使用 jQuery 操作 DOM 元素之前，需要确保文档已经完全加载。jQuery 提供了 $(document).ready() 方法来实现这一功能。
文档就绪事件的写法
// 完整写法
$(document).ready(function(){
// jQuery 代码写在这里
});
// 简写形式（推荐）
$(function(){
// jQuery 代码写在这里
});
jQuery 事件处理
jQuery 提供了简洁的事件处理机制，让开发者能够轻松地为页面元素添加交互行为。
单击事件
<!DOCTYPE html>
<html>
<head>
<title>jQuery 单击事件示例</title>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
</head>
<body>
<p>这里是一段文字</p>
<button id="but">点我隐藏段落</button>
<script>
$(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</body>
</html>
双击事件
<!DOCTYPE html>
<html>
<head>
<title>jQuery 双击事件示例</title>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
</head>
<body>
<p>这里是一段文字</p>
<button id="but">双击我隐藏段落</button>
<script>
$(function(){
$("button").dblclick(function(){
$("p").hide();
});
});
</script>
</body>
</html>
鼠标事件
jQuery 提供了多种鼠标事件处理方法：
|
事件方法 |
描述 |
|
mouseenter() |
鼠标指针进入元素时触发 |
|
mouseleave() |
鼠标指针离开元素时触发 |
|
mousedown() |
鼠标按键在元素上按下时触发 |
|
mouseup() |
鼠标按键在元素上松开时触发 |
鼠标事件综合示例
<!DOCTYPE html>
<html>
<head>
<title>jQuery 鼠标事件演示</title>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<style>
#demo-box {
width: 300px;
height: 200px;
padding: 20px;
margin: 50px auto;
border: 2px solid #333;
text-align: center;
font-family: Arial, sans-serif;
transition: all 0.3s ease;
}
.highlight {
background-color: #e3f2fd;
border-color: #2196f3;
}
.active {
background-color: #ffebee;
border-color: #f44336;
transform: scale(0.98);
}
#status {
margin-top: 20px;
padding: 10px;
border-radius: 4px;
background-color: #f5f5f5;
}
</style>
</head>
<body>
<div id="demo-box">
<h3>鼠标事件演示区域</h3>
<p>将鼠标移到这里试试</p>
<div id="status">等待事件发生...</div>
</div>
<script>
$(function(){
var $box = $("#demo-box");
var $status = $("#status");
// 鼠标进入元素时触发
$box.mouseenter(function(){
$(this).addClass("highlight");
$status.text("事件: mouseenter - 鼠标已进入区域");
});
// 鼠标离开元素时触发
$box.mouseleave(function(){
$(this).removeClass("highlight active");
$status.text("事件: mouseleave - 鼠标已离开区域");
});
// 鼠标在元素上按下时触发
$box.mousedown(function(){
$(this).addClass("active");
$status.text("事件: mousedown - 鼠标已按下");
});
// 鼠标在元素上松开时触发
$box.mouseup(function(){
$(this).removeClass("active");
$status.text("事件: mouseup - 鼠标已松开");
});
});
</script>
</body>
</html>
焦点事件
焦点事件常用于表单验证和用户交互：
<!DOCTYPE html>
<html>
<head>
<title>jQuery 焦点事件示例</title>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
</head>
<body>
username: <input type="text" id="username"/><br/>
password: <input type="text" id="password"/>
<script>
$(function(){
// 当元素获取焦点时
$("#username").focus(function(){
$(this).css("background-color", "red");
});
// 当元素失去焦点时
$("#password").blur(function(){
$(this).css("background-color", "yellow");
});
});
</script>
</body>
</html>
DOM 操作
jQuery 提供了强大的 DOM 操作方法，可以轻松地获取和设置元素内容、属性等。
获取内容的方法
|
方法 |
描述 |
|
text() |
获取或设置元素的文本内容 |
|
html() |
获取或设置元素的内容（包括 HTML 标签） |
|
val() |
获取或设置表单字段的值 |
|
attr() |
获取或设置元素的属性值 |
获取内容的示例
<!DOCTYPE html>
<html>
<head>
<title>jQuery DOM 操作 - 获取内容</title>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
</head>
<body>
<p>这是一个段落<b>变粗</b></p>
<input type="text" id="text" value="初始值"/>
<a href="http://www.baidu.com" id="baidu">百度</a>
<button id="but1">获取文本内容</button>
<button id="but2">获取元素内容</button>
<button id="but3">获取input当中的值</button>
<button id="but4">获取元素属性值</button>
<script>
$(document).ready(function(){
$("#but1").click(function(){
alert($("p").text());
});
$("#but2").click(function(){
alert($("p").html());
});
$("#but3").click(function(){
alert($("#text").val());
});
$("#but4").click(function(){
alert($("#baidu").attr("href"));
});
});
</script>
</body>
</html>
设置内容的示例
<!DOCTYPE html>
<html>
<head>
<title>jQuery DOM 操作 - 设置内容</title>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
</head>
<body>
<p>这是一个段落<b>变粗</b></p>
<input type="text" id="text"/>
<a href="http://www.baidu.com" id="baidu">百度</a>
<button id="but1">设置文本内容</button>
<button id="but2">设置元素内容</button>
<button id="but3">设置input当中的值</button>
<button id="but4">设置元素属性值</button>
<script>
$(document).ready(function(){
$("#but1").click(function(){
$("p").text("Hello world");
});
$("#but2").click(function(){
$("p").html("<b>Hello world</b>");
});
$("#but3").click(function(){
$("#text").val("Hello Hello world");
});
$("#but4").click(function(){
$("#baidu").attr({
"href": "http://www.taobao.com"
});
});
});
</script>
</body>
</html>
AJAX 应用
AJAX（Asynchronous JavaScript and XML）允许网页在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。jQuery 提供了简洁的 AJAX 方法，使异步数据交互变得简单。
AJAX 登录示例
以下是一个完整的登录页面示例，展示了如何使用 jQuery 的 AJAX 功能：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户登录</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
姓名：<input type="text" id="account" /> <br/>
密码：<input type="text" id="psw" /> <br/>
<input type="button" value="登录" onclick="get()"/>
<!-- onclick点击事件，一旦点击就会被触发的方法 -->
<script>
function get(){
// 获取输入框当中的值
var username = $("#account").val(); // = 是赋值操作 等号的前边是变量名 后边的值
var password = $("#psw").val();
// 在浏览器当中做一个弹框
// alert(username + " " + password);
// 使用 AJAX 发送登录请求
$.ajax({
url: "/06ServletDemo/LoginServlet", // 访问地址
type: "get", // 数据提交方式 get post
data: {"username": username, "password": password}, // 向servlet提交的数据
dataType: "json", // 期待后台返回的数据类型
success: function(value){ // 数据从servlet接口给到前台
if(value.code === 200){
window.location.href = "/06ServletDemo/user.html";
} else {
alert(value.message);
}
},
error: function(xhr, status, error) {
// 处理请求错误
alert("请求失败: " + error);
}
});
}
</script>
</body>
</html>
AJAX 方法参数详解
|
参数 |
描述 |
|
url |
请求发送的目标地址 |
|
type |
请求方法（GET 或 POST） |
|
data |
发送到服务器的数据 |
|
dataType |
预期服务器返回的数据类型 |
|
success |
请求成功时的回调函数 |
|
error |
请求失败时的回调函数 |
实际应用场景
表单验证
jQuery 可以方便地实现表单验证功能：
$(function(){
$("#login-form").submit(function(e){
e.preventDefault(); // 阻止表单默认提交行为
var username = $("#username").val();
var password = $("#password").val();
if(username === ""){
alert("用户名不能为空");
return false;
}
if(password === ""){
alert("密码不能为空");
return false;
}
// 表单验证通过，执行提交操作
$(this).unbind('submit').submit();
});
});
动态内容加载
使用 AJAX 实现无刷新加载内容：
function loadContent(page){
$.ajax({
url: "load-content.php",
type: "GET",
data: {page: page},
success: function(response){
$("#content-area").html(response);
},
error: function(){
$("#content-area").html("加载失败，请重试");
}
});
}
总结
jQuery 作为一个功能强大且易于学习的 JavaScript 库，极大地简化了前端开发工作。通过本文的介绍，您应该已经了解了：
- jQuery 的基本概念和优势
- 如何引入和使用 jQuery
- 常用的 jQuery 事件处理方法
- DOM 操作的基本技巧
- AJAX 异步数据交互的实现
jQuery 虽然近年来随着现代前端框架（如 React、Vue 等）的兴起，使用率有所下降，但它仍然是一个值得学习的优秀库，特别适合快速开发和小型项目。掌握 jQuery 不仅有助于理解 JavaScript 的基本原理，还能为学习更复杂的前端框架打下坚实基础。
希望本文能帮助您快速入门 jQuery，并在实际项目中灵活运用！
扫一扫
6311
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
