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

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

2024-09-05 02:35:52   222人阅读

 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》读书要点笔记


联系
我们