我要评论一、jquery好处：
①写得少，做的多
②链式编程
③隐式迭代
④解决兼容性问题
二、顶级对象
dom中的顶级对象：document------>页面中的顶级对象
document.点出来的是dom中的属性和方法
bom中的顶级对象：window-------->浏览器中的顶级对象
window.点出来的是浏览器的属性和方法，window.document也可以点出来，document也属于window
jquery中的顶级对象：jquery------>$
$点出来的是jquery中的方法
三、加载事件
页面加载事件有如下几种写法：
a.window.onload=function(){ } ------>js中页面加载事件，只能写一次，如果写多个，后面的会把前面的覆盖
b.$(window).load( function(){ } )------>jquery页面的加载事件，与a中代码作用相同，可以写多个
上述a和b两种页面加载方式，是页面中所有内容加载完毕后才触发，加载内容指的是：标签、文本内容、图片......等
c.$( document ).ready( function(){ });------>jquery页面的加载事件
c方法比a和b方法的执行速度快很多，因为c的执行逻辑是把页面的基本标签加载完毕后就可以触发了。
c也可以写作 $( function(){ })
四、jquery中引入文件注意问题
先引入文件，然后再使用，开发的时候引入正常的jquery文件和压缩版的文件都没有问题
建议：开发引入普通版文件，上线后使用压缩版。
五、jquery元素与dom元素的互换
（一）为什么jquery对象和dom对象要互转？
dom对象转jquery对象操作方便,毕竟jquery中方法都是封装好了的,而且兼容问题解决的很好,代码少,方便.
jquery对象转dom对象,因为jquery中文件一直在更新，很多东西都是随着使用而进行封装和升级,不太可能把所有dom中用到的进行封装,还有很多未知的兼容问题没有封装进去,所以,有的时候jquery中不能解决的问题,还需要原生的js代码来解决,所以,jquery对象有的时候需要转成dom对象来进行。
（二）jquery对象和dom对象怎么转换？
dom对象---------->jquery对象
$(dom对象)
jquery对象---------->dom对象
$(“#btn“)[0]
$(“#btn“).get(0)
六、开关灯示例
示例要求：点击按钮开关，网页实现开灯关灯效果
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>网页开关灯</title>
6 <!-- js效果 -->
7 <script type="text/javascript">
8 // window.onload=function(){
9 // var btn=document.getelementbyid('btn');
10 // btn.onclick=function(){
11 // //首先判断按钮是开灯还是关灯
12 // if(this.value=="开灯"){
13 // this.value="关灯";
14 // document.getelementsbytagname("body")[0].style.backgroundcolor="white";
15 // }else{
16 // this.value="开灯";
17 // document.getelementsbytagname("body")[0].style.backgroundcolor="black";
18 // }
19 // }
20 // }
21 </script>
22
23 <!-- jquery效果 -->
24 <script src="js/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script>
25 <script type="text/javascript">
26 $(function(){
27 $("#btn").click(function(){
28 if($(this).val()=="关灯"){
29 //.val()方法---->获取按钮的value属性的值
30 //.val("内容");---->设置按钮的value属性的值
31 $(this).val("开灯");
32 $("body").css("backgroundcolor","black");
33 }else{
34 $(this).val("关灯");
35 $("body").css("backgroundcolor","white");
36 }
37 });
38 })
39 </script>
40 </head>
41 <body>
42 <input type="button" id="btn" value="关灯" />
43 </body>
44 </html>
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论