在jQuery插件的范围里, this关键字代表了这个插件将要执行的jQuery对象, 但是在其他包含callback的jQuery函数中,this关键字代表了原生的DOM元素。这常常会导致开发者误将this关键字无谓的包在jQuery中。

可以看下面的例子:

<div class="content" style="background:#ff5000"> </div>
<div class="box">jojiojoi <div class="inner"></div> </div>

html代码结构如上,然后写一个非常简单的插件,用于输出最高的div的高度值。

js代码是这样的:

(function ($) {
$.fn.maxheight = function(){
//在插件范围内,this指的是jquery插件将要执行的对象。并不是原生的dom元素,
//因此,直接用this即可,不需要用$(this).
var max = 0;
console.log(this);//此处this指的是要遍历的jquery对象集合
this.each(function(){
console.log(this);//此处this指的是dom元素,即要遍历的每一个dom元素。
max = Math.max(max,$(this).height());//所以这里要使用$选取dom元素。
});
return max;
}
})(jQuery); var maxheight = $("div").maxheight();
console.log(maxheight);

执行的结果是这样的:

所以很清楚的可以看到,第一个this指的是jquery对象,而在会面的返回函数中,this指的是div元素,所以必须使用$将this包裹起来,选取dom元素,再进行操作。

jQuery插件中的this指的是什么的更多相关文章

  1. 详解jquery插件中;(function ( $, window, document, undefined )的作用

    在jquery插件中我们经常看到以下这段代码 1 2 3 ;(function ( $, window, document, undefined ){ //函数体内具体代码 })(jQuery, wi ...

  2. jquery插件中(function ( $, window, document, undefined )的作用

    在jquery插件中我们经常看到以下这段代码 ;(function ( $, window, document, undefined ){ //函数体内具体代码 })(jQuery, window,d ...

  3. 详解jquery插件中(function ( $, window, document, undefined )的作用。

    1.(function(window,undefined){})(window); Q:(function(window,undefined){})(window);中为什么要将window和unde ...

  4. jquery插件中使用ajax并且获取使用插件的对象

    jquery插件中使用ajax后无法在里面获取this 解决办法是在函数内使用ajax前声明变量 $this=this 然后再ajax中使用$this

  5. jquery插件中找到好玩插件 http://www.jq22.com/

    超实用的angular.js无刷新分页完整案例 http://www.jq22.com/jquery-info14714 js联动选择插件mobileSelect.js http://www.jq22 ...

  6. jquery插件分类与编写详细讲解

    jquery插件分类与编写详细讲解 1. 插件种类 插件其实就是对现有的方法(或者叫函数)做一个封装,方便重用提高开发效率.   jQeury主要有2种类型   1)实例对象方法插件 开发能让所有的j ...

  7. jQuery库中的变量$和其它类库的变量$冲突解决方案

    jQuery.noConflict();//把变量$给其它插件 /* 由于把jQuery插件中的变量$给了其它插件使用 那么在调用jQuery插件的时候只能使用jQuery 但是这样很不方便 1.其实 ...

  8. 解决jQuery插件重名问题

    jQuery第三方插件命名冲突: 1.以某种方法为自己创建的jQuery插件添加命名空间,以免名称冲突.比如:在自己的插件名之前添加某类名称前缀. 2.避免影响全局命名空间.将自己的所有函数调用和变量 ...

  9. jQuery插件综合应用(一)注册

    一.介绍 注册和登录是每个稍微有点规模的网站就应该有的功能.登陆功能与注册功能类似,也比注册功能要简单些.所以本文就以注册来说明jQuery插件的应用. jQuery插件的使用非常简单,如果只按照jQ ...

随机推荐

  1. PHP基础语法

             PHP:超级文本预处理器一,PHP的四对标记 <?php ?> <script language="php"> <script> ...

  2. 我们都是IT民工---------流浪人IDE开发札记

    你生命中的有些东西终究会失去,比如我住了6年的陈寨,这个聚集了郑州十几万IT民工的地方,说拆就拆了.再比如我玩了3年的坦克英雄,这个带给我太多快乐的游戏,说停就停了. 编程对我而言是种爱好,我上学6年 ...

  3. IO操作工具类

    package com.imooc.io; import java.io.BufferedInputStream; import java.io.BufferedOutputStream; impor ...

  4. js或css文件后面的参数是什么意思?

    经常看到不少导航网站测样式或js文件后面加了一些参数,主要是一你为一些并不经常更新的页面重新加载新修改的文件. 经常遇到页面里加载的js与css文件带有参数,比如: <script type=& ...

  5. lumia手机wp系统应用列表如何设置按照拼音

    1.安装应用多了就会这样·· 2.想用拼音排列,请把系统设置里的区域语言中的区域和格式改为中国,此时,屏幕壁纸上是"四月十五日". 3.想用笔画排列,请把系统设置里的区域语言中的区 ...

  6. oracle数据查询

    select * from XMBL_EM_DBBACK where f_djbh='DB01201612270013'select * from flow_task_list where biz_d ...

  7. 精通Web Analytics 2.0 (8) 第六章:使用定性数据解答”为什么“的谜团

    精通Web Analytics 2.0 : 用户中心科学与在线统计艺术 第六章:使用定性数据解答"为什么"的谜团 当我走进一家超市,我不希望员工会认出我或重新为我布置商店. 然而, ...

  8. ActiveMQ_Mqtt的TCP丢包

    现象 Mqtt Consumer应该收到的消息少于预期,登录ActiveMQ的管理页面里的Topics,查看Messages Enqueued发现同样少于理应接收的数量. 定位问题 怀疑是TCP丢包, ...

  9. Javascript两个感叹号的用法(!!)

    var foo; alert(!foo);//undefind情况下或者null,一个感叹号返回的是true; alert(!goo);//undefind情况下,一个感叹号返回的也是true; 但是 ...

  10. Zabbix Trapper items

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px STHeiti; color: #313131 } span.s1 { } 概述 Trappe ...