juqery和dom对象互换

一、jQuery对象与DOM对象相互转换

1.jQuery对象转DOM对象

 

Js代码  
  1. var $cr  = $("#cr");    //jQuery对象  
  2. //转换成DOM对象,索引号从0开始,选取对应节点  
  3. var cr = $cr[0];    //或 var cr = $cr.get(0);  
  4. alert(cr.checked);    //DOM方法检测这个checkbox是否被选中  

 

 

 

2.DOM对象转jQuery对象

 

Js代码  
  1. var cr = document.getElementById("cr");    //DOM对象  
  2. var $cr = $(cr);    //jQuery对象  

 

 

二、解决与其他js库冲突

1.jQuery在其他库之前导入,可直接使用jQuery,无需调用jQuery.noConflict()函数

 

Js代码  
  1. <script type="text/javascript" src="./jquery-1.4.2.js"></script>  
  2. <script type="text/javascript" src="./prototype-1.6.1.js"></script>  

 

 

2.jQuery在其他库之后导入

 

Js代码  
  1. jQuery.noConflict();  //将变量$的控制权移交给prototype.js  
  2. jQuery(function(){  //使用jQuery  
  3.     jQuery("p").click(function(){  
  4.         alert(jQuery(this).text());  
  5.     });  
  6. });  
  7. $("pp").style.display='none';  //使用prototype  
  8. $j = jQuery.noConflict();  //自定义一个快捷给jQuery,将变量$的控制权移交给prototype.js  
  9. $j(function(){  //使用jQuery,利用自定义快捷$j  
  10.     $j("p").click(function(){  
  11.         alert($j(this).text());  
  12.     });  
  13. });  
  14. $("pp").style.display='none';  //使用prototype  

 

 

 

Js代码  
  1. jQuery.noConflict();  //将变量$的控制权移交给prototype.js  
  2.   
  3. (function($){  //定义匿名函数并设置形参为$  
  4.     $(function(){  //匿名函数内部$均为jQuery  
  5.         $("p").click(function(){alert($(this).text());});  
  6.     });  
  7. })(jQuery);  
  8. $(“pp”).style.display='none';  //使用prototype   
  9. jQuery.noConflict();  //将变量$的控制权移交给prototype.js  
  10. jQuery(function($){  //使用jQuery加载页面函数  
  11.     $(function(){  //内部继续使用$均为jQuery          
  12.         $("p").click(function(){alert($(this).text());});      
  13.     });  
  14. });  
  15. $("pp").style.display='none';  //使用prototype   
posted @ 2013-08-16 09:52  天道酬勤,坚持!  阅读(389)  评论(0编辑  收藏  举报