jQuery细讲(1):jQuery对象
来源:互联网 发布:android 网络测速 编辑:程序博客网 时间:2024/04/18 05:20
程序员当累了,开始码字写回忆录了,个人极度厌倦单纯的转载翻译,以下内容均经过本人细嚼慢咽慢慢消化后得来。
本人才疏学浅,欢迎任何形式的批评指正。
本人QQ:568341288
不知是哪个伟人说过,“讲任何事都要有上下文”,首先交代一下上下文。
1.javascript基础,请参见http://www.w3school.com.cn/js/index.asp
2.HTML DOM基础,请参见http://www.w3school.com.cn/htmldom/index.asp
3.其他有必要一阅的资料
https://developer.mozilla.org/en-US/
http://msdn.microsoft.com/en-us/library/aa155073.aspx
http://www.w3schools.com/default.asp
(如果此时你并不知道什么是object,function,prototype,closure,lambda,那可以不用浪费时间向下看
建议登录http://jquery.com/,先亲手用用
学会应用的时候,再来看才比较有效)
这次主要讲一下jQuery对象。
1.jQuery是什么?jQuery顾名思义就是javascript+query,即javascript的查询技术
简单的说,jQuery是javascript的一个函数,
它的参数是DOM选择器
它的返回值是一个jQuery对象
2.什么是jQuery对象
个人理解,jQuery对象是一个包含许多函数方法的特殊数组,这个特殊数组的元素是通过选择器得到的DOM对象
晃刀的流氓有很多,敢捅人的又有几个?
说再多描述定义也是废话,根据jQuery的源码,下面就来写一个简单的jquery
(function(window,undefined){//直接执行的匿名函数,传入window对象,阻止闭包的影响var jQ=(function(){//再次匿名函数执行,防止window对象的全局函数的影响var jQ=function(selector, context){//新建一个叫jQ的函数return new jQ.fn.init(selector, context);//简单的可以理解为通过一个函数,创建一个jQ对象}jQ.fn=jQ.prototype={//扩展jQ的原型方法,将原型又复制为jQ的一个属性constructor:jQ,//因为原型被完全重写,所以构筑函数需要重新赋值init:function(selector, context){//返回jQ对象的函数var elems,length=0;if(context){//简单就使用getElememtsByTagName做查询函数try{elems=context.getElementsByTagName(selector);//带上下文的查询}catch(e){elems=document.getElementsByTagName(selector);}}else{elems=document.getElementsByTagName(selector);//得到dom对象数组}length=elems.length//得到元素长度this.length=0;//初始化jQ对象长度this.content=elems;//讲dom数组保存for(var i=0;i<length;i++){Array.prototype.push.call(this,elems[i])//调用数组方法}return this;},version:'0.1',getLength:function(){return this.length;//添加一个简单的方法}}jQ.fn.init.prototype=jQ.fn;//jQ.fn.init继承了jQ的全部方法,而jQ实际上就是jQ.fn.init创建的,jQ对象就具有了jQ的所有方法return jQ;})()window.jQ=window.$$=jQ;//见jQ函数赋值给window对象,并复制出$$方法,方便使用})(window)//页面使用var dd=document.getElementById('dd')var divs=$$('div',dd)//带上下文的查询console.log(divs)一些需要啰嗦几句的点:
1.闭包
这里主要用到了避免闭包影响的手段,直接执行匿名函数
深入理解请参考:http://jibbering.com/faq/notes/closures/
2.函数Function,对象Object和原型prototype
javascript的世界里,万物皆是Object,Function是特殊对象,Function本身是Object,又能通过prototype创建新的Object
一篇比较透彻的分析:http://mckoss.com/jscript/object.htm
3.对象的赋值
var obj={name:'xxxx'};
obj={address:'shanghai'}
obj的name属性就丢失了
必须obj={name:'xxxx',address:'shanghai'}
至于对象的extend方法将在以后讲解
4.call的使用
call是本人认为javascript(或者说本人会的所有变成语言中)最狗血的方法,简单的说就是借刀杀人
通过改变this,让每个js方法都充满了无限的可能性
具体使用可详见:https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/call
5.关于对象原型继承
此例最后jQ.fn.init.prototype=jQ.fn;将jQ.fn.init的原型赋值为jQ的原型
一方面实现了对jQ的封装(jQ.fn.init本身是jQ的属性)
另一面,将jQ.fn.init将jQ的方法继承用于创建jQ对象
创建jQ对象即是jQ对象的实例,又具有jQ的所有方法包括init
写着写着,发现要把一个简单的问题完全将清楚是十分困难的事,如果没有上下文简直就是浪费时间
一段小小的代码,要完完全全讲清楚,基本上可以出本书了,有些只能起新文章细讲了。
当然,我认为,一个优秀的程序员,有三件事是最重要:会读代码,敢于实践,会copy。
- jQuery细讲(1):jQuery对象
- (第1讲)jQuery选择器
- [1]jquery之jquery对象
- (第3讲)jQuery的事件
- 美女老师讲JQuery
- jQuery技术第一讲
- jQuery技术第二讲
- 精讲Jquery
- jQuery 练习[二] jquery 对象选择器(1)
- Jquery系列-Jquery对象
- Jquery学习4-1---jquery用法之访问jquery对象
- jQuery对象
- jquery 对象
- Jquery对象
- jquery对象
- JQuery对象
- JQuery对象
- jQuery学习日记(一):jQuery 对象与 DOM 对象
- C语言一维数据中2[arry]问题
- 笔试常考:C语言字节对齐
- 关于如何手动使安装MP3插件使Rhythmbox支持MP3格式音乐文件的播放
- 想成为一位合格的php程序员(高级),必须符合如下条件。
- GeoServer访问ArcSDE数据
- jQuery细讲(1):jQuery对象
- 文本转化成十六进制
- 一些基本的设计模式
- 下面Google的一份面试题集,看看你是否能够回答出来。
- Garbage collection (computer science)
- 资治通鉴,卷五十一,李固
- Web 安装包实现IE的自动安装
- 穷爸爸富爸爸
- 百度工程师笔试题(web开发和新产品搜索方向)