JQuery快速入门
下载JQuery
目前jQuery有三个大版本:
1.x:兼容ie678,使用最为广泛的,官方只做BUG维护,功能不再新增。因此一般项目来说,使用1.x版本就可以了,最终版本:1.12.4 (2016年5月20日)
2.x:不兼容ie678,很少有人使用,官方只做BUG维护,功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x,最终版本:2.2.4 (2016年5月20日)
3.x:不兼容ie678,只支持最新的浏览器。除非特殊要求,一般不会使用3.x版本的,很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。最新版本:3.2.1 (2017年3月20日)
注:jquery-xxx.js与jquery-xxx.min.js区别:jquery-xxx.js是开发版本,给程序员看的,有良好的缩进和注释,体积大一些。jquery-xxx.min.js:生产版本,程序中使用,没有缩进,体积小一些,程序加载更快。
导入JQuery的js文件
直接导入min.js文件即可。比如:
<script src="js/jquery-3.3.1.min.js">script>
JQuery对象和JS对象
区别与转换
①区别
JQuery对象在操作时,更加方便。
JQuery对象和js对象方法不通用的。
②转换
jq-->js:jq对象[索引] 或者 jq对象.get(索引)
js-->jq:$(js对象)
JQuery的简单使用
①事件绑定
比如,点击id为b的按钮弹出提示框。
JQuery代码如下:
$("#b").click(function(){ alert("b");});
作用相同的JS代码如下,可以明显看出JS代码更复杂一些。
document.getElementById("b").onclick=function () { alert("b");}
②入口函数
入口函数就是当前页面加载完成后运行的函数,JQuery代码如下:
$(function () { alert("页面加载完成");});
而JS代码如下:
window.onload = function () { alert("页面加载完成");};
注:window.onload和$(function)区别:window.onload只能定义一次,如果定义多次,后边的会将前边的覆盖掉;而$(function)可以定义多次。
③样式控制
比如,设置id为div1的元素背景颜色为红色。JQuery代码如下:
$("#div1").css("background-color","red");
或者:
$("#div1").css("backgroundColor","red");
等价于JS代码:
document.getElementById("div1").style.backgroundColor="red";
![84ddc1a39bd09fcd26cb6e5a218080a8.png](https://i-blog.csdnimg.cn/blog_migrate/69a29fe7eb31a4f9f844d7f6a04d296e.png)
![eb180e561d62b58b3b801051c11d2729.png](https://i-blog.csdnimg.cn/blog_migrate/86916d93b79cc3f96aaba93f81c13d32.jpeg)
![84ddc1a39bd09fcd26cb6e5a218080a8.png](https://i-blog.csdnimg.cn/blog_migrate/69a29fe7eb31a4f9f844d7f6a04d296e.png)