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. <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. <script type="text/javascript">
9. $(document).ready(function(){
10. $("span").click(function(){
11. alert($(this).html()); //把DOM的this对象包装成jq对象
12. });
13. });
14. </script>
15. </head>
16. <body>
17. <span>aaa</span>
18. <span>bbb</span>
19. <span>ccc</span>
20. <span>ddd</span>
21. <select name="btn" id="btn" >
22. <option value="1">日志标题</option>
23. <option value="2">日志全文</option>
24. <option value="3">评论引用</option>
25. <option value="4">所有留言</option>
26. <option value="5">页面搜索</option>
27. </select>
28. <script type="text/javascript">
29. $("#btn").bind("click",function(){
30. alert($(this).val());
31. })
32. $("#btn").click(function(){
33. alert($(this).html()); //把DOM的this对象包装成jq对象
34. });
35. </script>
36. </body>

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

javascript中onclick(this) 中的this指当前什么东西？
this就是当前标签本身
onclick=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. <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. <button id="12" onclick="test(this)" name="button">ccc</button>
9. <script type="text/javascript">
10. function test(which){
11. //which这个参数不要写成this
12. alert($(which).attr("id"));
13. }
14. </script>
15. </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. </head>
9. <body>
10. <select name="btn" id="btn" onclick=thisTestJquery(this)>
11. <option value="1">日志标题</option>
12. <option value="2">日志全文</option>
13. <option value="3">评论引用</option>
14. <option value="4">所有留言</option>
15. <option value="5">页面搜索</option>
16. </select>
17. <script type="text/javascript">
18. function thisTestJquery(th) {
19. //th 这个参数不要写成this
20. alert($(th).html());
21. alert($(th).val());
22. //两种获取ID的方法
23. console.log(th.id);
24. console.log($(th).attr("id"));
25. }
26. </script>
27. </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);" 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. }