起初以为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. Git如何进行分支管理？

    Git如何进行分支管理?     1.创建分支     创建分支很简单:git branch <分支名>     2.切换分支     git checkout <分支名>   ...

  2. Java实现的一个小说采集程序

    被标题吸引进来的不要骂我. 只是一个简单的实现,随手写了来下载一部喜欢的小说的.示例中的小说只是示例,不是我的菜. 使用了jsoup.挺好用的一个工具. 有需要的话,参考下自己改吧.挺简单的,是吧. ...

  3. JavaScript 兼容各大浏览器阻止冒泡事件

    JavaScript 兼容各大浏览器阻止冒泡事件 function stopEvent(event) { //阻止冒泡事件 //取消事件冒泡 var e = arguments.callee.call ...

  4. 智课雅思词汇---二十三、名词性后缀mony

    智课雅思词汇---二十三.名词性后缀mony 一.总结 一句话总结:Latin: action, result of an action or condition; a suffix that for ...

  5. yii2:如果获取config/web.php配置的值？

    return [ 'version' => '1.0.1', 'category-map' => [ 1 => '样式1', 2 => '样式2', 3 => '样式3' ...

  6. 常见CSS浏览器兼容性问题与解决方案【转载自http://blog.csdn.net/chuyuqing/article/details/37561313/】

    所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的 ...

  7. 【2018年全国多校算法寒假训练营练习比赛（第四场）- E】通知小弟(强连通缩点)

    题目链接:https://www.nowcoder.com/acm/contest/76/E 题目描述         在战争时期,A国派出了许多间谍到其他国家去收集情报.因为间谍需要隐秘自己的身份, ...

  8. TCP中的服务端与客户端的实现

    TCP中首先要在服务端开启监听,这样才可以从客户端链接 using System; using System.Collections.Generic; using System.Linq; using ...

  9. Visual Studio Nuget还原步骤

    vs2013是在这里还原: NuGet套件还原步骤(以vs2012为例) 下载别人的范例,出现由于Nuget套件不存在而无法启动时:效果如下图: 步骤如下:1.点击 项目->启用NuGet程序包 ...

  10. Android中从SD卡中获取歌词并与歌曲同步

    先看看效果图吧,再看代码 转换文件的编码格式 package com.xm; import java.io.BufferedInputStream; import java.io.BufferedRe ...