读jQuery之一(对象的组成)_jquery

对于jQuery的写法甚是困惑,尤其在使用Prototype的$后,一度不能理解jQuery的$。对于现在前端同学来说,可能第一个接触的就是jQuery了,他们会觉得很习惯,很自然。

至今电脑里还存放着当时的API文档,发个图感叹下

在这段时间内,我的入门老师是墨墨,其实至今他仍然是我敬仰的同事之一。他的编程造诣很高,相信早已突破了编程语言的限制。在大家都在使用Prototype.js的时候,在jQuery尚未在国内流行的时候,他就已经把jQuery引入到项目中了。

言归正传吧,目前的jQuery版本已经到了1.6.1。从当时的2000行左右膨胀到了9000行。相信不久就会突破1w行。对于一些简单网页来说引入一个jQuery已经不再那么轻量了。这里的研读的是1.6.1这个版本,我会边读边写,最后会写出一个1000行左右的“迷你jQuery”。

以下是jQuery 1.6.1 代码片段

复制代码 代码如下:

var jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context, rootjQuery );
},
...
class2type = {};

jQuery.fn = jQuery.prototype = {
constructor: jQuery,
init: function(selector, context, rootjQuery){
}
}

// Give the init function the jQuery prototype for later instantiation
jQuery.fn.init.prototype = jQuery.fn;

初看上去像是在用 原型方式 在写一个类jQuery(别名$),但实际我们使用时是函数调用$("#id"),却不是new $("#id")。
标识符 jQuery是一个function,其内new了一个function init的实例,然后返回。至此我们知道其真正的构造器是jQuery.fn.init。jQuery写的实在诡异,它把init又挂在了jQuery的prototype上,阅读起来有些绕人。

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

模仿jQuery写一个

复制代码 代码如下:

// zchain-0.1.js
function $(selector){
return new $.prototype.init(selector);
}
$.prototype={
init:function(selector){
if(selector === undefined){
this.length = 0;
return this;
}
if(selector.nodeType==1){
this[0] = selector;
}else{
this[0]=document.getElementById(selector);
}
this.length=1;
},
css:function(name,value){
this[0].style[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(后续会增强,但不实现全部css selector),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上的方法,我只添加了css和hide方法,这两个方法的实现也是极其简陋的。

复制代码 代码如下:

<script src="http://files.cnblogs.com/snandy/zchain-0.1.js"></script>
<div id='content'>3 seconds later I will hide.</div>
<script type="text/javascript">
$("content").css("color","red").hide();
</script>

先调用css设置了字体颜色为红色,3秒后隐藏了。
总结下:
jQuery对象指的是jQuery.prototype.init的实例,简单的说就是new jQuery.prototype.init。这里jQuery.prototype.init的类型是function,可以看成是一个类。

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({...})方式扩展的属性或方法(后续提到)。
/201106/yuanma/zchain.rar

时间: 2024-10-21 21:48:20

读jQuery之一(对象的组成)_jquery的相关文章

jquery 事件对象属性小结_jquery

使用事件自然少不了事件对象.  因为不同浏览器之间事件对象的获取, 以及事件对象的属性都有差异, 导致我们很难跨浏览器使用事件对象. jQuery中统一了事件对象,  当绑定事件处理函数时,  会将jQuery格式化后的事件对象作为唯一参数传入: $("#testDiv").bind("click", function(event) { }); 关于event对象的详细说明, 可以参考jQuery官方文档: http://docs.jquery.com/Events

jquery分页对象使用示例_jquery

使用方法和相关参数如下: displayId//默认值显示区域Id为pageBox,可以不填 pagesize//每页条数,默认是15条,可以不填 totalsize//总条数 curpage//当前页数 simple//默认是false,true没有上一页和下一页, type//0默认走http跳转,1是jsp页面必须有pageCallBack(pageNum)函数,从1开始 url//链接地址,如果type出入1此处就可以不填 例子:Page._run({totalsize:300,curp

jQuery 获取对象 定位子对象_jquery

选择中的特殊符号: # 指示 id . 指示 class * 全选 , 多选 空格 后代 > 子 ~ 兄弟 + 下一个 : 子(多功能) () 函数式的过滤与查找 获取 div 下的所有标题对象: $("div :header") 复制代码 代码如下: <body> <h3>AAA</h3> <p>BBB</p> <h4>CCC</h4> <div> <h3>DDD<

jQuery获取对象简单实现方法小结_jquery

监控一个容器,当用户点击时弹出 代码如下 $(function(){ $("Element").click{function(){ alert("点击我哦!"); } } }); 基本对象获取(注意这里获取的都是Jquery对象而不是Dom对象哦,但是他俩是可以转换滴) 代码如下 复制代码 代码如下: $("*") '表示获取所有对象 但是我至今没这样用过 $("#XXX") '获得 id=XXX 的元素对象(id可以是标签的

jQuery遍历对象、数组、集合实例_jquery

1.jquery 遍历对象 复制代码 代码如下:   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  <HTML>   <HEAD>    <TITLE> New Document </TITLE>    <script language="javascript" type="text/javascript&qu

jquery判断对象是否为空并遍历对象的简单实例_jquery

javascript : if(document.getElementById("target_obj_id")){ } else { } jquery: 因为 $("#target_obj_id") 不管对象是否存在都会返回 object ,所以以上方法不行 1. var target_obj = jQuery('#target_obj_id'); if (target_obj.length > 0) { //如果大于0 标识 id 为target_obj_

jQuery深拷贝Json对象简单示例_jquery

本文实例讲述了jQuery深拷贝Json对象的简单实现方法.分享给大家供大家参考,具体如下: var oldJson = { Name: 'quber', List: [1, 2, 3, 4], Obj: [ { name: 'qubernet', fun: function () { return 1; } }, { name: 'qubernet1', fun: function () { return 2; } } ] }; var newJson = $.extend(true, {},

jQuery判断对象是否存在的方法_jquery

本文实例讲述了jQuery判断对象是否存在的方法.分享给大家供大家参考.具体如下: 一.传统Javascript的写法 obj = document.getElementById("someID"); if (obj){ obj.innerText("hi"); } 在jQuery中,var obj = $("#id")无论id这个控件是否存在,都是返回object,这样可就无法使用if(obj)来判断这个控件是否存在了  二.jQuery判断对

文本有关的样式和jQuery求对象的高宽问题分别说明_jquery

WEB开发经常会用到有关文处理本有关的问题,这里结合使用情况总结一下,同时还有jQuery求对象的高度问题,分别说明如下: 一.CSS中有关文本的样式 1, word-break: normal | keep-all | break-all 设置或检索单词在容器边界处的处理方式,是否允许单词内换行: normal: 浏览器默认处理方式: keep-all:遇到容器边界处,单词内不换行: break-all:遇到容器边界处,单词内可换行,即单词断开换行显示: 2, word-wrap: norma