实例讲解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 相关文章推荐
学习jquery必备 api中英文对照的chm手册 下载
May 03 Javascript
Jquery下判断Id是否存在的代码
Jan 06 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
Apr 03 Javascript
yepnope.js使用详解及示例分享
Jun 23 Javascript
angularJS 入门基础
Feb 09 Javascript
js创建对象的方法汇总
Jan 07 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
Feb 26 Javascript
使用Vue.observable()进行状态管理的实例代码详解
May 26 Javascript
微信小程序实现上传图片裁剪图片过程解析
Aug 22 Javascript
JS实现简易留言板特效
Dec 23 Javascript
vue中用 async/await 来处理异步操作
Jul 18 Javascript
5种方法告诉你如何使JavaScript 代码库更干净
Sep 15 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 类商品秒杀计时实现代码
2010/05/05 PHP
PHP中使用循环实现的金字塔图形
2014/11/08 PHP
Codeigniter框架实现获取分页数据和总条数的方法
2014/12/05 PHP
PHP使用pear实现mail发送功能 windows环境下配置pear
2016/04/15 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
javaScript对象和属性的创建方法
2007/01/15 Javascript
javascript入门·图片对象(无刷新变换图片)\滚动图像
2007/10/01 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
2013/12/16 Javascript
js调试系列 断点与动态调试[基础篇]
2014/06/18 Javascript
自己封装的常用javascript函数分享
2015/01/07 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
2016/02/26 Javascript
JavaScript笔记之数据属性和存储器属性
2016/03/31 Javascript
深入理解js函数的作用域与this指向
2016/05/28 Javascript
jQuery判断邮箱格式对错实例代码讲解
2017/04/12 jQuery
vue父组件向子组件传递多个数据的实例
2018/03/01 Javascript
Vue.js 2.x之组件的定义和注册图文详解
2018/06/19 Javascript
微信小程序如何获取手机验证码
2018/11/04 Javascript
jquery实现广告上下滚动效果
2021/03/04 jQuery
python万年历实现代码 含运行结果
2017/05/20 Python
Python实现两个list对应元素相减操作示例
2017/06/09 Python
总结Python图形用户界面和游戏开发知识点
2019/05/22 Python
python如何实现不用装饰器实现登陆器小程序
2019/12/14 Python
python实现梯度下降和逻辑回归
2020/03/24 Python
python中watchdog文件监控与检测上传功能
2020/10/30 Python
解决python的空格和tab混淆而报错的问题
2021/02/26 Python
20佳惊艳的HTML5应用程序示例分享
2011/05/03 HTML / CSS
HTML5拖拽API经典实例详解
2018/04/20 HTML / CSS
瑞贝卡·明可弗包包官网:Rebecca Minkoff
2016/07/21 全球购物
九州传奇上机题
2014/07/10 面试题
高三毕业典礼主持词
2014/03/27 职场文书
成绩单公证书
2014/04/10 职场文书
董事长秘书工作职责
2014/06/10 职场文书
2014年党风廉政建设工作总结
2014/11/19 职场文书
护士自荐信怎么写
2015/03/06 职场文书
golang生成vcf通讯录格式文件详情
2022/03/25 Golang
MySQ InnoDB和MyISAM存储引擎介绍
2022/04/26 MySQL