Qianduan

这两天要做一个JavaScript的弹出层效果，就是鼠标移动上面的时候弹出一个效果层，移开的时候就消失，网上搜索了一下，得到下面的一段实现代码： 1、JavaScript部分 function $(){return document.getElementById?document.getElementById(arguments[0]):eval(arguments[0]);} var OverH,OverW,ChangeDesc,ChangeH=50,ChangeW=50; function OpenDiv(_Dw,_Dh,_Desc) { $("BigBearLoading").innerHTML=""; OverH=_Dh;OverW=_Dw;ChangeDesc=_Desc; $("BigBearLoading").style.display=''; if(_Dw>_Dh){ChangeH=Math.ceil((_Dh-10)/((_Dw-10)/50))}else if(_Dw<_dh){changew=math.ceil((_dw-10)/((_dh-10)/50))} top="(document.documentElement.clientHeight-10)/2+" left="(document.documentElement.clientWidth-10)/2+" nw="10,Nh=">OverW-ChangeW)ChangeW=2; if (Nh>OverH-ChangeH)ChangeH=2; Nw=Nw+ChangeW;Nh=Nh+ChangeH; if(OverW>NwOverH>Nh) { if(OverW>Nw) { $("BigBearLoading").style.width=Nw+"px"; $("BigBearLoading").style.left=(document.documentElement.clientWidth-Nw)/2+"px"; } if(OverH>Nh) { $("BigBearLoading").style.height=Nh+"px"; $("BigBearLoading").style.top=(document.documentElement.clientHeight-Nh)/2+"px" } window.setTimeout("OpenNow()",10) }else{ Nw=10;Nh=10;ChangeH=50;ChangeW=50; $("BigBearLoading").innerHTML=ChangeDesc; } } function CloseDiv() { $("BigBearLoading").style.display="none"; } 2、css部分 body {margin:0px} #BigBearLoading {position:absolute;z-index:10;left:10px;top:10px;border:1px #666666 solid;background:#eeeeee;width:10px;height:10px} 3、div部分 创建一个span，包含下面的内容： onmouseover=“javascript:OpenDiv(500,300,‘有时间请经常来看看大熊工作室噢’)” onmouseout=“javascript:CloseDiv()” 请用鼠标移动到这里 创建一个div，设置为： id=“BigBearLoading” ondblclick=“this.style.display=‘none’” style=“DISPLAY: none”

相信很多人都遇到这样的问题：如何利用css样式来控制，网站查了资料，发现都是给出下面这样的解释： .txt {width:120px; overflow:hidden; text-overflow:ellipsis;} “overflow:hidden;”是隐藏显示不下的部分； “text-overflow:ellipsis;”是尾部跟随省略号。 这里一定要记住，必须设置宽度和行高，否则无法实现这样的效果。 上面这样的做法没有考虑浏览器直接的兼容，应该做成这样： *html ul.aboutnews li { width:46%;height:22px;float:left;line-height:180%;word-break:break-all;overflow:hidden;} *+html ul.aboutnews li { width:46%;height:22px;float:left; line-height:180%;word-break:break-all;overflow:hidden;}

IE下页面只有一个text回车将自动submit提交 这是IE的一个缺陷，不过还是有解决的办法的： 1、解决办法一：再增加一个text，然后隐藏这个text； 2、解决办法二：可以在这个页面的form里面加上onsubmit=“return false;” 。

想必很多人都知道JQuery框架了，现在有很多JavaScript的框架，但是真正非常优秀的框架还属JQuery，从微软在VS2008中专门为其提供只能提示这一侧面可以看得出来它的分量。 jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多javascript高手加入其team，包括来自德国的Jörn Zaefferer，罗马尼亚的Stefan Petre等等。　jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。 它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。 jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。 jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。 jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。 Jquery是继prototype之后又一个优秀的Javascrīpt框架。对prototype我使用不多，简单了解过。但使用上jquery之后，马上被她的优雅吸引住了。有人使用这样的一比喻来比较prototype和jquery：prototype就像Java，而jquery就像ruby.实际上我比较喜欢java（少接触Ruby 罢了）但是jquery的简单的实用的确有相当大的吸引力啊！在项目里我把jquery作为自己唯一的框架类包。使用其间也有一点点心得，其实这些心得，在jquery的文档上面也可能有讲，不过还是记下来，以备忘罢。 下面是最为简单的JQuery的应用： 告别代码重复的时代 还记得$()这个东西吧？prototype还是DWR都使用了这个函数代替document.getElementById()。没错，jquery也跟风了。为达到document.getElementById()的目的，jquery是这样写的：var someElement = $("#myId"). jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。 jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。 jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。

JQuery是一个非常酷的JavaScript框架，极大地简化了JavaScript的操作，本人这段时间开始学习它，并且用它，现在把它当成了一个类似.NET框架的开发类库了，每一个项目我都需要引用到这个框架。 这篇日志我提供JQuery下载地址，并且持续更新，希望给各位带来方便： 1、JQuery下载地址（1.3.2版本——最新发布版本） 精简版本： http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.min.js 完全版本：http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.js VS2008职能提示版本：http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2-vsdoc2.js 2、JQuery下载地址（1.3版本） 精简版本： http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.min.js 完全版本：http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.js VS2008职能提示版本：http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3-vsdoc.js 3、JQuery下载地址（1.2.6版本——这是现在用得最多的版本） 精简版本： http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js 打包版本：http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.pack.js 完全版本：http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.js VS2008职能提示版本：http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6-vsdoc.js

JQuery页面加载顺序 JQuery在页面加载顺序方面提供了更好更合理的操作，在JavaScript中，window.onload事件下的代码是必须在所有页面元素都加载完成之后才执行（注意：包括了图片和文件等），可是有的时候我们希望hmtl代码加载完成之后（即DOM加载完成之后）就执行某些代码，在JQuery里有这样的函数： $(document).ready(function(){ alert(“hello”); }); 上面的代码在Dom结构被浏览器解析之后就可以执行了。当然也有其他人使用JavaScript来编写一些函数可以实现这样的功能，只不过JQuery更好。另外，使用这样的函数还有一个好处，就是可以基于同一个页面在加载结束之后执行多个脚本函数。

去年参加了雅虎（Yahoo）举办的第二届D2网站Web前端技术会议，这是我第一次参加这样的技术会议，很多东西听得似懂非懂，周爱民讲web前端基本设计模式，还推荐了他自己写的一本书关于Javascript核心编程的书籍，其他几个都是雅虎的大牛在讲ajax应用，很可惜没有听到实质性的知识。 这里顺便介绍一下什么是D2，D2(Designer & Developer Frontend Technology Forum)号称是中国所有前端开发者的节日，包括前端设计师，前端开发工程师，和所有对前端技术感兴趣的人，D2目的是推动国内前端技术的发展，为国内前端 从业者提供一个自由交流，学习探讨技术的平台，促进国内行业标准跟国际的融合，发掘前端技术可以创造的更大价值。 第一届是淘宝网举办，也是他们发起的，第二届是由雅虎举办，第三届是土豆网举办，只参加过第二届，不知道后来举办得怎么样，不过通过这次的会议，至少明白了Web前端优化的重要性，也明白了像JavaScript、div、css这样的技术是很有讲究的。