实例讲解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 相关文章推荐
JavaScript 拖拉缩放效果
Dec 10 Javascript
Javascript 圆角div的实现代码
Oct 15 Javascript
JS控制日期显示的小例子
Nov 23 Javascript
asp.net刷新本页面的六种方法总结
Jan 07 Javascript
javascript 终止函数执行操作
Feb 14 Javascript
AngularJS基础学习笔记之指令
May 10 Javascript
深入浅析Node.js 事件循环
Dec 20 Javascript
适用于手机端的jQuery图片滑块动画
Dec 09 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
Jan 19 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
Feb 08 Javascript
解决$store.getters调用不执行的问题
Nov 08 Javascript
JavaScript如何判断对象有某属性
Jul 03 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读取IMAP邮件
2006/10/09 PHP
smarty中js的调用方法示例
2014/10/27 PHP
php while循环控制的简单实例
2016/05/30 PHP
微信支付开发订单查询实例
2016/07/12 PHP
ExtJs扩展之GroupPropertyGrid代码
2010/03/05 Javascript
javaScript call 函数的用法说明
2010/04/09 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
2013/06/04 Javascript
JS验证日期的格式YYYY-mm-dd 具体实现
2013/06/29 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
2014/01/07 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
2015/09/18 Javascript
JS实现DIV容器赋值的方法
2015/12/14 Javascript
学习Javascript面向对象编程之封装
2016/02/23 Javascript
js实现精确到秒的倒计时效果
2016/05/29 Javascript
js实现对table的增加行和删除行的操作方法
2016/10/13 Javascript
微信小程序 less文件编译成wxss文件实现办法
2016/12/05 Javascript
利用node.js实现自动生成前端项目组件的方法详解
2017/07/12 Javascript
Angularjs中ng-repeat的简单实例
2017/08/25 Javascript
浅谈vue2 单页面如何设置网页title
2017/11/08 Javascript
JavaScript ES6常用基础知识总结
2019/02/09 Javascript
Vue中rem与postcss-pxtorem的应用详解
2019/11/20 Javascript
使用Python的PEAK来适配协议的教程
2015/04/14 Python
Python实现字典的遍历与排序功能示例
2017/12/23 Python
Flask和Django框架中自定义模型类的表名、父类相关问题分析
2018/07/19 Python
更新修改后的Python模块方法
2019/03/03 Python
浅析Python与Mongodb数据库之间的操作方法
2019/07/01 Python
详解python中的生成器、迭代器、闭包、装饰器
2019/08/22 Python
canvas生成带二维码海报的踩坑记录
2019/09/11 HTML / CSS
Funko官方商店:源自美国,畅销全球搪胶收藏玩偶
2018/09/15 全球购物
索引覆盖(Index Covering)查询含义
2012/02/18 面试题
高中毕业生生活的自我评价
2013/12/08 职场文书
人力资源管理专业应届生求职信
2014/04/24 职场文书
反对邪教标语
2014/06/30 职场文书
学校德育工作总结2015
2015/05/11 职场文书
因身体原因离职的辞职信范文
2015/05/12 职场文书
2016年小学生清明节广播稿
2015/12/17 职场文书
十大最强妖精系宝可梦,哲尔尼亚斯实力最强,第五被称为大力士
2022/03/18 日漫