有听说过著名的prototype,看过,没研究过,看上去像函数库,很多有用的函数都封装了常用的操作
有看过jQuery,很多人都在用,都说好,很想看懂它,但一看到他几千行的代码,头大,没有思路,无头绪 
勉强看懂他的意思,就是一个操作行为的库,强大的查询,老天,真的很强大
很多代码都用很奇怪的处理方式,像我这种老粗勉强看懂,有点受不了,感觉很勉强的凑在一起,这是我这个外行的评价
这里对他不做更多评价,免得引来麻烦
我比较喜欢干净的代码,可以体现实现过程,以下部分代码,参考jQuery及Clear的类库,未写完,最近没空,待完善
Code
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
以下部分测试
Code
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内容
Code
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
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
