实例讲解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 相关文章推荐
firefo xml 读写实现js代码
Jun 11 Javascript
Uglifyjs(JS代码优化工具)入门 安装使用
Apr 13 Javascript
HTML5之lang属性与dir属性的详解
Jun 19 Javascript
jquery实现微博文字输入框 输入时显示输入字数 效果实现
Jul 12 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
Oct 20 Javascript
javascript事件委托的方式绑定详解
Jun 10 Javascript
Bootstrap每天必学之标签与徽章
Nov 27 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
Oct 03 Javascript
原生js实现可爱糖果数字时间特效
Dec 30 Javascript
js 转义字符及URI编码详解
Feb 28 Javascript
Angular2 自定义表单验证器的实现方法
Dec 14 Javascript
vue 实现强制类型转换 数字类型转为字符串
Nov 07 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
支持oicq头像的留言簿(一)
2006/10/09 PHP
Ajax PHP分页演示
2007/01/02 PHP
简单采集了yahoo的一些数据
2007/02/14 PHP
删除无限分类并同时删除它下面的所有子分类的方法
2010/08/08 PHP
PHP中Header使用的HTTP协议及常用方法小结
2014/11/04 PHP
dedecms中使用php语句指南
2014/11/13 PHP
php中curl使用指南
2015/02/05 PHP
深入理解JavaScript定时机制
2010/10/29 Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
2013/12/23 Javascript
jquery遍历checkbox的注意事项说明
2014/02/21 Javascript
jQuery中index()的用法分析
2014/09/05 Javascript
AngularJs bootstrap详解及示例代码
2016/09/01 Javascript
JavaScript实现区块链
2018/03/14 Javascript
NodeJS服务器实现gzip压缩的示例代码
2018/10/12 NodeJs
vue过滤器用法实例分析
2019/03/15 Javascript
使用Node.js写一个代码生成器的方法步骤
2019/05/10 Javascript
微信小程序实现多行文字超出部分省略号显示功能
2019/10/23 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
2020/03/03 Javascript
python实现简单socket通信的方法
2016/04/19 Python
Python基于matplotlib实现绘制三维图形功能示例
2018/01/18 Python
python爬虫之模拟登陆csdn的实例代码
2018/05/18 Python
python 编写简单网页服务器的实例
2018/06/01 Python
Python实现读写INI配置文件的方法示例
2018/06/09 Python
python使用opencv实现马赛克效果示例
2019/09/28 Python
关于ZeroMQ 三种模式python3实现方式
2019/12/23 Python
Python tkinter模版代码实例
2020/02/05 Python
python如何保存文本文件
2020/06/07 Python
利用PyTorch实现VGG16教程
2020/06/24 Python
python中threading和queue库实现多线程编程
2021/02/06 Python
一些常用的HTML5模式(pattern) 总结
2015/07/14 HTML / CSS
波兰最大的宠物用品网上商店:FERA.PL
2019/08/11 全球购物
信息总监管理职责范本
2014/03/08 职场文书
单位委托书怎么写
2014/09/21 职场文书
2015年体检中心工作总结
2015/05/27 职场文书
企业廉洁教育心得体会
2016/01/20 职场文书
PHP中->和=>的意思
2021/03/31 PHP