Kily's Blog

JavaScript实现菜单视觉标识

kily — Sat, 04 Sep 2010 04:03:58 +0000

以前写过一篇文章也是关于视觉标识的：《CSS实现视觉标识》。在这篇文章中我介绍了用CSS来实现视觉标识的效果，但是里面的DEMO只有一个页面，而且链接没有动态的参数。

很多时候我们在实际开发的时候都是在同一个页面而且有如：“article.php?id=10”这样的样子，看下面这段代码：

index


video


music


message

当我们想用JS来在当前页面写代码实现点击后变色，可能你会想到下面这段JS代码：

document.getElementsByTagName("a").onclick = function(){
this.style.backgroundColor = "red";
}

但是这段代码确没有达到效果。

原因：

因为只有一个页面而且每个链接都是有参数的，点击任何一个链接都会重新载入页面。DOM重新载入，那么JS的效果就不起作用了。

解决方法：

在页面每次载入时取出URL的参数，对应的给每个A链接加上ID。页面载入时判断参数与ID是否一致，一致就给链接动态加上样式Class。正确的JS是这样写的：

var str = window.location.search.substring(4,6); //取参数ID号
var menu = document.getElementById("menu");
var menuA = menu.getElementsByTagName("a");       //获取所有链接
for ( var i = 0; i    var menuAID = menuA[i].getAttribute("id").substring(1,3);
    if ( str == menuAID ) {
        menuA[i].className = "active";            //动态加上class
    }
}

查看DEMO效果

特别感谢青色和亚当学院3群的同学提供思路。

随机文章

BeiJing I’m coming

kily — Wed, 14 Jul 2010 01:20:35 +0000

7月十九号的火车，兄弟四个一起！一起北漂

求工作，求祝福

求此文章无spam . . .

点名游戏，下一个就是你哦

kily — Mon, 28 Jun 2010 01:24:37 +0000

我勒个去，居然让wuleilei单独点到了。作为这个游戏命运的决定者，我表示鸭梨很大哦。再忙也得和大家玩下放松放松哈。貌似能被我点的人也不多，别来了不鸟那就玩儿大了^!^

入正题…

规则：

1.认真如实的回答下面提出的问题
2.仔细回顾自己博客的成长历程，完成1
3.能煽情的最好煽情
4.可以自己继续添加问题和修改问题
5.自己回答之后将此活动转交给你友情链接中的3个链接，并督促其完成答题并继续传递下去
6.接到点名的尽快完成，然后交给其他人
7.此活动没有什么利益的，只是一种回忆
8.被点的人复制规则以下部分
9.不要回点哦

活动内容：

1.你的博客存在多久了啊？还记得是哪天正式上线的吗？

答：看下存档就很清楚了，2008年5月19日，不过我博客早期是PJblog然后转型到WordPress，最早写的日志貌似已经找不到了。

2.你会把你的博客坚持下去吗？

答：Absolutely Yes。只要我从事互联网行业。

3.如果说有一天你要放弃博客了，你认为会是什么原因啊？

答：2012世界末日。

4.你做独立博客之前有没有过其他博客啊？

答：有，新浪博客。哈哈一般人我真的不告诉他，今天爆料下：http://blog.sina.com.cn/zhouqili早都没用过了，只是当时用“镜缘思雪”这个昵称，Google了下还找到了。我现在知道了第一篇博客日志是在2006年8月30日 20:03。当时国内的BSP博客很火，写完第一篇日志的时候那个兴奋劲儿就不用说了！

5.你还记得你第一个域名是什么吗？

答：理论上应该是jingyuansixue.cn要么就是zhouqili.cn那时cn就一块钱。

6.你的第一个域名的意思是什么呢？

答：我的名字和当时的昵称。

7.还记得你的第一个友情链接是谁吗？你们现在关系怎么样？

答：石头的PJ博客，我始终印象很深。他的博客域名是：http://www.x-ican.cn（访问不了了），是他激起了我对网页设计和博客的兴趣，不过在我刚开始写博客时他就工作了。有他QQ但始终处于不在线状态。

8.你的博客收到第一条评论的时候，你是什么心情啊？

答：只有激动和兴奋。

9.为博客花掉了自己很多的时间，你后悔过吗？

答：丫的马上就要靠这个吃饭了，怎么会后悔呢！

10.你认为通过博客结交的朋友可靠吗？你相信他们吗？

答：这个不能用可靠来形容，博客我始终相信：有来无往往非礼也。至于是否值得相信我觉得大致心里都有数吧！

11.如果你的博客里的朋友某天因为特殊原因，或是你自己由于特殊原因，要离开这个圈子，你还会回来看看吗？

答：除非我从事非互联网行业否则一定有来往，PS.这个假设貌似假不成立哦。

12.你建博客的目的是什么？

答：提升自己的专业水平，结交朋友。记录自己的成长。

13.现在你管理博客的目的发生变化了吗？

答：永远不变，想让我博客上放广告门儿都没有。

14.博客给你带来的快乐多吗？

答：当然，不仅有快乐还有很多收获，比如前两天有人看我博客写的不错让我接他们的网站项目，也有人向我介绍工作。在这里我得感谢他们对我博客的肯定和对我的信任。

15.你现在感觉你一天不上博客的话，会舒服吗？

答：有一天不上博客的情况，那就是：停电。没电没网在宿舍会舒服吗？

16.在你的博客里，有你真实世界里的人和你交流吗?

答：有一个，回忆很痛苦不提。

17.你现实圈子里的朋友有几个知道你有博客的？

答：屈指可数。几乎是零。

18.你想对你博客里的朋友说些什么？

答：只要你不忘记我，我就永远爱你们。

19.你现在的身份是什么？工作了？还是学生？

答：状态：在校等毕业证。马上要找工作了，欢迎大家给推荐哦。

20.你会将活动继续下去吗？

答：第一次参加这游戏，肯定会的。

21.你要把此活动转交给谁呢？

答：
WoodyHouse（文字如诗，诗如其人吧）
青色’s blog（我第一个喜欢的技术博客）
我的职业生涯（貌似很忙，但愿他有时间）

JavaScript 正则表达式学习笔记<2>

kily — Sun, 27 Jun 2010 11:23:23 +0000

那么今天继续了，上次我们熟悉了一下关于JavaScript正则表达式的一些基本匹配方式，今儿个咱来学习下String对象的一些和正则表达式有关的方法，关于这个应该不用多说，常用于表单的字符串验证。

1.String对象的replace()方法

String对象最基本的方法之一，它用于替换目标字符串中的某个字符。比如：

var s = "—Hello11—";    //将这个字符串中的-替换成#
alert(s.replace("-","#")); //返回#–Hello11—而不是###Hello11###

    //要替换所有的-号我们可以用正则了

alert(s.replace(/-/,"#"))   //用/-/来替换#,结果与上面一样，原因是你忘了加上匹配模式

alert(s.replace(/-/g,"#")); //这样就可以将字符串的所有的-替换成#了

    //如果我想把目标字符串替换成#Hello11#该怎样写正则呢？

alert(s.replace(/-+/g,"#")); //+是什么作用请查上篇笔记

String对象正则实现trim（去空格）效果

var s = "   Hello   ";
alert("|"+s.replace(/^\s+/,"")+"|"); //替换前面的多个空格：^
alert("|"+s.replace(/\s+$/,"")+"|"); //替换后面的多个空格：$ 注：加上“|”易辨认

    //整合到一个trim函数里面去,调用此方法时可以去掉字符串两边的空格

function trim(s){

    var re1 = /^\s+/,re2 = /\s+$/;

    s= s.replace(replace(),"");

    return s.replace(re2,"");

}

2.String对象的split()方法

此方法将目标字符串用某字符分割开，并返回一个数组对象。基本用法如下：

var s = "12,34,56";
var arrs = s.split(",")
alert(arrs[0]+"\n"+arrs[1]+"\n"+arrs[2]);

小扩展：当目标字符串是用户输入的一些字符，比如生日。我们该如何分别获取他的年、月、日。

var s = "1988-8-8"; //这里是用户输入的数据
var date = s.split("-");
var year = date[0],month = date[1],day = [2];
alert("您出生于："+year+"年"+month+"月"+day+"日");

对于一些“不按常理出牌”的用户，我们可以用正则去搞定，比如：

var s = "1988- 8 -*8"; //比如用户这样输入了数据
var date = s.split(/[^0-9]+/); //脱字符^放在[]中间表示匹配相反内容

//这个正则表示匹配多个非数字字符，用其分割
var year = date[0],month = date[1],day = [2];
alert("您出生于："+year+"年"+month+"月"+day+"日");

3.String对象的search()方法

这个方法表示查找字符串中与之匹配的字符并返回其下标值，没找到匹配值时返回-1 。比如：

var s = "My age is 18.";
alert(s.search("1"));//返回10,search方法与indexof方法的区别在于search可以使用正则

4.String对象的match()方法

这个方法类似于正则中的exec方法，如：

var s = "Ubuntu 8.10";
var re = /^([a-z]+)\s+(\d+)\.(\d+)/i; //正则中的.表示匹配任意字符，这里要转义它
var arrs = s.match(re);
alert("name:"+arrs[1]+"\nversion:"+arrs[2]+"\nsub-version:"+arrs[3]);

休息一下..

JavaScript正则表达式学习笔记<1>

kily — Thu, 24 Jun 2010 04:38:46 +0000

刚刚收到李炎恢老师的弟子CJ写的一部JavaScript+Ajax+JQuery视频教程，对于我这种刚入门级的菜菜来说真是雪中送炭呀！今天看到了正则表达式章节，感觉老师讲得非常不错，做点笔记与大家分享，当然也做个免费广告哈：如果想购买此视频教程的话点击这里。绝对物超所值，现在网络上最新的关于JS的视频教程也就是这个了哦。

1.什么是正则表达式

正则表达式是由普通字符（如a到z）以及特殊字符（称为元字符）组成的文字模式，该模式描述在查找文字主体时待匹配的一个或者多个字符串。作为一个模板，将字符模式与所搜索的客串进行匹配。

关于元字符与匹配内容可以参考这张表：正则匹配表

2.怎么创建正则表达式

var re = new RegExp();//RegExp是一个对象,和Aarray一样
//但这样没有任何效果,需要将正则表达式的内容作为字符串传递进去
re = new RegExp(“a”);//最简单的正则表达式,将匹配字母a 可简写为“var re = /a/”
re = new RegExp(“a”,”i”);//第二个参数,表示匹配时不分大小写

RegExp构造函数第一个参数为正则表达式内容，而第二个参数则为可选项标志，而且可以组合使用。可选标志如：

g （全文查找）
i （忽略大小写）
m （多行查找）

var re = new RegExp(“a”,”gi”);

//匹配所有的a或A。可简写为“var re = /a/gi”

3.正则表达式对象的方法

三种方法分别是test，exec，compile：

test：返回一个Boolean值，它指出在被查找的字符串中是否存在模式。
exec：用正则表达式模式在字符串中运行查找，并返回包含该查找结果的一个数组。
compile：把正则表达式编译为内部格式，从而执行得更快。

4.正则表达式的属性

常用的有以下几种：

source：返回表达式文本的复本。只读。
lastIndex：返回字符位置，它是被查找字符串中下一次成功匹配的开始位置。
$1…$9：返回九个在模式匹配期间找到的、最近保存的部分。只读。
input ($_)：返回执行规范表述查找的字符串。只读。
lastMatch ($&)：返回任何正则表达式搜索过程中的最后匹配字符。只读。
leftContext ($`) ：返回被查找的字符串中从字符串开始位置到最后匹配之前的位置之间的字符。只读。
rightContext ($’) 返回被搜索的客串中从最后一个匹配位置开始到字符串结尾之间的字符。只读

5.动手测试正则表达式是如何工作的

用test方法测试是否匹配模式：

var re = /he/; //最简单的正则表达式,将匹配he这个单词
var str = “he”;
alert(re.test(str)); //用test方法测试是否匹配，返回true
str = “we”;
alert(re.test(str)); //false
str = “HE”;
alert(re.test(str)); //false
re = /he/i; //加上可选标识i(ignoreCase)来忽略大小写
alert(re.test(str)); //true
str = “yeah~he loves her”;
alert(re.test(str)); //true

脱字符（^）开头匹配：（查表看看什么是脱字符）

re = /^he/i;
alert(re.test(str)); //false,因为he不在str最开始
str = “He is a good guy!”;
alert(re.test(str)); //true

美元符（$）末尾匹配：

re = /^he$/i; //$表示字符结束位置
alert(re.test(str)); //返回false说明”he is a good guy”不是以he结尾
str = “He”;
alert(re.test(str)); //返回true

（\s）空白字符匹配：（包括空格，制表符，换行，换页等）

str = “user Name”;
re = /\s/;
alert(re.test(str)); //str=”user\nName”也将返回true

方括号（[ ]）范围匹配：

re = /^[a-z]/i; //匹配开头为a~z中任意字符并且不区分大小写
str = “variableName”;
alert(re.test(str)); //true
str = “123variableName”;
alert(re.test(str)); //false

用exec方法测试哪些字符匹配了模式：

var osVersion = “Ubuntu 8″;
var re = /^[a-z]+\s+\d+$/i; //+表示字符至少出现1次，\d表示一个数字

//这个正则表示：匹配以a~z中任意字母为开头、至少有一个空白字符、至少有一个数字结尾的字符串
alert(re.test(osVersion));   //true

re = /^[a-z]+\s+\d+$/i;
arr = re.exec(osVersion);
alert(arr[0]);     //将osVersion完整，因为它刚好匹配re
//我们只想取出数字..
re=/\d+/;
arr = re.exec(osVersion);
alert(arr[0]);     //返回8

复杂一点的子匹配：

re = /^[a-z]+\s+(\d+)$/i;    //用()来创建子匹配
arr = re.exec(osVersion);
alert(arr[0]+”\n”+arr[1]);   //arr[1]为第一个子匹配也就是版本号8

osVersion = “Ubuntu 8.10″;
re = /^[a-z]+\s+(\d+)\.(\d+)$/i;    //.是正则中的元字符需要转义即“\.”表示输出一个.号
arr = re.exec(osVersion);
alert(“完整版本：”+arr[0]+”\n大版本号：”+arr[1]+”\n字版本号：”+arr[2]);

休息一下精彩继续…

漂亮的JQuery可编辑表格

kily — Tue, 01 Jun 2010 01:42:11 +0000

可编辑表格在网页开发中非常常见，尤其是与后台做Ajax应用。花了点时间学习了下这种表格的制作方法，有JQuery的时候一切都是那么简单。如果换成纯JavaScript的话一系列的DOM操作的确相当繁琐，JQuery中实现起来却异常简单。

核心JQuery代码在这里：

$(function(){
    //隔行换色
    $("tbody tr:odd").css("background-color","#eee");
    var numId = $("tbody td");
    numId.click(function(){
        var tdIns = $(this);
        if ( tdIns.children("input").length>0 ){ return false; }

        var inputIns = $(""); //需要插入的输入框代码
        var text = $(this).html();

        inputIns.width(tdIns.width()); //设置input与td宽度一致
        inputIns.val(tdIns.html()); //将本来单元格td内容copy到插入的文本框input中
        tdIns.html(""); //删除原来单元格td内容
        inputIns.appendTo(tdIns).focus().select(); //将需要插入的输入框代码插入dom节点中
        inputIns.click(function(){ return false;});
        //处理Enter和Esc事件
        inputIns.keyup(function(event){
                var keycode = event.which;
                if( keycode == 13 ){ var inputText = $(this).val(); tdIns.html(inputText);}
                if( keycode == 27 ){ tdIns.html(text);}
        });
    });
});

效果点这里

鼠标点击单元格时单元格变成可一个文本框，可用enter和esc控制操作完成与否。

嗯。效果挺不错的吧！废话一句漂亮与否还得看CSS哦！

从HTML5的角度重新思考表单元素

kily — Fri, 21 May 2010 13:53:18 +0000

这是一篇我在nettuts上看到的一篇文章，写得挺不错的。原文在这里：Rethinking Forms in HTML5 最近网上HTML5和Flash的口水战也不少，做为一个合格的前端了解些新知识还是很有必要的。

先来看一个传统的表单：

这个表单看起来相当臃肿，而且不利于特殊人群阅读网页内容。在新的HTML5规定中会有一些增加一些新的属性来完美它们，如：autofocus, autocomplete, list, required, multiple等。

自动聚焦（autofocus）

这些新属性的作用就是让它们相对的好理解。例如：

autofocus>

这种情况的要点就在于一旦页面加载，这个文本输入框就自动聚焦，使用户的输入更加便捷。

autocomplete="off">

这种情况，通过关闭表单自动完成功能让浏览器无法显示自动完成的效果。这就避免了因自动完成功能而输入错误内容的情况。

数据表(list)

list="url_list">
<datalist id="url_list">

这个list属性的确很酷，当你用鼠标点击这个输入框时下面会自动显示出datalist的内容，通过点击它可以将内容自动添加到上面的输入框。这个效果如果要用JS制作的话就会相当麻烦了。注：建议使用新版的opero浏览些效果，如下：

多选框(multiple)

multiple>

multiple属性让大家可以调用页面中datalist中的内容(如上)，这双节省了我们用JS去写此功能的时间。

必填项(required)

required>

此属性表明该项目为必填项目，提交表单时如果为空则自动给出提示！完全不需要另写JS。

正则(RegEx)

pattern="[0-9][A-Z]{3}">

此属性会检查输入内容和目标正则表达式的匹配情况。

验证(Validation)

range" min="1" max="10" step=".5" value="5" >

当输入框类型为range时就可以定义内容的范围等相关项目。

当然以上提到的这些属性并不是每个浏览器都支持的，具体情况看下图：

更多精彩内容请阅读原文，这里只做抛砖引玉的介绍。

随机文章

又一个仿写的页面

kily — Thu, 13 May 2010 03:57:05 +0000

嗯！我承认好长时间都没做东西了，有些玩物丧志了！前两天无意中发现手机中国。感觉整个页面效果非常好，用户体验也不错，条理清晰内容丰富。在我看来的确是一个不错的站点！

于是就萌生了仿写的念头。说来也惭愧，我本人感觉自己没什么创新意识，做东西也是东拼西凑，马上要找工作了也没有个像样的作品。所以也就只能仿仿人家的作品了。

虽然是仿，但从很多方面来说仿写比自主设计要难许多。可能做过的同学知道，我这里所谓的仿写绝对不是仅仅扒下HTML和CSS，而是自主写HTML结构与CSS，适当的参考原页面。所以仿写想要仿到100%几乎是不可能的！特别是相对于这类门户性网站。

边看三国边写页面搞了大概五天吧，什么时候开始的都忘了哈！由于东西过多，我也没办法把全部过程记叙下来。放上来也只是做个标记，如果大家有兴趣可以留言讨论！也可以去看看我上次写的文章-仿网易页面：http://www.keelii.com/my-copy-163/

最终效果预览

源代码与素材

现在评价《新三国》还为时过早

kily — Mon, 10 May 2010 02:59:42 +0000

新三国刚一播出就引来大家各种板儿砖，不仅是普通网友不满就连一些知明学者都愤愤而起。昨天我也在迅雷看看上搂完前十五集，个人感觉还是挺不错的，很喜欢饰演陶潜的那个演员，演技很赞。曹操也不错，吕布还行吧。

不知怎么现在一出四大名著剧就会有无数的批评和指责，如果没猜错的话等《新水浒》出来估计也好不到哪儿去。最有争议的无非两点：

1.剧情与历史不符：这一点大多是一些学者或者有一点历史知识的人反映的。我想说的是：《新三国》拍出来是给全国的观众看的不是给你们知识分子看的。不要觉得自己看过《三国志》听过《品三国》就可以随意评价一部剧。如果新三国剧情改成真正的历史那还有什么好看的。你说赤壁之战的主角是周瑜而不是诸葛亮对于平常的观众谁信呀！我个人认为一部好的电视剧只要娱乐观众就行，如果想学习相关知识还是去专业的地方吧。毕竟人家只是一部电视剧而已。

2.人物的演技与台词：到目前为止也就开播了十来集，有很多关键性的人物都还没出场，所以最好不要以偏概全吧！说到台词这一点我感觉也是有所改进的，台词最好还是加上古文的好。可能导拍摄的时候是“照顾”了大多数观众，白话必竟是大家都能听懂的吧！不过没有了古文的渲染历史剧看起来就没有历史的感觉了。

综上所述：我个人觉得《新三国》是一部值得大众平民观看的电视剧，至于此剧具体如何还是得大家斟酌而定。

也说赤壁

Kily's Blog

JavaScript实现菜单视觉标识

随机文章

BeiJing I’m coming

相关文章

点名游戏，下一个就是你哦

规则：

活动内容：

相关文章

JavaScript 正则表达式学习笔记<2>

1.String对象的replace()方法

2.String对象的split()方法

3.String对象的search()方法

4.String对象的match()方法

相关文章

JavaScript正则表达式学习笔记<1>

1.什么是正则表达式

2.怎么创建正则表达式

3.正则表达式对象的方法

4.正则表达式的属性

5.动手测试正则表达式是如何工作的

相关文章

推荐一本JavaScript入门的书

相关文章

漂亮的JQuery可编辑表格

相关文章

从HTML5的角度重新思考表单元素

随机文章

又一个仿写的页面

相关文章

现在评价《新三国》还为时过早

相关文章