jQuery选择器this通过onclick传入方法以及Jquery中的this与$(this)初探,this传处变量等

原文地址为: jQuery选择器this通过onclick传入方法以及Jquery中的this与$(this)初探,this传处变量等

起初以为this和$(this)就是一模子刻出来。但是我在阅读时,和coding时发现,总不是一回事。

  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就是当前标签本身
οnclick=xxx(this)表示一个单击事件,来进行调用xxx(this)这个JavaScript函数。而xxx(this)函数中的this表示你要进行单击对象的本身。

把this当做参数传到函数中去,实践Ok:

  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" οnclick="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:

  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" οnclick=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,如下:

  1. console.log(th.id);  
  2. console.log($(th).attr("id"));  





对于多个id的按钮下进行click时,查找是哪个id值被点了,如下,但是有发ajax后,就不能在ajax里去写this了,那就是ajax那个this了,只能传入,如下所示:

  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调用:

    1. <a href="javascript:void(0);" οnclick="modifyRequest(this)" data=\''+JSON.encode(requestObj)+'\'>' + requestObj.f_RequestCode + '</a> 
    2. 函数原型: 
    3.  function modifyRequest(obj){ 
    4.    var requestData = eval('('+$(obj).attr('data')+')');  
    5.   ......  


转载请注明本文地址: jQuery选择器this通过onclick传入方法以及Jquery中的this与$(this)初探,this传处变量等
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值