javascript学习笔记

最新推荐文章于 2025-08-12 14:37:12 发布

转载最新推荐文章于 2025-08-12 14:37:12 发布 · 80 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/tianyi-yyj/archive/2012/06/19/2555287.html

文章标签：

#javascript #xhtml #ViewUI

本文详细介绍了如何使用Prototype.js进行DOM事件监听、元素显示隐藏及阻止事件传播，并通过实例展示了AJAX请求的POST方式。同时，文章还探讨了JavaScript阻止事件传播的方法，并对Prototype.js的Toggle.display方法进行了扩展，使其能控制元素的显示和隐藏。此外，文章还介绍了如何使用Element.highlight和tooltip方法来实现文本框的高亮显示和提示信息的弹出。最后，通过示例展示了如何给Element扩展方法来增强其功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

prototype.js的domready事件，和post方式的ajax

1 document.observe("dom:loaded",function(){
2     new Ajax.Request('Ajax.asp',{
3         method:'post',
4         parameters:"action=allusercount",
5         onSuccess:function(data){
6             alert(data.responseText);
7         }
8     });
9 });

prototype.js控制元素显示隐藏

1 $("addwebbtn").observe("click",function(){
2      $("addwebtr").toggle();
3      //Toggle.display($("addwebtr"));
4 });

prototype.js阻止事件传播

1 $("addwebsubmit").observe("click",function(e){
2     Event.stop(e);
3 });

javascript阻止事件传播

1 button.onclick=function(event){
2     if(event){
3         event.preventDefault();
4         event.stopPropagation();
5     }else{
6         window.event.returnValue=false;
7         window.event.cancelBubble=true;
8     }
9 }

checkbox设置readonly会失败，可以设置onclick事件来实现

1 <input type="checkbox" name="checkbox" value="1"  checked="checked" onclick="return false;"  />

修改Prototype.js的Toggle.display方法

Prototype.js的Toggle.display方法就是Element.toggle()方法，用来控制元素显示隐藏的，可是在做一个操作的时候往往需要的不只是显示隐藏，如果有几步操作的话，可以放在两个function里面，调用Toggle.display的时候轮流调用这两个方法，所以给Toggle.display又添加了两个参数，是两个函数，Toggle.display内部会判断，如果是一个参数的话还会是原来的Element.toggle方法，否则就会轮流调用function1，function2，修改如下

 1 var Toggle = { display: function(element,fn1,fn2){
 2     element = $(element);
 3     element.togglefn=element.togglefn||1;
 4     if(!fn1||!fn2){
 5         Element.toggle(element);
 6     }else{
 7         if(element.togglefn==1){
 8             //这里fn1.call()的第一个参数是element，所以在fn1内部就可以用this来表示element
 9             fn1.call(element);
10             element.togglefn=2;
11         }else{
12             fn2.call(element);
13             element.togglefn=1;
14         }
15     }
16 } };

下面在加上一个调用的示例

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5 <title>无标题文档</title>
 6 <script language="javascript" src="js/prototype.js"></script>
 7 <script language="javascript">
 8 document.observe("dom:loaded",function(){
 9     $("testbtn").observe("click",function(){
10         Toggle.display($("testdiv"),
11                 function(){
12                     this.toggle();
13                     $("testbtn").value="hide";
14                 },function(){
15                     this.toggle();
16                     $("testbtn").value="show";
17                 }
18         );
19     });
20 });
21 </script>
22 </head>
23 
24 <body>
25 <input type="button" id="testbtn" value="show" />
26 <div id="testdiv">1<a>1</a>1</div>
27 </body>
28 </html>

给Element扩展两个方法，在注册的时候，点击提交按钮，不符合的文本框会高亮显示，另外还可以弹出提示信息(不是alert)，一个是highlight方法，另一个是tooltip方法，另外如果highlight方法提供第二个参数，会默认调用tooltip方法。

 1 Element.addMethods({
 2     highlight:function(element,delay,msg){
 3         element.hltimes=0;
 4         if(element.hl){
 5             clearInterval(element.hl);
 6             element.hltimes=0;
 7         }else{
 8             element.bgc=element.getStyle("backgroundColor");
 9         }
10         if((msg+"").length>0)element.tooltip(msg);
11         element.hl=setInterval(function(){
12             if(element.hltimes<5){
13                 var c1=Math.floor(Math.random()*255+1);
14                 var c2=Math.floor(Math.random()*255+1);
15                 var c3=Math.floor(Math.random()*255+1);
16                 element.setStyle({'backgroundColor':"#"+c1.toColorPart()+c2.toColorPart()+c3.toColorPart()});
17                 element.hltimes++;
18             }else{
19                 clearInterval(element.hl);
20                 element.setStyle({'backgroundColor':element.bgc});
21                 element.hltimes=0;
22             }
23         },delay);
24     },
25     tooltip:function(element,msg){
26         element.opc=1;
27         element.times=1;
28         if(element.hd){
29             clearInterval(element.hd);
30         }
31         if(!element.tempdiv){
32             element.tempdiv=document.createElement("div");
33             element.tempdiv.style.position="absolute";
34             element.tempdiv.style.width="200px";
35             element.tempdiv.style.left=element.positionedOffset()[0]+5+"px";
36             element.tempdiv.style.top=element.positionedOffset()[1]+element.getHeight()+5+"px";
37             element.parentNode.appendChild(element.tempdiv);
38         }else{
39             element.tempdiv.innerHTML="";
40             element.tempdiv.style.display="block";
41             element.tempdiv.setOpacity(1);
42         }
43         var tempdiv=element.tempdiv;
44         var top=document.createElement("div");
45         top.style.width="200px";
46         top.style.backgroundImage="url(js/bubble.gif)";
47         top.style.height="30px";
48         tempdiv.appendChild(top);
49         var msgdiv=document.createElement("div");
50         msgdiv.style.width="192px";
51         msgdiv.style.backgroundImage="url(js/bubble_filler.gif)";
52         msgdiv.style.paddingLeft="8px";
53         msgdiv.innerHTML=msg;
54         tempdiv.appendChild(msgdiv);
55         var bot=document.createElement("div");
56         bot.style.width="200px";
57         bot.style.backgroundImage="url(js/bubble.gif)";
58         bot.style.backgroundPosition="bottom";
59         bot.style.height="10px";
60         tempdiv.appendChild(bot);
61         element.hd=setInterval(function(){
62             if(element.opc>0){
63                 if(element.times>5){
64                     element.opc=element.opc-0.05;
65                     $(element.tempdiv).setOpacity(element.opc);
66                 }
67             }else{
68                 element.tempdiv.innerHTML="";
69                 element.tempdiv.style.display="none";
70                 clearInterval(element.hd);
71                 element.times=0;
72             }
73             element.times++;
74         },50);
75     }
76 });

下面是是用方法，和效果图

1 $("uname").highlight(100,"<span style='color:red;'>用户名请输入六位或以上!</span>");
2 //highlight的第一个参数是highlight的速度，数字越大越慢
3 //这里提供了第二个参数，所以默认为调用tooltip方法

这个高亮的背景颜色是随机产生的，这个提示框也会慢慢的改变透明度直到完全消失。

如果要单独调用tooltip方法，只要$("uname").tooltip("用户名请输入六位以上！");

转载于:https://www.cnblogs.com/tianyi-yyj/archive/2012/06/19/2555287.html