实例讲解JQuery中this和$(this)区别


Posted in Javascript onDecember 08, 2014

平时很少在jquery中用到this。查看代码时发现用到了,就调试出this的值,心想原来如此。还是挺有用的。这里总结一下this与$(this)的区别和使用。

$(this)生成的是什么?

$()生成的是什么呢?实际上$()=jquery(),就是说返回的是一个jquery的对象。

通常我们为了简便直接使用$()。实际上,该函数省略了一个参数context。根据选择器选取匹配的对象即$(selector, context),以jQuery包装集的形式返回。

context可以是Dom对象集合或jQuery包装集,传入则表示要从context中选择匹配的对象,不传入则表示范围为文档对象(即页面全部对象),即$(selector)=$(selector,document)。

this指的是,调用函数的那个html对象。

例子:

$("#textbox").hover(   

  function() {   

       this.title = "Test";   

  },   

  fucntion() {   

      this.title = "OK”;   

  }   

);

这里的this其实是一个Html元素(textbox),this是js中的。textbox有text属性,所以这样写没什么问题。

$("#textbox").hover(   

       function() {   

   $(this).title = "Test";   

       },   

       function() {   

   $(this).title = "OK";   

       }  

);

这里的$(this)是一个JQuery对象,而jQuery对象?]有title 属性,因此这样写是错误的。

结论:

this,表示当前的上下文对象是一个html对象,可以调用html对象所拥有的属性和方法。

$(this),代表的上下文对象是一个jquery的上下文对象,可以调用jquery的方法和属性值。

实例(选项卡):

tabs($("#nav a"), $(".content")); 

function tabs(tab, content){

 content.hide();

 content.eq(0).show();

 tab.click(function(){

  var index = tab.index(this);

  tab.removeClass("current");

  $(this).addClass("current");

  content.hide();

  content.eq(index).animate({opacity:'show'}, 200);

 });

}
Javascript 相关文章推荐
使用js解决由border属性引起的div宽度问题
Nov 26 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
May 13 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
Oct 12 Javascript
高性能JavaScript循环语句和条件语句
Jan 20 Javascript
json格式的javascript对象用法分析
Jul 04 Javascript
jQuery Ajax使用FormData对象上传文件的方法
Sep 07 Javascript
通过示例彻底搞懂js闭包
Aug 10 Javascript
VueJs 搭建Axios接口请求工具
Nov 20 Javascript
在vue-cli中组件通信的方法
Dec 16 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
Jan 07 Javascript
详解iframe跨域的几种常用方法(小结)
Apr 29 Javascript
JQuery省市联动效果实现过程详解
May 08 jQuery
Jquery实现由下向上展开效果的例子
Dec 08 #Javascript
Javascript常用字符串判断函数代码分享
Dec 08 #Javascript
jQuery/CSS3图片特效插件整理推荐
Dec 07 #Javascript
web前端设计师们常用的jQuery特效插件汇总
Dec 07 #Javascript
基于jQuery实现的文字按钮表单特效整理
Dec 07 #Javascript
基于jQuery实现的图片切换焦点图整理
Dec 07 #Javascript
推荐6款基于jQuery实现图片效果插件
Dec 07 #Javascript
You might like
用PHP和ACCESS写聊天室(三)
2006/10/09 PHP
php5.2以下版本无json_decode函数的解决方法
2014/05/25 PHP
php结合md5实现的加密解密方法
2016/01/25 PHP
PHP实现上一篇下一篇的方法实例总结
2016/09/22 PHP
jQuery统计指定子元素数量的方法
2015/03/17 Javascript
jquery合并表格中相同文本的相邻单元格
2015/07/17 Javascript
JavaScript取得键盘按下方向键是哪个的方法
2015/08/04 Javascript
解决wx.onMenuShareTimeline出现的问题
2016/08/16 Javascript
Bootstrap源码解读表单(2)
2016/12/22 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
2017/01/20 Javascript
Bootstrap选项卡学习笔记分享
2017/02/13 Javascript
JavaScript 数组的进化与性能分析
2017/09/18 Javascript
解析Vue2 dist 目录下各个文件的区别
2017/11/22 Javascript
vue 中 beforeRouteEnter 死循环的问题
2019/04/23 Javascript
vue搜索和vue模糊搜索代码实例
2019/05/07 Javascript
Vue实现点击箭头上下移动效果
2020/06/11 Javascript
Python在图片中添加文字的两种方法
2017/04/29 Python
python实现SOM算法
2018/02/23 Python
python3 实现验证码图片切割的方法
2018/12/07 Python
python里dict变成list实例方法
2019/06/26 Python
python rsync服务器之间文件夹同步脚本
2019/08/29 Python
利用python实现PSO算法优化二元函数
2019/11/13 Python
opencv 图像轮廓的实现示例
2020/07/08 Python
用python实现学生管理系统
2020/07/24 Python
CSS3属性box-shadow使用详细教程
2012/01/21 HTML / CSS
世界最大的票务市场:viagogo
2017/02/16 全球购物
经理管理专业自荐信范文
2013/12/31 职场文书
汽车销售顾问求职自荐信
2014/01/01 职场文书
弘扬雷锋精神活动演讲稿
2014/03/04 职场文书
领导班子整改方案和个人整改措施
2014/10/25 职场文书
2015元旦主持词开场白和结束语
2014/12/14 职场文书
北京故宫的导游词
2015/01/31 职场文书
舞蹈社团活动总结
2015/05/07 职场文书
战友聚会致辞
2015/07/28 职场文书
小学生节约用水倡议书
2019/08/12 职场文书
pytorch 运行一段时间后出现GPU OOM的问题
2021/06/02 Python