当前位置：首页 > news >正文

jQuery学习-01jQuery下载安装

news 来源：原创 2024/11/29 2:40:20

1 jQuery的介绍

jQuery就是js函数库，里面有大量的js函数库，使用这些函数操作dom对象，做事件，动画，ajax处理；
地址：https://jquery.com/

2下载

地址：https://jquery.com/download/
未压缩版本：文件体积较大，适合项目上线后使用——jQuery-3.6.3.js
压缩版本：体积较小，可读性好，适合开发阶段使用——jQuery3.6.6.min.js
在这里插入图片描述

3为什么要用jQuery？

原因
①写代码少，做的多【write less do more】
②免费，开源且轻量级的js库，容量很小；
③兼容市面主流浏览器；如：IE，FireFox，Chrome
④能处理HTML/JSP/XML,CSS,DOM、事件、实现动画效果，也能提供异步Ajax功能
⑤文档手册很全
⑥成熟的插件
⑦出错后有一定的信息提示
⑧不用再在html里通过script标签插入一大堆js来调用命令了；

4 使用jQuery

1 需要在项目中加入jQuery的文件

idea中是把jQuery放在webapp目录。一般是创建一个js目录。存放js 文件，对于hbulider工具，放在js目录中即可；

2 创建一个html文件或jsp都可，在文件中使用


<script type="text/javascript" src="jqueryd 文件的相对路径"/> （×）
<script type="text/javascript" src="jqueryd 文件的相对路径"/> </script> (√）
<script type="text/javascript" src="js/jquery-3.6.3.js"></script>

3 在js代码中，调用jQuery中函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一个jQuery例子</title>
		<script type="text/javascript" src="js/jquery-3.6.3.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				alert("使用jquery了")
			})
		</script>
	</head>
	<body>
	</body>
</html>

$:jquery中的函数名
document：是参数
$(document):把js中的document对象变成jQuery可以使用的对象。
然后调用ready()的函数。这个ready()是jQuery中的函数
ready() 的执行时间在页面dom对象加载后执行的，相当于js 中onload事件
ready(函数):表示在页面对象加载后执行这个函数

$(document).ready(function(){
				alert("使用jquery了")
				})
==========================================================================================
$(document).ready(myinint())
		function myinint(){
		alert("===相当于οnlοad==")
		}
==========================================================================================
$(function(){
	    alert("简单的方式使用ready")
			})