使用jquery, 必须先引入jq库
<script src="jquery-3.4.1.min.js"></script>
js的变量
var a = 10;
jq的变量
var $a = 10; // $ 声明该变量是jq变量 同时$也是JQuery的简写
dom的变量 和 jq的变量之间 转换
- 转换为jq变量
var oDiv = document.getElementsByClassName("box")[0];
var $b = $(oDiv);
console.log($b);
- 转换为DOM变量
var $c = $b[0];
console.log($c);
jq中 顶级对象 是 $ 或者jQuery关键字
注意: jQuery中的 $ 和 jQuery关键字 本身同为一个对象
js中的入口函数: window.onload
jq中的入口函数: $(document).ready(function(){…});
onload和 ready的区别:
文档的加载步骤:
1. 解析HTML结构
2. 加载外部的样式表和脚本
3. 解析并执行脚本
4. 构建HTML–DOM模型 (ready方法执行)
5. 加载图片等外部资源
6. 页面加载完毕 (load方法执行)
$(document).ready(function () {
这里去存放我们需要暂缓加载的脚步
});
ready的简写:
$(function () {
});
使用jquery的好处? / 为什么使用jquery :
-
因为jq是轻量级别的框架,大小不大30kb
-
它有强大的选择器,出色的DOM操作封装
-
有可靠的事件处理机制
-
完善的ajax
-
出色的浏览器兼容性
-
持链式操作,隐式迭代
-
行为层(功能)和结构层(页面元素) 的分离,还支持丰富的插件