实例讲解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 相关文章推荐
jquery.AutoComplete.js中文修正版(支持firefox)
Apr 09 Javascript
完美解决IE低版本不支持call与apply的问题
Dec 05 Javascript
JS+CSS实现简易的滑动门效果代码
Sep 24 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
Jul 05 Javascript
JS弹性运动实现方法分析
Dec 15 Javascript
AngularJS Select(选择框)使用详解
Jan 18 Javascript
JS数组交集、并集、差集的示例代码
Aug 23 Javascript
vue.js做一个简单的编辑菜谱功能
May 08 Javascript
vue.js指令v-for使用以及下标索引的获取
Jan 31 Javascript
React-redux实现小案例(todolist)的过程
Sep 29 Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
Aug 03 Javascript
详解Vue中Axios封装API接口的思路及方法
Oct 10 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
基于mysql的论坛(3)
2006/10/09 PHP
php 字符转义 注意事项
2009/05/27 PHP
php $_ENV为空的原因分析
2009/06/01 PHP
基于Snoopy的PHP近似完美获取网站编码的代码
2011/10/23 PHP
php文件上传 你真的掌握了吗
2016/11/28 PHP
PHP xpath()函数讲解
2019/02/11 PHP
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
2010/06/19 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
2013/11/07 Javascript
JS版的date函数(和PHP的date函数一样)
2014/05/12 Javascript
alert出数组中的随即值代码
2014/09/25 Javascript
JavaScript动态创建link标签到head里的方法
2014/12/22 Javascript
Jquery简单分页实现方法
2015/07/24 Javascript
js右下角弹出提示框示例代码
2016/01/12 Javascript
vue中使用echarts制作圆环图的实例代码
2018/07/27 Javascript
Javascript数组及类数组相关原理详解
2020/10/29 Javascript
[00:10]DOTA2全国高校联赛速递
2018/05/30 DOTA
Python 列表(List) 的三种遍历方法实例 详解
2017/04/15 Python
python sys,os,time模块的使用(包括时间格式的各种转换)
2018/04/27 Python
python爬虫获取新浪新闻教学
2018/12/23 Python
使用python3调用wxpy模块监控linux日志并定时发送消息给群组或好友
2019/06/05 Python
Python Web框架之Django框架Model基础详解
2019/08/16 Python
python中web框架的自定义创建
2019/09/08 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
Python实现JS解密并爬取某音漫客网站
2020/10/23 Python
基于html5 canvas做批改作业的小插件
2020/05/20 HTML / CSS
UNDONE手表官网:世界领先的定制手表品牌
2018/11/13 全球购物
含精油的天然有机化妆品:Indemne
2019/08/27 全球购物
荷兰天然和有机产品网上商城:BigGreenSmile.nl
2020/07/26 全球购物
旅游管理毕业生自荐书
2014/02/02 职场文书
领导干部民主生活会自我剖析材料范文
2014/09/20 职场文书
技能培训通讯稿
2015/07/18 职场文书
2015年卫生院健康教育工作总结
2015/07/24 职场文书
高中数学课堂教学反思
2016/02/18 职场文书
python入门之算法学习
2021/04/22 Python
mysql 排序失效
2022/05/20 MySQL
Win10鼠标宏怎么设置?win10系统鼠标宏的设置方法
2022/08/14 数码科技