`

jQuery对象包含的内容及两种扩展方式

 
阅读更多
jQuery对象包含的内容及两种扩展方式
标识符jQuery,我们可以理解其为一个function,
var jQuery = function( selector, context ) { 
        // The jQuery object is actually just the init constructor 'enhanced' 
        return new jQuery.fn.init( selector, context, rootjQuery ); 
    }

而jQuery的fn,我们理解其为prototype,因为jQuery.fn = jQuery.prototype =
{ 
    constructor: jQuery, 
    init: function(selector, context, rootjQuery){ 
    } 
} 


还要注意一句话jQuery.fn.init.prototype = jQuery.fn。该句把function jQuery的原型赋值给了function init的原型。
当调用$("#id")时返回的对象组成包括两个部分,由function init中this带的(如this.context);由function jQuery的prototype带的(如this.size/this.toArray);

jQuery对象由以下部分组成:
1,挂在jQuery.prototype.init中的this上的属性或方法。
2,挂在jQuery.prototype.init.prototype上的属性或方法。
3,因为把jQuery.prototype赋值给了jQuery.prototype.init.prototype,所以挂在jQuery.prototype上的属性和方法也是jQuery对象的一部分。
4,通过jQuery.fn.extend({...})方式扩展的属性或方法




jQuery.extend扩展和jQuery.fn.extend扩展的区别

首先注意到
jQuery.extend = jQuery.fn.extend = function() { 
     ... 
}; 
也就是这两种方式的源代码都是相同的,但是他们的主要区别在哪里呢?
if ( length === i ) { 
    target = this; 
    --i; 
} 

注意这一段代码,length代表extend中的参数个数,i初始化为1,如果extend中只有一个参数的话,那么this就赋值给target。
1如果是jQuery.extend 那么this就为function jQuery,也就是说给function jQuery添加了许多静态方法。些方法都可以直接通过jQuery.xx(或$.xx)方式来调用,而不是先执行(调用)jQuery方法再去调用xx,如$("#id").xx。

因此,jQuery中的isFunction, isArray, isWindow等都是静态方法,只能通过$.isFunction, $.isArray, $.Window引用。而不能通过$("...").isFuction, $("...").isArray, $("...").isWindow方式引用。



2.如果是jQuery.fn.extend那么this就为jQuery.protoype ,因为fn为prototype,也就是给jQuery.prototype上添加了许多属性,方法。当jQuery函数执行时,如$()或jQuery(),更多时候是$()。这时则把扩展的属性,方法都附加到new生成的对象上了。(注意prototype的属性就是等到new时,才会原型的所有属性立即赋予要创建的对象上)
因此扩展的属性或方法都添加到jQuery对象上了。如bind, one, unbind等可以通过$("...").bind, $("...").one, $("...").unbind方式调用。却不能通过 $.bind, $.one, $.unbind方式调用。
分享到:
评论

相关推荐

    jQuery源码分析-03构造jQuery对象

    这为jQuery对象提供了一种统一的构造方式,并且保证了每个jQuery对象都是基于同样的初始化逻辑创建的。 #### 三、jQuery对象的原型 接着,我们需要了解jQuery对象的原型结构。jQuery对象的原型包含了构造函数本身...

    4、jQuery原理,模拟实现jQuery扩展1

    五、调用 jQuery 的两种方式? 1. 高级的实现:通常我们使用 `$` 符号来调用 jQuery,例如 `$(document).ready(function() { ... })` 或者 `$(function() { ... })`,这两个都是在文档加载完成后执行代码的快捷方式...

    《锋利的jQuery》

    4. 转换方法分为两种:将jQuery对象转换为DOM对象,以及将DOM对象转换为jQuery对象。转换前者通常通过将jQuery对象数组中的第一个元素赋值给一个变量来实现,因为jQuery对象本身是一个类数组对象,其内部存储了DOM...

    第十四课 扩展jquery方法-011

    在前端开发中,jQuery 是一个广泛使用的库,它极大地简化了 JavaScript 对 DOM ...熟练掌握这两种扩展方式,能让你在处理前端任务时更加游刃有余。在实际开发中,不断学习和实践,持续进步,才能成为优秀的前端开发者。

    详解jQuery插件开发方式

    jQuery提供两种扩展方式: 1. 使用`$.extend(object)`方法扩展jQuery命名空间。这种方法添加的函数是全局的,可以通过`$`符号直接调用。例如,在代码中定义了一个`fun1`函数,然后通过`$.fun1()`即可执行。 2. ...

    读jQuery之二(两种扩展)

    在深入理解jQuery库的设计与实现中,extend方法扮演着至关重要的角色。在本文中,我们将详细解析...理解这两种扩展方式的区别,有助于更好地掌握jQuery库的设计,以及如何有效地利用其API来实现各种复杂的Web开发需求。

    jquery-2.1.4.zip

    2. **链式操作**:jQuery对象的方法返回的还是jQuery对象,这就允许我们连续调用多个方法,如`$('p').css('color', 'red').fadeIn(500)`,这行代码会将所有段落字体颜色设为红色,并逐渐显示出来。 3. **事件处理**...

    jQuery内容搜索筛选提示代码.zip

    "jQuery内容搜索筛选提示代码"正是针对这一需求,利用jQuery库实现的一种高效、便捷的搜索筛选机制。本文将深入解析这一代码的工作原理、实现方式及其在实际应用中的价值。 一、jQuery库的引入与基础 jQuery是一个...

    自己动手开发jQuery插件教程

    接下来是对象级别插件开发,这种方式更为常见,它允许我们对jQuery对象进行操作和扩展,使得每个匹配的jQuery对象都可以使用这些方法。对象级别的插件通常以`$.fn`为前缀,定义一个函数,这个函数会返回一个新的...

    jQuery常用功能大全

    要在这两种对象之间转换,可以使用jQuery的$()函数将DOM对象包装成jQuery对象,反之,也可以通过索引的方式从jQuery对象集合中取得对应的DOM对象。例如,通过$("#id")[0]可以获取到对应的DOM元素。 3. 如何获取...

    jquery常用方法总结

    在 jQuery 中,DOM 对象和 jQuery 对象是两种不同的对象类型,它们拥有各自独特的属性和方法。为了能够灵活地在两者之间切换,了解如何进行转换是非常重要的。 - **从 DOM 对象转换到 jQuery 对象**:可以使用 `$()...

    jQuery jQuery-UI

    - **plugins**:可能包含jQuery的扩展插件,用于增强其功能。 - **locale**:可能包含jQuery UI的多语言支持文件。 - **src**:可能是jQuery或jQuery UI的源码目录,对于深入学习和定制很有帮助。 - **themes**:...

    [精华]网站论坛源码C# Jquery,完全自制,有很多jquery自己写的插件

    此源码可以作为学习C# ASP.NET和Jquery结合开发的实例,帮助开发者了解如何在实际项目中整合这两种技术。通过阅读和分析这些源码,可以提升对于Web应用架构设计、数据库交互、前后端通信以及客户端脚本优化的理解。...

    jQuery权威指南-源代码

    《jQuery权威指南》除了理论知识丰富而全面外,它还有一个最大的特点就是注重实战,每个知识点都有一个完整的案例,包括需求分析、代码实现和结果展示三个部分,而且还包含两个综合性的案例,它的实践性之强是目前...

    锋利的jquery(学习笔记)

    你可以通过两种方式从jQuery对象获取DOM对象: 1. 使用索引操作符:`$cr[0]`。例如: ```javascript var $cr = $("#cr"); // jQuery对象 var cr = $cr[0]; // DOM对象 ``` 2. 使用`get()`方法:`$cr.get(0)`。...

    jquery笔记.docx

    本文将深入讲解jQuery的核心概念,包括入口函数的使用、jQuery对象与DOM对象的区别以及jQuery选择器的运用。 首先,我们关注jQuery的入口函数。在网页加载过程中,JavaScript的入口函数通常是在`window.onload`事件...

    jquery源码简单分析

    有两种主要的插件编写方式: 1. 直接挂在 `$` 下: 这种方式下,插件方法可以直接调用,无需创建 jQuery 对象。例如: ```javascript $.extend({ min: function(a, b) { return a ; }, max: function(a, b) {...

    jQuery API 中文版

    这份API包含了两种文件格式,可能是PDF和HTML,以适应不同用户的需求。无论你是初学者还是经验丰富的开发人员,jQuery API中文版都能成为你在JavaScript编程中的得力助手。 jQuery是一个轻量级、高性能的JavaScript...

    jquery-3.3.1.js和jquery.min-3.3.1.js

    - **链式操作**:jQuery对象返回的是自身,因此可以连续调用多个方法,如`$(selector).css('color', 'red').addClass('highlight')`。 - **插件生态**:jQuery拥有庞大的插件生态系统,能够扩展其功能,满足更多...

Global site tag (gtag.js) - Google Analytics