JQuery_快速入门与JQuery对象和JS对象区别与转换
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.案例
