实例讲解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 调试利器 Firebug使用详解六
Jul 05 Javascript
angularjs 处理多个异步请求方法汇总
Jan 06 Javascript
jQuery实现的多屏图像图层切换效果实例
May 07 Javascript
JQuery对ASP.NET MVC数据进行更新删除
Jul 13 Javascript
JavaScript数组操作函数汇总
Aug 05 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
Dec 01 Javascript
使用node.js搭建服务器
May 20 Javascript
Angularjs中数据绑定的实例详解
Aug 25 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
webstorm添加*.vue文件支持
May 08 Javascript
React 实现拖拽功能的示例代码
Jan 06 Javascript
vue项目实现减少app.js和vender.js的体积操作
Nov 12 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分页详细讲解(有实例)
2013/10/30 PHP
ThinkPHP连接数据库的方式汇总
2014/12/05 PHP
Yii框架引用插件和ckeditor中body与P标签去除的方法
2017/01/19 PHP
ZendFramework2连接数据库操作实例
2017/04/18 PHP
通过遮罩层实现浮层DIV登录的js代码
2014/02/07 Javascript
一个简单的jQuery计算器实现了连续计算功能
2014/07/21 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
2015/09/14 Javascript
JavaScript中数组去除重复的三种方法
2016/04/22 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
2016/05/31 Javascript
Angular2使用vscode断点调试ts文件的方法
2017/12/13 Javascript
如何使用vuex实现兄弟组件通信
2018/11/02 Javascript
JS script脚本中async和defer区别详解
2020/06/24 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
2020/07/22 Javascript
js调用网络摄像头的方法
2020/12/05 Javascript
[02:30]DOTA2放量测试专访海涛:呼吁保护新手玩家
2013/08/26 DOTA
Python中replace方法实例分析
2014/08/20 Python
Linux下Python获取IP地址的代码
2014/11/30 Python
python开发之基于thread线程搜索本地文件的方法
2015/11/11 Python
python和ruby,我选谁?
2017/09/13 Python
Python异常对代码运行性能的影响实例解析
2018/02/08 Python
python关于矩阵重复赋值覆盖问题的解决方法
2019/07/19 Python
Django app配置多个数据库代码实例
2019/12/17 Python
Python读取文件内容为字符串的方法(多种方法详解)
2020/03/04 Python
Python3+selenium实现cookie免密登录的示例代码
2020/03/18 Python
python录音并调用百度语音识别接口的示例
2020/12/01 Python
Python+kivy BoxLayout布局示例代码详解
2020/12/28 Python
HTML5 Canvas中绘制椭圆的4种方法
2015/04/24 HTML / CSS
Static Nested Class 和 Inner Class的不同
2013/11/28 面试题
应届生求职自荐信范文
2014/04/07 职场文书
大学英语演讲稿范文
2014/04/24 职场文书
2015年银行客户经理工作总结
2015/04/01 职场文书
员工安全责任协议书
2016/03/22 职场文书
互联网的下一个风口:新的独角兽将诞生
2019/08/02 职场文书
公文写作:新员工转正申请书范本3篇!
2019/08/07 职场文书
springboot集成flyway自动创表的详细配置
2021/06/26 Java/Android
Win11显卡控制面板打开显卡设置方法
2022/04/20 数码科技