在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. HTML 学习笔记 (canvas 基础)

    1.什么是Canvas canvas就是一个画布,可以进行画任何的线,图形,填充等一系列操作.这一切都是用Js操作的,另外Canvas不仅仅提供简单的二维矢量绘图,也提供了三维的绘图,以及图片处理等一 ...

  2. css样式之background详解(格子效果)

    background用法详解: 1.background-color 属性设置元素的背景颜色 可能的值 color_name            规定颜色值为颜色名称的背景颜色(比如 red) he ...

  3. .NET跨平台之旅:将示例站点升级至ASP.NET Core 1.0

    北京时间6月28日凌晨,微软发布了 .NET Core 1.0,详见新闻 .NET Core 1.0 正式发布了 ,ASP.NET Core 1.0 也随之一起发布了. 紧跟这次发布,我们将跑在 Li ...

  4. Todo list and 学习心得

    1. 理论实践要区分起来学习,结合起来运用. 2. 内事不决问百度外事不决问谷歌 3. 一个人走的快,一群人走得远或者更快 2016-09-01 23:27:58  九月目标:对程序从编译到执行的整个 ...

  5. archlinux安裝手记(Win10+Arch、GPT+UEFI、lvm)

    准备工具和设置制作启动盘连接网络硬盘分区规划分区LVM方案创建文件系统分区挂载激活lvm2钩子基础安装和配置配置镜像源基础系统安装fstab进入系统initramfs引导程序网络搭建使用环境用户管理用 ...

  6. python学习之路 第一天

    1.Python 3 安装. 2.Python 开发工具 PyCharm安装. 3.print("hello world!")  #打印hello world!  注:Python ...

  7. 实现css两端对齐

    如何实现css的两端对齐功能? 最近做项目遇到这种情况,如图所示: input左边框的用户,旧密码,新密码,确认密码无法对齐,样式很丑. 解决办法: 找到对应的类名,加上:text-align:jus ...

  8. Service实时向Activity传递数据案例

    转自 http://www.cnblogs.com/linjiqin/p/3147764.html 演示一个案例,需求如下:在Service组件中创建一个线程,该线程用来生产数值,每隔1秒数值自动加1 ...

  9. jQuery遍历checkbox

    $("input[type='checkbox']").each(function(){ var value = $(this).val(); //获得值 $(this).attr ...

  10. Python的多线程(threading)与多进程(multiprocessing )

    进程:程序的一次执行(程序载入内存,系统分配资源运行).每个进程有自己的内存空间,数据栈等,进程之间可以进行通讯,但是不能共享信息. 线程:所有的线程运行在同一个进程中,共享相同的运行环境.每个独立的 ...