起初以为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. }

jQuery选择器this通过onclick传入方法以及Jquery中的this与$(this)初探，this传处变量等的更多相关文章

  1. 使用 jQuery 选择器获取页面元素后，利用 jQuery 对象的 css() 方法设置其样式。

    查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素后,利用 jQuery 对象的 css() 方法设置其样式. 要求如下: 点击页面的"更改样式"按钮后, ...

  2. 使用 jQuery 选择器获取页面元素，然后利用 jQuery 对象的 css() 方法设置其 display 样式属性，从而实现显示和隐藏效果。

    查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果. 具体要求如下: ...

  3. jQuery选择器和DOM操作——《锋利的jQuery》（第2版）读书笔记1

    第1章 认识jQuery jQuery有以下优势: 轻量级: 强大的选择器: 出色的DOM操作的封装: 可靠的事件处理机制: 完善的Ajax: 不污染顶级变量: 出色的浏览器兼容性: 链式操作方式: ...

  4. 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器

    × 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...

  5. jQuery笔记（一）jQuery选择器

    一.前言 编写任何javascript程序我们要首先获得对象, jQuery选择器能彻底改变我们平时获取对象的方式, 可以获取几乎任何语意的对象, 比如"拥有title属性并且值中包含tes ...

  6. Jquery选择器 讲解

    在Dom 编程中我们只能使用有限的函数根据id 或者TagName 获取Dom 对象. 然而在jQuery 中则完全不同,jQuery 提供了异常强大的选择器用来帮助我们获取页面上的对象, 并且将对象 ...

  7. jQuery选择器模糊匹配

    <html> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8&quo ...

  8. 常用jQuery选择器总结【转】

    在Dom 编程中我们只能使用有限的函数根据id 或者TagName 获取Dom 对象. 然而在jQuery 中则完全不同,jQuery 提供了异常强大的选择器用来帮助我们获取页面上的对象, 并且将对象 ...

  9. WEB入门之十三 jQuery选择器

    学习内容 jQuery层次选择器 jQuery属性选择器 jQuery表单选择器 jQuery过滤选择器 能力目标 熟悉jQuery各种选择器的使用场合 能熟练使用jQuery各种选择器 本章简介 上 ...

随机推荐

  1. ftp禁止切换回上级目录

    打开并编辑/etc/vsd/vsd.conf # vi /etc/vsd/vsftpd.conf 取消如下行注释 chroot_list_enable=YES 保存并重启vsftpd # /etc/i ...

  2. C++（十九） — const 和 #define 区别

    1.const  (1)C++对 const 常量的处理过程:当编译器碰到 常量声明 时,在符号表中放入常量,编译时发现使用常量,则直接以符号表中的值替换. (2)如果,编译中发现,对 const 使 ...

  3. 七 web爬虫讲解2—urllib库爬虫—状态吗—异常处理—浏览器伪装技术、设置用户代理

    如果爬虫没有异常处理,那么爬行中一旦出现错误,程序将崩溃停止工作,有异常处理即使出现错误也能继续执行下去 1.常见状态吗 301:重定向到新的URL,永久性302:重定向到临时URL,非永久性304: ...

  4. 教你10步闯进google play排行榜前列

        1.正视最高榜单的价值 我们需要了解排名对你的游戏的价值,进入前20名你的游戏获得每日至少1万5千的安装量,而前10名获得至少2万5千的安装量.通过奖励性广告网络而获得这些流量需要你每日支付至 ...

  5. CSS控制文字只显示一行，超出部分显示省略号

    <p style="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"&g ...

  6. 手机app后台初学

    初学者一看到接口就想到 不是interface.,但是这里不是,这里就是一个URL,app给这个URL传递参数,然后URL返回数据给APP,然后APP就能和服务端联动提供动态数据 举个最简单的例子,用 ...

  7. New Concept English three （36）

    21 54 We are less credulous than we used to be. In the nineteenth century, a novelist would bring hi ...

  8. 启动tomcat时出现The specified JRE installation does not exist 如何解决？

    卸载JDK1.6,安装JDK1.7,启动tomcat6.0提示 The specified JRE installation does not exist 如何解决? window -->pre ...

  9. jgit - java实现git操作

    在做一个项目中需要用到远程仓库,本来想使用svn的,但是svn的java api网上的资料很少,而且与git相比,svn显得笨重且不方便,因此放弃了svn转而使用git.java git api - ...

  10. 正则 去除html标签

    String.prototype.stripHtml=function(){ var re=/<(?:.)*?>/g; // *? 意味着匹配任意数量的重复 return this.rep ...