jQuery入门指南-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_57575133/article/details/127628523

jQuery是一个轻量级的JavaScript框架，是继Prototype之后出现的非常优秀的JavaScript核心库。jQuery的设计宗旨是“Writer Less，Do More”，即倡导写更少的代码，做更多的事情。

1.认识jQuery

jQuery诞生于2005年，由John Resign开发。jQuery经历十多年的开发，如今该框架底层代码经过不断优化变得非常简洁、高效，成为全球最受欢迎的JavaScript代码框架。

jQuery封装常用的JavaScript代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、CSS设计和Ajax交互。

jQuery功能很强大，它能够帮助用户方便、快速地完成下面任务。

精确选择页面对象。
jQuery提供了可靠而富有效率的选择器，只需要一个CSS选择器字符串，即可准确获取需要检查或操纵的文档元素。
进行可靠的CSS样式控制。
使用JavaScript控制CSS受限于浏览器的兼容性，而jQuery可以弥补这一不足，他提供了跨浏览器的标准解决方案。
使用DOM操作规范化。
jQuery使用少量的代码就能够完成复杂的DOM操作，对HTML文档的整个结构都能重写或者扩展。使用起来远比JavaScript直接控制便捷。
标准化事件控制。
jQuery提供丰富的页面事件，这些事件使用简单、易用、易记，不需要考虑浏览器兼容性问题，但是如果使用JavaScript直接控制用户行为，需要考虑的问题就很多，既需要考虑HTML文档结构与事件处理函数的合成，还需要考虑浏览器的不一致性。
支持网页特效。
jQuery内置了一批淡入、擦除和移动之类的效果，以及制作新效果的工具包，用户只需要简单地调用动画函数，就可以快速设计出高级动画页面。如果直接使用JavaScript实现，需要考虑CSS动画控制，还需要考虑浏览器解析差异，模拟的动画效果或许很生硬，或者很粗糙等。
快速通信。
jQuery对Ajax技术的支持很缜密，它通过消除这一过程中的浏览器特定的复杂性，使用户得以专注于服务器端的功能设计。
扩展JavaScript内核。
jQuery提供了对JavaScript核心功能的扩展，如迭代和数组操作等，增加对客户端、数据存储和JavaScript扩展的支持。

2.使用jQuery

jQuery项目主要包括jQuery Core（核心库）、jQuery UI（界面库）、Sizzle（CSS选择器）、jQuery Mobile（jQuery移动版）和QUnit（测试套件）5个部分。

jQuery参考网址
类型	网址
jQuery框架官网	https://jquery.com/
jQuery项目组官网	http://jquery.org/
jQueryUI项目主页	http://jqueryui.com/
jQueryMobile项目主页	http://jquerymobile.com/
Sizzle选择器引擎官网	http://sizzlejs.com/
QUnit官网	http://qunitjs.com/
John Resign个人网站（jQuery原创作者）	http://ejohn.org/

2.1下载jQuery

访问jQuery官方网站（https://jquery.com/），下载最新新版的jQuery库文件，在网站首页单击“Download jQuery v.x”图标（x代表最新版本号），进入下载页面，如下图所示：

        如果选择“Download the compressed, production jQuery 3.6.1” 选项，则可以下载代码压缩版，下载的文件为jQuery-3.6.1.min.js。
         如果选择“Download the uncompressed, development jQuery 3.6.1” 选项，则可以下载包含注释的未被压缩的版本，下载的文件为jQuery-3.6.1.js。
也可以访问下面网址进行下载：
        GitHub - jquery/jquery: jQuery JavaScript Library
  https://code.jquery.com/

2.2安装jQuery

jQuery库不需要复杂的安装，只需要把下载的库文件放到站点中，然后导入页面即可。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<!-- 引用jQuery.js -->
		<script src="./js/jquery-3.6.0.min.js"></script>
		<script type="text/javascript">
			// 在这里用户就可以使用jQuery编程了
		</script>
	</body>
</html>

2.3测试jQuery

引入jQuery库文件之后，就可以在页面中进行jQuery开发了。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<!-- 引用jQuery.js -->
		<script src="./js/jquery-3.6.0.min.js"></script>
		<script type="text/javascript">
			// 在这里用户就可以使用jQuery编程了
			// 调用JavaScript的alert()方法与浏览者打个招呼！！
			$(function(){
				alert("hi，你好！");
			})
		</script>
	</body>
</html>