这里就谈谈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)的区别总结的更多相关文章

  1. 【jQuery】【转】jQuery中的trigger和triggerHandler区别

    trigger(event, [data]) 在每一个匹配的元素上触发某类事件. 这个函数也会导致浏览器同名的默认行为的执行.比如,如果用trigger()触发一个'submit',则同样会导致浏览器 ...

  2. jquery中attr和prop的区别、 什么时候用 attr 什么时候用 prop (转自 芈老头 )

    jquery中attr和prop的区别. 什么时候用 attr 什么时候用 prop   在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这 ...

  3. JQuery中的html(),text(),val()区别

    jQuery中.html()用为读取和修改元素的HTML标签,.text()用来读取或修改元素的纯文本内容,.val()用来读取或修改表单元素的value值. 1.HTML html():取得第一个匹 ...

  4. jQuery中.attr()和.prop()的区别

    之前学习jQuery的时候,学习到了两种取得标签的属性值的方法:一种是elemJobj.attr(),另一种是elemJobj.prop().而在学习JS的时候,只有一种方法elemObj.getAt ...

  5. jquery中attr和prop的区别(转)

    在网络上看到这样一篇关于jquery中attr和prop的区别文章,觉得不错,所以转载了. 在jQuery 1.6中,.attr()方法查询那些没有设置的属性,则会返回一个undefined.如果你要 ...

  6. Jquery中的 height(), innerHeight() outerHeight()区别

    jQuery中的 height innerHeight outerHeight区别 标准浏览器下: height:高度 innerHeight:高度+补白 outerHeight:高度+补白+边框,参 ...

  7. 基于jquery中children()与find()的区别介绍

    本篇文章介绍了,基于jquery中children()与find()的区别,需要的朋友参考下 .children(selector) 方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈).参数可选 ...

  8. jquery中this与$this的区别

    来源:http://www.jb51.net/article/19738.htm jQuery中this与$(this)的区别 $("#textbox").hover( funct ...

  9. jquery中attr和prop的区别分析

    这篇文章主要介绍了jquery中attr和prop的区别分析的相关资料,需要的朋友可以参考下 在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别 ...

  10. Jquery中.attr()和.data()的区别

    $.attr()和$.data()本质上属于DOM属性和Jquery对象属性的区别. 一个简单的例子 <!DOCTYPE html> <html> <head> & ...

随机推荐

  1. 初始Turtle

    ---恢复内容开始--- turtle库介绍 海龟作图最初源自20世纪60年代的Logo(创建于1967年,是一种教育编程语言)编程语言. 常用函数说明 画笔的属性 设置画笔的宽度   t.pensi ...

  2. POJ 2186 挑战 --牛红人 强连通分量——Tarjan

    题意:n头奶牛,给出若干个欢迎关系a b,表示a欢迎b,欢迎关系是单向的,但是是可以传递的,如:a欢迎b,b欢迎c,那么a欢迎c .另外每个奶牛都是欢迎他自己的.求出被所有的奶牛欢迎的奶牛的数目.#i ...

  3. HDU2196computer

    就是求每个点为起始点的最长链的长度. 写一下各个数组的意思吧. f[i][0]为点i向下走最长的距离:f[i][1]为点i向下走第二长的距离: xia[i][0]为点i向下走最长距离所要走的儿子节点: ...

  4. CTSC&APIO 2017游记

    Day 0 早上4点多起床赶飞机,起床的时候发现闹钟调成下午4点的了...(虽然说早就已经被父母的洗漱声音吵醒了) 飞机上碎觉.到了北京发现比福州还热...而且北京今天意外地好天气,没有传言中的&qu ...

  5. C++ 打印XPS文档

    CoInitializeEx(, COINIT_MULTITHREADED); IXpsOMObjectFactory *xpsFactory; HRESULT hr = CoCreateInstan ...

  6. opengl中相关的计算机图形变换矩阵之:齐次坐标 (摘编)

    模型视图变换(几何变换)矩阵: 1. 齐次坐标:两条平行线也可以相交. 在欧几里得空间中,两条平行线是无法相交的,但是在投影空间(Projective Space)这条定理就不再适用了. 比如上图中, ...

  7. box-shadow inset

    安卓支持,ios不支持:box-shadow: 0px 0px 2px inset rgba(0,0,0,0.08); 安卓,ios都支持:box-shadow: inset 0px 0px 2px ...

  8. 双重Iterator 报错!!!!

    List list = new ArrayList(); list.add(new String[]{"0","s1","0038",&qu ...

  9. DVWA--XSS(反射型)

    0X01爱之初介绍 虽然XSS已经做了两节了 但是还是还是简单解释一下 前言:跨站脚本(Cross-Site Scripting,XSS)是一种经常出现在Web应用程序中的计算机安全漏洞,是由于Web ...

  10. java分页原理及分类

    1.使用List接口最终subList()方法实现分页 2.直接使用数据库SQL语句实现分页 3.使用hibernate等框架实现跨数据库的分页 mybatis是面向SQL的,本质上和第二种分页方式相 ...