jQuery引用及入口
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jQuery引用及入口</title> 6 <script type="text/javascript" src="jquery-3.3.1.js"></script> 7 </head> 8 <body> 9 <!--入口函数--> 10 <!--window.onload() // 1覆盖现象 2等所有图片资源加载完成之后才调用脚本代码，用户体验欠佳--> 11 <script type="text/javascript"> 12 // console.log(jQuery); 13 // console.log($); //同上 $===jQuery 14 15 //入口函数 16 console.log($(document)); 17 //文档对象加载完就运行这个函数 不需要等图片加载完 18 $(document).ready( 19 function () { 20 alert("dom文档对象加载完了"); 21 } 22 ); 23 // 简写 跟 window.onload不一样 Jquery这里不会覆盖 24 $(function () { 25 alert("文档对象确实加载完了，不会覆盖") 26 }); 27 28 //等图图片资源加载完执行函数 29 $(window).ready( 30 function () { 31 alert("js入口函数，等图片加载完运行这个函数") 32 } 33 ); 34 35 //等图图片资源加载完执行函数，Jquery调用同样不会覆盖 36 $(window).ready( 37 function () { 38 alert("js入口函数，等图片加载完运行这个函数，不会覆盖！") 39 } 40 ) 41 42 </script> 43 44 </body> 45 </html>
jQuery与js对象转换
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery与js对象转换</title> <script type="text/javascript" src="jquery-3.3.1.js"></script> <style> .box{ height: 400px; width: 400px; background: green; } #box2{ height: 200px; width: 200px; background: red; } </style> </head> <body> <div class="box"> <div id="box2"></div> </div> <script type="text/javascript"> // jQuery中只有两个属性 索引和length 其他的都是方法 即封装好的API // jQuery对象只能用jQuery的方法(api) js对象只能应js的方法 不能混淆 // jQuery对象 转换为 js对象 var jqo = $(".box"); // 获取jquery对象 console.log(jqo); // var jso = jqo[0]; // 取jquery对象的第一个元素 即是js对象 console.log(jso); var jso2 = jqo.get(0); // 还可以这样取 console.log(jso2); // js对象转换为jquery对象 var jsobj = document.getElementById("box2"); // 获取js对象 console.log(jsobj); var jqobj = $(jsobj); console.log(jqobj); </script> </body> </html>
jQuery操作dom
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jQuery操作dom</title> 6 <script type="text/javascript" src="jquery-3.3.1.js"></script> 7 </head> 8 <body> 9 <div id="box"></div> 10 <div class="box"></div> 11 <div class="box"></div> 12 <script type="text/javascript"> 13 // jQuery操作dom三部曲 1事件源 2事件 3事件驱动程序 14 $(function () { 15 //标签选择器 16 var jqBox1 = $("div"); // 标签选择器 17 var jqBox2 = $(".box"); // 类选择器 18 var jqBox3 = $("#box"); // id选择器 19 //修改/增加box的样式 .css 20 jqBox1.css("height","120"); 21 jqBox1.css("width","80"); 22 jqBox1.css("margin-top",8); 23 jqBox1.css("background","red"); 24 jqBox1.text("嘿嘿嘿"); // text 加入文本 25 26 jqBox2.css("background","green"); 27 jqBox2.eq(0).text("嘎嘎嘎"); // text 加入文本 28 29 jqBox3.css("background","yellow"); 30 jqBox3.text("嘻嘻嘻"); // text 加入文本 31 32 // js实现点击事件 33 // for(var i = 0;i < jqBox1.length; i++){ 34 // var temp = jqBox1[i]; 35 // console.log(temp.innerText); 36 // temp.onclick=function () { 37 // alert(1); 38 // } 39 // } 40 41 // jQuery 实现点击事件 42 // jqBox1.click(function () { 43 // console.log(this); // this指的是调用方法者本身，这里调用click的是jqBox1,是一个jq对象，但是打印出来发现是js对象 44 // console.log($(this).text()); // jq对象获取文本的方法 45 // alert(this.innerText); 46 // 47 // }) 48 49 // 点击盒子 消失 50 jqBox1.click(function () { 51 // $(this).css("display","none"); //jq的样式控制 52 $(this).hide(3000); //jq的hide方法 3000秒内慢慢消失 53 }) 54 }) 55 56 57 </script> 58 </body> 59 </html>