首页 > 代码库 > 《锋利的JQuery》读书要点笔记

《锋利的JQuery》读书要点笔记

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title></title>
 6 <!-- 引入 jQuery -->
 7 <script src="../scripts/jquery.js" type="text/javascript"></script>
 8 <script type="text/javascript">
 9 //等待dom元素加载完毕.
10 $(document).ready(function(){
11     alert("Hello World!");
12 });
13 </script>
14 </head>
15 <body>
16 </body>
17 </html>

技术分享

JQuery的链式操作风格

JQuery对象和DOM对象的区别:JQuery对象是包装DOM对象后产生的对象,两者的方法不能互用。但是两中对象可以相互转换,首先约定好定义变量的风格,对于Jquery对象变量前要加上$,比如:

var $variable=JQuery对象。若是DOM对象,则 var variable=DOM对象。

通过[index]方法和get(index)方法将JQuery对象转成DOM对象:var $cr=$("#cr");—>var cr=$cr[0];或者var cr=$cr.get(0); 将DOM对象用$()包装起来即可变为JQuery对象。


实例研究(论坛注册),DOM方式:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>1-6-2</title>
 6 <!-- 引入 jQuery -->
 7 <script src="../../scripts/jquery.js" type="text/javascript"></script>
 8 <script type="text/javascript">
 9 //等待dom元素加载完毕.
10 $(document).ready(function(){
11     var $cr = $("#cr");  //jQuery对象
12     var cr = $cr.get(0); //DOM对象,获取 $cr[0]
13     $cr.click(function(){
14         if(cr.checked){ //DOM方式判断
15             alert("感谢你的支持!你可以继续操作!");
16         }
17     })
18 });
19 </script>
20 </head>
21 <body>
22 <input type="checkbox" id="cr"/> <label for="cr">我已经阅读了上面制度.</label>
23 </body>
24 </html>

 JQuery方式:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>1-6-1</title>
 6 <!-- 引入 jQuery -->
 7 <script src="../../scripts/jquery.js" type="text/javascript"></script>
 8 <script type="text/javascript">
 9 //等待dom元素加载完毕.
10 $(document).ready(function(){
11     var $cr = $("#cr");  //jQuery对象
12     $cr.click(function(){
13         if($cr.is(":checked")){ //jQuery方式判断,is(":checked")是JQuery中的方法,判断JQuery对象是否被选中
14             alert("感谢你的支持!你可以继续操作!");
15         }
16     })
17 });
18 </script>
19 </head>
20 <body>
21 <input type="checkbox" id="cr"/><label for="cr">我已经阅读了上面制度.</label>
22 </body>
23 </html>

 

《锋利的JQuery》读书要点笔记