实例讲解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 页面编码与浏览器类型判断代码
Jun 03 Javascript
TBCompressor js代码压缩
Jan 05 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
Jun 08 Javascript
jQuery中delegate()方法用法实例
Jan 19 Javascript
javascript 数组去重复(在线去重工具)
Dec 17 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
Feb 27 Javascript
解决AngualrJS页面刷新导致异常显示问题
Apr 20 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
Apr 23 Javascript
详解从Vue-router到html5的pushState
Jul 21 Javascript
微信公众号生成新浪短网址的实现(快速生成)
Aug 18 Javascript
微信小程序实现签字功能
Dec 23 Javascript
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 Vue.js
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定时删除文件夹下文件(清理缓存文件)
2013/01/23 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
PHP count_chars()函数讲解
2019/02/14 PHP
js模拟实现Array的sort方法
2007/12/11 Javascript
对xmlHttp对象的理解
2011/01/17 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
2012/05/04 Javascript
JS中for循序中延迟加载动态效果的具体实现
2013/08/18 Javascript
js和css写一个可以自动隐藏的悬浮框
2014/03/05 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
2014/05/04 Javascript
JavaScript AJAX之惰性载入函数
2014/08/27 Javascript
laytpl 精致巧妙的JavaScript模板引擎
2014/08/29 Javascript
基于Bootstrap+jQuery.validate实现表单验证
2016/05/30 Javascript
javascript深拷贝(deepClone)详解
2016/08/24 Javascript
JS填写银行卡号每隔4位数字加一个空格
2016/12/19 Javascript
Node.js中如何合并两个复杂对象详解
2016/12/31 Javascript
Django+Vue.js搭建前后端分离项目的示例
2017/08/07 Javascript
详解vue静态资源打包中的坑与解决方案
2018/02/05 Javascript
Vue绑定内联样式问题
2018/10/17 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
2020/05/10 Javascript
Python中使用PIL库实现图片高斯模糊实例
2015/02/08 Python
Python实现获取某天是某个月中的第几周
2015/02/11 Python
python实现日常记账本小程序
2018/03/10 Python
解决Python安装后pip不能用的问题
2018/06/12 Python
python调用摄像头拍摄数据集
2019/06/01 Python
下载官网python并安装的步骤详解
2019/10/12 Python
Python DES加密实现原理及实例解析
2020/07/17 Python
Python configparser模块应用过程解析
2020/08/14 Python
新加坡网上化妆品店:Best Buy World
2018/05/18 全球购物
主键(Primary Key)约束和唯一性(UNIQUE)约束的区别
2013/05/29 面试题
业务主管岗位职责
2013/11/20 职场文书
幼儿园大班毕业感言
2014/02/06 职场文书
讲文明树新风公益广告宣传方案
2014/02/25 职场文书
个人业务学习心得体会
2016/01/25 职场文书
八年级作文之一起的走过日子
2019/09/17 职场文书
python单元测试之pytest的使用
2021/06/07 Python
vue+echarts实现多条折线图
2022/03/21 Vue.js