jQuery插件中的this指的是什么

在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元素,再进行操作。

时间: 2024-11-24 16:29:36

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

详解jquery插件中参数( $, window, document, undefined )的作用

示例代码如下: 1 ;(function($,window,document){ 2 //行内代码 3 })(jQuery,window,document); 1.代码最前面的分号,可以防止多个文件压缩合并时其他文件最后一行语句没加分号,而引起合并后的语法错误: 2.匿名函数(function(){})(); 由于Javascript执行表达式是从圆括号里面到外面,所以可以用圆括号强制执行声明的函数.避免函数体内和外部的变量冲突. 3.$:$是jquery的简写,很多方法和类库也使用$,这里$接

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

1. 插件种类 插件其实就是对现有的方法(或者叫函数)做一个封装,方便重用提高开发效率.   jQeury主要有2种类型   1)实例对象方法插件 开发能让所有的jquery实例对象都可以调用的方法.也就是说,只要通过$()工厂获得的jquery实例对象,都可以调用我们开发的方法.95%的插件都是这种类型   2)全局函数插件 可以将独立的函数添加到jQuery命名空间中了.那么调用的时候就可以使用 $.函数名称() 或者jQuery.函数名称()来调用了.可以理解为静态方法.   2. 添加全

jQuery插件分类、编写及实例

1.jQeury主要有2种类型 1)实例对象方法插件开发能让所有的jQuery实例对象都可以调用的方法.也就是说,只要通过$()工厂获得的jQuery实例对象,都可以调用我们开发的方法.95%的插件都是这种类型 2)全局函数插件可以将独立的函数添加到jQuery命名空间中了.那么调用的时候就可以使用 $.函数名称() 或者jQuery.函数名称()来调用了.可以理解为静态方法. 2. 添加全局函数我们可以将jQuery理解为类,$是这个类的别名.开发全局函数就是开发这个类的静态方法.如$.get

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

jQuery.noConflict();//把变量$给其它插件 /* 由于把jQuery插件中的变量$给了其它插件使用 那么在调用jQuery插件的时候只能使用jQuery 但是这样很不方便 1.其实可以按照jQuery的做法,再次把jQuery封装 其实就是闭包的使用 2.另一种方法是给jQuery变量另外取一个别名 var jq = jQuery.noConflict(); 3.第三种方法是,把jQuery移动到一个新的命名空间 和第二种方式差不多 var dom = {}; dom.que

JQuery插件:遮罩+数据加载中。。。(特点:遮你想遮,罩你想罩)

在很多项目中都会涉及到数据加载.数据加载有时可能会是2-3秒,为了给一个友好的提示,一般都会给一个[数据加载中...]的提示.今天就做了一个这样的提示框. 先去jQuery官网看看怎么写jQuery插件,然后就开始写了.写下来这么一个插件,稍作优化,就在项目中使用了.下面贴的是我写这个插件时的测试图: 这张图模拟数据加载前提示框的展示,这个表格是一个写在页面上的.蓝色的底纹就是遮罩层. (function($){ $.fn.extend({ /** * 打开遮罩,并显示一段文字. * @para

[译]怎样在Vue.js中使用jquery插件

原文:http://gambardella.info/2016/09/05/guide-how-to-use-vue-js-with-jquery-plugins 使用Vue真的太棒了,但是也有可能使你头疼,当你试图使它与jquery插件混用的时候. 问题的原因是jquery与Vue是完全不同的东西,Vue是通过组件与数据绑定来进行渲染的,jquery则主要是用来做简单的单击处理和强大的操纵DOM的能力. 我试图寻找一些东西来帮助自己解决这个问题,但是我发现一些组件所做的工作不是很让我满意,所以

解决HTML5中placeholder属性兼容性的JQuery插件

//调用方法 $(function () {   $(".pHolder").jason(); }); //HTML代码 <input type="text" class="pHolder" placeholder="请输入姓名" /> //jquery插件 ($.fn.jason = function(a) {    var b = {        focus: "black",      

AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法

AMD 模块 AMD(异步模块定义,Asynchronous Module Definition)格式总体的目标是为现在的开发者提供一个可用的模块化 JavaScript 的解决方案. AMD 模块格式本身是一个关于如何定义模块的提案,在这种定义下模块和依赖项都能够异步地进行加载.它有很多独特的优势,包括天生的异步及高度灵活等特性,这些特性能够解除常见的代码与模块标识间的那种紧密耦合.目前它已经被很多项目所接纳,包括jQuery(1.7). RequireJS RequireJS是一个工具库,主

SeaJS中jQuery插件模块化及其调用方式

转载自:http://my.oschina.net/briviowang/blog/208587#OSC_h3_1 jQuery插件本质上是将命名空间挂在全局的jQuery或jQuery.fn上而非使用define定义的模块. JQuery的这种扩展机制同模块化要求模块的独立性,以及模块互相隔离有点冲突. jQuery插件数目众多,我们不打算做大量的转换工作,为模块化而模块化,甚至改变插件的调用方式, 这样对开发带来的价值不大.只希望通过模块加载器实现自动的依赖管理,按需加载,并且使用方式自然.