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> & ...
随机推荐
- 初始Turtle
---恢复内容开始--- turtle库介绍 海龟作图最初源自20世纪60年代的Logo(创建于1967年,是一种教育编程语言)编程语言. 常用函数说明 画笔的属性 设置画笔的宽度 t.pensi ...
- POJ 2186 挑战 --牛红人 强连通分量——Tarjan
题意:n头奶牛,给出若干个欢迎关系a b,表示a欢迎b,欢迎关系是单向的,但是是可以传递的,如:a欢迎b,b欢迎c,那么a欢迎c .另外每个奶牛都是欢迎他自己的.求出被所有的奶牛欢迎的奶牛的数目.#i ...
- HDU2196computer
就是求每个点为起始点的最长链的长度. 写一下各个数组的意思吧. f[i][0]为点i向下走最长的距离:f[i][1]为点i向下走第二长的距离: xia[i][0]为点i向下走最长距离所要走的儿子节点: ...
- CTSC&APIO 2017游记
Day 0 早上4点多起床赶飞机,起床的时候发现闹钟调成下午4点的了...(虽然说早就已经被父母的洗漱声音吵醒了) 飞机上碎觉.到了北京发现比福州还热...而且北京今天意外地好天气,没有传言中的&qu ...
- C++ 打印XPS文档
CoInitializeEx(, COINIT_MULTITHREADED); IXpsOMObjectFactory *xpsFactory; HRESULT hr = CoCreateInstan ...
- opengl中相关的计算机图形变换矩阵之:齐次坐标 (摘编)
模型视图变换(几何变换)矩阵: 1. 齐次坐标:两条平行线也可以相交. 在欧几里得空间中,两条平行线是无法相交的,但是在投影空间(Projective Space)这条定理就不再适用了. 比如上图中, ...
- box-shadow inset
安卓支持,ios不支持:box-shadow: 0px 0px 2px inset rgba(0,0,0,0.08); 安卓,ios都支持:box-shadow: inset 0px 0px 2px ...
- 双重Iterator 报错!!!!
List list = new ArrayList(); list.add(new String[]{"0","s1","0038",&qu ...
- DVWA--XSS(反射型)
0X01爱之初介绍 虽然XSS已经做了两节了 但是还是还是简单解释一下 前言:跨站脚本(Cross-Site Scripting,XSS)是一种经常出现在Web应用程序中的计算机安全漏洞,是由于Web ...
- java分页原理及分类
1.使用List接口最终subList()方法实现分页 2.直接使用数据库SQL语句实现分页 3.使用hibernate等框架实现跨数据库的分页 mybatis是面向SQL的,本质上和第二种分页方式相 ...