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

 更新时间:2014年12月08日 09:01:57   投稿:junjie  
这篇文章主要介绍了实例讲解JQuery中this和$(this)的区别,this表示当前的上下文对象是一个html对象,可以调用html对象所拥有的属性和方法,$(this),代表的上下文对象是一个jquery的上下文对象,可以调用jquery的方法和属性值,需要的朋友可以参考下

平时很少在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);
 });
}

相关文章

  • jQuery中cookie插件用法实例分析

    jQuery中cookie插件用法实例分析

    这篇文章主要介绍了jQuery中cookie插件用法,结合完整实例形式分析了jQuery针对cookie操作的插件jquery.cookie.js相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-12-12
  • jQuery常见的遍历DOM操作详解

    jQuery常见的遍历DOM操作详解

    这篇文章主要介绍了jQuery常见的遍历DOM操作,结合实例形式详细分析了针对DOM节点的parent()、parents()、parentsUntil()、find()、eq()、filter()等各种遍历操作相关函数与使用技巧,需要的朋友可以参考下
    2018-09-09
  • jquery隔行换色效果实现方法

    jquery隔行换色效果实现方法

    这篇文章主要介绍了jquery隔行换色效果实现方法,涉及even及odd选择器的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01
  • 关于query Javascript CSS Selector engine

    关于query Javascript CSS Selector engine

    本篇文章,小编将为大家介绍,关于query Javascript CSS Selector engine,有需要的朋友可以参考一下
    2013-04-04
  • jQuery flip插件实现的翻牌效果示例【附demo源码下载】

    jQuery flip插件实现的翻牌效果示例【附demo源码下载】

    这篇文章主要介绍了jQuery flip插件实现的翻牌效果,可实现类似卡罗牌翻页的视觉效果,涉及jquery.flip.min.js插件的使用,并附带demo源码供读者下载参考,需要的朋友可以参考下
    2016-09-09
  • jQuery 各种浏览器下获得日期区别

    jQuery 各种浏览器下获得日期区别

    在系统开发过程中经常会用到系统的当前时间,然而我们遇到的问题确又是各个浏览器返回值不同,就像典型的IE和FF浏览器。
    2008-12-12
  • 分享jQuery的3种常见事件监听方式

    分享jQuery的3种常见事件监听方式

    这篇文章主要介绍了jQuery常见事件的监听方式,页面经常会有各种事件发生,事件发生后需要进行一些特定处理,即执行特定的函数或者语句。这就需要对事件进行监听,下面关于监听事件的介绍,需要的小伙伴可以参考一下
    2022-03-03
  • jquery设置按钮停顿3秒不可用

    jquery设置按钮停顿3秒不可用

    设置按钮停顿3秒不可用的方法有很多,下面为大家介绍下使用jquery是如何实现的
    2014-03-03
  • Jquery uploadify图片上传插件无法上传的解决方法

    Jquery uploadify图片上传插件无法上传的解决方法

    很多的朋友都有遇到Jquery uploadify图片上传插件无法上传的情况,下面为大家介绍下不错的解决方法,感兴趣的朋友可以参考下
    2013-12-12
  • 实现easyui的datagrid导出为excel的示例代码

    实现easyui的datagrid导出为excel的示例代码

    下面小编就为大家带来一篇实现easyui的datagrid导出为excel的示例代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11

最新评论