碼上歡樂
相關內容    簡體    繁體

jQuery選擇器this通過onclick傳入方法以及Jquery中的this與$(this)初探，this傳處變量等

本文轉載自   查看原文   2013-10-08 13:51   43178    JavaScript

起初以為this和$(this)就是一模子刻出來。但是我在閱讀時，和coding時發現,總不是一回事。

view plain print ?
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  5.   
  6. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>  
  7. <script>!window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"><\/script>')  
  8. </script>  
  9. <script type="text/javascript">  
  10. $(document).ready(function(){  
  11. $("span").click(function(){  
  12. alert($(this).html()); //把DOM的this對象包裝成jq對象  
  13. });  
  14.   
  15. });  
  16.   
  17. </script>  
  18. </head>  
  19. <body>  
  20. <span>aaa</span>  
  21. <span>bbb</span>  
  22. <span>ccc</span>  
  23. <span>ddd</span>  
  24. <select name="btn" id="btn" >  
  25. <option value="1">日志標題</option>  
  26. <option value="2">日志全文</option>  
  27. <option value="3">評論引用</option>  
  28. <option value="4">所有留言</option>  
  29. <option value="5">頁面搜索</option>  
  30. </select>  
  31. <script type="text/javascript">  
  32. $("#btn").bind("click",function(){  
  33.     alert($(this).val());  
  34. })  
  35.   
  36. $("#btn").click(function(){  
  37. alert($(this).html()); //把DOM的this對象包裝成jq對象  
  38. });  
  39. </script>  
  40. </body>  



http://neatstudio.com/show-833-1.shtml



javascript中onclick(this) 中的this指當前什么東西？
this就是當前標簽本身
onclick=xxx(this)表示一個單擊事件，來進行調用xxx(this)這個JavaScript函數。而xxx(this)函數中的this表示你要進行單擊對象的本身。

把this當做參數傳到函數中去,實踐Ok:

view plain print ?
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  5.   
  6. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>  
  7. <script>!window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"><\/script>')  
  8. </script>  
  9. <button id="12" onclick="test(this)" name="button">ccc</button>   
  10. <script type="text/javascript">    
  11. function test(which){  
  12.          //which這個參數不要寫成this  
  13.   alert($(which).attr("id"));  
  14.   
  15. }  
  16. </script>    
  17. </body>  





於是最上面那個可以用onclick事件來傳入到函數中，並用juqury來進行操作，如下實踐Ok：

view plain print ?
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  5. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>  
  6. <script>!window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"><\/script>')  
  7. </script>  
  8.   
  9. </head>  
  10. <body>  
  11. <select name="btn" id="btn" onclick=thisTestJquery(this)>  
  12. <option value="1">日志標題</option>  
  13. <option value="2">日志全文</option>  
  14. <option value="3">評論引用</option>  
  15. <option value="4">所有留言</option>  
  16. <option value="5">頁面搜索</option>  
  17. </select>  
  18. <script type="text/javascript">  
  19. function thisTestJquery(th) {  
  20.     //th 這個參數不要寫成this  
  21.     alert($(th).html());    
  22.     alert($(th).val());    
  23.     //兩種獲取ID的方法  
  24.     console.log(th.id);  
  25.     console.log($(th).attr("id"));  
  26.   
  27. }  
  28. </script>  
  29. </body>  



點擊后，結果如下：

  1. alert($(th).html());    


結果：
<option value="1">日志標題</option>
<option value="2">日志全文</option>
<option value="3">評論引用</option>
<option value="4">所有留言</option>
<option value="5">頁面搜索</option>

  1. alert($(th).val());    


結果：1

而兩種this獲取Id值是這樣的，實踐也OK，如下：

view plain print ?
  1. console.log(th.id);  
  2. console.log($(th).attr("id"));  





對於多個id的按鈕下進行click時，查找是哪個id值被點了，如下，但是有發ajax后，就不能在ajax里去寫this了，那就是ajax那個this了，只能傳入，如下所示：

view plain print ?
  1. $("#exeall,#exe32,#exe64").click(function(){  
  2.   para.type = this.id.substr(3);//這樣取是Ok的：this.id  
  3.   console.log($(this).id);//不能取到想要的Id  
  4.   console.log(this.id);//日志打印出來Ok  
  5.   var selfObj = this;//這樣做才能傳入到get里去。  
  6.   $.get("/php/cgi/execGray.php",para,function(data){  
  7.     self.done = false;  
  8.     var obj = eval('('+data+')');  
  9.     if(obj.code == -2)  
  10.     {  
  11.        console.log(selfObj.id);  
  12.     }  
  13.   }  
  14.   })  





通過this傳入變量：
在<a 中實現Js函數的this調用：

view plain print ?
    1. <a href="javascript:void(0);" onclick="modifyRequest(this)" data=\''+JSON.encode(requestObj)+'\'>' + requestObj.f_RequestCode + '</a> 
    2. 函數原型： 
    3.  function modifyRequest(obj){ 
    4.    var requestData = eval('('+$(obj).attr('data')+')');  
    5.   ......  
    6. } 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 jQuery屬性選擇器中加變量 css中:not()選擇器和jQuery中.not()方法 jquery 中 eq()遍歷方法 和:eq()選擇器的區別 jquery的選擇器 jquery的基本選擇器 jQuery 選擇器 jQuery選擇器 jquery 選擇器 jQuery選擇器 jQuery選擇器
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM