实例讲解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 相关文章推荐
Apply an AutoFormat to an Excel Spreadsheet
Jun 12 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
Dec 31 Javascript
jQuery图片轮播功能实例代码
Jan 29 Javascript
angular.JS实现网页禁用调试、复制和剪切
Mar 31 Javascript
利用Vue v-model实现一个自定义的表单组件
Apr 27 Javascript
bootstrapvalidator之API学习教程
Jun 29 Javascript
vue.js国际化 vue-i18n插件的使用详解
Jul 07 Javascript
webpack学习教程之前端性能优化总结
Dec 05 Javascript
深入学习JavaScript 高阶函数
Jun 11 Javascript
详解vue-video-player使用心得(兼容m3u8)
Aug 23 Javascript
vue语法自动转typescript(解放双手)
Sep 18 Javascript
js加减乘除精确运算方法实例代码
Jan 17 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
用libtemplate实现静态网页生成
2006/10/09 PHP
php 伪静态之IIS篇
2014/06/02 PHP
PHP获取某个月最大天数(最后一天)的方法
2015/07/29 PHP
Thinkphp 空操作、空控制器、命名空间(详解)
2017/05/05 PHP
优化网页之快速的呈现我们的网页
2007/06/29 Javascript
JS网络游戏-(模拟城市webgame)提供的一些例子下载
2007/10/14 Javascript
使用新的消息弹出框blackbirdjs
2008/10/16 Javascript
写入cookie的JavaScript代码库 cookieLibrary.js
2009/10/24 Javascript
JavaScript 序列化对象实现代码
2009/12/18 Javascript
Javascript 加载和执行-性能提高篇
2012/12/28 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
2013/07/31 Javascript
js动态往表格的td中添加图片并注册事件
2014/06/12 Javascript
JS实现霓虹灯文字效果的方法
2015/08/06 Javascript
Bootstrap Validator 表单验证
2016/07/25 Javascript
详解Nodejs之静态资源处理
2017/06/05 NodeJs
django js 实现表格动态标序号的实例代码
2019/07/12 Javascript
浅入深出Vue之自动化路由
2019/08/06 Javascript
layui按条件隐藏表格列的实例
2019/09/19 Javascript
[55:11]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第一场 11.26
2020/11/30 DOTA
[01:09:19]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第二场 2月28日
2021/03/11 DOTA
Python 字典与字符串的互转实例
2017/01/13 Python
python使用matplotlib绘制热图
2018/11/07 Python
python用post访问restful服务接口的方法
2018/12/07 Python
python爬虫 execjs安装配置及使用
2019/07/30 Python
Python函数式编程指南:对生成器全面讲解
2019/11/19 Python
Python中私有属性的定义方式
2020/03/05 Python
Html5适配iphoneX刘海屏的简单实现
2019/04/09 HTML / CSS
丽笙酒店官方网站:Radisson Hotels
2019/05/07 全球购物
装潢设计实习自我鉴定
2013/09/19 职场文书
中专生求职自荐信范文
2013/12/22 职场文书
党支部书记先进事迹
2014/01/17 职场文书
2015年社区民政工作总结
2015/04/21 职场文书
幼儿园六一主持词开场白
2015/05/28 职场文书
工作收入证明范本
2015/06/12 职场文书
《水上飞机》教学反思
2016/02/20 职场文书
2016年党员公开承诺书范文
2016/03/24 职场文书