起初以为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. Spring Cloud 与 Spring boot - 转载

    微服务是这样一个结构吗? 前端或二方 - > ng集群 -> zuul集群 -> eureka-server集群 -> service provider集群 (二方指其他业务部 ...

  2. linux下gzip压缩同样内容大小不一样

    一份数据,两种传输方式进行收集. 一份数据:有多台数据采集节点或者多个数据源 两种方式:一种是从依次多个采集节点或者多个数据源将数据拷贝过来,合并为一个文件 另外一种是多个采集节点或者数据源同时向汇总 ...

  3. Button实现图文混排

    Button实现图文混排 一.简介 本文介绍两种图文混排方式 1.android:drawableTop="@drawable/star"实现文字上有图片 当然有上下左右等等 2. ...

  4. Python subplot 绘画

    环境 Anaconda3 Python 3.6, Window 64bit 目的 利用 matplotlib 画图模块,汇至子图 # -*- coding: utf-8 -*- import matp ...

  5. IOS-SQLite3

    iOS中的数据存储方式 Plist(NSArray\NSDictionary) Preference(偏好设置\NSUserDefaults) NSCoding(NSKeyedArchiver\NSk ...

  6. MySQL数据库维护、备份、和复制

    预防性维护的基本原则:1)启动MySQL服务器提供的自动恢复功能2)有计划的开展预防心维护工作,定期对表进行检查,日常的表检查有助于及时发现各种小问题,并在问题变得更糟之前将其纠正.3)建立数据库备份 ...

  7. 【lightoj-1026】Critical Links(桥)

    题意: 给出无向图,求桥的模板题. #include <bits/stdc++.h> using namespace std; ; int dfn[N], low[N];//时间戳;low ...

  8. L138

    Research indicates that lifestyles are changing fast.The essay isn't even remotely relevant to the t ...

  9. scorm标准的LMS在客户端的运行机制

    1)运行SCORM APIAdapter.   2)调用API初始化函数.   3)加载课件SCO初始化数据.   4)获取Data Model中的用户ID和用户姓名.   5)获取Data Mode ...

  10. iOS在支持arc的工程中，导入不支持arc的第三方的插件

    首先将插件导入到工程中,然后点击工程名,在targets下面找到相应的条目,然后选择build phares,打开第二行compile sourses,然后找到不支持arc的.m文件,在后边添加上“- ...