JQuery简介
JQuery是一个JavaScript框架，可以简化js的开发。
JQuery封装了JavaScript常用的功能代码，优化了HTML文档操作、事件处理、动画设计。
框架是什么？
通用的代码，抽取出来，封装为独立的文件。需要使用的使用引入一下这个文件，使用它提供的功能即可。
示例：抽取出demo.js
function $(id) {// $是个可以用作函数名的字符，JQuery喜欢用这个字符
let e = document.getElementById(id);
return e;
}
调用：
引入js文件，即可使用$(id)函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div ></div>
<script src="js/demo.js"></script>
<script>
$("div_1").innerText = "模拟JQuery获取元素";
</script>
</body>
</html>
版本
http://www.jq22.com/jquery-info122
(注！jquery-2.0以上版本不再支持IE 6/7/8) 并不是最新的版本就最好的，而是根据您项目需求所适合的版本！
一般的项目使用1.x版本
2.x版本很少人使用
3.x版本只支持最新的浏览器，很多老JQuery插件不支持。除非特殊需求，一般不使用3.x
jquer-xxx.js是开发版本
jquer-xxx.min.js是生产版本（去掉了换行，文件更小，但严重影响阅读）
JQuery对象和JavaScript对象的区别
通过如下代码查看JQ对象和JS对象：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div></div>
<div></div>
<script>
// JS
var divs = document.getElementsByTagName("div");
console.log("JS:" + divs);
// JQ
var jq_divs = $("div");
console.log("JQ:" + jq_divs);
jq_divs.text("JQ对象操作更方便");
// JS对象→JQ对象(加$)
var jq_js2jq = $(divs);
console.log(jq_js2jq);
jq_js2jq.text("JS对象转JQ对象");
</script>
</body>
</html>
"JS:[object HTMLCollection]"
"JQ:[object Object]"
"[object Object]"
结论：JQuery对象对JS对象进行了包装。
JQ的ready() VS 和JS的onload()
ready() :后发而先至。
- window.onload在页面全部加载完毕（包括图片下载）后才能执行；
- $(document).ready在页面框架下载完毕后就执行；
- $是JQuery的简写形式。
<head>
<meta charset="utf-8" />
<title>ready() VS onload()
</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
window.onload = function() {
console.log("onload");
}
//----------------------------------
$(document).ready(function() {
console.log("$(document).ready");
});
$(function() {
console.log("$()");
});
jQuery(function() {
console.log("jQuery");
});
</script>
</head>
- 上一篇 »JQuery笔记
- 下一篇 »《精通Javascript+jQuery》视频教程