`

转:Jquery中的this与$(this)

    博客分类:
阅读更多
转载地址:http://www.cnblogs.com/iceWolf/archive/2009/08/27/1555138.html
序言:在使用jquery操作js时,经常整不明白this与$(this)。抽空仔细测试了一把,记录下来以供在忘记的时候拉出来参考参考!

$(this)生成的是什么

$()生成的是什么呢?实际上$()=jquery(),那么也就是说返回的是一个jquery的对象。

题外话:通常我们为了简便直接使用$(),实际上,该函数省略了一个参数context,即$(selector)=$(selector,document).如果指定context,可以指定context为一个dom元素集或者jquery对象。

那么依照,$()返回的是jquery对象这一结论,我们可以得出$(this)得到的是一个jquery对象.我们可以使用万能的alert()方法打印出一个对象:
alert($('#btn'));显示的结果:
test 该图红色框勾选出来的是一个object,不用考虑,该object自然是jquery的对象咯。也即是说我们用通过$('#btn')来调用jquery的方法和属性等。

 this代表什么?

this,编程的人都知道this表示上下文所处的这个对象,这个自然是不错的,可是这个对象到底是个什么对象呢?加入js里面也有getType的话返回的值会是什么呢?其实js里面不需要使用getType,因为我们有万能的alert.请看看下面的代码:

$('#btn').bind("click",function(){

alert(this);
alert($(this));

});

根据我们的经验(因为$()生成的是jquery的对象嘛),this自然是一个jquery的对象咯。可是我们看看返回的结果:
test1返回的是什么?【object HTMLInputElement】——伟大的html对象,嘿嘿。所以我们通常在直接使用this.val()或者直接通过this来调用jquery所特有的方法或属性的时候会报错误:mistake  为什么呢?明知故问!html对象当然“不包含属性或方法”了。那么为什么在一个jquery对象的上下文中调用this返回的是一个html对象而不是 jquery对象 呢?翻遍jquery的api文档,貌似jquery中并未对this这一关键字进行过特殊“处理”,也就是说这里this是js中的,而不是 jquery重新定义了的。so...当然这仅仅是我自己的想法,如果有对此更了解的朋友可以留言更正。而我们再看一下以上代码中 alert($(this));的返回,自然是jquery的对象了,在此调用jquery特有的方法和属性,完全没有问题。
结论:
this,表示当前的上下文对象是一个html对象,可以调用html对象所拥有的属性,方法
$(this),代表的上下文对象是一个jquery的上下文对象,可以调用jquery的方法和属性值。
分享到:
评论

相关推荐

    js原生态函数中使用jQuery中的 $(this)无效的解决方法.docx

    js原生态函数中使用jQuery中的$(this)无效的解决方法 在JavaScript开发中,使用jQuery的$(this)在原生态函数中可能会出现无效的问题,本文将对此进行详细的分析和解决方法的介绍。 一、问题描述 在JavaScript开发...

    实例讲解JQuery中this和$(this)区别

    主要介绍了实例讲解JQuery中this和$(this)的区别,this表示当前的上下文对象是一个html对象,可以调用html对象所拥有的属性和方法,$(this),代表的上下文对象是一个jquery的上下文对象,可以调用jquery的方法和属性值,...

    详谈jQuery中的this和$(this)

    在JavaScript和jQuery的世界里,`this` 和 `$(this)` 是两个经常被提及的关键概念,它们在处理DOM操作和事件处理中扮演着重要的角色。理解它们的区别和应用场景对于编写高效、简洁的jQuery代码至关重要。 首先,`...

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

    首先来看看JQuery中的 $() 这个符号,实际上这个符号在JQuery中相当于JQuery(),即$(this)=jquery();也就是说,这样可以返回一个jquery对象。那么,当你在网页中alert($(‘#id’));时,会弹出一个[object...

    jQuery中$this和$(this)的区别介绍(一看就懂)

    下面我将用简洁的语言详细讲解jQuery中$this和$(this)的区别,并通过一个具体的例子来加深理解。 首先,我们需要明确this关键字在JavaScript和jQuery中的含义。在JavaScript中,this关键字指的是当前函数的上下文...

    练习2:使用jQuery美化英雄联盟简介页.zip

    在本实践项目中,我们将深入探讨如何利用jQuery这一强大的JavaScript库来美化英雄联盟的简介页面。jQuery是一个轻量级、高性能的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。通过学习这个...

    [转]Jquery操作select 收藏

    这篇博客 "[转]Jquery操作select 收藏" 可能是博主分享的一个关于如何使用jQuery高效地操作HTML中的元素的教程。在网页设计中,select元素常用于创建下拉菜单,让用户从预设的选项中选择一个或多个值。 首先,我们...

    JQuery学习手册

    15. **缓存jQuery对象**:多次使用的jQuery对象应存储在变量中,避免重复查询DOM。例如: ```javascript var $element = $('#myElement'); $element.css('color', 'red'); $element.hide(); ``` 这本“史上最...

    jQuery模拟JS警告、确认、提示弹出对话框

    在jQuery中,我们可以利用`$.fn.dialog`插件(如jQuery UI)或者自定义的CSS和JavaScript来创建自定义警告对话框。例如: ```javascript $(function() { $('#myAlert').dialog({ modal: true, buttons: { "确定...

    15天学会jQuery.doc

    **Who(谁在使用)**: 无论是初学者还是经验丰富的开发者,都可以从jQuery中受益。由于其简单易学且功能强大,因此在Web开发领域被广泛采用。 #### Day 2: 很容易的制作双色表格 在网页设计中,双色表格可以提高...

    jquery 对checkbox的操作

    综上所述,jQuery为开发者提供了便利的API来处理checkbox,使得在网页中实现与用户交互变得更加简单和直观。无论是单个checkbox的控制还是批量操作,jQuery都能轻松应对。通过熟练掌握这些技巧,开发者可以创建更加...

    jquery 常用方法

    5. **遍历与修改元素属性:** 使用`.each()`方法可以遍历jQuery对象集合,对每个元素进行操作,如设置或获取属性: ```javascript $('input[type="radio"]').each(function() { if ($(this).val() === 'option1')...

    jquery插件开发文档

    // 在回调函数中使用 this,它指向调用插件的jQuery对象 this.fadeIn('normal', function() { // 这里的this是代表一个DOM元素 }); }; ``` 4. 插件的返回值 为了保持jQuery链式调用的特性,插件应该返回`this`...

    j2ee23:jquery:使用jquery技术实现奇数行偶数行换色

    在IT行业中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。本文将深入探讨如何使用jQuery技术实现表格中奇数行和偶数行的换色效果,以提高数据可读性。这个功能...

    jquery旋转插件

    需要先引用基础jquery类库 然后在引用这个 最后 //演示1 //旋转45angle $(document.body).click(function () { //方式1 $('.divOne').rotate(45); //方式2 $('.divOne').rotate({ angle: 45 }); }); ? ...

    jquery ui中的dialog

    **jQuery UI中的Dialog组件** jQuery UI是一个功能丰富的JavaScript库,它提供了许多用户界面元素,如对话框(Dialog)、拖放(Draggable)、可排序(Sortable)等。在这些元素中,Dialog是创建弹出式窗口或模拟...

    jQuery中文转换成拼音代码.zip

    在“jQuery中文转换成拼音代码.zip”这个压缩包中,我们可以找到一个实现将中文转化为拼音的jQuery插件。下面将详细阐述jQuery的基础知识,以及中文转拼音的相关技术。 首先,jQuery库的核心特性包括选择器...

    better-dollar:jQuery 的`$()` 函数的智能包装器

    Better-Dollar Smart wrapper for jQuery's $() function. 这个项目是怎么来的? 我们都知道,jQuery 的 $() 函数可以获取 DOM 元素并将其包装为... $(this).toggleClass('open') }) 每次点击 #switch 元素时,都会生

Global site tag (gtag.js) - Google Analytics