起初以为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. Activity启动的四种方式

    Activity启动方式有四种,分别是: standardsingleTopsingleTasksingleInstance 可以根据实际的需求为Activity设置对应的启动模式,从而可以避免创建大 ...

  2. ubuntu 支持中文

    1.cat /usr/share/i18n/SUPPORTED 说明:查看系统支持的字符集,你需要注意的是支持字符集的格式,如对中文会有以下一些显示(我的系统如此,我不知是否普遍) zh_CN.GB1 ...

  3. Kubernetes的网络模型

    http://blog.csdn.net/zjysource/article/details/52052420

  4. ios通知使用 书上案例 简单易懂

    /* The notification name */const NSString *ResultOfAppendingTwoStringsNotification =@"ResultOfA ...

  5. oracle-12514 or 12520 监听程序无法为请求的服务器类型找到可用的处理程序

    (转自:http://blog.csdn.net/wshl1234567/article/details/8003154) 在项目过程中,测试程序的时候数据库经常报错,经过几天的判断和分析,发现一个规 ...

  6. 【C#】Socket中的ssl通信

    引言    有个项目中用到了Socket ssl通信,在此记录一下. 证书 Socket ssl需要用到证书用来校验身份,而作为调试,我们只需用测试证书即可. 有个工具可以很方便地制作测试证书,下载地 ...

  7. 【设计模式】calendar的单例需求和实现

    calendar单例需求: 参数:有default的calendar file 1.如果无实例,无参数调用,取default,检查是否合法,存入实例 2.如果无实例,有参数调用,检查是否合法,存入实例 ...

  8. jsp中的session

    浏览器和服务器的异常通话 常用方法 setAttribute(String key,Object value);//设置值 getAttribute(String key); //取值 Invalid ...

  9. [置顶] Android App引导页这些坑你自己犯过吗？

    场景:测试机:华为荣耀6x 今天我自己掉入一个很蠢蠢的坑,一个引导页搞了20多分钟,不管我怎么测试用真机还是模拟器都无法运行,但是我写的demo完全没问题,好无语,我都怀疑我是不是搞android,我 ...

  10. ORM版，学生管理系统03

    关于老师信息管理 建立多对多关系 第一种(通过外键建立) 自己写类,自己使其建立关系 缺点: 不能用Django ORM 多对多操作的语法 class Teacher(models.Model): t ...