实例讲解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验证控制输入中英文字节长度(input、textarea等)具体实例
Jun 21 Javascript
javascript计时器事件使用详解
Jan 07 Javascript
jQuery控制TR显示隐藏的几种方法
Jun 18 Javascript
jQuery的图片滑块焦点图插件整理推荐
Dec 07 Javascript
jquery实现表单验证简单实例演示
Nov 23 Javascript
老生常谈遮罩层 滚动条的问题
Apr 29 Javascript
node.js实现快速截图
Aug 27 Javascript
Node.js常用工具之util模块
Mar 09 Javascript
浅谈redux以及react-redux简单实现
Aug 28 Javascript
JS实现随机抽取三人
Nov 06 Javascript
Node.js API详解之 console模块用法详解
May 12 Javascript
nestjs中异常过滤器Exceptionfilter的具体使用
Feb 07 Javascript
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 数据结构 算法 三元组 Triplet
2011/07/02 PHP
php摘要生成函数(无乱码)
2012/02/04 PHP
PHP遍历某个目录下的所有文件和子文件夹的实现代码
2013/06/28 PHP
php MessagePack介绍
2013/10/06 PHP
php无限遍历目录示例
2014/02/21 PHP
ThinkPHP3.1新特性之Action参数绑定
2014/06/19 PHP
PHP使用zlib扩展实现GZIP压缩输出的方法详解
2018/04/09 PHP
js下用gb2312编码解码实现方法
2009/12/31 Javascript
Jquery之Bind方法参数传递与接收的三种方法
2014/06/24 Javascript
Jquery Ajax Error 调试错误的技巧
2015/11/20 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
2020/08/27 Javascript
JavaScript html5 canvas绘制时钟效果(二)
2016/03/27 Javascript
返回函数的JavaScript函数
2016/06/14 Javascript
JS实现鼠标框选效果完整实例
2016/06/20 Javascript
JS实现页面数据无限加载
2016/09/13 Javascript
拖动时防止选中
2017/02/03 Javascript
Angularjs使用过滤器完成排序功能
2017/09/20 Javascript
Vue.js简易安装和快速入门(第二课)
2017/10/17 Javascript
react中使用swiper的具体方法
2018/05/15 Javascript
Taro集成Redux快速上手的方法示例
2018/06/21 Javascript
浅谈vuex为什么不建议在action中修改state
2020/02/02 Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
2020/10/28 Javascript
Python中isnumeric()方法的使用简介
2015/05/19 Python
python统计文本字符串里单词出现频率的方法
2015/05/26 Python
python计算列表内各元素的个数实例
2018/06/29 Python
python最小生成树kruskal与prim算法详解
2019/01/17 Python
Python 如何提高元组的可读性
2019/08/26 Python
对tensorflow中的strides参数使用详解
2020/01/04 Python
python 实现PIL模块在图片画线写字
2020/05/16 Python
python 发送邮件的四种方法汇总
2020/12/02 Python
高级护理专业毕业生推荐信
2013/12/25 职场文书
幼儿园教师自我鉴定
2014/03/20 职场文书
计算机网络专业求职信
2014/06/05 职场文书
爱护公物演讲稿
2014/09/09 职场文书
2016年寒假学习心得体会
2015/10/09 职场文书
MySQL视图概念以及相关应用
2022/04/19 MySQL