`
zhouyrt
  • 浏览: 1158726 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

读jq之一(jq对象的组成)

阅读更多

以下是jquery 1.3.2 代码片段

...
jQuery = window.jQuery = window.$ = function( selector, context ) {
	return new jQuery.fn.init( selector, context );
};
jQuery.fn=jQuery.prototype={
	init:function(){...},
        ...
}
jQuery.fn.init.prototype = jQuery.fn;
...

 

初看上去像是在用原型方式 定义一个类jQuery($),但实际我们使用时是函数调用$("#id"),却不是new $("#id")。

function jQuery中new了一个function init的实例,然后返回。见具名函数的调用方式(3) 。jquery写的实在诡异,它把init又挂在了function jQuery的prototype上,阅读起来有些绕人。

 

jQuery.fn.init.prototype = jQuery.fn; 是关键的一句。该句把function jQuery的原型赋值给了function init的原型。当调用$("#id")时返回的对象组成包括两个部分。

1,由function init中this带的(如length,context);

2,由function jQuery的prototype带的(如size,each,attr等方法);

 

模仿jQuery来写一个

function $(selector){
	return new $.prototype.init(selector);
}
$.prototype={
	init:function(selector){
		if(selector.nodeType==1){
			this[0] = selector;
		}else{
			this[0]=document.getElementById(selector);
		}
                this.length=1;
	},
	attr:function(name,value){
		this[0].setAttribute(name,value);
		return this;//链式调用
	},
	hide:function(){
		var self=this;
		setTimeout(function(){
			self[0].style.display="none";
		},3000);
		return this;//链式调用
	}
}
$.prototype.init.prototype=$.prototype;

 

简单起见,这里$只传html element或元素id,this上挂了length属性,赋值为1。当我们如下调用时

var obj = $();
console.dir(obj);

这行代码实际没有什么意义,只是为了测试调用后obj的组成。firebug控制台输出如下:

length:0;

init:function

attr:function

hide:function

 

即obj对象是由function init中this及function $.prototype组成的。

 

测试下$.prototype上的方法(假设页面body添加了id=content):

$("content").attr("bgcolor","red").hide();

 

先调用attr添加了id=content属性,稍候就隐藏了。

 

总结下:

jquery对象指的是jQuery.prototype.init的实例,简单的说就是new jQuery.prototype.init。

这里jQuery.prototype.init的类型是function,可以看成是一个类。源码中如下:

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

 

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({...})方式扩展的属性或方法。(见下一篇)

 

分享到:
评论
1 楼 LovingBaby 2016-03-10  
说的很清楚!jQuery作者为了实现简洁调用的苦心!高超的编程技巧!

相关推荐

    读jq之三(优雅的迭代)

    通过阅读《读jq之三(优雅的迭代)》这篇博文,我们可以学习到jQuery中的迭代方法,了解它们如何提升我们的编程体验。 首先,我们关注jQuery的`.each()`方法。这是一个用于遍历数组或对象的迭代函数,它提供了简洁...

    jq图表插件

    总之,jq图表插件是jQuery生态系统中的一个重要组成部分,它为开发者提供了一种高效、灵活的途径来创建动态和互动的图表,增强了网页的用户体验。无论是在企业级应用、数据报告还是个人项目中,jq图表插件都是数据...

    Ajax JQ 滚动加载页面

    Ajax(Asynchronous JavaScript and XML)和jQuery(JQ)结合的滚动加载页面技术,是现代网页开发中的一个重要实践,尤其在大数据量、高交互性的网站中广泛应用。这种技术通过监听用户的滚动行为,当页面接近底部时...

    JQ Callback 回调函数

    在JavaScript的世界里,jQuery(简称JQ)是一个广泛使用的库,极大地简化了DOM操作、事件处理、动画制作和Ajax交互。回调函数是JavaScript中的一个重要概念,它允许我们定义在特定事件发生后执行的代码块。在jQuery...

    html\css\js\jq

    DOCTYPE>`声明、`<html>`元素、`<head>`部分和`<body>`部分组成。`<head>`标签内通常包含页面的元数据和脚本引用,而`<body>`部分则包含了页面上可见的内容,如标题、段落、图片、链接、列表、表格等。在创建HTML...

    jq插件资源

    本篇文章将围绕“jq插件资源”这一主题,深入探讨jQuery插件的使用、分类及其在实际项目中的应用。 首先,jQuery插件的使用通常涉及到以下几个步骤: 1. **引入jQuery库**:在HTML文档中,我们需要先引入jQuery库...

    如何编写jquery组件(jq插件).zip

    一个简单的jQuery插件通常由一个函数组成,该函数接收jQuery对象作为参数,并通过链式调用返回自身,以便进一步调用其他方法。基础的jQuery插件模板如下: ```javascript (function($){ $.fn.myPlugin = function...

    各种HTML模板,包含CSS、JQ文件

    这些模板通常包含了CSS(Cascading Style Sheets)和JQ(jQuery),它们是Web开发中的两个关键组成部分。 CSS负责网页的样式和布局,通过定义颜色、字体、大小、间距等属性,使网页看起来美观且易于阅读。CSS可以...

    基于js与jq实现淘宝加入购物车的特效和计算购物车的总金额

    可以使用JavaScript对象或数组来表示购物车,每个商品由其ID、数量和单价等属性组成。 4. **商品添加** 用户点击“加入购物车”按钮时,JavaScript会捕获这个事件,读取商品的相关信息(如ID、单价等),并将其...

    jq.cr:稀薄的JSON :: Any wrapper可以模拟jq for crystal

    8. **源代码结构**:从 "jq.cr-master" 文件名推测,项目可能包含以下组成部分:源代码文件(.cr 结尾)、配置文件(如 .gitignore、Gemfile)、测试文件(.spec 结尾)、README 文件、构建脚本(如 shard.yml、...

    JQ CSS 和 DOM

    标题中的“JQ CSS 和 DOM”指的是JavaScript库jQuery(简称JQ)、层叠样式表(CSS)以及文档对象模型(DOM)这三种在Web开发中至关重要的技术。它们共同构成了前端开发的基础,使得开发者能够创建交互式、动态且美观...

    java后台jq.rar

    Java后台开发是软件工程中的一个重要组成部分,它主要负责处理用户的请求、数据的存储和业务逻辑的实现。在“java后台jq.rar”这个压缩包中,我们可以推测它可能包含了与Java后台开发相关的代码示例或项目资料。下面...

    jq无刷新分页实例源码

    【标签】中的"C#"是一种面向对象的编程语言,广泛应用于ASP.NET开发;"ASP.NET"是构建Web应用程序的平台,支持多种语言,如C#和VB.NET;"SQL"是结构化查询语言,用于管理和处理数据库;"DBA"(数据库管理员)是负责...

    JQ 数组转成为字符串.rar

    在JavaScript的世界里,jQuery(简称JQ)是一个广泛使用的库,它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。在这个主题中,我们关注的是如何将JQ中的数组转换为字符串。这个过程在很多场景下都是必要的...

    JQ json动态生成table

    JSON数据由键值对组成,形式类似于JavaScript对象,例如: ```json [ { "name": "张三", "age": 30, "city": "北京" }, { "name": "李四", "age": 25, "city": "上海" } ] ``` 这个JSON数组包含两个对象...

    3D图片翻页效果JQ源码

    【3D图片翻页效果JQ源码】是一种利用JavaScript库jQuery实现的视觉特效,它为用户提供了模拟真实书籍翻页的三维立体效果。在网页设计中,这种效果可以增加用户体验,使数字内容呈现更加生动有趣。以下是关于这个主题...

    jQ图中带描述幻灯片 jQuery图中带描述幻灯片网页特效.zip

    jQuery是一个轻量级的JavaScript库,简化了DOM(文档对象模型)操作、事件处理、动画和Ajax交互。在"jQ图中带描述幻灯片"这个特效中,jQuery主要负责图片的切换逻辑,通过监听用户触发的事件(如点击按钮或自动定时...

    js、jq、网页制作、css帮助文档

    HTML由一系列元素组成,这些元素通过标签来表示,如`<html>`、`<head>`、`<body>`、`<p>`、`<a>`等。HTML元素可以包含文本、图像、链接、表格、列表等,构成网页的基本结构。HTML5是当前的最新版本,引入了许多...

    自己封装的jquery插件@实现了简单的轮播图

    创建一个jQuery插件,通常以`$.fn.extend()`开始,将新的方法添加到jQuery对象的prototype上。例如: ```javascript $.fn.myCarousel = function(options) { // 插件代码 }; ``` 这样,我们就可以使用`$("#...

    jq.ajax+php+mysql数据库实现用户无刷新评论

    以下是这个系统的核心组成部分及其工作原理: 1. **jQuery的$.ajax()函数**: jQuery的$.ajax()是一个强大的异步HTTP(Ajax)请求函数,它使得前端与后端服务器间的数据交换变得更加简单。在这个场景中,$.ajax()...

Global site tag (gtag.js) - Google Analytics