jQuery中this与$(this)的区别总结
这里就谈谈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方法。
jQuery中this与$(this)的区别总结的更多相关文章
- 【jQuery】【转】jQuery中的trigger和triggerHandler区别
trigger(event, [data]) 在每一个匹配的元素上触发某类事件. 这个函数也会导致浏览器同名的默认行为的执行.比如,如果用trigger()触发一个'submit',则同样会导致浏览器 ...
- jquery中attr和prop的区别、 什么时候用 attr 什么时候用 prop (转自 芈老头 )
jquery中attr和prop的区别. 什么时候用 attr 什么时候用 prop 在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这 ...
- JQuery中的html(),text(),val()区别
jQuery中.html()用为读取和修改元素的HTML标签,.text()用来读取或修改元素的纯文本内容,.val()用来读取或修改表单元素的value值. 1.HTML html():取得第一个匹 ...
- jQuery中.attr()和.prop()的区别
之前学习jQuery的时候,学习到了两种取得标签的属性值的方法:一种是elemJobj.attr(),另一种是elemJobj.prop().而在学习JS的时候,只有一种方法elemObj.getAt ...
- jquery中attr和prop的区别(转)
在网络上看到这样一篇关于jquery中attr和prop的区别文章,觉得不错,所以转载了. 在jQuery 1.6中,.attr()方法查询那些没有设置的属性,则会返回一个undefined.如果你要 ...
- Jquery中的 height(), innerHeight() outerHeight()区别
jQuery中的 height innerHeight outerHeight区别 标准浏览器下: height:高度 innerHeight:高度+补白 outerHeight:高度+补白+边框,参 ...
- 基于jquery中children()与find()的区别介绍
本篇文章介绍了,基于jquery中children()与find()的区别,需要的朋友参考下 .children(selector) 方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈).参数可选 ...
- jquery中this与$this的区别
来源:http://www.jb51.net/article/19738.htm jQuery中this与$(this)的区别 $("#textbox").hover( funct ...
- jquery中attr和prop的区别分析
这篇文章主要介绍了jquery中attr和prop的区别分析的相关资料,需要的朋友可以参考下 在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别 ...
- Jquery中.attr()和.data()的区别
$.attr()和$.data()本质上属于DOM属性和Jquery对象属性的区别. 一个简单的例子 <!DOCTYPE html> <html> <head> & ...
随机推荐
- python接口自动化二(发送post请求)
前言 一个http请求包括三个部分,为别为请求行,请求报头,消息主体,类似以下这样: 请求行 请求报头 消息主体 HTTP协议规定post提交的数据必须放在消息主体中,但是协议并没有规定必须使用什么编 ...
- 【NOIP2014模拟8.24】小X 的道路修建
题目 因为一场不小的地震,Y 省n 个城市之间的道路都损坏掉了,省长希望小X 将城市之间的道路重修一遍. 很多城市之间的地基都被地震破坏导致不能修路了,因此可供修建的道路只有m 条.因为施工队伍有限, ...
- Leaflet使用vector tiles 标注label设置
JS //简单的标注 var marker = L.marker([ 31.2, 114.5 ], { // icon:myIcon }).addTo(map) // 设置label .bindToo ...
- C/C++运算符优先级关系
C/C++优先级 从高到低 1~14梯队 1. () [] . -> 2. ! ~ -(负号) ++ -- &(取变量地址)* (type)(强制类型) ...
- pluginManagement的坑
想用protobuf-maven-plugin插件,用了<pluginManagement/>标签包裹<plugin/>,就引不进来,去掉就可以引进来.需要研究下. <b ...
- [CF1093G]Multidimensional Queries 题解
前言 DennyQi太巨了! 定义一个点\(a\),\(a_x\)表示\(a\)在第\(x\)维空间上的坐标值 题解 这题的思路珂以说非常巧妙(原谅我又用了这个"珂"), 我们知道 ...
- Elastic-Job介绍
1 什么是分布式任务调度 什么是分布式?当前软件的架构正在逐步转变为分布式架构,将单体结构分为若干服务,服务之间通过网络交互来完成用户的业务处理,如下图,电商系统为分布式架构,由订单服务.商品服务.用 ...
- React 项目 ant design 的 CheckboxGroup 验证
使用 ant design 提供的 getFieldDecorator 进行验证 一般开始使用默认选中 <FormItem> {getFieldDecorator('checkProtoc ...
- Android 通过应用设置系统日期和时间的方法
Android 通过应用设置系统日期和时间的方法 android 2.3 android 4.0 测试可行,不过需要ROOT权限. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 ...
- ORA-01034、ORA-27101、ORA-00119错误
ORA-01034ORA-27101Linux-x86_64 Error: 2:No such file or directory. 或者是 ORA-00119: invalid specificat ...