jQuery的链式调用分析

jQuery式方法链的核心部分有三点：1)jQuery的包装函数(即jQuery()，用于构造包装对象)，使得构造函数可以生成充满原生DOM对象的包装对象。看起来是这样的… …(当然比官方库的规模、功能、实现要差很多，我只是写了一个大概的实现):诶……我的错误，有兴趣试代码的请记住不要介绍jQuery库，名字冲突。复制的代码如下：(function(){//Subclass selector为了简单不支持属性选择器等。只有工具功能(红色)接受‘形式的定制。“类名”或“#id”或“标记名”及其组合将在下面解释。Function _ jquery (els) {this。elements=new array()；for(var I=0；长度；I){ var element=els[I]；if(type of element==“string”){ element=element . trim()；//防止手绘在var sign=element.substr(0，1)前后键入更多空格；if(sign==' # '){//find element=document . getelementbyid(element . substr(1))by id；this.elements.push(元素)；} else if(符号==' . '){//按类名搜索。这里有一个自定义的工具函数getelementsbyclassname元素=getelementsbyclassname(element . substr(1))；//元素此时是数组对象，这个方法是自定义的。看这个。元素=这个。元素。合并下面的(元素)。} else {//search element=document . getelementsbytagname(element)按标记名，不带任何标识符；//元素是这个的数组对象。元素=这个。elements.merge(元素)此时；//这个方法可以使elements数组只有不同的dom对象，就像set } } else { this。elements.push(元素)；}}}/*这里可以开始扩展包装器对象的原型函数，比如_ jquery . prototype . addevent=function(){ }.} */window[' jquery ']=function(){ return new _ jquery(arguments)}；if(！window[' $ '])window[' $ ']=window[' jQuery ']；})()//自执行匿名函数OK。插入以下简单的html文档进行测试(不要轻视我对html编写不规范的规范…只是为了测试)。复制代码如下：DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN ' ' http://www . w3 . org/TR/HTML 4/strict . DTD ' HTML head title my函数addition/title/head body div id=' header ' p id=' header 1 ' class=' entry ' header 1/p id=' header 2 ' class=' entry ' header 2/p id=' header 3 ' class=' entry ' a href='//www . JB 51 . net/index . HTML元素[0]；控制台。编写(' nodename : ' f . nodename '==id : ' f . id)/*一个自定义调试面板工具，而不是alert。由于正在使用的是一本书中的一个小bug，功能和可操作性都不是很好，可能过两天会修改，可以用alert代替*/output自己调试。

输入：复制代码如下： var e=jquery ('div '，' p ')。元素；//我故意在这里多丢了几个空格给(var I=0；即长度；I){ consoles . write(' nodename : ' e[I]。nodeName '==Id:' e[i]。id)；}输出：

虽然集成了几种dom对象搜索的方法，但是可以看出每次使用循环语句操作dom对象是非常烦人的。然后，基于这个包装器，将介绍这个包装器对象的许多方法，例如上面的addEvent方法。这些方法的引入最终是为了操作封装在对象中的原生dom对象，所以每个方法都必须引入一个for或while语句，这就引出了第二个核心函数==jquery.each()。太晚了…明天总结一下本文用到的工具函数(都是很有用的函数):复制代码如下： //className:classname tag:查找parent:查找函数getelementsbyclasname(class name，tag，parent) {parent=parent | |文档在这个父节点；//默认为document var tag=tag | | ' *；//默认为查找所有标签var元素=new Array()；var re=新RegExp('(^|\\s)'类名(\ \ s | $))；var all list=parent . getelementsbytagname(标记)；var元素；for(var I=0；i allList.lengthI){ element=AllList[I]；if(element . class name . match(re)){ elements . push(element)；} }返回元素；}复制代码如下： if(！String.prototype.trim) {//删除前导和尾随空格string . prototype . trim=function(){ return this . replace(/\ s | \ s $/g ' ')；} } if(！数组。原型。merge) {array。原型。merge=function(arr){//使数组具有与set相似的特征，同一对象不能放入同一数组。不要轻视连算法的问题，只需为(var I=0；一、长度；i ) { var信号=假；for(var j=0；这个长度；j ) { if (arr[i]==this[j])信号=true} if(！推(arr[I])；}退回这个；} }