起初以为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. Hibernate -- 项目结构模型改造， 加 Utils 和 Dao层

    示例代码: App.java 模拟客户端 /** * 模拟客户端 */ public class App { @Test public void saveCustomer(){ CustomerDao ...

  2. Software Engineering at Google

    Google的Fergus Henderson在Software Engineering at Google中介绍了Google的软件工程实践. 软件开发 源码仓库 单一源代码仓库,除了核心配置和安全 ...

  3. Springer Latex

    What are the guidelines for uploading a LaTeX formatted manuscript?   1. Always upload the main LaTe ...

  4. 全国城市部分js

    var areaJson22 = { "id": "0", "name": "全国", "parentId&q ...

  5. Entity Framework 6 Code First 系列：无需修改实体和配置-在MySql中使用和SqlServer一致的并发控制

    无需修改实体和配置,在MySql中使用和SqlServer一致的并发控制.修改RowVersion类型不可取,修改为Timestamp更不可行.Sql Server的RowVersion生成一串唯一的 ...

  6. go语言的排序、结构体排序

    原文:https://studygolang.com/articles/1598 晚上准备动手写点 go 的程序的时候,想起 go 如何排序的问题.排序 sort 是个基本的操作,当然搜索 searc ...

  7. python爬虫scrapy框架——爬取伯乐在线网站文章

    一.前言  1. scrapy依赖包: 二.创建工程 1. 创建scrapy工程: scrapy staratproject ArticleSpider 2. 开始(创建)新的爬虫: cd Artic ...

  8. Dib to Bitmap doesn't work in WPF

    一.Dib to Bitmap doesn't work in WPF 代码如下: protected byte[] BitmapFromDIB(IntPtr pDIB, IntPtr pPix) { ...

  9. 在Window工作区按下鼠标左键拖动窗体

    Window.DragMove(): 允许使用在窗口工作区的暴露区域上方按下其鼠标左键的鼠标来拖动窗口.(窗口工作区:除去窗体的title.bottom后的剩余部分空间) 使用该方法时注意:一定要在鼠 ...

  10. js的onclick字符串参数的解决办法

    <a href='#' onclick='onedit(\""+ name + "\")';>编辑</a>" 一些写法实例~~ ...