【jQuery之路】01.开启 jQuery 之门_jquery 引入门-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42339197/article/details/86482873

本文介绍jQuery库的基础知识，包括其简洁语法、跨平台兼容性及对DOM操作的简化。通过对比JavaScript，展示jQuery如何实现更少代码做更多事，同时提供jQuery使用说明和代码规范建议。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

进入正题

1.jQuery简介

2.jQuery的优势（Write less, do more）

3.jQuery的使用说明

前言

在这之前，我学习的JavaScript，写的博客少，总结的也比较少，那时候的我还没有接触优快云，还是朋友说要坚持写，我才有了兴趣，但是后来因为学业繁忙，就没有怎么写，目前也才几篇，不过，今天的我发现，自己多了一个粉丝，挺惊讶的。

所以就想开始学习jQuery 了，JS还没有特别深入，就是一些皮毛，以前听说过jQuery，听说它非常的简洁好用，那今天，我就来看看到底。我学习的是《锋利的jQuery（第2版）》这本书，因为前双十一发现书才是最降价的，一次性购买了5、6本书，真是开心。

这本书先不说内容，就是结构和布局都给我有一种赏心悦目的感觉，在这里不是在推销什么书，而是把好的书能够与大家分享，让大家也去欣赏，那才是共识。当然JS高程、JS语言精粹也是学习前端必不可少的书啦，以后看到什么比较好的书也会分享出来。

进入正题

1.jQuery简介

jQuery是继Prototype之后又一个优秀的JavaScript库。

jQuery具有简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax的操作。

2.jQuery的优势（Write less, do more）

轻量级。
强大的选择器。
出色的DOM操作的封装。
可靠的事件处理机制。
完善的Ajax。
不污染顶级变量。
出色的浏览器兼容性。
链式操作方法。
隐式迭代。
行为层与结构层的分离。
丰富的插件支持。
完善的文档。
开源。

3.jQuery的使用说明

建议大家下载jQuery最新版本。一种是jquery.js（开发板），另一种的 jquery.min.js（生产版）。两者都可行。

关于jQuery的环境配置：jQuery不需要安装，本地测试的话，把下载的jquery.js引用到需要的HTML文档就可以用了。网上的话，把下载的jquery.js放到网站上的一个公共位置，想要用时，只需要引用就行，就像是下面一个例子，比如引入网站上的js包<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>JQuery</title>
        <!--引入jQuery.js-->
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			alert("Hello World!");
		});
	</script>
</head>
<body>
</body>
</html>

其效果就是JavaScript中的相同效果

可能上面有一串代码觉得陌生又熟悉

$(document).ready(function(){
//....
});

其实这一个就相当于JavaScript中的window.onload方法。不过window.onload还是有区别的。下面是它们之间的对比。

可以说"$"就是jQuery 的一个封装体。

4.规范jQuery代码。

（1）对于同一个对象不超过3个操作的，可以直接写成一行。例如：

$("li").show().unbind("click");

（2）对于同一个对象的较多操作，建议每行写一个操作。

（3）对于多个对象的少量操作，可以每个对象写一行，如果涉及到子元素，可以考虑适当地缩进。例如：

$(this).addClass("highlight")
	.children("li").show().end()
.siblings().removeClass("highlight")
	.children("li").hide();

在必要的情况下要养成为代码添加注释的好习惯。

【jQuery之路 】01.开启 jQuery 之门

前言

进入正题

1.jQuery简介

2.jQuery的优势（Write less, do more）

3.jQuery的使用说明

【jQuery之路】01.开启 jQuery 之门