- 浏览: 89099 次
文章分类
最新评论
jQuery对象包含的内容及两种扩展方式
标识符jQuery,我们可以理解其为一个function,
而jQuery的fn,我们理解其为prototype,因为jQuery.fn = jQuery.prototype =
还要注意一句话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扩展的区别
首先注意到
注意这一段代码,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,我们可以理解其为一个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方式调用。
发表评论
-
JavaScript高效图形编程学习笔记
2013-04-05 15:25 837第一章代码重用和优化 一、有关继承的一些笔记 1.在JS中,类 ... -
理解JS call apply
2012-11-06 14:35 893call([thisObj[,arg1[, arg2[, [, ... -
浅析JS全局变量与局部变量 执行环境 作用域链 JS解释器执行过程
2012-11-05 16:04 1458参考http://hi.baidu.com/cjry_ ... -
javascript encodeURI和encodeURIComponent的比较
2012-10-30 16:38 888encodeURI 和 encodeURIComponent都 ... -
JS跨域的理解
2012-10-30 15:08 922首先我们要理解什么是JS跨域的由来! 我是这样理解的,因为HT ... -
jquery.history简单理解
2012-10-30 14:34 1842jquery.history的简单理解 原理是利用形如 ma ... -
js事件捕获和事件冒泡
2012-10-28 10:48 973] Netscape 定义了事件捕获,先是最顶级的元素(doc ... -
早绑定和晚绑定
2012-10-17 11:13 1036引用早绑定(early binding)是指在实例化对象之前定 ... -
AJAX和JSON的一些理解
2012-09-22 20:09 758正在学习JSON和AJAX,记录下自己的理解 AJAX 什么是 ... -
关于火狐浏览器页面无法获得焦点的学习笔记
2012-07-17 19:13 1067发现类似:window.setTimeout(function ... -
JS应用对于IE和Firefox的区别
2012-07-17 18:51 01.FireFox没有window.event而且没有srcE ... -
javascript中arguments、callee、caller用法学习笔记
2012-07-16 10:22 1028首先是caller和callee的区别。注意caller和ca ... -
【转】event对象、srcElement、offsetX 在 firefox中的解决方案
2012-07-16 09:13 1114问题一:在IE中event作为 ...
相关推荐
这为jQuery对象提供了一种统一的构造方式,并且保证了每个jQuery对象都是基于同样的初始化逻辑创建的。 #### 三、jQuery对象的原型 接着,我们需要了解jQuery对象的原型结构。jQuery对象的原型包含了构造函数本身...
五、调用 jQuery 的两种方式? 1. 高级的实现:通常我们使用 `$` 符号来调用 jQuery,例如 `$(document).ready(function() { ... })` 或者 `$(function() { ... })`,这两个都是在文档加载完成后执行代码的快捷方式...
4. 转换方法分为两种:将jQuery对象转换为DOM对象,以及将DOM对象转换为jQuery对象。转换前者通常通过将jQuery对象数组中的第一个元素赋值给一个变量来实现,因为jQuery对象本身是一个类数组对象,其内部存储了DOM...
在前端开发中,jQuery 是一个广泛使用的库,它极大地简化了 JavaScript 对 DOM ...熟练掌握这两种扩展方式,能让你在处理前端任务时更加游刃有余。在实际开发中,不断学习和实践,持续进步,才能成为优秀的前端开发者。
jQuery提供两种扩展方式: 1. 使用`$.extend(object)`方法扩展jQuery命名空间。这种方法添加的函数是全局的,可以通过`$`符号直接调用。例如,在代码中定义了一个`fun1`函数,然后通过`$.fun1()`即可执行。 2. ...
在深入理解jQuery库的设计与实现中,extend方法扮演着至关重要的角色。在本文中,我们将详细解析...理解这两种扩展方式的区别,有助于更好地掌握jQuery库的设计,以及如何有效地利用其API来实现各种复杂的Web开发需求。
2. **链式操作**:jQuery对象的方法返回的还是jQuery对象,这就允许我们连续调用多个方法,如`$('p').css('color', 'red').fadeIn(500)`,这行代码会将所有段落字体颜色设为红色,并逐渐显示出来。 3. **事件处理**...
"jQuery内容搜索筛选提示代码"正是针对这一需求,利用jQuery库实现的一种高效、便捷的搜索筛选机制。本文将深入解析这一代码的工作原理、实现方式及其在实际应用中的价值。 一、jQuery库的引入与基础 jQuery是一个...
接下来是对象级别插件开发,这种方式更为常见,它允许我们对jQuery对象进行操作和扩展,使得每个匹配的jQuery对象都可以使用这些方法。对象级别的插件通常以`$.fn`为前缀,定义一个函数,这个函数会返回一个新的...
要在这两种对象之间转换,可以使用jQuery的$()函数将DOM对象包装成jQuery对象,反之,也可以通过索引的方式从jQuery对象集合中取得对应的DOM对象。例如,通过$("#id")[0]可以获取到对应的DOM元素。 3. 如何获取...
在 jQuery 中,DOM 对象和 jQuery 对象是两种不同的对象类型,它们拥有各自独特的属性和方法。为了能够灵活地在两者之间切换,了解如何进行转换是非常重要的。 - **从 DOM 对象转换到 jQuery 对象**:可以使用 `$()...
- **plugins**:可能包含jQuery的扩展插件,用于增强其功能。 - **locale**:可能包含jQuery UI的多语言支持文件。 - **src**:可能是jQuery或jQuery UI的源码目录,对于深入学习和定制很有帮助。 - **themes**:...
此源码可以作为学习C# ASP.NET和Jquery结合开发的实例,帮助开发者了解如何在实际项目中整合这两种技术。通过阅读和分析这些源码,可以提升对于Web应用架构设计、数据库交互、前后端通信以及客户端脚本优化的理解。...
《jQuery权威指南》除了理论知识丰富而全面外,它还有一个最大的特点就是注重实战,每个知识点都有一个完整的案例,包括需求分析、代码实现和结果展示三个部分,而且还包含两个综合性的案例,它的实践性之强是目前...
你可以通过两种方式从jQuery对象获取DOM对象: 1. 使用索引操作符:`$cr[0]`。例如: ```javascript var $cr = $("#cr"); // jQuery对象 var cr = $cr[0]; // DOM对象 ``` 2. 使用`get()`方法:`$cr.get(0)`。...
本文将深入讲解jQuery的核心概念,包括入口函数的使用、jQuery对象与DOM对象的区别以及jQuery选择器的运用。 首先,我们关注jQuery的入口函数。在网页加载过程中,JavaScript的入口函数通常是在`window.onload`事件...
有两种主要的插件编写方式: 1. 直接挂在 `$` 下: 这种方式下,插件方法可以直接调用,无需创建 jQuery 对象。例如: ```javascript $.extend({ min: function(a, b) { return a ; }, max: function(a, b) {...
这份API包含了两种文件格式,可能是PDF和HTML,以适应不同用户的需求。无论你是初学者还是经验丰富的开发人员,jQuery API中文版都能成为你在JavaScript编程中的得力助手。 jQuery是一个轻量级、高性能的JavaScript...
- **链式操作**:jQuery对象返回的是自身,因此可以连续调用多个方法,如`$(selector).css('color', 'red').addClass('highlight')`。 - **插件生态**:jQuery拥有庞大的插件生态系统,能够扩展其功能,满足更多...