实例讲解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 相关文章推荐
date.parse在IE和FF中的区别
Jul 29 Javascript
Jquery拖拽并简单保存的实现代码
Nov 28 Javascript
jQuery为iframe的body添加click事件的实现代码
Apr 07 Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
May 23 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
Apr 15 Javascript
谈谈JavaScript类型系统之Math
Jan 06 Javascript
深入理解JavaScript单体内置对象
Jun 06 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
Feb 21 Javascript
详谈jQuery中的一些正则匹配表达式
Mar 08 Javascript
js传递数组参数到后台controller的方法
Mar 29 Javascript
2种在vue项目中使用百度地图的简单方法
Sep 28 Javascript
Ant Design的可编辑Tree的实现操作
Oct 31 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 开源AJAX框架14种
2009/08/24 PHP
php和数据库结合的一个简单的web实例 代码分析 (php初学者)
2011/07/28 PHP
smarty简单分页的实现方法
2014/10/27 PHP
3款值得推荐的微信开发开源框架
2014/10/28 PHP
php相对当前文件include其它文件的方法
2015/03/13 PHP
PHP使用Redis替代文件存储Session的方法
2017/02/15 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
javascript网页关键字高亮代码
2008/07/30 Javascript
Exjs 入门篇
2010/04/07 Javascript
JavaScript中的细节分析
2012/06/30 Javascript
JavaScript实现维吉尼亚(Vigenere)密码算法实例
2013/11/22 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
2014/09/01 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
2014/10/14 Javascript
JS获取html元素的标记名实现方法
2016/10/08 Javascript
Bootstrap路径导航与分页学习使用
2017/02/08 Javascript
js, jQuery实现全选、反选功能
2017/03/08 Javascript
浅谈ES6新增的数组方法和对象
2017/08/08 Javascript
详解使用angular的HttpClient搭配rxjs
2017/09/01 Javascript
vue中axios的封装问题(简易版拦截,get,post)
2018/06/15 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
2018/10/17 Javascript
javascript+HTML5 canvas绘制时钟功能示例
2019/05/15 Javascript
js实现简单的点名器随机色实例代码
2020/09/20 Javascript
Python Numpy:找到list中的np.nan值方法
2018/10/30 Python
PYQT5设置textEdit自动滚屏的方法
2019/06/14 Python
Python利用scapy实现ARP欺骗的方法
2019/07/23 Python
Python操作多维数组输出和矩阵运算示例
2019/11/28 Python
flask实现验证码并验证功能
2019/12/05 Python
Booking.com美国:全球酒店预订网站
2017/04/18 全球购物
缓解脚、腿和背部疼痛:Z-CoiL鞋
2019/03/12 全球购物
渗透攻击的测试步骤
2014/06/07 面试题
安全资金保障制度
2014/01/23 职场文书
物流管理专业求职信
2014/05/29 职场文书
党员民主评议个人总结
2014/10/20 职场文书
2014年银行柜员工作总结
2014/11/12 职场文书
智慧人生:永远不需要向任何人解释你自己
2019/08/20 职场文书
使用python向MongoDB插入时间字段的操作
2021/05/18 Python