实例讲解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 相关文章推荐
使用Post提交时须将空格转换成加号的解释
Jan 14 Javascript
js 判断控件获得焦点的示例代码
Mar 04 Javascript
js结合正则实现国内手机号段校验
Jun 19 Javascript
Bootstrap每天必学之级联下拉菜单
Mar 27 Javascript
jquery仿微信聊天界面
May 06 jQuery
js使用i18n实现页面国际化的方法
May 09 Javascript
angular.js中解决跨域问题的三种方式
Jul 12 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
Mar 01 Javascript
Vue项目查看当前使用的elementUI版本的方法
Sep 27 Javascript
简述vue路由打开一个新的窗口的方法
Nov 29 Javascript
解决vue cli使用typescript后打包巨慢的问题
Sep 30 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
Jul 20 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
fleaphp下不确定的多条件查询的巧妙解决方法
2008/09/11 PHP
php数组函数序列之array_values() 获取数组元素值的函数与方法
2011/10/30 PHP
Yii操作数据库实现动态获取表名的方法
2016/03/29 PHP
Joomla实现组件中弹出一个模式(modal)窗口的方法
2016/05/04 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
基于jQuery UI CSS Framework开发Widget的经验
2010/08/21 Javascript
5个javascript的数字格式化函数分享
2011/12/07 Javascript
使用js在页面中绘制表格核心代码
2013/09/16 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
2013/10/22 Javascript
js实现最短的XML格式化工具实例
2015/03/12 Javascript
用js动态添加html元素,以及属性的简单实例
2016/07/19 Javascript
你知道setTimeout是如何运行的吗?
2016/08/16 Javascript
ECMAScript6轮播图实践知识总结
2016/08/17 Javascript
完美解决JS文件页面加载时的阻塞问题
2016/12/18 Javascript
VUE中v-model和v-for指令详解
2017/06/23 Javascript
JavaScript之排序函数_动力节点Java学院整理
2017/06/30 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
2018/08/10 Javascript
学习React中ref的两个demo示例
2018/08/14 Javascript
搭建vscode+vue环境的详细教程
2020/08/31 Javascript
Python的ORM框架SQLAlchemy入门教程
2014/04/28 Python
Python基础学习之常见的内建函数整理
2017/09/06 Python
Python编写一个优美的下载器
2018/04/15 Python
python实现内存监控系统
2021/03/07 Python
解析Python的缩进规则的使用
2019/01/16 Python
python简单区块链模拟详解
2019/07/03 Python
10分钟教你用python动画演示深度优先算法搜寻逃出迷宫的路径
2019/08/12 Python
Win10+GPU版Pytorch1.1安装的安装步骤
2019/09/27 Python
python路径的写法及目录的获取方式
2019/12/26 Python
python3获取控制台输入的数据的具体实例
2020/08/16 Python
马来西亚户外装备商店:PTT Outdoor
2019/07/13 全球购物
武汉英思工程科技有限公司–ORACLE面试测试题目
2012/04/30 面试题
光盘行动倡议书
2014/02/02 职场文书
优秀员工获奖感言
2014/03/01 职场文书
工资收入证明样本(5篇)
2014/09/16 职场文书
党员“四风”问题批评与自我批评思想汇报
2014/10/06 职场文书
学校社团活动总结
2015/05/07 职场文书