jQuery学习之旅 Item7 区别this和$(this)
刚开始以为this和$(this)
就是一模子刻出来。但是我在阅读时,和coding时发现,总不是一回事,这里就谈谈this与$(this)的区别。
1、jQuery中this与$(this)的区别
$("#textbox").hover(
function() {
this.title = "Test";
},
fucntion() {
this.title = "OK”;
}
);
这里的this其实是一个html 元素(textbox),textbox有text属性,所以这样写是完全没有什么问题的。
但是如果将this换成$(this)
就不是那回事了,报Error了。this与 $(this)的区别在此。
\\Error Code:
$("#textbox").hover(
function() {
$(this).title = "Test";
},
function() {
$(this).title = "OK";
}
);
$()这是jQuery的一个函数,也是最核心最基本的函数
功能一:传入一个选择器字符串,获得这个选择器对应的dom内容,保存在[]中,也就是俗称的jQuery对象。例如
$('#id') $('.class') $('tag')
功能二:传入一个匿名函数,例如
$(function(){})//这个匿名函数在网页载入完成后开始执行
功能三:将javascript对象包装成为jQuery对象。例如
$(this)
$({a:1,b:2,c:3})
$(document.getElementById('idstr'))
this是javascript**自身的** 语法关键字,它指向一个javascript对象,所以可以使用所指向的目标javascript对象所拥有的方法, 但他自己不是一个普通的变量,所以你无法自己定义一个变量叫this
所以为了使用jQuery对象的方法,你必须传入jQuery函数$(this), 将javascript 对象包装成为一个jquery对象。
这里的$(this)是一个JQuery对象,而jQuery对象沒有title 属性,因此这样写是错误的。
JQuery拥有attr()方法可以get/set DOM对象的属性,所以正确的写法应该是这样:
正确的代码:
$("#textbox").hover(
function() {
$(this).attr(’title’, ‘Test’);
},
function() {
$(this).attr(’title’, ‘OK’);
}
);
使用jQuery的好处是它包裝了各种浏览器版本对DOM对象的操作,因此统一使用$(this)而不再用this应该是比较不错的选择。
jQuery中this与$(this)的区别就介绍到这里。
2、典型错误与注意点
var node = $('#id');
node.click(function(){
this.css('display','block'); //报错 this是一个html元素,不是jquery对象,因此this不能调用jquery 的css()方法
$(this).css(); //正确 $(this)是一个jquery对象,不是html元素,可以用css()方法
this.style.display = 'block'; //正确 this是一个html元素,不是jquery对象,因此this不能调用jquery的css()方法,但是可以用javascript来更改style属性
});
不要滥用$(this)
如果不了解javasrcipt中基本的DOM属性和方法的话,很容易滥用jQuery对象。比如:
$(‘#someAnchor’).click(function() {
alert( $(this).attr(‘id’) );
});
如果你只是通过jQ对象获取简单的dom元素的属性比如id,那么你完全可以使用js原生的方法:
$(‘#someAnchor’).click(function() {
alert( this.id );
});
诸如“src,” “href,” 和“style.”等一些属性在老版本的ie中使用了getAttribute方法。
版权声明:本文为小平果原创文章,转载请注明:http://blog.csdn.net/i10630226
jQuery学习之旅 Item7 区别this和$(this)的更多相关文章
- jQuery学习之旅 Item4 细说DOM操作
jQuery-–DOM操作(文档处理) Dom是Document Object Model的缩写,意思是文档对象模型.DOM是一种与浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准 ...
- jQuery学习之旅 Item8 DOM事件操作
1.jquery页面载入事件 1.传统加载事件 <body onload="函数名()"> 页面全部html和css代码加载完成之后再调用指定的onload函数 win ...
- jQuery学习之旅 Item5 $与jQuery对象
1.$符号的由来 $符号本质就是函数的名字. jquery源码分析 通过分析我们知道,在jquery里边不只可以使用$符号,还可以使用jQuery标志 解决冲突问题 有的项目是中间过渡项目(proto ...
- jQuery学习之旅 Item2 选择器【二】
这里接着上一个Item1 把jQuery的选择器讲完.主要有:属性过滤器和子元素过滤器 点击"名称"会跳转到此方法的jQuery官方说明文档. 5. 属性过滤器 Attribute ...
- jQuery学习之旅 Item1 选择器【一】
点击"名称"会跳转到此方法的jQuery官方说明文档. 1. 基础选择器 Basics 名称 说明 举例 #id 根据元素Id选择 $("divId") 选择I ...
- jquery学习之旅
在jQuery中,css()方法的功能是设置或获取元素的某项样式属性. $<"div">.css("font-weight","bold& ...
- jQuery学习之旅 Item10 ajax快餐
1. 摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 本篇文章讲解如何使用jQuery方便快捷的实现A ...
- jQuery学习之旅 Item9 动画效果
1.元素的显示和隐藏 display:none; 隐藏 display:block; 显示 简单显示和隐藏方法 a) show() 显示 b) hide() 隐藏 c) toggle() 开关,显示则 ...
- jQuery学习之旅 Item6 好用的each()
1.javascript 函数的调用方式 首先来研究一下jquery的each()方法的源码,在这之前,先要回顾一下javascript函数具体调用样式: 普通函数调用 setName(); 可以作为 ...
随机推荐
- unix下的ACL
acl可以针对user,组,目录默认属性(mask)来控制. acl需要文件系统支持,ext2/3,jfs,xfs等都支持. getfacl setfacl 对于mac os X系统的acl 可以使用 ...
- obj-c编程11:内存管理和ARC(自动引用计数)
乖乖隆地洞,这篇文章内容可是不得了,内存管理哦!首先,这个要是搞不明白,你就等着进程莫名其妙的挂死,或是疯狂申请内存却不释放,结果被OS杀死,不管是"自杀"还是"他杀&q ...
- obj-c编程02:给类自动合成存取方法
我们在此篇对obj-c编程01中的Box的例子稍加改动,一是添加的自动合成存取器,二是将Box按照其标准的写法分成3个文件,即头文件Box.h,类实现文件Box.m,以及主文件test.m. 1.Bo ...
- 单片机PWM调制技术
我们可以看看下图,下图就是一个典型的PWM的波形图. T是一个周期,T1就是高电平所占用的时间,T2就是低电平所占用的时间. 如上图所示T1为脉冲宽度(就是导通时间),周期为T,则输出电压的平均值为U ...
- C# 如何将PDF转为多种图像文件格式(Png/Bmp/Emf/Tiff)
PDF是一种在我们日常工作学习中最常用到的文档格式之一,但常常也会因为文档的不易编辑的特点,在遇到需要编辑PDF文档内容或者转换文件格式的情况时让人苦恼.通常对于开发者而言,可选择通过使用组件的方式来 ...
- 页面加载完之前显示Loading
1.第一种方式 HTML <body class="is-loading"> <div class="curtain"> <div ...
- jquery 加法 乘法运算 精确计算函数
int类型相加不会出现问题,但小数点相加就会出现问题 //乘法函数 var accMul = function(arg1, arg2){ var m=0,s1=arg1.toString(),s2=a ...
- rcp perspective 添加9个视图均匀排列
PageLayout布局方法 pageLayout.addView("NodePMTSStream" + ":1", IPageLayout.TOP, 0.5f ...
- 大数据技术生态圈形象比喻(Hadoop、Hive、Spark 关系)
[摘要] 知乎上一篇很不错的科普文章,介绍大数据技术生态圈(Hadoop.Hive.Spark )的关系. 链接地址:https://www.zhihu.com/question/27974418 [ ...
- git push 报错 "Peer certificate cannot be authenticated with known CA certificates"
使用git push -u origin master 命令向远程仓库提交代码时报错:Peer certificate cannot be authenticated with known CA ce ...