实例讲解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的单例模式 (singleton in Javascript)
Jun 11 Javascript
jquery获得下拉框值的代码
Aug 13 Javascript
非主流的textarea自增长实现js代码
Dec 20 Javascript
jQuery实现密保互斥问题解决方案
Aug 16 Javascript
详解JavaScript中的every()方法
Jun 08 Javascript
第五章之BootStrap 栅格系统
Apr 25 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
Jul 07 Javascript
js实现字符全排列算法的简单方法
May 01 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
Sep 13 Javascript
AngularJS 监听变量变化的实现方法
Oct 09 Javascript
vue项目刷新当前页面的三种方法
Dec 04 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
Aug 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
基于Snoopy的PHP近似完美获取网站编码的代码
2011/10/23 PHP
PHP中对于浮点型的数据需要用不同的方法解决
2014/03/11 PHP
PHP提示Warning:phpinfo() has been disabled函数禁用的解决方法
2014/12/17 PHP
详解PHP中的PDO类
2015/07/06 PHP
Symfony2学习笔记之插件格式分析
2016/03/17 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
JAVASCRIPT keycode总结
2009/02/04 Javascript
Javascript调用C#代码
2011/01/17 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
2015/08/10 Javascript
javascript 广告移动特效的实现代码
2016/06/25 Javascript
angularjs实现文字上下无缝滚动特效代码
2016/09/04 Javascript
JavaScript中的await/async的作用和用法
2016/10/31 Javascript
JavaScript错误处理和堆栈追踪详解
2017/04/18 Javascript
js案例之鼠标跟随jquery版(实例讲解)
2017/07/21 jQuery
layui table设置某一行的字体颜色方法
2019/09/05 Javascript
Vue 3.0双向绑定原理的实现方法
2019/10/23 Javascript
[01:00] DOTA2英雄背景故事第五期之重力引力法则谜团
2020/07/16 DOTA
学习python处理python编码问题
2011/03/13 Python
Python实现复杂对象转JSON的方法示例
2017/06/22 Python
Python中支持向量机SVM的使用方法详解
2017/12/26 Python
Windows下Anaconda的安装和简单使用方法
2018/01/04 Python
python3安装speech语音模块的方法
2018/12/24 Python
python实现日志按天分割
2019/07/22 Python
django自带调试服务器的使用详解
2019/08/29 Python
python3 pillow模块实现简单验证码
2019/10/31 Python
python实现简单文件读写函数
2021/02/25 Python
美国在线鲜花速递:ProFlowers
2017/01/05 全球购物
澳大利亚在线购买儿童玩具:Toy Universe
2017/12/28 全球购物
青年安全生产示范岗事迹材料
2014/05/04 职场文书
物业总经理助理岗位职责
2014/06/29 职场文书
工作违纪检讨书范文
2015/01/26 职场文书
房屋所有权证明
2015/06/19 职场文书
2016师德师风学习心得体会
2016/01/12 职场文书
个人自我鉴定怎么写?
2019/07/01 职场文书
使用GO语言实现Mysql数据库CURD的简单示例
2021/08/07 Golang
JavaScript异步操作中串行和并行
2021/11/20 Javascript