JQuery版本介绍
First
1.x:兼容ie678,使用最为广泛的,官方只做BUG维护,
功能不再新增。因此一般项目来说,使用1.x版本就可以了,
最终版本:1.12.4 (2016年5月20日)
Second
2.x:不兼容ie678,很少有人使用,官方只做BUG维护,
功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x,
最终版本:2.2.4 (2016年5月20日)
Third
3.x:不兼容ie678,只支持最新的浏览器。除非特殊要求,
一般不会使用3.x版本的,很多老的jQuery插件不支持这个版本。
目前该版本是官方主要更新维护的版本。最新版本:3.2.1(2017年3月20日)
JQuery下载:
1.下载jQuery各个版本的页面:http://www.jb51.net/zt/jquerydown.htm1
百度云:链接:https://pan.baidu.com/s/1Yy30LnOKMVFYfTRuLZ9sPQ 提取码:00qh
2.官网:https://jquery.com/
3.注意:jquery-xxx.js 与 jquery-xxx.min.js区别:
1. jquery-xxx.js:开发版本。给程序员看的,有良好的缩进和注释。体积大一些
2. jquery-xxx.min.js:生产版本。程序中使用,没有缩进。体积小一些。程序加载更快
JQuery快速入门:
①导入min.js文件
②使用(鄙人使用的是3.3.1版本,如果各位看官也想一起学习请使用同版本JQuery)
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JQuery快速入门</title> <script src="js/jquery-3.3.1.min.js"></script> </head> <body <div id="div1">div1....</div> <div id="div2">div2....</div> </body> <script> //使用JQuery获取元素对象 var div1 = $("#div1"); alert(div1.html()) var div2 = $("#div2"); alert(div2.html()); </script> </html>
JQuery对象与JS对象的区别:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery对象和Js对象的转换</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body><div id="div1">div1....</div>
<div id="div2">div2....</div>
<p id="p1">p1...</p>
<p id="p2">p2...</p></body>
<script>
//1.通过js方式获取名称叫div的HTML所有元素对象
var divs = document.getElementsByTagName("div");
alert(divs); //返回object HTMLCollection//对div中所有div进行遍历,改变内容为aaa
for(var i=0;i<divs.length;i++){
divs[i].innerHTML="aaa";
}//2.通过Jq方式获取名称叫p的HTML所有元素对象
var $ps = $("p");
alert($ps); //返回object对象 两者都可以当做数组使用//对ps中所有p进行遍历,改变内容为bbb
$ps.html("bbb");</script>
</html>
运行结果:
JQuery对象与JS对象的相互转换:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery对象和Js对象的转换</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body><div id="div1">div1....</div>
<div id="div2">div2....</div>
<p id="p1">p1...</p>
<p id="p2">p2...</p></body>
<script>
//1.通过js方式获取名称叫div的HTML所有元素对象
var divs = document.getElementsByTagName("div");
alert(divs); //返回object HTMLCollection//对div中所有div进行遍历,改变内容为aaa
for(var i=0;i<divs.length;i++){
$(divs[i]).html("ccc"); //js---》jq
}//2.通过Jq方式获取名称叫p的HTML所有元素对象
var $ps = $("p");
alert($ps); //返回object对象 两者都可以当做数组使用//对ps中所有p进行遍历,改变内容为bbb
//$ps.innerHTML = "bbb"; JQuery对象不能直接当成JS对象使用
$ps[0].innerHTML = "ddd"; //jq----》js
$ps.get(1).innerHTML = "eee";</script>
</html>
运行结果:
JQuery事件绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04-JQuery事件绑定</title>
<script src="js/jquery-3.3.1.min.js"></script></head>
<body><div id="div1">div1....</div>
<div id="div2">div2....</div>
<input type="button" value="点我" id="b1">
</body><script>
// 给按钮添加单击事件$("#b1").click(function () {
alert("abc");
});
</script>
</html>
运行结果:
JQuery入口事件:
window.onload 和$(function() {}) 的区别
window.onload在一个html中只能定义一次,如果定义多次,将会被最有一次覆盖所有前面的
$(function)可以定义多次
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>04-JQuery事件绑定</title> <script src="js/jquery-3.3.1.min.js"></script> <script>$(function () { alert("258"); }) $(function () { alert("0258"); })</script> </head> <body> <div id="div1">div1....</div> <div id="div2">div2....</div> <input type="button" value="点我" id="b1"> </body> </html>
运行结果:
JQuery样式控制:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04-JQuery事件绑定</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>$(function () { //样式控制 //方式一 $("#div1").css("background-color","red"); //方式二 $("#div2").css("backgroundColor","pink"); })</script>
</head>
<body><div id="div1">div1....</div>
<div id="div2">div2....</div>
<input type="button" value="点我" id="b1">
</body>
</html>
运行结果: