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")
})