`
wanxiaotao12
  • 浏览: 457332 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JQuery -- this 和 $(this) 的区别

 
阅读更多

this,如果是取得元素的话,则对应当前元素的对象
$(this)则是当前元素被jQuery处理的对象。

看看作者是怎么写的,来源:http://www.cnblogs.com/RuiLei/archive/2009/08/20/1550804.html。

起初以为this和$(this)就是一模子刻出来。但是我在阅读时,和coding时发现,总不是一回事。

What is "this"?

In many object-oriented programming languages, this (or self) is a keyword which can be used in instance methods to refer to the object on which the currently executing method has been invoked.

$("#textbox").hover(
function() {
this.title = "Test";
},
fucntion() {
this.title = "OK”;
}
);

这里的this其实是一个Html 元素(textbox),textbox有text属性,所以这样写是完全没有什么问题的。
但是如果将this换成$(this)就不是那回事了,Error--报了。

Error Code:
$("#textbox").hover(
function() {
$(this).title = "Test";
},
function() {
$(this).title = "OK";
}
);

这里的$(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应该是比较不错的选择。

参考:http://remysharp.com/2007/04/12/jquerys-this-demystified/

--EOF--

一般来说,在代码中,尽量使用$(this),一来代码更规范一点,二来,jQuery的函数你也就可以直接调用了。如$(this).children()之类的。。

分享到:
评论

相关推荐

    jquery-easyui-EDT-1.4.2-build1.rar 包含中文文档

    jQuery EasyUI 官方API文档中文版 version 1.4.2 Build 1 作者:王锦阳 CSDN账号:richie696 EasyUI专题 http://download.csdn.net/album/detail/343 文档 EasyUI每个组件的属性,方法和事件。用户可以很容易地扩展...

    jquery-ui文档.rar

    This page demonstrates the widgets you downloaded using the theme you selected in the download builder. We've included and linked to minified versions of jQuery, your personalized copy of jQuery UI ...

    jquery-ui.custom

    jquery控件 $( "#dialog" ).dialog({ autoOpen: false, width: 400, buttons: [ { text: "Ok", click: function() { $( this ).dialog( "close" ); } }, { text: ...

    jquery-mvc.rar_The Client_jquery mvc_jquery.Controller_jquerymvc

    It evolved out of my recent presentation, Building Single-Page Applications Using jQuery And ColdFusion, and will continue to evolve as I think more deeply about this type of application architecture...

    jquery-1.1.3 效率提高800%

    选择器速度提升 选择器的速度大幅度提高了,下表为jQuery1.1.2和1.1.3的选择器速度对比,提高了8倍多 Browser jQuery 1.1.2 jQuery 1.1.3 % Improvement IE 6 4890ms 661ms 740% Firefox 2 5629ms 567...

    jQuery插件---Fancybox

    How to use 1. Setup Include nessesary JS files (FancyBox uses pngFix to fix IE png transparency). --------------------------- /* required */ ...(see example on this page source) Comments

    jquery-starterkit

    jQuery Starterkit This page contains code to test the examples. Most of it is only relevant for a example.

    jQuery-ui Demo 官方UI插件

    最新官方jQuery UI插件 主流特效Demo,绝不含糊。 好东西不需要过多的言辞修饰,下了就知道! 所有效果说明: 基本的鼠标互动: 拖拽(drag and dropping)、排序(sorting)、选择(selecting)、缩放(resizing) 各种...

    jquery-u最新版下载

    We've included and linked to minified versions of jQuery, your personalized copy of jQuery UI (js/jquery-ui-1.8.6.custom.min.js), and css/ui-lightness/jquery-ui-1.8.6.custom.css which imports the ...

    jQuery- Novice to Ninja

    jQuery: Novice to Ninja will show you how to unleash the amazing power of jQuery. In this easy-to-follow guide, you'll master all the major tricks and techniques that jQuery offers-within hours.

    最新jquery-ui-1.11.2.custom压缩包

    最新官方jquery工具包,轻松实现模仿百度搜索栏智能提示效果!

    jquery-mytooltip插件鼠标悬停文字提示代码.zip

     <span class="code-info">- This default value      <div class="js-mytooltip type-inline-block style-block style-block-one"  data-mytooltip-custom-class="align-center"  data-...

    jquery-1.7.1-vsdoc.js jQuery JavaScript Library v1.7.1

    你懂的,支持 vs2010 jquery 1.7.1 智能提示 /* * This file has been generated to support Visual Studio IntelliSense. * You should not use this file at runtime inside the browser--it is only * intended ...

    浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法

    1.JQuery this和$(this)的区别 相信很多刚接触JQuery的人,很多都会对$(this)和this的区别模糊不清,那么这两者有什么区别呢? 首先来看看JQuery中的 $() 这个符号,实际上这个符号在JQuery中相当于JQuery(),即$...

    jquery-ui-1.8.11

    The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

    详谈jQuery中的this和$(this)

    网上有很多关于jQuery的this和$(this)的介绍,大多数只是理清了this和$(this)的指向,其实它是有应用场所的,不能一概而论在jQuery调用成员函数时,this就是指向dom对象。 $(this)指向jQuery对象是无可厚非的,但...

    jquery-1.6.1.min.js

    $(this).hide() 演示 jQuery 的 hide() 函数,隐藏当前的 HTML 元素。 $("p").hide() 演示 jQuery 的 hide() 函数,隐藏所有 <p> 元素。 $(".test").hide() 演示 jQuery 的 hide() 函数,隐藏所有 class="test" 的...

    yii2-jquery-mobile-widget:https

    xj\jquerymobile\ ThemeFullAsset :: register ( $ this );//Partxj\jquerymobile\ ScriptAsset :: register ( $ this );xj\jquerymobile\ StructureAsset :: register ( $ this ); //jquery.str

    jquery.form.min.js(4.2.2version,最新版本)

    * jQuery Form Plugin * version: 4.2.2 * Requires jQuery v1.7.2 or later * Project repository: https://github.com/jquery-form/form * Copyright 2017 Kevin Morris * Copyright 2006 M. Alsup * Dual ...

    jquery-validation-1.12.0.zip

    This jQuery plugin makes simple clientside form validation easy, whilst still offering plenty of customization options. It makes a good choice if you’re building something new from scratch, but also ...

Global site tag (gtag.js) - Google Analytics