一，简介
jQuery 是一个快速、简洁的 框架，是继 Prototype 之后又一个优秀的 代码库（或 框架）。jQuery 设计的宗旨是“Write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装 常用的功能代码，提供一种简便的 设计模式，优化 HTML 文档操作、事件处理、动画设计和 Ajax 交互。
二，引入jQuery
可以通过多种方法在网页中添加 jQuery。 您可以使用以下方法：
- 从 jquery.com 下载 jQuery 库
- 从 CDN 中载入 jQuery 库
代码示例：
<!-- 引入下载好的本地 jQuery 库 -->
< type=\"text/ \" src=\"./js/jquery-1.11.0.js\"></ >
<!-- 从 CDN 中载入 jQuery 库 -->
< type=\"text/ \" src=\"https://cdn.staticfile.org/jquery/1.11.0/jquery.min.js\"></ >
三，jQuery 事件
所有 jQuery 函数都需要位于 事件中，这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。这样做的好处是，可以防止由于文档未完全加载，导致找不到指定的 HTML 元素报错。
代码示例：
<!DOCTYPE html>
<html>
<head>
< >Demo</ >
< charset=\"utf-8\">
<!-- 引入下载好的本地 jQuery 库 -->
< type=\"text/ \" src=\"./js/jquery-1.11.0.js\"></ >
< type=\"text/ \">
// jQuery 编写 事件
jQuery(document).ready(function(){
console.log(\"文档加载完成1\");
});
// jQuery 关键字可以用 $ 替代
$(document).ready(function(){
console.log(\"文档加载完成2\");
});
// jQuery 编写 事件，简写方式
$(function(){
console.log(\"文档加载完成3\");
});
</ >
</head>
<body>
Hello!
</body>
</html>
运行效果：
![\"](\"/images/csdn/15450291241y5F45V029j124.png\")
四，jQuery 语法
1，获取页面元素
语法：$(选择器) 返回匹配到元素的jQuery对象
代码示例：
// 获取 id 为 username 的元素
var $userName = $(\"#username\");
2，获取获得内容
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
代码示例：
<tr>
<td><strong>用户名：</strong></td>
<td><input id=\"username\" type=\"text\" name=\"username\" value=\"test\"/></td>
</tr>
< type=\"text/ \">
$(function(){
// 获取页面中第一个文本输入框
var $text = $(\"input[type=\'text\']\").first();
console.log($text.text()); // 打印空值
console.log($text.html()); // 打印空值
console.log($text.val()); // 打印\"test\"
// 获取页面中第一个 td 元素
var $td = $(\"td\").first();
console.log($td.text()); // 打印\"用户名：\"
console.log($td.html()); // 打印\"<strong>用户名：</strong>\"
console.log($td.val()); // 打印空值
});
</ >
3，元素的属性和CSS样式
jQuery 提供了丰富的方法来操作元素的属性和 CSS 样式
代码示例：
< type=\"text/ \">
$(function(){
// 获取页面中第一个文本输入框
var $text = $(\"input[type=\'text\']\").first();
// 获取元素的属性值
console.log($text.attr(\"value\"));
// 修改元素的属性值
$text.attr(\"value\", \"test01\");
console.log($text.attr(\"value\"));
// 修改元素的 CSS 样式
$text.css(\"color\", \"red\");
});
</ >
4，jQuery 对象和 对象互相转化
jQuery 对象是通过 jQuery 包装DOM 对象后产生的对象。jQuery 对象是 jQuery 独有的，其可以使用 jQuery 里的方法，但是不能使用 DOM 的方法；例如： $(\"#img\").attr(“src”,“test.jpg”); 这里的 $(\"#img\")就是 jQuery 对象。
对象能使用 固有的方法，但是不能使用 jQuery 里的方法。例如：document.getElementById(“img”).src = “test.jpg\"；这里的document.getElementById(“img”) 就是 对象。
代码示例：
< type=\"text/ \">
$(function(){
// 将 对象 td 转换成 jQuery 对象 $td
var td = document.getElementsByTagName(\"td\");
console.log(td);
var $td = $(td);
console.log($td);
// 将 jQuery 对象 $td 转换成 对象 td
td = $td[0];
console.log(td);
});
</ >
控制台输出：
![\"jQuery](\"/images/csdn/1545029125154R50q29tN125.png\")
继续阅读与本文标签相同的文章
下一篇 :
5G布局加速，上海移动第5000个5G基站开通
-
二维码如此普及，为何三维码没办法普及
2026-05-19栏目： 教程
-
山东有效专利量前十企业和前十大专院校名单来啦，第一名你想到了吗
2026-05-19栏目： 教程
-
两种ASO应用优化的核心操作方法
2026-05-19栏目： 教程
-
第126届广交会15日开幕，新产品新技术受青睐
2026-05-19栏目： 教程
-
多位知名专家建言 宁波打造中国隐形冠军之城
2026-05-19栏目： 教程