标签:ext 操作 笔记 ansi 阅读 images scripts 方式 checkbox
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>
标签:ext 操作 笔记 ansi 阅读 images scripts 方式 checkbox
原文地址:http://www.cnblogs.com/f91og/p/6418412.html