jquery中this的使用说明

原来js中的this这么好用


代码如下:

$(document).ready(function(){
　　var DragElement=null;
　　$("#zz").mousedown(function(){
　　DragElement=this;//这时this指的就是$("#zz")对象
　　$(document).mousemove(function(){
　　如果直接$(this).css("left")//由于是在mousemove内，这样this对象就不是$("#zz")，
　　这时可以用$(DragElement).css("left")//这样取的就是$("#zz")
})
})
})

$(this)生成的是什么

$()生成的是什么呢？实际上$()=jquery()，那么也就是说返回的是一个jquery的对象。
题外话：通常我们为了简便直接使用$(),实际上,该函数省略了一个参数context,即$(selector)=$(selector,document).如果指定context，可以指定context为一个dom元素集或者jquery对象。

那么依照，$()返回的是jquery对象这一结论，我们可以得出$(this)得到的是一个jquery对象.我们可以使用万能的alert()方法打印出一个对象：
alert($('#btn'));
显示的结果：

该图红色框勾选出来的是一个object，不用考虑，该object自然是jquery的对象咯。也即是说我们用通过$('#btn')来调用jquery的方法和属性等。

this代表什么？

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


代码如下:

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

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

根据我们的经验（因为$()生成的是jquery的对象嘛），this自然是一个jquery的对象咯。可是我们看看返回的结果：

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

结论：

this，表示当前的上下文对象是一个html对象，可以调用html对象所拥有的属性，方法
$(this),代表的上下文对象是一个jquery的上下文对象，可以调用jquery的方法和属性值。

赞 (0)

相关推荐

  • 详谈jQuery中的this和$(this)

    网上有很多关于jQuery的this和$(this)的介绍,大多数只是理清了this和$(this)的指向,其实它是有应用场所的,不能一概而论在jQuery调用成员函数时,this就是指向dom对象. $(this)指向jQuery对象是无可厚非的,但this就是指向dom对象,这个是因为jQuery做了特殊的处理. 在创建dom的jQuery对象时,jQuery不仅仅为dom创建一个jQuery对象,而且还将dom存储在所创建对象的数组中. 复制代码 代码如下: elem = document

  • 图解JavaScript中的this关键字

    图解JavaScript中的this关键字

    JavaScript 是一种脚本语言,支持函数式编程.闭包.基于原型的继承等高级功能.JavaScript一开始看起来感觉会很容易入门,但是随着使用的深入,你会发现JavaScript其实很难掌握,有些基本概念让人匪夷所思.其中JavaScript 中的 this 关键字,就是一个比较容易混乱的概念,在不同的场景下,this会化身不同的对象.有一种观点认为,只有正确掌握了 JavaScript 中的 this 关键字,才算是迈入了 JavaScript 这门语言的门槛.在主流的面向对象的语言中(

  • javascript与jquery中的this关键字用法实例分析

    本文实例分析了javascript与jquery中的this关键字用法.分享给大家供大家参考,具体如下: this 表示当前的对象,这个当前对象可以是表单,<p>等任何元素 1.javascript中this的用法: JS部分: <script type="text/javascript"> function chimg(obj){ obj.src="./images/2.jpg"; } </script> HTML部分: 复制代

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

    // this其实是一个Html 元素. // $this 只是个变量名,加$是为说明其是个jquery对象. // 而$(this)是个转换,将this表示的dom对象转为jquery对象,这样就可以使用jquery提供的方法操作. (function($){ $.fn.hilight = function(options){ debug(this); var defaults = { foreground: 'red', background: 'yellow' }; var opts =

  • 跟我学习javascript的this关键字

    本文仅就这一问题展开讨论,阅罢本文,读者若能正确回答 JavaScript 中的 What 's this 问题,作为作者,我就会觉得花费这么多功夫,撰写这样一篇文章是值得的. 我们要记住一句话:this永远指向函数运行时所在的对象!而不是函数被创建时所在的对象.也即:谁调用,指向谁.切记- 本文将分三种情况来分析this对象到底身处何方. 1.普通函数中的this 无论this身处何处,第一要务就是要找到函数运行时的位置. var name="全局"; function getNam

  • js中this用法实例详解

    本文实例讲述了js中this用法.分享给大家供大家参考.具体如下: 1. 指向window 全局变量 alert(this) //返回 [object Window] 全局函数 function sayHello(){ alert(this); } sayHello(); 2. 指向该对象(在全局里面this指向window,在某个对象里面this指向该对象,在闭包里面this指向window) var user="the Window"; var box={ user:'the bo

  • jquery中this的使用说明

    jquery中this的使用说明

    原来js中的this这么好用 复制代码 代码如下: $(document).ready(function(){ var DragElement=null; $("#zz").mousedown(function(){ DragElement=this;//这时this指的就是$("#zz")对象 $(document).mousemove(function(){ 如果直接$(this).css("left")//由于是在mousemove内,这样

  • JQuery中的$.getJSON 使用说明

    原型如下: jQuery.getJSON( url, [data], [callback] ) 跨域加载JSON数据. url: 发送请求的地址 data : (可选) 待发送key/value参数 callback: (可选) 载入成功时的回调函数 主要用于客户端获取服务器JSON数据.简单示例: 服务器脚本,返回JSON数据: $.getJSON.php $arr=array("name"=>"zhangsan", "age"=>

  • jQuery中parents()的使用说明

    举个例子: 复制代码 代码如下: <body> <div id="one"> <div id="two">hello</div> <div id="three"> <p> <a href="#">tonsh</a> </p> </div> </div> $("a").paren

  • jQuery中$.each使用详解

    通过它,你可以遍历对象.数组的属性值并进行处理. 使用说明 each函数根据参数的类型实现的效果不完全一致: 1.遍历对象(有附加参数) $.each(Object, function(p1, p2) { this; //这里的this指向每次遍历中Object的当前属性值 p1; p2; //访问附加参数 }, ['参数1', '参数2']); 2.遍历数组(有附件参数) $.each(Array, function(p1, p2){ this; //这里的this指向每次遍历中Array的当

  • jQuery中过滤器的基本用法示例

    jQuery中过滤器的基本用法示例

    本文实例讲述了jQuery中过滤器的基本用法.分享给大家供大家参考,具体如下: HTML正文: <input type="button" id="b1" value="偶数行红色"><br> <input type="button" id="b2" value="奇数行绿色"><br> <table border=1 width=&q

  • jQuery中extend函数简单用法示例

    jQuery中extend函数简单用法示例

    本文实例讲述了jQuery中extend函数简单用法.分享给大家供大家参考,具体如下: var result=$.extend({},item,item1); extend给对象添加新的属性:js插件经常使用来配置参数 {}:item和item1合并后的结果 item:默认属性 item1:新增属性,如果item1和item属性重合则会覆盖item1中的属性 <span id="Test"></span> var item={"name":&

  • JQuery中each()的使用方法说明

    JQuery中each()的使用方法说明

    each()函数是基本上所有的框架都提供了的一个工具类函数,通过它,你可以遍历对象.数组的属性值并进行处理.jQuery和jQuery对象都实 现了该方法,对于jQuery对象,只是把each方法简单的进行了委托:把jQuery对象作为第一个参数传递给jQuery的each方法.换句话 说:jQuery提供的each方法是对参数一提供的对象的中所有的子元素逐一进行方法调用.而jQuery对象提供的each方法则是对jQuery内 部的子元素进行逐个调用. each函数根据参数的类型实现的效果不完

  • jquery中如何获得服务器控件实现思路

    jquery中 复制代码 代码如下: $("#<%=StoreName.ClientID %>").focus(function() { $("#<%=Label5.ClientID %>").val("请输入真实的店铺名称"); $("#<%=Label5.ClientID %>").css("color", "#666"); }); html中 复

  • jquery中的ajax异步上传

    找了好久终于在网上找到了ajax异步上传文件的方法,不过网上大多数是php的 ,我改为struts2写的 大同小异,希望对学习java的人有一定的帮助.我上传的是音乐文件. ajaxfileupload.js这个js文件是主要文件,一定要导入. jsp页面 ,其中我还做了div的隐藏***************************** <%@ page language="java" import="java.util.*" pageEncoding=&

  • 解析prototype,JQuery中跳出each循环的方法

    复制代码 代码如下: function chk(){        var flag=true;        var msg='';        var tips={'username':'姓名','tel':'电话','company':'公司名称','loupan_name':'楼盘名','sdate':'团购时间','content_1':'团购内容'};        $$('.required').each(function(el){            if($F(el).bl

随机推荐