实例讲解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 对象是否存在判断
Jul 15 Javascript
8个实用的jQuery技巧
Mar 04 Javascript
JavaScript计算某一天是星期几的方法
Aug 05 Javascript
深入浅析react native es6语法
Dec 09 Javascript
不定义JQuery插件 不要说会JQuery
Mar 07 Javascript
修改Jquery Dialog 位置的实现方法
Aug 26 Javascript
面包屑导航详解
Dec 07 Javascript
vue中如何使用ztree
Feb 06 Javascript
vue2 中二级路由高亮问题及配置方法
Jun 10 Javascript
vue页面跳转实现页面缓存操作
Jul 22 Javascript
Nuxt.js nuxt-link与router-link的区别说明
Nov 06 Javascript
javascript实现倒计时关闭广告
Feb 09 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中使用Oracle数据库(6)
2006/10/09 PHP
跟我学Laravel之路由
2014/10/15 PHP
php上传文件常见问题总结
2015/02/03 PHP
php将文件夹打包成zip文件的简单实现方法
2016/10/04 PHP
[原创]js获取数组任意个不重复的随机数组元素
2010/03/15 Javascript
jquery下将选择的checkbox的id组成字符串的方法
2010/11/28 Javascript
实例分析nodejs模块xml2js解析xml过程中遇到的坑
2017/03/18 NodeJs
利用node.js爬取指定排名网站的JS引用库详解
2017/07/25 Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
2017/10/24 Javascript
jQuery替换节点元素的操作方法
2018/03/18 jQuery
javascript和php使用ajax通信传递JSON的实例
2018/08/21 Javascript
微信小程序按钮去除边框线分享页面功能
2018/08/27 Javascript
vue-cli2 构建速度优化的实现方法
2019/01/08 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
2019/08/17 Javascript
python解析json实例方法
2013/11/19 Python
使用Python的urllib和urllib2模块制作爬虫的实例教程
2016/01/20 Python
基于Python Numpy的数组array和矩阵matrix详解
2018/04/04 Python
python 中文件输入输出及os模块对文件系统的操作方法
2018/08/27 Python
Python面向对象之类和对象实例详解
2018/12/10 Python
python图形工具turtle绘制国际象棋棋盘
2019/05/23 Python
python kafka 多线程消费者&手动提交实例
2019/12/21 Python
Python换行与不换行的输出实例
2020/02/19 Python
Python任务调度模块APScheduler使用
2020/04/15 Python
python 使用事件对象asyncio.Event来同步协程的操作
2020/05/04 Python
pycharm无法安装第三方库的问题及解决方法以scrapy为例(图解)
2020/05/09 Python
详解numpy.ndarray.reshape()函数的参数问题
2020/10/13 Python
运行Python编写的程序方法实例
2020/10/21 Python
施华洛世奇水晶荷兰官方网站:SWAROVSKI荷兰
2017/05/12 全球购物
美国孕妇装购物网站:Motherhood Maternity
2019/09/22 全球购物
美国饼干礼物和美食甜点购买网站:Cheryl’s
2020/05/28 全球购物
精彩的大学生自我评价
2013/11/17 职场文书
加强机关作风建设心得体会
2014/10/22 职场文书
感恩教育观后感
2015/06/17 职场文书
劳动模范获奖感言
2015/07/31 职场文书
教师个人工作总结范文2015
2015/10/14 职场文书
2016庆祝国庆67周年宣传语
2015/11/25 职场文书