HTML：

<h1 id="title">This a H1 Title, isn't it?</h1>
<div class="clear"></div>
<input type="button" id="btn-1" value="开始" />
<input type="button" id="btn-2" value="结束" />

木有什么好说的，主要看JS。

JavaScript:

window.onload = function () {
	var getID = function (id) {
			return document.getElementById(id)
		},
		startBtn = getID("btn-1"),
		stopBtn = getID("btn-2"),
		H1 = getID("title");

	function ScrollText(s, ele, t) {
		/**
		 * 创建一个文字滚动对象
		 * s (要滚动的文字)
		 * ele (HTML节点对象)
		 * t (滚动时间隔)
		 */
		this.s = s.split(""); //将传入字符串分割成数组
		this.ele = ele;
		this.t = t || 300; //默认值为300毫秒
	}
	ScrollText.prototype = {
		start: function () { //开始滚动方法
			var s = this.s,
				ele = this.ele;
			//alert(s.shift());
			clearInterval(this.interval);
			this.interval = setInterval(function () {
				s.push(s.shift()); //将字符串数组第一个字符剪切并添加到数组末尾
				//类似挤牙膏^!^
				ele.innerHTML = s.join("");
			}, this.t);
		},
		stop: function () { //结束滚动方法
			clearInterval(this.interval);
		}
	}

	var st = new ScrollText("这是可以设置的滚动文字哦！", H1, 500);

	//“实例化”对象
	startBtn.onclick = function () {
		st.start();
	};
	stopBtn.onclick = function () {
		st.stop();
	}

}

该说的都在注释里。好吧，不想看代码 看什么？看Demo呀！点击这里查看

涉及到下拉菜单制作的方法最核心的还是鼠标移动到上面的处理。下面是调用wp_nav_menu()函数后的HTML结构(做解释用)：

<div class="menu-菜单名-container">
	<ul class="menu" id="menu-菜单名">
		<li class="menu-tiem">
			<a href="#">菜单项目1</a>
			<ul class="sub-menu">
				<li><a href="#">子菜单项目1-1</a></li>
				<li><a href="#">子菜单项目1-2</a></li>
				...
			</ul>
		</li>
		<li><a href="#">菜单项目2</a></li>
	</ul>
</div>

这是一种很经典很优雅的导航HTML代码，在IE6以上以及标准浏览器中要实现下拉效果只用一句CSS就能搞定。比如下面的示例代码(可自定义)：

.menu li a { float:left; height:35px; width:100px;/*菜单高度与宽度*/ line-height:35px; text-align:center;  color:#ccc; text-align:center; }
.menu li { float:left; height:1%; background:#000; }
.menu-sjys-container { position:absolute; z-index:1000;}
.menu li ul li { clear:both; border-bottom:1px solid #333; border-right:none;  }
.menu-item  { position:relative; border-right:1px dotted #333; }
.menu-item:hover>.sub-menu{ display:block; /*下拉效果只用到这一段代码*/ }
.sub-menu { position:relative; left:1px; margin:0; z-index:101; display:none;/*一般情况下隐藏子菜单*/ }
.sub-menu ul.sub-menu { position:absolute; left:100px; top:0;}

上面的这两段代码在IE6以上以及标准浏览器中表现的很完美，原因是IE6这种老浏览器还不支持任何标签的伪类属性，即htmlTag:hover。所以为了兼容我们又不得不用JS来实现(纯CSS亦可)。我大概写了一段JS可以勉强达到效果，但不知道为什么在IE中切换菜单时会有闪动的感觉，这个得求教JS高手了哈。

<!--[if lt IE 7]> <script type="text/javascript">
//<![CDATA[
/*导航联动效果*/
(function () {
	function getElementsByClass(searchClass, node, tag) {
		var classElements = new Array();
		if (node == null) node = document;
		if (tag == null) tag = '*';
		var els = node.getElementsByTagName(tag);
		var elsLen = els.length;
		var pattern = new RegExp("(^|\\s)" + searchClass + "(\\s|$)");
		for (i = 0, j = 0; i < elsLen; i++) {
			if (pattern.test(els[i].className)) {
				classElements[j] = els[i];
				j++;
			}
		}
		return classElements;
	}
	function hoverSubMenu(node, flag) {
		node.onmouseover = function () {
			var subMenu = getElementsByClass("sub-menu", this)[0];
			if (subMenu) {
				subMenu.style.display = "block";
			}
		}
		node.onmouseleave = function () {
			var subMenu = getElementsByClass("sub-menu", this)[0];
			if (subMenu) {
				subMenu.style.display = "none";
			}
		}
	}
	var menuItems = getElementsByClass("menu-item");
	for (var i = 0; i < menuItems.length; i++) {
		hoverSubMenu(menuItems[i], i);
	}
})();
//]]>
</script>
<![endif]—>

问题应该出在不同浏览器对JS中onmouseover事件处理的方法上。但我还没有弄清楚，希望有“大湿”指导下哈。

问题在于W3C对onmouseout事件处理方法不是很理想，微软IE支持的onmouseleave方法确可以正常工作。

那么今天继续了，上次我们熟悉了一下关于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]);

休息一下..

刚刚收到李炎恢老师的弟子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]);

休息一下精彩继续…

很惭愧学习JavaScript很长时间了但一直都还是入门阶段，先前也介绍过一本JS方面的书：《推荐一本JavaScript方面的书》。与此书相比，这次推荐给大家的书《JavaScript DOM编程艺术》就相对简单一些了。

其实我还没有买过中文版的JavaScript DOM编程艺术，我是在网上下载的英文PDF版，一章章看完感觉很不错就介绍给大家。

作者从实际出发一步步地引导读者学习有关JavaScript WEB编程的相关知识，语言简洁精炼（没过四级的我看着都不废劲^!^），难能可贵的是每一章里作者都会给出一个实例，并一步步的完善，倒数第二章“Putting It All Together”向读者介绍了一个完整的界面设计与制作，用到了前面学习到的DOM的相关操作，表现与结构分享的思想，以及JavaScript的一些基础知识。

我可以负责任的告诉大家：即使你没学习过JavaScript，只要略一点编程的看这本书绝对会收获很多东西。

PDF英文版《JavaScript DOM编程艺术》下载地址：http://www.uushare.com/user/keelii/file/3160255

效果如下图：

JavaScript代码如下：

for(var x = 0; x<19; x++){
for(var y = 0; y<19; y++){
	var div = document.createElement("div");
	document.body.appendChild(div);
	div.style.position = "absolute";
	div.style.width = "23px";
	div.style.height = "23px";
	div.style.left = x*23 + "px";
	div.style.top = y*23 + "px";

	var s = ((x-9)%9 ? 0 :(x-9)/9)+1 + (((y-9)%9 ? 0 : (y-9)/9)+1)*3;
	if(s==4&&(x/3)%2==1 && (y/3)%2==1) s="X";

	div.style.backgroundImage = "url(B" +s+ ".gif)";
}
}
}

短短十来行代码却凝结了多少经验和智慧，值得细细品味。

点这里看效果

JavaScript的重要和强大自然不言而喻，如果你喜欢JavaScript或者是喜欢网站前端开发。作为一个非常实用而且流行的编程语言，这将是你的必须课。

悟透javascript

后者(网页设计解析)还没来得及看，如果感觉好的话我会给大家介绍一下的。里面有几部非常强大的视频教程等我上传到网站上后也一起发出来给大家分享。

先看最终效果图：

表格的代码可以任意写，或者直接从DreamWeaver里面拉。最重要的是JavaScript代码，如下：

window.onload = function(){ //浏览器载入时执行函数
var tr = document.getElementsByTagName("tr");
		//获取文档中的tr元素。此时变量tr是个对象数组

for ( i=0; i<tr.length; i++){
	if (i%2 == 0){	//奇数行给tr元素添加ctr类属性
		tr[i].className += "ctr";
	}

	tr[i].onmouseover = function(){
		this.className += " trhover";
		//鼠标经过每个tr时追加给tr元素trhover类属性
	}
	tr[i].onmouseout = function(){
		this.className = this.className.replace(" trhover","");
		//鼠标离开每个tr时移除掉tr元素trhover类属性
	}
}

}

接下来的工作很简单了，就是把批段代码加入到你网页的script标签中。

点击查看效果及源码

学习C语言或者考二级C的人都会知道函数的递归调用这个知识点是最难的了，理解它对我的编程的逻辑思维会有很大的帮助。那么在JavaScript中是怎样使用递归的呢，一个很经典的例了就是平方和的计算。

代码如下：

function sumn(n) {
	if (n==1)

		{ return n; }

	else
		{ return ( n*n + sumn(n-1) ); }
}

调用此函数就可以计算出n的阶乘。比如我们计算3的阶乘，函数sumn(3)的执行过程如下：

cal (a,b) 	{ return a+b;}；
cal (a,b,c) 	{ return a*b;}；

如果调用第二个带三个参数的方法”cal(1,2,3);”，将返回1乘2的值，而不是1加2。

然而在JavaScript中函数是不支持重载的，如果我们必须要用到重载怎么办呢？这时候就得用到arguments对象了，它可以检测到返回的函数参数个数。我们可以调用它的length属性来做判断从而达到防重载的效果。用法如下：

function returnArgs (){ alert(arguments.length); }
returnArgs("小","强");	 //输出2
returnArgs(2009);		//输出1
returnArgs();			//输出0

总结一下写一个小程序，下面的脚本代码一定会输出”3|6″从而模仿实现了JavaScript的函数重载：

<script type="text/javascript">
	function cal (a,b,c){
		if (arguments.length == 2){
			return a+b;
		}
		else if(arguments.length == 3){
			return a*b*c;
		}
	}
	document.write (cal(1,2) + " | ");
	document.write (cal(1,2,3));
</script>