JQuery_快速入门
1.概念
2.快速 入门
1.步骤：
1.下载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：生产版本。程序中使用，没有缩进，体积小一点。程序加载更快
2.导入JQuery的js文件是：导入min.js文件
3.使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery快速入门</title>
<script src="js/jquery-3.6.3.min.js"></script>
</head>
<body>
<div id="div1">div1.....</div>
<div id="div2">div2.....</div>
<script>
//使用JQuery获取元素对象
var $div1 = $("#div1");
alert($div1.html())
$("#div2"){;
alert($($div2.html()))
}
</script>
</body>
</html>
3.JQuery对象和js对象区别转换
4.选择器
5.DOM操作
6.案例
JQuery对象和JS对象区别与转换
1.概念
2.快速 入门
3.JQuery对象和js对象区别转换
1.JQuery对象在操作时，更加方便。
2.JQuery对象和js对象方法不通用的
3.两者相互转换
Jq ---》js：jq对象[索引] 或者 jq对象.get(索引)
JS ---》jq：$(js对象)
//1.通过js方式类获取名称叫div的所有元素对象
var divs = document.getElementsByTagName("div");
alert(divs.length)//可以将其当做数组类使用
//对divs中所有来的div 让其标签内容变为"aaa"
for (let i = 0; i < divs.length; i++) {
divs[i].innerHTML ="aaa";
}
//2.通过jq方式；来获取名称叫div的所有html元素对象
var $divs =$("div");
alert($divs.length);//也可以当做数组使用
//对divs中所有的div 让其标签体内容变为"bbb" 使用Jq方式
$divs.html("bbb")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery快速入门</title>
<script src="js/jquery-3.6.3.min.js"></script>
</head>
<body>
<div id="div1">div1.....</div>
<div id="div2">div2.....</div>
<script>
//1.通过js方式类获取名称叫div的所有元素对象
var divs = document.getElementsByTagName("div");
alert(divs.length)//可以将其当做数组类使用
//对divs中所有来的div 让其标签内容变为"aaa"
for (let i = 0; i < divs.length; i++) {
// divs[i].innerHTML ="aaa";
$(divs[i]).html("cccc")
}
//2.通过jq方式；来获取名称叫div的所有html元素对象
var $divs =$("div");
alert($divs.length);//也可以当做数组使用
//对divs中所有的div 让其标签体内容变为"bbb" 使用Jq方式
//$divs.html("bbb")
// $divs.innerHTML ="bbb";
$divs[0].innerHTML = "ddd";
$divs.get(1).innerHTML = "eeee";
/* 1.JQuery对象在操作时，更加方便。
2.JQuery对象和js对象方法不通用的
3.两者相互转换
Jq ---》js：jq对象[索引] 或者 jq对象.get(索引)
JS ---》jq：$(js对象)
*/
</script>
</body>
</html>
4.选择器
5.DOM操作
6.案例