1、什么是Jquery：
（1）JQ图标分析：
J：代表JS
Query：查询
write less,do more：写更少的代码，做更多的事情（对HTML文档的遍历和操作、事件处理、动画、Ajax变得更加简单）
（2）概念：
jQuery本质上是一个快速、简洁的JavaScript框架。
2、新建Jquery项目：
目录结构：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Jquery入门</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
alert("Hello Jquery!");
});
</script>
</head>
<body>
</body>
</html>
运行结果：
3、JQ入口函数与JS入口函数的区别：
（1）书写方式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Jquery入门</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
jQuery(document).ready(function(){
alert("新年快乐！");
});
$(document).ready(function(){
alert("Happy new year");
});
$(function(){
alert("天天开心！");
});
</script>
</head>
<body>
</body>
</html>
JS入口函数：
window.onload = function () { // 执行代码 }
（2）JS存在覆盖问题，JQ不存在
JS：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Jquery入门</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
window.onload = function(){
alert("新年快乐");
}
window.onload = function(){
alert("2020");
}
</script>
</head>
<body>
</body>
</html>
只会显示后面的内容：
JQ：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Jquery入门</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
alert("2020");
});
$(function(){
alert("新年快乐！");
});
$(function(){
alert("Happy new Year!");
});
</script>
</head>
<body>
</body>
</html>
点击确认按键，依次显示以下内容：
（3）JQ的加载速度要比JS快：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Jquery入门</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
window.onload = function(){
alert("新年快乐！");
}
$(function(){
alert("2020");
});
</script>
</head>
<body>
</body>
</html>
jQuery 的入口函数是在 html 所有标签都加载之后，才会去执行。
JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行，因此，加载速度较慢。
原文：https://www.cnblogs.com/zhai1997/p/12232892.html