实例讲解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 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
Nov 26 Javascript
定义JavaScript二维数组采用定义数组的数组来实现
Dec 09 Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
May 13 Javascript
js 为label标签和div标签赋值的方法
Aug 08 Javascript
jquery html动态添加的元素绑定事件详解
May 24 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
Feb 18 Javascript
JavaScript中三个等号和两个等号你了解多少
Jul 04 Javascript
JS中type="button"和type="submit"的区别
Jul 04 Javascript
Node.js使用supervisor进行开发中调试的方法
Mar 26 Javascript
Vue.js轮播图走马灯代码实例(全)
May 08 Javascript
详解nvm管理多版本node踩坑
Jul 26 Javascript
js中实现继承的五种方法
Jan 25 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
图书管理程序(三)
2006/10/09 PHP
php验证身份证号码正确性的函数
2016/07/20 PHP
PHP云打印类完整示例
2016/10/15 PHP
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
2010/09/15 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
2014/06/20 Javascript
Javascript 构造函数详解
2014/10/22 Javascript
jquery实现简单的表单验证
2015/11/17 Javascript
jquery实现两边飘浮可关闭的对联广告
2015/11/27 Javascript
JavaScript学习笔记整理之引用类型
2016/01/22 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
2019/02/22 Javascript
原生javascript自定义input[type=radio]效果示例
2019/08/27 Javascript
Vue实现点击箭头上下移动效果
2020/06/11 Javascript
[41:56]Spirit vs Liquid Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
[40:03]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
python正则表达式re模块详解
2014/06/25 Python
Python生成pdf文件的方法
2014/08/04 Python
python根据路径导入模块的方法
2014/09/30 Python
Windows下搭建python开发环境详细步骤
2020/07/20 Python
在Python中使用AOP实现Redis缓存示例
2017/07/11 Python
Python快速排序算法实例分析
2017/11/29 Python
python 读取视频,处理后,实时计算帧数fps的方法
2018/07/10 Python
使用Python开发SQLite代理服务器的方法
2018/12/07 Python
对Python3之进程池与回调函数的实例详解
2019/01/22 Python
Python制作数据预测集成工具(值得收藏)
2020/08/21 Python
常用的四种CSS透明属性介绍
2014/04/12 HTML / CSS
施华洛世奇天猫官方旗舰店:SWAROVSKI
2017/04/17 全球购物
Lacoste澳大利亚官网:服装、鞋类及配饰
2018/11/14 全球购物
学年自我鉴定范文
2013/10/01 职场文书
学校安全教育制度
2014/01/31 职场文书
《白鹅》教学反思
2014/04/13 职场文书
党员教师一句话承诺
2014/05/30 职场文书
大学生就业指导课心得体会
2016/01/15 职场文书
详解Spring Security中的HttpBasic登录验证模式
2022/03/17 Java/Android
vue数据字典取键值项目的字典问题
2022/04/12 Vue.js
KVM基础命令详解
2022/04/30 Servers
Redis主从复制操作和配置详情
2022/09/23 Redis