jQuery官网:https://jquery.com/
在线API:https://api.jquery.com/
jQuery UI:https://jqueryui.com/
API:提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码
高版本的jQuery不支持IE浏览器,注意匹配
1. 框架库和jQuery介绍
jQuery就是JavaScript语法写的一些函数类,内部仍然是调用JS实现的,所以并不是代替JS。可以说jQuery本身就是一堆JS函数,jQuery就是一个JS的函数库
2. jQuery文件使用
(1)为什么要学习jQuery?
DOM中一个简单的功能需要大量的代码;兼容问题很多;代码容错性很差;window.onload也只能有一个
(2)jQuery好处:解决浏览器兼容性问题,体积小,链式编程,隐式迭代,插件丰富,开源,免费
(例题)点击按钮出现一个蓝色小方块
<script>//Dom中写法
window.onload=function () {
document.getElementById("btn").onclick = function () {
var divObj=document.getElementById("dv");
divObj.style.width="100px";
divObj.style.height="100px";
divObj.style.backgroundColor="blue";
}
}
</script>
<script src="jquery.js"></script>//jQuery写法
<script>
//页面加载后的一个事件
$(function(){
$("#btn").click(function () {
$("#dv").css({
"width":"100px","height":"100px","backgroundColor":"blue"});
});
})
</script>
3. jQuery中顶级对象"$"
BOM(浏览器对象模型)中是Window,DOM中是document(文档对象模型)
-
$();:是jQuery的简写,相当于js中的window
-
jQuery();:写法不同,意义一样
-
document:直接写表示的是document对象,只能点出dom的属性和方法
-
$(document):表示的是jQuery对象,只能点出jq的属性和方法
BOM:《JavaScript 闯关记》之 BOM
4. jQuery中事件加载(疯狂吐槽这个编辑器两个美元符号不能同时出现的功能,会变成一种标签,以下内容看到‘美元符号’字样自觉联想符号)
window.onload只能写一次,重复会被后面的干掉,页面所有的标签图片、外部引入加载后才触发,如果有了两个也只执行最后一个
$(document).ready()DOM基本标签加载后就触发,可以写多个,和美元符号(function)一样
◆加载顺序效果展示
<script src="jquery.js"></script>
<script>
//jQuery代码和DOM中的window.onload事件是相同的
//$(window).load()加载速度最慢
$(window).load(function () {
console.log('111111')
});
//$(document).ready()加载速度更快
$(document).ready(function () {
console.log('222222')
})
$(document