一、什么是jquery?
定义:jQuery是通过js封装起来的一个库,它的哲理就是write less,do more
1、解决了window.onload事件的事件覆盖问题,可多次导入入口函数
2、提高了代码的容错性
3、浏览器兼容性问题
4、原生js书写繁琐,代码冗余,jq更加的简洁
5、代码杂乱,各个也main到处都是,可读性差
6、动画效果很难实现
jquery是一个文件,用的时候通过引用到我们的页面就可以使用其封装好的各种方法:
jquery的相关学习资料
官网:http://jquery.com
官网API文档:http://api.jquery.com/
汉化API文档:http://www.css88.com/jqapi-1.9/
jquery库下载地址参考
BootCDN:https://www.bootcdn.cn/jquery/
二、如何使用jquery?
应用jq步骤
1、下载jq文档到本地或获得网上cdn地址
2、引包:在调用jq前导入jq库 <script src='jquery.js'></script>
3、在script标签中写入逻辑,先导入入口函数,再遵循获取dom对象三步骤 3.1、jq入口函数简写版:$(function){操作dom};
3.1.1、jq入口函数标准版:$(document).ready(function(){操作dom})
3.1.2、获取jq对象:$(选择器),返回的是jquery对象
3.1.3、绑定事件及事件驱动程序:$(选择器).事件名(function(){事件驱动程序)
三、jq与js对象的转化
js对象与jq对象的转化
js转jq:(js对象)即(this)
jq转js:(选择器)[index] 即(this)[0]
注:jq对象内部会做遍历,那怕只有一个元素也遍历,且每次事件驱动完成后都会再次返回jq对象,这就实现链式编程
** 四、原生Js和jQuery入口函数加载模式不同**
1、原生Js会等到DOM元素加载完毕,并且图片也加载完毕才会执行;
2、jQuery会等到DOM元素加载完毕,但不会等到图片加载完毕就会执行。
** 五、编写多个入口函数的区别**
1、原生Js如果编写多个入口函数,后面编写的会覆盖前面编写的;
2、JQuery中编写多个入口函数,后面的不会覆盖前面的。
原生JS的入口函数只能写一个 写多个就层叠覆盖
window.onload= function () {
alert(“我是原生第一个入口函数”);
}
window.onload= function () {
alert(“我是原生第二个入口函数”);
}
六、jquery入口函数三种方式
jQ 的入口函数 多个不会覆盖:
$(document).ready(function () { // 文档加载出来以后执行
alert(“入口函数1”);
});
$(window).ready(function () { //文档和图片全部加载完 执行
alert(“window加载完”);
})
$(function () {
//文档和图片都加载完成 相当于原生的 window.onload
alert(“JQ的第一个入口”);
});