以下是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({...})方式扩展的属性或方法。(见下一篇)
分享到:
相关推荐
通过阅读《读jq之三(优雅的迭代)》这篇博文,我们可以学习到jQuery中的迭代方法,了解它们如何提升我们的编程体验。 首先,我们关注jQuery的`.each()`方法。这是一个用于遍历数组或对象的迭代函数,它提供了简洁...
总之,jq图表插件是jQuery生态系统中的一个重要组成部分,它为开发者提供了一种高效、灵活的途径来创建动态和互动的图表,增强了网页的用户体验。无论是在企业级应用、数据报告还是个人项目中,jq图表插件都是数据...
Ajax(Asynchronous JavaScript and XML)和jQuery(JQ)结合的滚动加载页面技术,是现代网页开发中的一个重要实践,尤其在大数据量、高交互性的网站中广泛应用。这种技术通过监听用户的滚动行为,当页面接近底部时...
在JavaScript的世界里,jQuery(简称JQ)是一个广泛使用的库,极大地简化了DOM操作、事件处理、动画制作和Ajax交互。回调函数是JavaScript中的一个重要概念,它允许我们定义在特定事件发生后执行的代码块。在jQuery...
DOCTYPE>`声明、`<html>`元素、`<head>`部分和`<body>`部分组成。`<head>`标签内通常包含页面的元数据和脚本引用,而`<body>`部分则包含了页面上可见的内容,如标题、段落、图片、链接、列表、表格等。在创建HTML...
本篇文章将围绕“jq插件资源”这一主题,深入探讨jQuery插件的使用、分类及其在实际项目中的应用。 首先,jQuery插件的使用通常涉及到以下几个步骤: 1. **引入jQuery库**:在HTML文档中,我们需要先引入jQuery库...
一个简单的jQuery插件通常由一个函数组成,该函数接收jQuery对象作为参数,并通过链式调用返回自身,以便进一步调用其他方法。基础的jQuery插件模板如下: ```javascript (function($){ $.fn.myPlugin = function...
这些模板通常包含了CSS(Cascading Style Sheets)和JQ(jQuery),它们是Web开发中的两个关键组成部分。 CSS负责网页的样式和布局,通过定义颜色、字体、大小、间距等属性,使网页看起来美观且易于阅读。CSS可以...
可以使用JavaScript对象或数组来表示购物车,每个商品由其ID、数量和单价等属性组成。 4. **商品添加** 用户点击“加入购物车”按钮时,JavaScript会捕获这个事件,读取商品的相关信息(如ID、单价等),并将其...
8. **源代码结构**:从 "jq.cr-master" 文件名推测,项目可能包含以下组成部分:源代码文件(.cr 结尾)、配置文件(如 .gitignore、Gemfile)、测试文件(.spec 结尾)、README 文件、构建脚本(如 shard.yml、...
标题中的“JQ CSS 和 DOM”指的是JavaScript库jQuery(简称JQ)、层叠样式表(CSS)以及文档对象模型(DOM)这三种在Web开发中至关重要的技术。它们共同构成了前端开发的基础,使得开发者能够创建交互式、动态且美观...
Java后台开发是软件工程中的一个重要组成部分,它主要负责处理用户的请求、数据的存储和业务逻辑的实现。在“java后台jq.rar”这个压缩包中,我们可以推测它可能包含了与Java后台开发相关的代码示例或项目资料。下面...
【标签】中的"C#"是一种面向对象的编程语言,广泛应用于ASP.NET开发;"ASP.NET"是构建Web应用程序的平台,支持多种语言,如C#和VB.NET;"SQL"是结构化查询语言,用于管理和处理数据库;"DBA"(数据库管理员)是负责...
在JavaScript的世界里,jQuery(简称JQ)是一个广泛使用的库,它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。在这个主题中,我们关注的是如何将JQ中的数组转换为字符串。这个过程在很多场景下都是必要的...
JSON数据由键值对组成,形式类似于JavaScript对象,例如: ```json [ { "name": "张三", "age": 30, "city": "北京" }, { "name": "李四", "age": 25, "city": "上海" } ] ``` 这个JSON数组包含两个对象...
【3D图片翻页效果JQ源码】是一种利用JavaScript库jQuery实现的视觉特效,它为用户提供了模拟真实书籍翻页的三维立体效果。在网页设计中,这种效果可以增加用户体验,使数字内容呈现更加生动有趣。以下是关于这个主题...
jQuery是一个轻量级的JavaScript库,简化了DOM(文档对象模型)操作、事件处理、动画和Ajax交互。在"jQ图中带描述幻灯片"这个特效中,jQuery主要负责图片的切换逻辑,通过监听用户触发的事件(如点击按钮或自动定时...
HTML由一系列元素组成,这些元素通过标签来表示,如`<html>`、`<head>`、`<body>`、`<p>`、`<a>`等。HTML元素可以包含文本、图像、链接、表格、列表等,构成网页的基本结构。HTML5是当前的最新版本,引入了许多...
创建一个jQuery插件,通常以`$.fn.extend()`开始,将新的方法添加到jQuery对象的prototype上。例如: ```javascript $.fn.myCarousel = function(options) { // 插件代码 }; ``` 这样,我们就可以使用`$("#...
以下是这个系统的核心组成部分及其工作原理: 1. **jQuery的$.ajax()函数**: jQuery的$.ajax()是一个强大的异步HTTP(Ajax)请求函数,它使得前端与后端服务器间的数据交换变得更加简单。在这个场景中,$.ajax()...