关于javascript 类库

有听说过著名的prototype,看过,没研究过,看上去像函数库,很多有用的函数都封装了常用的操作

有看过jQuery,很多人都在用,都说好,很想看懂它,但一看到他几千行的代码,头大,没有思路,无头绪

勉强看懂他的意思,就是一个操作行为的库,强大的查询,老天,真的很强大

很多代码都用很奇怪的处理方式,像我这种老粗勉强看懂,有点受不了,感觉很勉强的凑在一起,这是我这个外行的评价

这里对他不做更多评价,免得引来麻烦

我比较喜欢干净的代码,可以体现实现过程,以下部分代码,参考jQuery及Clear的类库,未写完,最近没空,待完善

 

  1 (function (){
  2 var js;
  3 js=window.js=function(selector,context){
  4     return new js.Init(selector,context);//返回对象
  5 }
  6 //js核心原型 属性和方法
  7 js.fn=js.prototype={
  8     version: "1.0.0.0",
  9     length: 0,
 10     /*
 11     功能:得到js对象长度
 12     参数:无
 13     返回值:js对象长度
 14     */
 15     size: function() {
 16         return this.length;
 17     },
 18     /*
 19     功能:获取指定索引
 20     参数:索引值
 21     返回值:指定索引的对象
 22     */
 23     get:function(index){
 24         return this[index];    
 25     }
 26 };
 27 // 静态方法扩展js.extend与原型扩展js.fn.extend
 28 js.extend = js.fn.extend = function(properties) {
 29     for (var i in properties) {
 30         this[i] = properties[i];
 31     }
 32     return this;
 33 };
 34 //js核心静态 方法
 35 js.extend({
 36     /*
 37     功能:js对象返回器
 38     参数一:selector 选择器
 39     参数二:context 上下文对象,(注意这个是个包容对象)
 40     选择器说明:
 41         1.element或elements 不需要上下文
 42           说明:对于elements,有两种情况
 43           [1.伪数组,有nodeType和length属性,如:document.myform]
 44           [2.伪数组,无nodeType但有length属性,如:document.getElementsByTagName("div")]
 45         2.字符串
 46           ID号: "#ID"; 理论上不需要上下文[id是唯一的],但实际处理时默认使用document为上下文
 47           类名: ".className"; 可有上下文(不提供时为document)
 48           标签名: "<div"; 可有上下文(不提供时为document)
 49           所有: "*"; 可有上下文(不提供时为document)
 50           //( "[Attr"这个匹配属性再议), 
 51     */
 52     Init: function(selector,context) {
 53         //处理查询
 54         js.delwithQuery(selector,context,this);
 55         //处理创建对象
 56     },
 57     /*
 58     功能:处理查询
 59     参数:1.选择器;2.上下文对象;3.当前js对象
 60     返回值:js对象
 61     */
 62     delwithQuery:function(selector,context,nowJs){
 63         //注意:document.myform,在ie中为object,在ff中为FormElement,他们都有length属性
 64         if (selector.nodeType||selector.length&&typeof selector!="string") {
 65             return js.setArray(selector,nowJs);
 66         } else if (typeof (selector) == "string") {//处理字符串,如#one 或 #one,two,three #后面的为ID名称
 67             return js.find(selector,context,nowJs);
 68         }
 69     },
 70     /*
 71     功能:处理单个或多个节点对象
 72     参数:1.选择器;2.当前js对象
 73     返回值:js对象
 74     */
 75     setArray:function(selector,nowJs){
 76         //处理单个元素节点对象,如document.body
 77         //处理多个元素节点,如document.myform(nodeType有值)或js.TagName("div")(nodeType未定义)
 78         return selector.length==undefined?js.setSingleArray(selector,nowJs):js.setMultiArray(js.makeArray(selector),nowJs)
 79     },
 80     /*
 81     功能:设置单个js对象成员
 82     参数:1.要设置的节点对象(成为js成员);2.当前js对象
 83     返回值:当前js对象
 84     */
 85     setSingleArray: function(elem,nowJs) {
 86         nowJs[0] = elem;
 87         nowJs.length = 1;
 88         return nowJs;
 89     },
 90     /*
 91     功能:设置多个js对象成员
 92     参数:1.要设置的节点对象"数组";2.当前js对象
 93     返回值:当前js对象
 94     */
 95     setMultiArray: function(elems,nowJs) {
 96         nowJs.length = 0;
 97         Array.prototype.push.apply(nowJs, elems);//是逐个把elems成员推入js的
 98         return nowJs;
 99     },
100     /*
101     功能:把伪数组设置为一个数组
102     参数:伪数组
103     返回值:数组对象
104     */
105     makeArray: function(array) {
106         var ret = [];
107         for (var i = 0, length = array.length; i < length; i++) {
108                 ret.push(array[i]);
109         }
110         return ret;
111     },
112     /*
113     功能:匹配对象
114     参数:1.选择器;2.上下文对象;3.当前js对象
115     返回值:js对象
116     */
117     find: function(selector,context,nowJs) {
118         context = context || document;//保证有效的上下文对象
119         var match = /^(.)/.exec(selector);//获取行开头匹配,exec返回数组,第一个是匹配的字符,其他是反向引用
120         if (match && match[0]) {//match[0]为第一个匹配,match[1]第一个分组的反向引用,这里都是获取第一个字符
121             switch (match[0]) {
122                 //字符串的几种形式
123                 case "#": return js.setArray(js.getByID(js.replaceToSplit(selector, "#")),nowJs);//匹配ID
124                 case ".": return js.setArray(js.getByClassName(js.replaceToSplit(selector, "."),context),nowJs);//匹配类
125                 case "<": return js.setArray(js.getByTag(js.replaceToSplit(selector, "<"), context),nowJs);//匹配html标记
126                 case "*": return js.setArray(js.getByAll(context),nowJs);//匹配所有 js("*")
127                 //default: return alert("字符串格式错误");
128             }
129         }
130     },
131     /*
132     功能:通过ID得到对象 js("#aa,bb,cc,dd")
133     参数:id数组
134     返回值:节点数组
135     总结:这里没有用到上下文,实际上可以用
136     */
137     getByID: function(names) {
138         var ret = [];
139         for (var i = 0, j = names.length; i < j; i++) {
140             var item = document.getElementById(js.trim(names[i]));
141             if (item) ret.push(item);
142         }
143         return ret;
144     },
145     /*
146     功能:通过HTML标记得到对象 $("div,a,ul,dl")
147     参数:html标记数组
148     返回值:节点数组
149     */
150     getByTag: function(names,context) {
151         var ret = [];
152         for (var i = 0, j = names.length; i < j; i++) {
153             var items = context.getElementsByTagName(js.trim(names[i]));
154             for (var m = 0, n = items.length; m < n; m++) {
155                 ret.push(items[m]);
156             }
157         }
158         return ret;
159     },
160     /*
161     功能:得到所有对象
162     参数:上下文对象
163     返回值:节点数组
164     */
165     getByAll: function(context) {
166         var ret = [];
167         var items = context.getElementsByTagName("*");
168         for (var m = 0, n = items.length; m < n; m++) {
169             ret.push(items[m]);
170         }
171         return ret;
172     },
173     /*
174     功能:通过ClassName得到对象
175     参数:className数组
176     返回值:节点数组
177     */
178     getByClassName: function(names,context) {
179         var ret = [];
180         var elems = context.getElementsByTagName("*");//获取上下文对象限制下的所有元素节点对象,返回一个数组        
181         for (var i = 0, j = names.length; i < j; i++) {
182             var myClass = new RegExp("\\b"+names[i]+"\\b");//正则匹配
183             for (var m = 0; m < elems.length; m++) {//遍历这个数组
184                 var classes = elems[m].className;//获取对象的样式名称
185                 if (myClass.test(classes)) ret.push(elems[m]);//如果匹配指定的样式名称,则推入到数组中
186             }
187         }
188         return ret;
189     },
190     /*
191     功能:遍历对象
192     参数:1.要绑定的函数;2.当前对象
193     返回值:当前对象
194     */
195     each: function(func,nowJs) {
196         for (var i = 0, j = nowJs.length; i < j; i++) {
197             func.call(nowJs[i],"");//这里没有参数传递,使用的时候都是通过闭包特性获取,到底如何再议
198         }
199         return nowJs;
200     },
201     /*
202     创建极点对象对象
203     */
204     delwithCreate:function(){
205         
206     }
207 });
208 //接续
209 js.Init.prototype = js.prototype;
210 
211 //js静态扩展 [页面加载]
212 js.extend({
213     /*
214     功能:判断HTML DOM加载,以便能更快的执行脚本
215     参数:DOM加载完成后需要执行的函数
216     返回值:无
217     总结:
218     1.不清楚脚本到底是怎么执行的,我是说如果正好几个函数同时执行时,感觉这样怪怪的,所以去掉了addEvent(window,"load",isDOMReady)
219     */
220     domReady:function(f){
221         if(js.domReady.done) return f();//如果已经加载完毕,直接调用函数,(第一次调用的时候done还没有定义,不会执行)
222         if(js.domReady.timer){//如果还在间隔调用(第一次调用的时候,timer还没有定义,不会执行)
223             js.domReady.fArray.push(f);//推入数组
224         }else{
225             //addEvent(window,"load",isDOMReady);//添加事件,以防他最先完成,FF有缓存技术,也检查DOM是否可用,(感觉上会有冲突)
226             js.domReady.fArray=[f];//定义ready是个数组,并且第一项是第一次加载的函数
227             js.domReady.timer=setInterval(js.isDOMReady,10);//设置间隔调用,检查DOM是否已经加载完成
228         };
229     },
230     /*
231     功能:检查DOM是否已可操作
232     参数:无
233     返回值:无
234     总结:无
235     1.clearInterval(domReady.timer)就可以取消间隔调用,并且清空domReady.timer(其值为undefined,对象删除属性就是使用      domReady.timer=undefined),不需要再执行domReady.timer=null
236     */
237     isDOMReady:function(){
238         if(document && document.getElementById && document.getElementsByTagName && document.body){//这里是判断DOM是否加载完成的关键
239             js.domReady.timer=clearInterval(js.domReady.timer)//取消间隔调用
240             js.domReady.done=true;//加载完成
241             for(var i=0;i<js.domReady.fArray.length;i++){
242                 js.domReady.fArray[i]();
243             };
244             js.domReady.fArray=undefined;//清空数组
245         };
246     }
247 });
248 js.onLoad=js.domReady;//可以使用onLoad
249 //js原型扩展 [属性设置attribute]
250 js.fn.extend({
251     /*
252     相关资料:
253     name={"for":"htmlFor","class":"className"}[name]||name;
254     IE中class需要转换为className,后能正确获取 elem.getAttribute(className)
255     而FF和OPER中却不需要转换,直接使用class才能正确获取 elem.getAttribute(class)
256     但 elem[className]=value 使用className时,兼容所有浏览器
257     而 elem[class]=value 使用class时,不兼容所有浏览器,返回undefined
258     this[name]=value;//比标准更兼容,而且支持创建自定义属性,当然不在html标记中显示
259     */
260     /*
261     功能:设置js成员属性
262     参数:属性名/值(无值时为删除属性)
263     返回值:js对象
264     */
265     attr:function(name,value){
266         if (js.browser.msie) name=js.checkSpe(name);//检查是否需要转换
267         js.each(function(){
268             value?this.setAttribute(name,value):this.removeAttribute(name);//设置的属性出现在html标记中,FF设置class时,不能是className,而IE需要使用className
269         },this);
270         return this;
271     }
272 });
273 //js静态扩展 [属性辅助函数]
274 js.extend({
275     //属性中,需要转换的名称
276     ieSpe:{"for":"htmlFor","class":"className"},
277     /*
278     功能:处理属性名(name)的正确表现
279     参数:属性名
280     返回值:实际需要的属性名
281     */
282     checkSpe:function(name){
283         return name=js.ieSpe[name]?js.ieSpe[name]:name;
284     }          
285 });
286 //js原型扩展 [样式设置style]
287 js.fn.extend({
288     /*
289     功能:设置js成员样式
290     参数:样式名称/值(无值时为删除样式)
291     返回值:js对象
292     说明:
293         参数可以是这样单个设置 ("backgroundColor","yellow")
294         也可以是设置多样式 ("cssText", "background-color:yellow;color:red;"),这里使用cssText
295     另外:为类或id设置样式,这里分类为属性设置
296      */
297     style:function(name,value){
298         js.each(function(){
299             value?this.style[name]=value:this.style[name]="";                     
300         },this);
301         return this;
302     },
303     /*
304     功能:设置元素透明度
305     参数:透明级别0~100
306     返回值:js对象
307     总结:注意条件判断filters有s,设置的时候无s
308     */
309     setOp:function(level){
310         js.each(function(){
311             this.filters?this.style.filter="alpha(opacity:"+level+")":this.style.opacity=level/100;
312         },this);
313         return this;
314     }
315     //另有className设置"类"来添加效果,这里分类为属性设置
316 });
317 //js原型扩展 [事件]
318 js.fn.extend({
319     /*
320     功能:批量绑定对象事件
321     参数:事件类型/事件处理函数
322     返回值:js对象
323     */
324     bindEvent:function(type,handler){
325         js.each(function(){
326             /*
327             功能:注册事件处理函数(传统事件处理的加强版本)
328             参数:1.要添加事件的对象,2.事件类型非on形式(为了向W3C标准靠拢),3.事件处理函数
329             返回值:无
330             总结:
331             1.此事件函数采用了稳定可靠的传统事件添加方式;
332             2.可为同一对象的同一事件添加多个事件处理函数(向W3C标准靠拢,是传统方式的升级);
333             3.处理函数内this指向事件对象(避免了如IE内指向window的缺陷);
334             4.只支持冒泡,不支持捕获.(应用于实际工作足以);
335            5.兼容所有浏览器(W3C addEventListener() 不兼容 IE; IE attachEvent() 不兼容支持W3C标准的浏览器;而传统方式功能又不足够强大)
336            */
337             if(!this.guid) this.guid=0;//设置初始的散列号(这里我们设计由attEvent来管理散列号)
338             if(!handler.$$guid) handler.$$guid=this.guid++;//如果当前的"处理函数"还没有分配散列号,则分配一个(这里我们设计为每个"处理函数"添加一个散列号属性),分配后的散列号自动加一
339             if(!this.events) this.events={};//我们为要添加事件的对象设计一个属性events来管理事件,这个events是个对象
340             var handlers=this.events[type];//handlers是一个管理同类事件的事件集合
341             if(!handlers){//如果还没有"此类事件"时
342                 handlers=this.events[type]={};//设计"此类事件"为一个对象,他将管理属于他的事件
343                 handlers[handler.$$guid]=handler;//我们把此事件"对应的事件处理函数的散列号"分配给"此类事件"
344             }else{//如果已经存在过此类事件
345                 handlers[handler.$$guid]=handler;//我们将给"此类事件"再增加事件处理函数,原事件处理函数也将保留,实现这一要点方式为,事件处理函数自身提供散列号,以便区分不同的事件处理函数
346             }
347             this["on"+type]=js.handleEvent;//将事件处理函数绑定到事件上
348         },this)
349         return this;
350     },
351     /*
352     功能:删除已经注册的事件处理函数
353     参数:1.要添加事件的对象,2.事件类型非on形式(为了向W3C标准靠拢),3.事件处理函数
354     返回值:js对象
355     总结:第一次用delete(删除自定义属性?)
356     */
357     removeEvent:function(type,handler){
358         js.each(function(){
359             if(this.events&&this.events[type]){
360                 delete this.events[type][handler.$$guid];//由事件处理函数自身提供的散列号来删除已经存在的事件
361             }
362         },this);
363         return this;
364     }
365 });
366 //js静态扩展 [事件辅助函数]
367 js.extend({
368     /*
369     功能:获取事件的处理函数并调用
370     参数:事件对象
371     返回值:无
372     */
373     handleEvent:function(e){
374         e=e||js.fixEvent(window.event);//处理IE下的事件对象,并为该事件对象添加了非IE下的"阻止冒泡"和"阻止浏览器默认行为"方法
375         var handlers=this.events[e.type];//这里的this指element,而element.events[],
376         for(var i in handlers){//遍历此对象,之前我们说这个对象通过"事件处理函数自身的散列号"来管理其下的"事件处理函数"
377            this.$$handleEvent=handlers[i];//这样的处理是为了让"处理函数"内部的this指向触发事件的对象,而不是window对象
378            //其实际是为对象添加了一个方法,所以,方法内部的this,指向的是该对象
379            this.$$handleEvent(e);//事件对象由第一个参数传入,也是为了向W3C标准靠拢
380         }
381     },
382     /*
383     功能:处理IE下的事件对象,并为该事件对象添加了非IE下的"阻止冒泡"和"阻止浏览器默认行为"方法
384     参数:事件对象
385     返回值:该事件对象
386     总结:
387     这里的处理手段是为了向W3C标准靠拢
388     */
389     fixEvent:function(e){
390         e.preventDefault=function(){//阻止浏览器默认行为
391             this.returnValue=false;
392         };
393         e.stopPropagation=function(){//阻止事件冒泡
394             this.cancelBubble=true;
395         };
396         return e;
397     }
398 });
399 //js原型扩展 [位置信息]
400 js.fn.extend({
401     /*
402     功能:设置js成员左边界位置
403     参数:设置量
404     返回值:js对象
405     */
406     setMLeft:function(pos){
407         js.each(function(){
408             this.style.marginLeft=pos+"px";             
409         },this);
410         return this;
411     },
412     /*
413     功能:设置js成员顶部边界位置
414     参数:设置量
415     返回值:js对象
416     */    
417     setMTop:function(pos){
418         js.each(function(){
419             this.style.marginTop=pos+"px";             
420         },this);
421         return this;
422     }
423 
424 });
425 //js静态扩展 [位置信息]
426 js.extend({
427     /*
428     功能:获取事件中的鼠标位置
429     参数:事件对象
430     返回值:位置数组
431     */
432     mouseLocate:function(e){
433         e=e||window.event;
434         var cursor={x:0,y:0};
435         if(e.pageX || e.pageY){
436             cursor.x=e.pageX;
437             cursor.y=e.pageY;
438         }else if(e.clientX || e.clientY){
439             //event.clientX 和 event.clientY 据Ms说是除窗口装饰及滚动条外的鼠标离窗口最左边和最上边的距离。但是他的计算却是从 (2,2) 开始的,解释说这两个像素存在 document.documentElement.clientLeft(W3C页面)或document.body.clientLeft(一般页面), 里面。
440             cursor.x=e.clientX+document.documentElement.scrollLeft;//-document.documentElement.clientLeft;
441             cursor.y=e.clientY+document.documentElement.scrollTop;//-document.documentElement.clientTop;
442         };
443         return cursor;
444     },
445     /*
446     功能:获取浏览器的水平滚动位置
447     参数:无
448     返回值:无
449     总结:W3C页面就是用document.documentElement.scrollLeft;
450     */
451     scrollX:function(){
452         return document.documentElement.scrollLeft;//W3C页面就是用这个,而document.body.scrollLeft的值永远为0;
453     },
454     /*
455     功能:获取浏览器的垂直位置
456     参数:无
457     返回值:无
458     总结:
459     */
460     scrollY:function(){
461         return document.documentElement.scrollTop;//W3C页面就是用这个,而document.body.scrollTop的值永远为0;
462     }
463 
464 });
465 //原型扩展方法 显示|隐藏
466 js.fn.extend({
467     /*
468     功能:显示对象
469     参数:无
470     返回值:当前js对象
471     */
472     show:function(){
473         js.each(function(){
474             this.style.display="block";
475         },this)    
476         return this;
477     },
478     /*
479     功能:隐藏对象
480     参数:无
481     返回值:当前js对象
482     */
483     hidden:function(){
484         js.each(function(){
485             this.style.display="none";
486         },this)    
487         return this;
488     }
489 });
490 /**
491  * js静态扩展方法 [字符串方法]
492  */
493 js.extend({
494     /*
495     功能:分割为名称数组
496     参数:字符串;要替换为空的字符;分割字符的标记
497     返回值:数组列表
498      */
499     replaceToSplit: function(text, flag, sign) {
500         return text.replace(flag || "", "").split(sign || ",");
501     },
502     /*
503     功能:去除前后空格
504     参数:字符串
505     返回值:去除前后空格后的字符串
506     */
507     trim: function(text) {
508         return (text || "").replace(/^\s+|\s+$/g, "");
509     }
510 });
511 /**
512  * js静态扩展 [获取对象:快速节点选择器)]
513  */
514 js.extend({
515     /*
516     功能:用于单个节点的快速定位或上下文的快速定位
517     参数:id名称
518     返回值:单个节点对象
519     */
520     id:function(idName){
521         return document.getElementById(js.trim(idName));    
522     },
523     /*
524     功能:用于获取节点列表
525     参数:标记名称/上下文对象(可空)
526     返回值:节点列表(伪数组)
527     */
528     tagName:function(tagName,elem){
529         return (elem||document).getElementsByTagName(js.trim(tagName));    
530     }
531 });
532 //js静态扩展方法 [工具方法]
533 js.extend({
534     /*
535     功能:获取一个特定元素(elem)的样式属性(name)
536     参数:1.要获取样式的元素对象,2.样式属性(格式请使用这样backgroundColor)
537     返回值:样式值
538     */
539     getStyle:function(elem,name) {
540         //如果该属性存在于style[]中，则它最近被设置过(且就是当前的)
541        if (elem.style[name])
542            return elem.style[name];//ie和W3C都支持style
543        //否则，尝试IE的方式
544        else if (elem.currentStyle)//仅ie
545            return elem.currentStyle[name];
546        //或者W3C的方法，如果存在的话
547        else if (document.defaultView && document.defaultView.getComputedStyle) {//仅W3C
548          //它使用传统的"text-align"风格的规则书写方式，而不是"textAlign"
549            name = name.replace(/([A-Z])/g,"-$1");//这里使用正则来转换这种书写格式,只要匹配到大写字母,就存入分组,$1是取得这个匹配的字母,-$1是在前面加"-",不过这个是否是多次匹配替换,我到没试过
550            name = name.toLowerCase();//转换为小写
551         //获取style对象并取得属性的值(如果存在的话)
552            return document.defaultView.getComputedStyle(elem,"").getPropertyValue(name);
553         //var s=document.defaultView.getComputedStyle(elem,null);
554         //s.getPropertyValue(name)--->W3C样式的方法,ie不支持
555     //否则，就是在使用其它的浏览器,这里不做处理
556         };
557     },
558     /*
559     功能:设置元素透明度
560     参数:1,要设置的元素,2.透明级别0~100
561     返回值:无
562     总结:注意条件判断filters有s,设置的时候无s
563     */
564     setOp:function(elem,level){
565         if(elem.filters) elem.style.filter="alpha(opacity:"+level+")";
566         else elem.style.opacity=level/100;
567     }
568 
569 });
570 //js静态扩展 [浏览器设置]
571 var userAgent = navigator.userAgent.toLowerCase();
572 js.extend({
573     // 客户端浏览器设置
574     browser: {
575         version: (userAgent.match(/.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/) || [])[1],
576         safari: /webkit/.test(userAgent),
577         opera: /opera/.test(userAgent),
578         msie: /msie/.test(userAgent) && !(/opera/.test(userAgent)),
579         mozilla: /mozilla/.test(userAgent) && !(/(compatible|webkit)/.test(userAgent))
580     }
581 });
582 })()
583 

 以下部分测试

 1 js.domReady(function(){
 2     //js(document.myform).setCss("backgroundColor","yellow");//伪数组,有nodeType和length属性
 3     //js(js.tagName("div")).setCss("backgroundColor","yellow");//伪数组,无nodeType但有length属性
 4     
 5     //js(document.body).setCss("backgroundColor","yellow");//单个对象,有nodeType属性,没有length属性
 6     //js(js.id("one")).setCss("backgroundColor","yellow");//单个对象,有nodeType属性,没有length属性
 7     
 8     //js("#two").setCss("backgroundColor","yellow");//处理字符串 ID
 9     //js("#one,two").setCss("backgroundColor","yellow");//处理字符串 ID
10     
11     //js(".yellow,red,blue").setCss("backgroundColor","yellow");//处理字符串 类.无上下文
12     //js(".yellow,blue",js.id("myform")).setCss("backgroundColor","yellow");//处理字符串 类.有上下文
13     //js(".yellow,red,blue",js.id("allDiv")).setCss("backgroundColor","yellow");//处理字符串 类.有上下文
14     
15     //js("<p").setCss("color","yellow");//处理html标记,无上下文
16     //js("<p,h1",js.id("allDiv")).setCss("color","yellow");//处理html标记,有上下文
17     
18     //js("*").setCss("backgroundColor","yellow");//处理"*",无上下文
19     //js("*",js.id("myform")).setCss("backgroundColor","yellow");//处理"*",有上下文
20     
21     //js(js.tagName("div")).style("backgroundColor","yellow");//单个样式
22     //js(js.tagName("div")).style("cssText","background-color:yellow;color:red;");//多个样式
23     //js(js.tagName("div")).style("cssText");
24     
25     //js("#two,three").setOp(50);//设置透明度
26     
27     //js("*",js.id("myform")).attr("value","set value");//设置value属性
28     //js("*",js.id("myform")).attr("title","yellow");//设置title属性
29     //js("*",js.id("myform")).attr("id","yellow");//设置id属性
30     //js("*",js.id("myform")).attr("class","ccccc");//设置class属性
31     //js("*",js.id("myform")).attr("zidingyi","自定义");//设置自定义属性
32     //js("*",js.id("myform")).attr("zidingyi");//删除自定义属性
33     //js("*",js.id("myform")).attr("class");//删除class属性
34     
35     //alert(js.browser.msie);//检测是否是IE
36     //alert(js.browser.mozilla);//检测是否是Mozilla
37     
38     /*
39     以下绑定事件测试
40     function b1(){
41          this.style.backgroundColor="#ff0000";
42     }
43     function b2(){
44          this.innerHTML="1px solid red";
45     }
46     //事件函数的第一个参数是"事件对象"
47     //js("#two,three").bindEvent("click",b1);//不要直接写函数,不然删除不了,
48     //js("#two,three").bindEvent("mouseover",b2);//绑定事件
49     //js("#two,three").removeEvent("click",b1);//删除绑定的事件
50     //var a="a"
51     function aa(a){
52         alert(a);//这里的a是个事件对象
53     }
54     //aa();
55     //js("#two,three").bindEvent("click",aa);//绑定事件,第一个参数就是事件对象
56     
57     //js(".yellow").hidden();//隐藏对象
58     //js(js.id("otherDiv")).bindEvent("click",function(){
59     //    js(".yellow").show();//显示对象
60     //});
61     */
62     
63     //js("#allDiv").setMLeft(100).setMTop(50);//关于style.left,
64 })
65 

 html内容

 1 <div id="allDiv">
 2 <div id="one" class="yellow">
 3   <p>1.为什么each中在内部函数中可以取得外部的参数,需要测试</p>
 4   <p>答:函数本身不接受任何参数,所使用的值是从环境变量中取得的;</p>
 5   <p>2.var a=new Object();a.b=funciton(){this};</p>
 6   <p>这里的this指向a</p>
 7   <p>3.this指向问题需要再学习</p>
 8 </div>
 9 <div id="two">
10 <p>这里是文字段落部分二</p>
11 </div>
12 <div id="three" class="blue">
13 <p>这里是文字段落部分三</p>
14 </div>
15 <h1>这里是H1标题</h1>
16 </div>
17 <div id="otherDiv">
18 <p>其他div中p</p>
19 </div>
20 <form name="myform" action="" id="myform">
21 <input name="name" type="text" class="yellow" />
22 <input name="passwd" type="text" class="blue"/>
23 </form>
24