浅谈jQuery的对象构成1

前段时间在阅读javaScript基于原型的面向对象编程相关资料时,对一直在使用的jQuery产生了点疑问,便对其稍作了点研究。

在javascript编程中,生成对象的方式有两种,

第一种,对象字面量方式:

var foo = {

name : "紅一葉",

age : 18

};

第二种就是通过构造器方式创建对象:

function Foo(){

this.name = "紅一葉";

this.age = 18;

}

var foo = new Foo();

在上式中,foo便是由构造器Foo构造出来的对象(在javascript中,函数都可以作为构造器。于是有个不成文的约定,凡是要作为构造器使用的函数首字母大写)。

回到jQuery中,在jQuery中我们最为常用的对象生成方式$("#id"),很显然这种方式和上面两种都不像,让我们通过代码来看看jQuery到底做了什么封装和转换(以下代码取自于jQuery1.9.1);

window.jQuery = window.$ = jQuery;

jQuery = function( selector, context ) {
  return new jQuery.fn.init(
selector, context, rootjQuery );
 },

通过上面几行代码我们可以看出,jQuery和$是两个等价的全局变量,$("#id")便是调用了上面定义的函数,等价于jQuery("#id"),这个函数的返回值是new
jQuery.fn.init( selector, context, rootjQuery );

也就是说$("#id")其实是调用了init()构造器构造了一个对象并返回。

咱们再细看一下jQuery.fn.init();这个jquery.fn是个什么东东,已及init构造器到底有什么特殊的地方?来咱再上代码来看看

jQuery.fn = jQuery.prototype = {

init: function( selector, context, rootjQuery ) {

......

},

....

};

jQuery.fn.init.prototype = jQuery.fn;

由jQuery.fn =
jQuery.prototype这句可以看出fn是jQuery原型对象的一个引用,实际上fn也没有其他特别的含义,为防止给我们的思维造成混乱,可以把上面代码中的所有fn用jQuery的原型替代(即把所有的jQuery.fn替换成jQuery.prototype)。

至于init构造器有什么特殊的地方,上面我们看到,jQuery中把init的原型指向了jQuery.fn即指向了jQuery的原型,jQuery.prototype。这样做的好处在于,由init()构造器构造的对象就能够通过原型链访问到jQuery原型上的方法和属性。

对于这几个变量的关系,如果有疑问的话可以参照下面的两张图来帮助理解,第一张是我自己画的,第二张百度上借网友的,表示的都是一个意思,只是画的方式不同而已。

时间: 2024-10-03 22:04:18

浅谈jQuery的对象构成1的相关文章

浅谈 jQuery 事件源码定位问题

原文:浅谈 jQuery 事件源码定位问题 昨天群里有人问了个事件源码定位的问题,简单描述下是这样的. 在一个不是自己写的页面上,如何快速定位到他绑定的事件代码在哪?(页面用的是jQuery)这个问题,说难不难,说简单也没那么简单,万一用的是委托之类也会麻烦点. 在 chrome 的控制台里有个 Event Listeners,这里会显示你所选择元素的事件,如果是原生事件,他会直接显示,你点击一下事件就会跳到对应代码里了,可是 jQuery 绑定的事件却不是这样的,你点击后只会跳到 jQuery

浅谈jquery关于select框的取值和赋值

浅谈jquery关于select框的取值和赋值 jQuery("#select_id").change(function(){}); // 1.为Select添加事件,当选择其中一项时触发 var checkValue = jQuery("#select_id").val(); // 2.获取Select选中项的Value var checkText = jQuery("#select_id :selected").text(); // 3.获取

浅谈Java回收对象的标记和对象的二次标记过程_java - JAVA

文章来源:嗨学网 敏而好学论坛www.piaodoo.com 欢迎大家相互学习 一.对象的标记 1.什么是标记?怎么标记? 第一个问题相信大家都知道,标记就是对一些已死的对象打上记号,方便垃圾收集器的清理. 至于怎么标记,一般有两种方法:引用计数和可达性分析. 引用计数实现起来比较简单,就是给对象添加一个引用计数器,每当有一个地方引用它时就加1,引用失效时就减1,当计数器为0的时候就标记为可回收.这种判断效率很高,但是很多主流的虚拟机并没有采用这种方法,主要是因为它很难解决几个对象之间循环引用的

由莫名其妙的错误开始---浅谈jquery的dom节点创建

有一个字符串是这样的:var s = '<html lang="en" class="js no-touch discourse-no-touch">'+ '<head><meta name="csrf-token" content="Oul7WqVh4FBVse2yGeY8ZkqoN5/9/2ImxohJvUYEJYc="/></head><body></bo

浅谈jQuery的$(function(){})和(function($){}(jQuery))的区别

一:$(function(){}) $(function(){})是$(document).ready(function(){})的简写,或者$().ready(function(){}),会在DOM加载完成之后执行. 与onload的区别在于:ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件):而onload,指示页面包含图片等文件在内的所有元素都加载完成. 二:(function($){}(jQuery)) (function($){}(jQuery))是立即执行函数:相当于

浅谈jquery之on()绑定事件和off()解除绑定事件

off()函数用于移除元素上绑定的一个或多个事件的事件处理函数. off()函数主要用于解除由on()函数绑定的事件处理函数. 该函数属于jQuery对象(实例). 语法 jQuery 1.7 新增该函数.其主要有以下两种形式的用法: 用法一: jQueryObject.off( [ events [, selector ] [, handler ] ] ) 用法二: jQueryObject.off( eventsMap [, selector ] ) 参数 参数 描述 events 可选/S

浅谈jquery选择器

首先来说说jquery选择器的优势: 1.简洁的写法  2.支持css1.0到3.0选择器 3.完善的处理机制. 再来说说分类: jquery选择器分为基本选择器.层次选择器.属性选择器.基本过滤选择器.可见性过滤选择器. 基本选择器分为:标签选择器.类选择器.ID选择器.并集选择器.交集选择器.全局选择器. 常用的就两种:类选择器和ID选择器. 类选择器直接写给定的标签名就可以了,例如:$("h2").css("background","red"

浅谈jquery中prop()和attr()

我们都知道,一般在jquery中设置属性时要用到attr()方法,现在我们有一个效果,点击按钮切换复选框的选中状态,下面贴出html代码: <input type="checkbox" id="check"> <label>复选框</label> <input type="button" value="切换" id="btn"> js代码: <scrip

浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异

本文结合W3School的文档,分析了jQuery中 wrap() wrapAll() 与 wrapInner()的差异,并给出了图文对比教程,非常的简单实用,有需要的朋友可以参考下 今晚看书的时候发现jQuery有三个包裹节点的方法,百度了一下jQuery wrap() / wrapAll() / wrapInner(),果然搜索结果 W3School的文档说明是排第一的. 可是,W3School的解释是这样的: jQuery 文档操作 - wrap() 方法 wrap() 方法把每个被选元素