说起菜单不同的人可能有不同感受，有的人感觉这个很有趣，做菜单是一件很好玩的事；也有的人会对它不屑一顾，认为这些都是雕虫小技；还有一部分人会认为， 这个完全没必要仔细看，一切都可以拿来主义，网上一搜一大把，焉用亲自去写？ 本文并不是什么很高深的见解或者观点独到，只是想从一些示例 来寻找菜单制作的思路，掌握了思想就可以融会变通，想要什么样的菜单，只要想出来，就可以尝试去实现你的创意。 有人一看，说你用 JavaScript做菜单，这个太不友好了，现在纯CSS的菜单到处都是。的确如此，我blog里也有很多纯CSS菜单的demo，但纯CSS做出来的 菜单毕竟效果很有限，有些创意但靠CSS可能无法实现，用JavaScript写菜单也是一种尝试，可以实现很炫的效果（网上JavaScript模仿 flash的效果很多）。 但由于JavaScript里事件具有冒泡的特性，在处 理菜单的时候，往往被冒泡搞的很头疼，特别是给菜单加上动画特效之后，更是让很多人郁闷，有人可能会用timer或者坐标判断来解决这个问题，但其实都不 理想，网上还有老外写的一个jQuery插件，专门用于解决这个问题，可以说JavaScript做菜单并不是一件小事。 好 了，闲话少说，开始第一步，做一个简单的下拉菜单： 用到的HTML代码： <ul id=”nav”> <li> <a href=”#”>江苏省</a> <div> <a href=”#”>南京</a> <a href=”#”>苏州</a> <a href=”#”>无锡</a> <a href=”#”>常州</a> <a href=”#”>镇江</a> <a href=”#”>徐州</a> </div> </li> <li> <a href=”#”>浙江省</a> <div> <a href=”#”>杭州</a> <a href=”#”>宁波</a> </div> </li> <li> <a href=”#”>福建省</a> <div> <a href=”#”>厦门</a> <a href=”#”>福州</a> <a href=”#”>泉州</a> </div> [...]
IE6对JavaScript鼠标事件处理的小Bug
以下示例是IE6的bug，如果要查看bug，请使用IE6，经过思考和测试还是 haslayout的问题，同时谢谢丸子同学。 今天在测试鼠标事件的时候，偶然间发现了这个问题，一个完全自适应尺寸的 dom对象如果内嵌于另外一个dom对象中，IE6下此对象不响应鼠标事件（应该也会有其它事件不响应），示例如下： <style type=”text/css”> p{padding:10px; background:#333333;} </style> <div> <p></p> <!–这个P在IE6下对鼠标事件无反应 –> </div> <script type=”text/javascript”> document.getElementsByTagName(“p”)[0].onmouseover=function(){alert(“Mouseover Event Happened”)} document.getElementsByTagName(“p”)[0].onclick=function(){alert(“Mouseclick Event Happened”)} </script> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <style type=”text/css”> p{padding:10px; background:#333333;} </style> <title>IE_Event_bug</title> </head> <body> 请对比IE6和其它浏览器。 <div> <p></p> </div> <script type=”text/javascript”> document.getElementsByTagName(“p”)[0].onmouseover=function(){alert(“Mouseover Event Happened”)} [...]
JavaScript正则表达式
正则表达式是基于grep和ed这些Unix管理工具发展而来的，使用正则表达式可以使字符串处理变得更加方便快捷，以下内容主要是JavaScript 正则表达式的一些基础知识汇总： 1. JavaScript正则表达式的实现 JavaScript 对正则表达式的支持是通过ECMAScript中的RegExp类实现的，RegExp对象的构造函数可以带一个或两个参数。第一个参数描述需要进行匹配 的模式字符串，第二个参数指定了额外的处理指令。 示例代码： 程序代码 var re=new RegExp(“test”,”gi”); 实现方法二：使用Perl风格的语法(较常用) 程序代码 var re=/test/gi; //这种方式和上面是一样的效果 2. 使用RegExp对象的方法 RegExp对象主要方法 有：RegExp.test(String) RegExp.exec(String) String.match(RegExp) String.search(RegExp) 2.1 test()方法 test()方法，如果给定字符串匹配这个模式， 就返回true，否则返回false。 示例代码： 程序代码 var re=/test/; alert(re.test(“this is the test content”)); //output “true” 2.2 exec()方法 exec()方法和test()用法类似，不过 exec返回的是一个数组，并且只有一个条目，既是第一次的匹配。 示例代码： 程序代码 var re=/test/gi; alert(re.exec(“this is the test content”)); //output “test” 2.3 match()方法 match()方法也是返回一个数组，不过使用方 法和上面有区别，match的使用方法为String.match(RegExp)。 示例代码： 程序代码 var [...]
Javascript限制输入字符数
高级程序设计关于表单的章节，给出了一个限制textarea输入字符个数的函数，不过那个例子在实际中会存在问题，结合实际情况进行了一下改进。 原来的程序： <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <style type=”text/css” media=”screen”> body{ margin:0px; padding:0px;} div{ width:400px; margin:0px auto;} div h3{ background:#CCCCCC; font-size:14px; font-weight:bold; text-align:center; line-height:22px; margin:6px 0px; padding:0px;} div textarea{ width:388px; height:120px; border:#999999 1px solid; margin:0px; padding:0px; font-size:12px; padding:5px; line-height:16px;} div p{ font-size:12px; margin:0px; line-height:22px;} [...]
JavaScript代码优化
高级程序设计提供的发布JavaScript代码时的优化建议，总结一下： 一、字节数优化 1. 删除注释(版权及法律声明部分应保留) 2. 删除制表符和空格 3. 删除所有换行 4. 替换变量名 示 例： function show(name,age){alert(name+”,”+age);} 优化： function s(n,a){alert(n+”,”+a);} 5. 其它减少字节数的方法 5.1 替换布尔值 用0和1替代false和true 5.2 缩短否定 用!a代替a!=b 5.3 使用字面量 用[]代替new Array(),用{}代替new Object() 不过以上优化都可以通过软件实现，目前很有多压缩工具。 二、执行效率优化 根 据测试数据：Javascript比编译型的C慢5000倍，比解释型的Java慢100倍，比解释型的Perl慢10倍。 1. 关注范围(尽可能减少函数的多级调用) 示例： function a(){} function b(){a();} function c(){b();} c(); //增加了函数引用的复杂性，同时也影响执行效率 2. 尽可能使用局部变量 3. 避免with语句 4. 选择正确的算法 5. 反转循环 示 例： for(var i=0;i<inputs.length;i++){ [...]
Javascript继承的实现方式
Javascript非真正的OOP，不过随着开发人员对JavaScript中this关键字的了解，也逐渐构造出了OOP的模式，主要方式有以下几 种：（参考高级程序设计） 1. 对象冒充 示例代码： 程序代码 <script type=”text/javascript”> function Person(personName){ this.name=personName; this.sayName=function(){ alert(“My name is “+this.name); } } function Man(name,age){ this.Method=Person; // 把Person的构造函数传递给this.Method，相当于this.Method=function Person(personName){this.name=personName;…} //alert(this.Method); this.Method(name); delete this.Method; this.age=age; this.sayAge=function(){ alert(“My age is “+this.age); } } var tom=new Man(“tom”,12); tom.sayName(); //outputs “My name is tom” tom.sayAge(); //outputs “My age is 12″ </script> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML [...]
HTML5动画(HTML5 Video Destruction)
演示地址(请使用伟大的Firefox浏览器或 Chrome) 开始以为真的是html5+Canvas+javascript做的逐帧动画，被吓到了，这效果直逼3D动画，后来看了一下源代码，原来是视频文件，只不 过使用了html5标签以及Canvas+Javascript的特效，不过效果真的很不错的，这个与flash播放器比，还真有分量的。 相 关代码： 程序代码 <div style=”display:none”> <video id=”sourcevid” autoplay=”true” loop=”true”> <source src=”BigBuckBunny_640x360.mp4″ type=”video/mp4″/> <source src=”BigBuckBunny_640x360.ogv” type=”video/ogg”/> </video> <canvas id=”sourcecopy” width=”640″ height=”360″></canvas> </div>
Javascript实现整站黑白效果(兼容IE/FF等浏览器)
今天在网上看到有人推荐的一个不错的方法，试了一下，效果还是可以的，可以自定义让网页的某一部分变成灰度颜色(黑白)，演示效 果：http://james.padolsey.com/demos/grayscale/ 使用方法： 1. 首先在网页中引入grayscale.js文件。 2.执行grayscale函数即可。 示例代 码： 程序代码 grayscale(document.body); //整站变成灰色
Javascript事件(Event)中IE与标准DOM的比较
说是IE与DOM的比较，其实还是浏览器之间的比较，众多的浏览器中，IE独树一帜，并且占有大部分用户市场，后来的标准DOM虽然不少优点之处，但毕 竟一般用户不关心也不知道这些，代码编写过程中，往往需要兼顾多个浏览器。 1.事件流的区别 IE采用冒泡型事件 Netscape使用捕获型事件 DOM使用先捕获后冒泡型事件 示 例： 程序代码 <body> <div> <button>点击这里</button> </div> </body> 冒 泡型事件模型： button->div->body (IE事件流) 捕获型事件模型： body->div->button (Netscape事件流) DOM事件模 型： body->div->button->button->div->body (先捕获后冒泡) 2. 事件侦听函数的区别 IE使用: [Object].attachEvent(“name_of_event_handler”, fnHandler); //绑定函数 [Object].detachEvent(“name_of_event_handler”, fnHandler); //移除绑定 不过IE中attachEvent() 绑定函数时，无法得到this的正确指向，需要对它进行补充改进，改进后的代码在后面。 程序代码 <p></p> document.getElementsByTagName(“p”)[0].attachEvent(“onmouseover”,function(){alert(this.tagName)}); //会返回undefined，这时候this指向window DOM使用： [Object].addEventListener(“name_of_event”, fnHandler, bCapture); //绑定函数 [Object].removeEventListener(“name_of_event”, fnHandler, bCapture); //移除绑定 bCapture 参数用于设置事件绑定的阶段，true为捕获阶段，false为冒泡阶段。 示例代码： 程序代码 function addEventHandler(object,eventType,fnHandler){ if(object.addEventListener){ //DOM object.addEventListener(eventType, fnHandler, false); [...]
Javascript_DOM表格排序
表格排序的东西，网上相关的内容也很多，并且有成熟的类，功能很全，“高级程序设计”里有个例子，参考做了一个简单的，其实原理比较简单，重要的是思路 和方法，另外程序编写也应该考虑到效率问题，如果数据量很大，程序的效率问题就很明显了。 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <style type=”text/css” media=”screen”> table{ width:500px; margin:0px auto; text-align:left; line-height:22px; font-size:14px; text-align:center; font-family:Tahoma, “宋体”, “微软雅黑”, Arial, MingLiU;} th{ background:#999999; font-size:12px; cursor:pointer; } th.selected{ background:#3C83BD; color:#FFFFFF;} th a{ text-decoration:none;} td{ background:#CCCCCC;} td span{ display:block; width:14px; height:14px; overflow:hidden; margin:0px auto;} [...]
