CSSrainbow.cn » JavaScript

怎么写Tab?基于JavaScript实现的

Rainbow — Sun, 29 Aug 2010 14:52:34 +0000

跟着阿当一步一步的学习怎么写tab,基于JavaScript实现的。

原文作者：阿当

原文链接地址：怎么写tab?

阿当的书：《编写高质量代码——web前端开发修炼之道》

演示地址： http://www.adanghome.com/js_demo/3/

一个getElementsByClassName 方法

var getElementsByClassName = function(str,root,tag){
	if(root){
		root = typeof root == "string" ? document.getElementById(root) : root;
	} else {
		root = document.body;
	}
	tag = tag || "*";
	var els = root.getElementsByTagName(tag),arr = [];
	for(var i=0,n=els.length;i<n;i++){
		for(var j=0,k=els[i].className.split(" "),l=k.length;j<l;j++){
			if(k[j] == str){
				arr.push(els[i]);
				break;
			}
		}
	}
	return arr;
}

版本一

The CSS Code:

1	#t1_m1,#t1_m2,#t1_m3{padding:5px;border:dashed 1px #333;margin:0 5px;}

The HTML Code:

<div id="demo1">
    <div>
        <span id="t1_m1">menu1</span>
        <span id="t1_m2">menu2</span>
        <span id="t1_m3">menu3</span>
    </div>
    <div id="t1_c1" class="mt30">11111</div>
</div>

The JavaScript Code:

	(function(){
		var menu1 = document.getElementById("t1_m1"),
			menu2 = document.getElementById("t1_m2"),
			menu3 = document.getElementById("t1_m3"),
			content = document.getElementById("t1_c1");
		menu1.onclick = function(){
			content.innerHTML = "11111";
		}
		menu2.onclick = function(){
			content.innerHTML = "22222";
		}
		menu3.onclick = function(){
			content.innerHTML = "33333";
		}
	})();

版本二

The CSS Code :

#t2_m1,#t2_m2,#t2_m3{padding:5px;border:dashed 1px #333;margin:0 5px;}
#t2_c2,#t2_c3{display:none;}

The HTML Code :

<div id="demo2">
<div>
	<span id="t2_m1">menu1</span>
	<span id="t2_m2">menu2</span>
	<span id="t2_m3">menu3</span>
</div>
<div class="mt30">
	<div id="t2_c1">11111</div>
	<div id="t2_c2">22222</div>
	<div id="t2_c3">33333</div>
</div>
</div>

The JavaScript Code :

	(function(){
		var menu1 = document.getElementById("t2_m1"),
			menu2 = document.getElementById("t2_m2"),
			menu3 = document.getElementById("t2_m3"),
			content1 = document.getElementById("t2_c1"),
			content2 = document.getElementById("t2_c2"),
			content3 = document.getElementById("t2_c3");
		menu1.onclick = function(){
			content1.style.display = "block";
			content2.style.display = "none";
			content3.style.display = "none";
		}
		menu2.onclick = function(){
			content1.style.display = "none";
			content2.style.display = "block";
			content3.style.display = "none";
		}
		menu3.onclick = function(){
			content1.style.display = "none";
			content2.style.display = "none";
			content3.style.display = "block";
		}
	})();

版本三

The CSS Code :

1	#tab_menu span{padding:5px;border:dashed 1px #333;margin:0 5px;}

The HTML Code :

<div id="demo3">
<div id="tab_menu">
	<span>menu1</span>
	<span>menu2</span>
	<span>menu3</span>
	<span>menu4</span>
</div>
<div id="tab_content" class="mt30">
	<div>11111</div>
	<div class="none">22222</div>
	<div class="none">33333</div>
	<div class="none">44444</div>
</div>
</div>

The JavaScript Code :

	(function(){
		var menus = document.getElementById("tab_menu").getElementsByTagName("span"),
			contents = document.getElementById("tab_content").getElementsByTagName("div");
		for(var i = 0,n=menus.length;i<n;i++){
			(function(n){
				menus[n].onclick = function(){
					showContent(n);
				}
			})(i);
		}
 
		function showContent(index){
			for(var i=0,n=contents.length;i<n;i++){
				if(i==index){
					contents[i].style.display = "block";
				} else {
					contents[i].style.display = "none";
				}
			}
		}
	})();

版本四

The CSS Code :

1 2	#demo4-1 ul{padding:0;margin:0} .demo41_tabMenu{padding:5px;border:dashed 1px #333;margin:0 5px;display:inline;}

The HTML Code :

<div id="demo4-1">
<ul>
	<li class="demo41_tabMenu">menu1</li>
	<li class="demo41_tabMenu">menu2</li>
	<li class="demo41_tabMenu">menu3</li>
</ul>
<div class="mt30">
	<div class="demo41_tabContent">11111<div>一一一一一一一</div></div>
	<div class="demo41_tabContent none">22222<div>二二二</div></div>
	<div class="demo41_tabContent none">33333</div>
</div>
</div>
 
<div id="demo4-2">
<p>
	<input name="sex" id="male" class="demo42_tabMenu" checked="checked" type="radio"> <label for="male">男</label>
	<input name="sex" id="female" class="demo42_tabMenu" type="radio"> <label for="female">女</label>
</p>
<div class="mt30">
	<div class="demo42_tabContent">I'm a boy</div>
	<div class="demo42_tabContent none">I'm a girl</div>
</div>
</div>

The JavaScript Code :

	(function(){
		var menus = getElementsByClassName("demo41_tabMenu","demo4-1"),
			contents = getElementsByClassName("demo41_tabContent","demo4-1"),
			menus2 = getElementsByClassName("demo42_tabMenu","demo4-2"),
			contents2 = getElementsByClassName("demo42_tabContent","demo4-2");
		for(var i = 0,n=menus.length;i<n;i++){
			(function(n){
				menus[n].onclick = function(){
					showContent(n);
				}
			})(i);
		}
 
		function showContent(index){
			for(var i=0,n=contents.length;i<n;i++){
				if(i==index){
					contents[i].style.display = "block";
				} else {
					contents[i].style.display = "none";
				}
			}
		}
 
		for(var i = 0,n=menus2.length;i<n;i++){
			(function(n){
				menus2[n].onclick = function(){
					showContent2(n);
				}
			})(i);
		}
 
		function showContent2(index){
			for(var i=0,n=contents2.length;i<n;i++){
				if(i==index){
					contents2[i].style.display = "block";
				} else {
					contents2[i].style.display = "none";
				}
			}
		}
	})();

版本五

The CSS Code :

1 2	#demo5-1 ul,#demo5-2 ul{padding:0;margin:0} #demo5-1 .tabMenu,#demo5-2 .tabMenu{padding:5px;border:dashed 1px #333;margin:0 5px;display:inline;}

The HTML Code :

<div id="demo5-1">
<ul>
	<li class="tabMenu">menu1</li>
	<li class="tabMenu">menu2</li>
	<li class="tabMenu">menu3</li>
</ul>
<div class="mt30">
	<div class="tabContent">11111<div>一一一一一一一</div></div>
	<div class="tabContent none">22222<div>二二二</div></div>
	<div class="tabContent none">33333</div>
</div>
</div>
 
<div id="demo5-2" class="mt30">
<ul>
	<li class="tabMenu">menu1</li>
	<li class="tabMenu">menu2</li>
</ul>
<div class="mt30">
	<div class="tabContent">11111<div>一一一一一一一</div></div>
	<div class="tabContent none">22222<div>二二二</div></div>
</div>
</div>

The JavaScript Code :

	(function(){
		function createTab(root){
			var menus = getElementsByClassName("tabMenu",root),
				contents = getElementsByClassName("tabContent",root);
			for(var i = 0,n=menus.length;i<n;i++){
				(function(n){
					menus[n].onclick = function(){
						showContent(n);
					}
				})(i);
			}
 
			function showContent(index){
				for(var i=0,n=contents.length;i<n;i++){
					if(i==index){
						contents[i].style.display = "block";
					} else {
						contents[i].style.display = "none";
					}
				}
			}
		}
 
		createTab("demo5-1");
		createTab("demo5-2");
	})();

版本六

The CSS Code :

#demo6-1 ul,#demo6-2 ul{padding:0;margin:0}
#demo6-1 .tabMenu,#demo6-2 .tabMenu{padding:5px;border:dashed 1px #333;margin:0 5px;display:inline;}
.demo61-tabMenu-selected{background:blue;color:#fff;}
.demo62-tabMenu-selected{background:green;color:#fff;}

The HTML Code :

<div id="demo6-1">
<ul>
	<li class="tabMenu demo61-tabMenu-selected">menu1</li>
	<li class="tabMenu">menu2</li>
	<li class="tabMenu">menu3</li>
</ul>
<div class="mt30">
	<div class="tabContent">11111<div>一一一一一一一</div></div>
	<div class="tabContent none">22222<div>二二二</div></div>
	<div class="tabContent none">33333</div>
</div>
</div>
 
<div id="demo6-2" class="mt30">
<ul>
	<li class="tabMenu demo62-tabMenu-selected">menu1</li>
	<li class="tabMenu">menu2</li>
</ul>
<div class="mt30">
	<div class="tabContent">11111<div>一一一一一一一</div></div>
	<div class="tabContent none">22222<div>二二二</div></div>
</div>
</div>

The JavaScript Code :

	(function(){
		function createTab(root,selectMenuClassname,eventType){
			var menus = getElementsByClassName("tabMenu",root),
				contents = getElementsByClassName("tabContent",root),
				selectMenuClassname = selectMenuClassname || "",
				eventType = eventType || "click";
 
			for(var i = 0,n=menus.length;i<n;i++){
				(function(n){
					menus[n]["on"+eventType] = function(){
						showContent(n);
						if(selectMenuClassname){
							focusMenu(n);
						}
					}
				})(i);
			}
 
			function showContent(index){
				for(var i=0,n=contents.length;i<n;i++){
					if(i==index){
						contents[i].style.display = "block";
					} else {
						contents[i].style.display = "none";
					}
				}
			}
 
			function focusMenu(index){
				var menuFocused = getElementsByClassName(selectMenuClassname,root)[0];
				menuFocused.className = menuFocused.className.split(selectMenuClassname).join(" ");
				menus[index].className += " " + selectMenuClassname;
			}
		}
 
		createTab("demo6-1","demo61-tabMenu-selected");
		createTab("demo6-2","demo62-tabMenu-selected","mouseover");
	})();

版本七

The CSS Code :

#demo7-1 ul,#demo7-2 ul{padding:0;margin:0}
#demo7-1 .tabMenu,#demo7-2 .tabMenu{padding:5px;border:dashed 1px #333;margin:0 5px;display:inline;}
.demo71-tabMenu-selected{background:blue;color:#fff;}
.demo72-tabMenu-selected{background:green;color:#fff;}

The HTML Code :

<div id="demo7-1">
<ul>
	<li class="tabMenu  ">menu1</li>
	<li class="tabMenu demo71-tabMenu-selected">menu2</li>
	<li class="tabMenu">menu3</li>
</ul>
<div class="mt30">
	<div style="display: none;" class="tabContent">11111<div>一一一一一一一</div></div>
	<div style="display: block;" class="tabContent none">22222<div>二二二</div></div>
	<div style="display: none;" class="tabContent none">33333</div>
</div>
</div>
 
<div id="demo7-2" class="mt30">
<ul>
	<li class="tabMenu demo72-tabMenu-selected">menu1</li>
	<li class="tabMenu">menu2</li>
</ul>
<div class="mt30">
	<div class="tabContent">11111<div>一一一一一一一</div></div>
	<div class="tabContent none">22222<div>二二二</div></div>
</div>
</div>

The JavaScript Code :

	(function(){
		function createTab(root,selectMenuClassname,eventType,autoPlay,stayTime,callback){
			var menus = getElementsByClassName("tabMenu",root),
				contents = getElementsByClassName("tabContent",root),
				selectMenuClassname = selectMenuClassname || "",
				eventType = eventType || "click",
				autoPlay = autoPlay || false,
				stayTime = stayTime || 5000,
				currentIndex = 0;
 
			for(var i = 0,n=menus.length;i<n;i++){
				(function(n){
					menus[n]["on"+eventType] = function(){
						showItem(n);
					}
				})(i);
			}
 
			if(autoPlay){
				setInterval(function(){
					itemsCount = menus.length;
					currentIndex = currentIndex >= itemsCount - 1 ? 0 : currentIndex+1 ; 
					showItem(currentIndex);
				},stayTime);
			}
 
			function showItem(index){
				showContent(index);
				if(selectMenuClassname){
					focusMenu(index);
				}
				if(callback){
					callback(index);
				}
			}
 
			function showContent(index){
				currentIndex = index;
				for(var i=0,n=contents.length;i<n;i++){
					if(i==index){
						contents[i].style.display = "block";
					} else {
						contents[i].style.display = "none";
					}
				}
			}
 
			function focusMenu(index){
				var menuFocused = getElementsByClassName(selectMenuClassname,root)[0];
				menuFocused.className = menuFocused.className.split(selectMenuClassname).join(" ");
				menus[index].className += " " + selectMenuClassname;
			}
		}
 
		createTab("demo7-1","demo71-tabMenu-selected",null,true,8000);
		createTab("demo7-2","demo72-tabMenu-selected","mouseover",null,null,function(index){alert("您激活了第"+(index+1)+"个tab项");});
	})();

版本八

The CSS Code :

#demo8-1 ul,#demo8-2 ul{padding:0;margin:0}
#demo8-1 .tabMenu,#demo8-2 .tabMenu{padding:5px;border:dashed 1px #333;margin:0 5px;display:inline;}
.demo81-tabMenu-selected{background:blue;color:#fff;}
.demo82-tabMenu-selected{background:green;color:#fff;}

The HTML Code :

<div id="demo8-1">
<ul>
	<li class="tabMenu  ">menu1</li>
	<li class="tabMenu demo81-tabMenu-selected">menu2</li>
	<li class="tabMenu">menu3</li>
</ul>
<div class="mt30">
	<div style="display: none;" class="tabContent">11111<div>一一一一一一一</div></div>
	<div style="display: block;" class="tabContent none">22222<div>二二二</div></div>
	<div style="display: none;" class="tabContent none">33333</div>
</div>
</div>
 
<div id="demo8-2" class="mt30">
<ul>
	<li class="tabMenu demo82-tabMenu-selected">menu1</li>
	<li class="tabMenu">menu2</li>
</ul>
<div class="mt30">
	<div class="tabContent">11111<div>一一一一一一一</div></div>
	<div class="tabContent none">22222<div>二二二</div></div>
</div>
</div>

The JavaScript Code :

	(function(){
		function createTab(config){
			var root = config.root,
				menus = getElementsByClassName("tabMenu",root),
				contents = getElementsByClassName("tabContent",root),
				selectMenuClassname = config.selectMenuClassname || "",
				eventType = config.eventType || "click",
				autoPlay = config.autoPlay || false,
				stayTime = config.stayTime || 5000,
				callback = config.callback || null,
				currentIndex = 0;
 
			for(var i = 0,n=menus.length;i<n;i++){
				(function(n){
					menus[n]["on"+eventType] = function(){
						showItem(n);
					}
				})(i);
			}
 
			if(autoPlay){
				setInterval(function(){
					itemsCount = menus.length;
					currentIndex = currentIndex >= itemsCount - 1 ? 0 : currentIndex+1 ; 
					showItem(currentIndex);
				},stayTime);
			}
 
			function showItem(index){
				showContent(index);
				if(selectMenuClassname){
					focusMenu(index);
				}
				if(callback){
					callback(index);
				}
			}
 
			function showContent(index){
				currentIndex = index;
				for(var i=0,n=contents.length;i<n;i++){
					if(i==index){
						contents[i].style.display = "block";
					} else {
						contents[i].style.display = "none";
					}
				}
			}
 
			function focusMenu(index){
				var menuFocused = getElementsByClassName(selectMenuClassname,root)[0];
				menuFocused.className = menuFocused.className.split(selectMenuClassname).join(" ");
				menus[index].className += " " + selectMenuClassname;
			}
		}
 
		createTab({root:"demo8-1",selectMenuClassname:"demo81-tabMenu-selected",autoPlay:true,stayTime:8000});
		createTab({root:"demo8-2",selectMenuClassname:"demo82-tabMenu-selected",eventType:"mouseover",callback:function(index){alert("您激活了第"+(index+1)+"个tab项");}});
	})();

版本九

The CSS Code :

	(function(){
		function createTab(config){
			var root = config.root,
				menus = getElementsByClassName("tabMenu",root),
				contents = getElementsByClassName("tabContent",root),
				selectMenuClassname = config.selectMenuClassname || "",
				eventType = config.eventType || "click",
				autoPlay = config.autoPlay || false,
				stayTime = config.stayTime || 5000,
				callback = config.callback || null,
				currentIndex = 0;
 
			for(var i = 0,n=menus.length;i;i++){
				(function(n){
					menus[n]["on"+eventType] = function(){
						showItem(n);
					}
				})(i);
			}
 
			if(autoPlay){
				setInterval(function(){
					itemsCount = menus.length;
					currentIndex = currentIndex >= itemsCount - 1 ? 0 : currentIndex+1 ; 
					showItem(currentIndex);
				},stayTime);
			}
 
			function showItem(index){
				showContent(index);
				if(selectMenuClassname){
					focusMenu(index);
				}
				if(callback){
					callback(index);
				}
			}
 
			function showContent(index){
				currentIndex = index;
				for(var i=0,n=contents.length;i;i++){
					if(i==index){
						contents[i].style.display = "block";
					} else {
						contents[i].style.display = "none";
					}
				}
			}
 
			function focusMenu(index){
				var menuFocused = getElementsByClassName(selectMenuClassname,root)[0];
				menuFocused.className = menuFocused.className.split(selectMenuClassname).join(" ");
				menus[index].className += " " + selectMenuClassname;
			}
		}
 
		createTab({root:"demo8-1",selectMenuClassname:"demo81-tabMenu-selected",autoPlay:true,stayTime:8000});
		createTab({root:"demo8-2",selectMenuClassname:"demo82-tabMenu-selected",eventType:"mouseover",callback:function(index){alert("您激活了第"+(index+1)+"个tab项");}});
	})();

The HTML Code :

<div id="demo9-1">
<ul>
	<li class="tabMenu  ">menu1</li>
	<li class="tabMenu demo91-tabMenu-selected">menu2</li>
	<li class="tabMenu">menu3</li>
</ul>
<div class="mt30">
	<div style="display: none;" class="tabContent">11111<div>一一一一一一一</div></div>
	<div style="display: block;" class="tabContent none">22222<div>二二二</div></div>
	<div style="display: none;" class="tabContent none">33333</div>
</div>
</div>
<p><input value="激活第3个tab" id="btn" type="button"></p>
<div id="demo9-2" class="mt30">
<ul>
	<li class="tabMenu demo92-tabMenu-selected">menu1</li>
	<li class="tabMenu">menu2</li>
</ul>
<div class="mt30">
	<div class="tabContent">11111<div>一一一一一一一</div></div>
	<div class="tabContent none">22222<div>二二二</div></div>
</div>
</div>

The JavaScript Code :

	(function(){
		function Tab(config){
			    this.root = config.root,
				this.menus = getElementsByClassName("tabMenu",this.root),
				this.contents = getElementsByClassName("tabContent",this.root),
				this.selectMenuClassname = config.selectMenuClassname || "",
				this.eventType = config.eventType || "click",
				this.autoPlay = config.autoPlay || false,
				this.stayTime = config.stayTime || 5000,
				this.callback = config.callback || null,
				this.currentIndex = 0;
				this._init();
		}
 
		Tab.prototype = {
			_init : function(){
				this._bindEvent();
				this._autoPlay();
			},
			_bindEvent : function(){
				var This = this;
				for(var i = 0,n=This.menus.length;i<n;i++){
					(function(n){
						This.menus[n]["on"+This.eventType] = function(){
							This.showItem(n);
						}
					})(i);
				}
			},
			_autoPlay : function(){
				if(!this.autoPlay) return;
				var This = this;
				setInterval(function(){
					itemsCount = This.menus.length;
					This.currentIndex = This.currentIndex >= itemsCount - 1 ? 0 : This.currentIndex+1 ; 
					This.showItem(This.currentIndex);
				},This.stayTime);
			},
			showItem : function(index){
				this._showContent(index);
				if(this.selectMenuClassname){
					this._focusMenu(index);
				}
				if(this.callback){
					this.callback(index);
				}
			},
			_showContent : function(index){
				this.currentIndex = index;
				for(var i=0,n=this.contents.length;i<n;i++){
					if(i==index){
						this.contents[i].style.display = "block";
					} else {
						this.contents[i].style.display = "none";
					}
				}
			},
			_focusMenu : function(index){
				var menuFocused = getElementsByClassName(this.selectMenuClassname,this.root)[0];
				menuFocused.className = menuFocused.className.split(this.selectMenuClassname).join(" ");
				this.menus[index].className += " " + this.selectMenuClassname;
			}
		}
 
		var tab1 = new Tab({root:"demo9-1",selectMenuClassname:"demo91-tabMenu-selected",autoPlay:true,stayTime:8000});
		new Tab({root:"demo9-2",selectMenuClassname:"demo92-tabMenu-selected",eventType:"mouseover",callback:function(index){alert("您激活了第"+(index+1)+"个tab项");}});	document.getElementById("btn").onclick = function(){
			tab1.showItem(2);
		}
	})();

演示地址： http://www.adanghome.com/js_demo/3/

本地图片预览二三事

Rainbow — Tue, 27 Jul 2010 13:55:47 +0000

上传图片是我们Web开发经常用到的一个功能，那当然少不了文件域标签的使用，如果是上传的是图片文件能够提前预览就好了。

1	<input type="file"/>

到目前为止，只有IE和FF可以预览本地图片。IE下可以直接浏览本地图片，通过input[type=file]的value属性就可以取到本地图片的路径。
而在FF下，有getAsDataURL()方法可以生成图片的DataURL，然后赋值给img标签。

各种浏览器的支持情况

Internet Explorer & Opera

这两种浏览器返回的值是一样，如果把此站点添加到IE “受信任的站点”列表中，是一个完整的文件的路径。否则就是它：

1	C:\fakepath\image.png

如果还是不理解的话，请看这篇文章《揭露 c:\fakepath 的秘密》。

WebKit (Safari / Chrome)

返回该文件的输入值没有任何价值。

Firefox

Firefox是独特的，它的返回值仅是文件名。不过Firefox提供了一个函数’getAsDataURL（）’方法可以获得图片文件的完整路径。

IE 下效果的JavaScript Code：

1
2
3

document.getElementById("upload").onchange = function() {
	 document.getElementById("image").src = this.value;
}

FF 下效果的JavaScript Code:

1
2
3

document.getElementById("upload").onchange = function() {
	 document.getElementById("image").src = this.files[0].getAsDataURL();
}

IE and FF 的JavaScript Code:

/*
   var ie=!-[1,]
   最短的IE浏览器判断
*/
 
if(-[1,]){
		 document.getElementById("upload").onchange = function() {
	          document.getElementById("image").src = this.files[0].getAsDataURL();
         }
	}else{
		document.getElementById("upload").onchange = function() {
			  document.getElementById("image").src = this.value;
		}
}

jQuery Code:

 
  // File target is a 
  $("#file-upload").change(function() {
 
    // Browser supports `files` as part of DOM
    if (this.files) {
 
      //  This works in Firefox, #image-preview is an 
      $("#image-preview").attr("src", this.files[0].getAsDataURL());
 
    } else {
 
      // This is just wishful thinking, but it's a security issue so the value of the input is never
      // a true local file path
      $("#image-preview").attr("src", $("#file-upload").val());
 
    }
 
    // Firefox gives you a file name 
    // Safari / Chrome gives you nothing
    // IE / Opera gives you a weird /fakepath/filename.ext
 
    $("#file-upload-area").append($("#file-upload").val());
 
    $("#preview-area").show();
 
  });

Ajax 图片上传

http://www.zurb.com/playground/ajax_upload

图片上传预览，基于JavaScript

关于‘TOP’置顶链接的那些事儿

Rainbow — Tue, 30 Mar 2010 05:50:19 +0000

‘TOP’置顶链接，说的通俗一点就是‘返回顶部的链接’，‘go to top ’一般都放在页面的底部，它可以快速返回页面顶部，以节省用户浏览页面的时间。它主要的应用场景是
当你有一个很长的网页内容时，您通常要把 ‘TOP’锚点链接添加在页面底部，只要用户一点击‘TOP’链接 ,就可以马上回到页面的顶部了。

我们遇到的问题是：不是滚动到页面底部的时候才看到了‘TOP’,如果页面内容超过两屏以上时，用户有些心烦，我不想看了，我想回到顶部看一些其他的内容。
如果我们只看了第一屏的文章，不想看了，可是‘TOP’在第二屏才会出现。

这时候有三种情况发生：

发挥鼠标特长就是拖动浏览器的滚动条或是滚动鼠标滑轮，回到页面顶部。
继续硬着头皮往下看，看有没有‘TOP’,幸运的话，马上找到了，可以回到顶部了。（一般人心中是没有‘TOP’概念的，只有选择1 和3 的方法了）
直接关闭网页，或者重新打开网站，或者离开网站。

我想我们已经找到了问题的所在了。

我们有三种方案可以给用户带来良好的用户体验：

方案一：在合适的地方，手动加入一个或多个‘TOP’链接。

这是最原始的做法了，如果滚动太快，验，那就是我们给用户用脚本实现一下缓冲效果，而不是直接飙到顶部。

The HTML :

1	<a id="gototop" href="javascript:void(0);" onclick="goTop();return false;">Top of Page</a>

The JavaScript :

/**
 * 作者：我是UED ，http://www.iamued.com/qianduan/816.html
 * 回到页面顶部
 * @param acceleration 加速度
 * @param time 时间间隔 (毫秒)
 **/
function goTop(acceleration, time) {
	acceleration = acceleration || 0.1;
	time = time || 16;
 
	var x1 = 0;
	var y1 = 0;
	var x2 = 0;
	var y2 = 0;
	var x3 = 0;
	var y3 = 0;
 
	if (document.documentElement) {
		x1 = document.documentElement.scrollLeft || 0;
		y1 = document.documentElement.scrollTop || 0;
	}
	if (document.body) {
		x2 = document.body.scrollLeft || 0;
		y2 = document.body.scrollTop || 0;
	}
	var x3 = window.scrollX || 0;
	var y3 = window.scrollY || 0;
 
	// 滚动条到页面顶部的水平距离
	var x = Math.max(x1, Math.max(x2, x3));
	// 滚动条到页面顶部的垂直距离
	var y = Math.max(y1, Math.max(y2, y3));
 
	// 滚动距离 = 目前距离 / 速度, 因为距离原来越小, 速度是大于 1 的数, 所以滚动距离会越来越小
	var speed = 1 + acceleration;
	window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));
 
	// 如果距离不为零, 继续调用迭代本函数
	if(x > 0 || y > 0) {
		var invokeFunction = "goTop(" + acceleration + ", " + time + ")";
		window.setTimeout(invokeFunction, time);
	}
}

View Demo

方案二：‘TOP’默认是隐藏的，只要滚动条，滚动到一定高度时就显示，否则就隐藏。

这样我可能想从中间某处回到页面的顶部成为可能。

The HTML :

1	<a href="#top" id="gototop" >Top of Page</a>

The CSS :

1
2

#gototop { display:none; position:fixed; right:5px; bottom:5px; color:green; font-weight:bold; text-decoration:none; border:1px solid green; background:Lightgreen; padding:10px; }
#gototop { text-decoration:underline; }

The MooTools JavaScript :

注意：

我们需要MooTools Core 库的同时，也需要MooTools More 库中的 Fx.Scroll.js 和 Fx.SmoothScroll.js 两大文件。

window.addEvent('domready',function() {
	new SmoothScroll({duration:700});
	/* go to top */
	var go = $('gototop');
	go.set('opacity','0').setStyle('display','block');
window.addEvent('scroll',function(e) {
	if(Browser.Engine.trident4) {
		 go.setStyles({
			 'position': 'absolute',
			 'bottom': window.getPosition().y + 10,
			 'width': 100
		 });
		}
		go.fade((window.getScroll().y > 300) ? 'in' : 'out')
	});
});

View Demo

还有一个例子是动态生成‘TOP’。

The MooTools JavaScript :

/**
 * back-to-top: unobtrusive global 'back to top' link using mootools 1.2.x 
 * This work is licensed under a Creative Commons Attribution-Share Alike 3.0 License.
 *   http://creativecommons.org/licenses/by-sa/3.0/
 */
 
// hide the effect from IE6, better not having it at all than being choppy.
if (!Browser.Engine.trident4) {
  // element added onload for IE to avoid the "operation aborted" bug. not yet verified for IE8 as it's still on beta as of this modification.
  window.addEvent((Browser.Engine.trident ? 'load' : 'domready'), function(){
    var target_opacity = 0.64;
    new Element('span', {
      'id': 'back-to-top', 
      'styles': {
        opacity: target_opacity,
        display: 'none',
        position: 'fixed',
        bottom: 0,
        right: 0,
        cursor: 'pointer'
      },
      'text': 'back to top',
      'tween': {
        duration: 200,
        onComplete: function(el) { if (el.get('opacity') == 0) el.setStyle('display', 'none')}
      },
      'events': {'click': function() {
		  /*location是javascript里边管理地址栏的内置对象，比如location.href就管理页面的url，用 location.href=url就可以直接将页面重定向url。而location.hash则可以用来获取或设置页面的标签值。比如 http://ued.alimama.com#admin的location.hash=”#admin”,利用这个属性值可以实现很多效果。*/
        if (window.location.hash) { window.location.hash = '#top'; } 
        else { window.scrollTo(0, 0);/*把窗口内容滚动到指定的坐标。*/ }
      }}
    }).inject(document.body);
 
    window.addEvent('scroll', function() {
      var visible = window.getScroll().y > (window.getSize().y * 0.8);
      if (visible == arguments.callee.prototype.last_state) return;
 
      // fade if supported
      if (Fx && Fx.Tween) {
        if (visible) $('back-to-top').fade('hide').setStyle('display', 'inline').fade(target_opacity);
        else $('back-to-top').fade('out');
      } else {
        $('back-to-top').setStyle('display', (visible ? 'inline' : 'none'));
      }
 
      arguments.callee.prototype.last_state = visible
    });
  });
}

View Demo

The jQuery JavaScript :

需要jQuery’s ScrollTo plugin 插件添加一些平滑的锚。

//plugin
jQuery.fn.topLink = function(settings) {
	settings = jQuery.extend({
		min: 1,
		fadeSpeed: 200
	}, settings);
	return this.each(function() {
		//listen for scroll
		var el = $(this);
		el.hide(); //in case the user forgot
		$(window).scroll(function() {
			if($(window).scrollTop() >= settings.min)
			{
				el.fadeIn(settings.fadeSpeed);
			}
			else
			{
				el.fadeOut(settings.fadeSpeed);
			}
		});
	});
};
 
//usage w/ smoothscroll
$(document).ready(function() {
	//set the link
	$('#gototop').topLink({
		min: 400,
		fadeSpeed: 500
	});
	//smoothscroll
	$('#gototop').click(function(e) {
		e.preventDefault();
		$.scrollTo(0,300);
	});
});

View Demo

注意：

Please note that this version doesn’t work with Internet Explorer due to IE’s lack of CSS “position:fixed” support. Here is a shotty attempt at IE support:

 
    //plugin
    jQuery.fn.topLink = function(settings) {
		settings = jQuery.extend({
			min: 1,
			fadeSpeed: 200,
			ieOffset: 50
		}, settings);
		return this.each(function() {
			//listen for scroll
			var el = $(this);
			el.css('display','none'); //in case the user forgot
			$(window).scroll(function() {
				//stupid IE hack
				if(!jQuery.support.hrefNormalized) {
					el.css({
						'position': 'absolute',
						'top': $(window).scrollTop() + $(window).height() - settings.ieOffset
					});
				}
				if($(window).scrollTop() >= settings.min)
				{
					el.fadeIn(settings.fadeSpeed);
				}
				else
				{
					el.fadeOut(settings.fadeSpeed);
				}
			});
		});
	};
 
 
$(document).ready(function() {
	$('#gototop').topLink({
		 min: 400,
		 fadeSpeed: 500
    });
	 //smoothscroll
	 $('#gototop').click(function(e) {
		 e.preventDefault();
		 $.scrollTo(0,300);
	});
});

View Demo

方案三：在浮动的工具条中加入‘Top’ 或 ‘Bottom’锚点链接。

我说的浮动工具条，可以是顶部工具条，也可以是侧边栏工具条。

View Demo

— The End —

理解JavaScript中的事件处理

Rainbow — Tue, 26 Jan 2010 05:23:41 +0000

什么是事件？

事件(Event)是JavaScript应用跳动的心脏，也是把所有东西粘在一起的胶水。当我们与浏览器中 Web 页面进行某些类型的交互时，事件就发生了。事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键。事件还可能是 Web 浏览器中发生的事情，比如说某个 Web 页面加载完成，或者是用户滚动窗口或改变窗口大小。

通过使用 JavaScript ，你可以监听特定事件的发生，并规定让某些事件发生以对这些事件做出响应。

今天的事件

在漫长的演变史，我们已经告别了内嵌式的事件处理方式（直接将事件处理器放在 HTML 元素之内来使用）。今天的事件，它已是DOM的重要组成部分，遗憾的是， IE继续保留它最早在IE4.0中实现的事件模型，以后的IE版本中也没有做太大的改变，这也就是说IE还是使用的是一种专有的事件模型（冒泡型）,而其它的主流浏览器直到DOM 级别 3 规定定案后，才陆陆续续支持DOM标准的事件处理模型 — 捕获型与冒泡型。

历史原因是：W3C 规范在DOM 级别 1中并没有定义任何的事件，直到发布于 2000 年 11 月的DOM 级别 2 才定义了一小部分子集，DOM 级别 2中已经提供了提供了一种更详细的更细致的方式以控制 Web 页面中的事件，最后，完整的事件是在2004年 DOM 级别 3的规定中才最终定案。因为IE4是1995推出的并已实现了自己的事件模型（冒泡型），当时根本就没有DOM标准，不过在以后的DOM标准规范过程中已经把IE的事件模型吸收到了其中。

目前除IE浏览器外，其它主流的Firefox, Opera,
Safari都支持标准的DOM事件处理模型。IE仍然使用自己专有的事件模型，即冒泡型，它事件模型的一部份被DOM标准采用，这点对于开发者来说也是有好处的，只有使用
DOM标准，IE都共有的事件处理方式才能有效的跨浏览器。

DOM事件流

DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素结点与根节点之间按特定的顺序传播，路径所经过的节点都会收到该事件，这个传播过程可称为DOM事件流。

事件顺序有两种类型：事件捕捉和事件冒泡。

冒泡型事件(Event Bubbling)

这是IE浏览器对事件模型的实现，也是最容易理解的，至少笔者觉得比较符合实际的。冒泡，顾名思义，事件像个水中的气泡一样一直往上冒，直到顶端。从
DOM树型结构上理解，就是事件由叶子节点沿祖先结点一直向上传递直到根节点；从浏览器界面视图HTML元素排列层次上理解就是事件由具有从属关系的最确定的目标元素一直传递到最不确定的目标元素.冒泡技术.冒泡型事件的基本思想,事件按照从特定的事件目标开始到最不确定的事件目标.

捕获型事件(Event Capturing)

Netscape 的实现，它与冒泡型刚好相反，由DOM树最顶层元素一直到最精确的元素，这个事件模型对于开发者来说（至少是我..）有点费解，因为直观上的理解应该如同冒泡型，事件传递应该由最确定的元素，即事件产生元素开始。

DOM标准的事件模型

我们已经对上面两个不同的事件模型进行了解释和对比。DOM标准同时支持两种事件模型，即捕获型事件与冒泡型事件，但是，捕获型事件先发生。两种事件流都会触发DOM中的所有对象，从document对象开始，也在document对象结束（大部分兼容标准的浏览器会继续将事件是捕捉/冒泡延续到window对象）。

如图：首先是捕获式传递事件，接着是冒泡式传递，所以，如果一个处理函数既注册了捕获型事件的监听，又注册冒泡型事件监听，那么在DOM事件模型中它就会被调用两次。

DOM标准的事件模型最独特的性质是,文本节点也会触发事件(在IE不会)。

事件传送

为了更好的说明DOM标准中的事件流原理，我们把它放在“事件传送”小结里来更具体的解释。

显然，如果为一个超链接添加了click事件监听器，那么当该链接被点击时该事件监听器就会被执行。但如果把该事件监听器指派给了包含该链接的p元素或者位于DOM树顶端的document节点，那么点击该链接也同样会触发该事件监听器。这是因为事件不仅仅对触发的目标元素产生影响，它们还会对沿着DOM结构的所有元素产生影响。这就是大家所熟悉的事件转送。

W3C事件模型中明确地指出了事件转送的原理。事件传送可以分为3个阶段。

如图：标准的事件转送模式

（1）.在事件捕捉（Capturing）阶段，事件将沿着DOM树向下转送，目标节点的每一个祖先节点，直至目标节点。例如，若用户单击了一个超链接，则该单击事件将从document节点转送到html元素，body元素以及包含该链接的p元素。

在此过程中，浏览器都会检测针对该事件的捕捉事件监听器，并且运行这件事件监听器。

(2). 在目标（target）阶段，浏览器在查找到已经指定给目标事件的事件监听器之后，就会运行该事件监听器。目标节点就是触发事件的DOM节点。例如，如果用户单击一个超链接，那么该链接就是目标节点（此时的目标节点实际上是超链接内的文本节点）。

（3）.在冒泡（Bubbling）阶段，事件将沿着DOM树向上转送，再次逐个访问目标元素的祖先节点到document节点。该过程中的每一步。浏览器都将检测那些不是捕捉事件监听器的事件监听器，并执行它们。

并非所有的事件都会经过冒泡阶段的

所有的事件都要经过捕捉阶段和目标阶段，但是有些事件会跳过冒泡阶段。例如，让元素获得输入焦点的focus事件以及失去输入焦点的blur事件就都不会冒泡。

事件句柄和事件接听器

事件句柄

事件句柄（又称事件处理函数，DOM称之为事件监听函数），用于响应某个事件而调用的函数称为事件处理函数
。每一个事件均对应一个事件句柄，在程序执行时，将相应的函数或语句指定给事件句柄，则在该事件发生时，浏览器便执行指定的函数或语句，从而实现网页内容与用户操作的交互。当浏览器检测到某事件发生时，便查找该事件对应的事件句柄有没有被赋值，如果有，则执行该事件句柄。

我们认为响应点击事件的函数是onclick事件处理函数。以前，事件处理函数有两种分配方式：在JavaScript中或者在HTML中。

如果在JavaScript 中分配事件处理函数，则需要首先获得要处理的对象的一引用，然后将函数赋值给对应的事件处理函数属性，请看一个简单的例子：

var link=document.getElementById("mylink");
link.onclick=function(){
	alert("I was clicked !");
};

从我们看到的例子中，我们发现使用事件句柄很容易，
不过事件处理函数名称必须是小写的，还有就是只有在
元素载入完成之后才能将事件句柄赋给元素，不然会有异常。

关于文档载入技术，请看《window.onload加载的多种解决方案》的文章。

如果在HTML中分配事件句柄的话，则直接通过HTML属性来设置事件处理函数就行了，并在其中包含合适的脚本作为特性值就可以了，例如：

<a href="/" onclick="JavaScript code here">......</a>

这种JavaScript 代码和通过HTML的style属性直接将CSS属性赋给元素类似。这样会代码看起来一团糟，也违背了将实现动态行为的代码与显示文档静态内容的代码相分离的原则。从1998年开始，这种写法就过时了。

这种传统的事件绑定技术，优缺点是显然的：

简单方便，在HTML中直接书写处理函数的代码块，在JS中给元素对应事件属性赋值即可。
IE与DOM标准都支持的一种方法，它在IE与DOM标准中都是在事件冒泡过程中被调用的。
可以在处理函数块内直接用this引用注册事件的元素，this引用的是当前元素。
要给元素注册多个监听器，就不能用这方法了。

事件接听器

除了前面已经介绍的简单事件句柄之外，现在大多数浏览器都内置了一些更高级的事件处理方式，即，事件监听器，这种处理方式就不受一个元素只能绑定一个事件句柄的限制。

我们已经知道了事件句柄与事件监听器的最大不同之处是使用事件句柄时一次只能插接一个事件句柄，但对于事件监听器，一次可以插接多个。

IE下的事件监听器：

IE提供的却是一种自有的，完全不同的甚至存在BUG的事件监听器，因此如果要让脚本在本浏览器中正常运行的话，就必须使用IE所支持的事件监听器。另外，Safari 浏览器中的事件监听器有时也存在一点不同。

在IE中，每个元素和window对象都有两个方法：attachEvent方法和detachEvent方法。

1	element.attachEvent("onevent",eventListener);

此方法的意思是在IE中要想给一个元素的事件附加事件处理函数，必须调用attachEvent方法才能创建一个事件监听器。attachEvent方法允许外界注册该元素多个事件监听器。

attachEvent接受两个参数。第一个参数是事件类型名，第二个参数eventListener是回调处理函数。这里得说明一下，有个经常会出错的地方，IE下
利用attachEvent注册的处理函数调用时this指向不再是先前注册事件的元素，这时的this为window对象。还有一点是此方法的事件类型名称必须加上一个”on”的前缀（如onclick）。

1	element.attachEvent("onevent",eventListener);

要想移除先前元素注册的事件监听器,可以使用detachEvent方法进行删除，参数相同。

DOM标准下的事件监听器：

在支持W3C标准事件监听器的浏览器中，对每个支持事件的对象都可以使用addEventListener方法。该方法既支持注册冒泡型事件处理，又支持捕获型事件处理。所以与IE浏览器中注册元素事件监听器方式有所不同的。

//标准语法 
element.addEventListener('event', eventListener, useCapture);
//默认
element.addEventListener('event', eventListener, false);

addEventListener方法接受三个参数。第一个参数是事件类型名，值得注意的是，这里事件类型名称与IE的不同，事件类型名是没’on’开头的;第二个参数eventListener是回调处理函数（即监听器函数）;第三个参数注明该处理回调函数是在事件传递过程中的捕获阶段被调用还是冒泡阶段被调用，通常此参数通常会设置为false（为false时是冒泡）,那么，如果将其值设置为true，那就创建一个捕捉事件监听器。

移除已注册的事件监听器调用element的removeEventListener方法即可，参数相同.。

//标准语法 
element.removeEventListener('event', eventListener, useCapture);
//默认
element.removeEventListener('event', eventListener, false);

通过addEventListener方法添加的事件处理函数，必须使用removeEventListener方法才能删除，而且要求参数与添加事件处理函数时addEventListener方法的参数完全一致（包括useCapture参数），否则将不能成功删除事件处理函数。

跨浏览器的注册与移除元素事件监听器方案

我们现在已经知道，对于支持addEventListener方法的浏览器，只要需要事件监听器脚本就都需要调用addEventListener方法；而对于不支持该方法的IE浏览器，使用事件监听器时则需要调用attachEvent方法。要确保浏览器使用正确的方法其实并不困难，只需要通过一个if-else语句来检测当前浏览器中是否存在addEventListener方法或attachEvent方法即可。

这样的方式就可以实现一个跨浏览器的注册与移除元素事件监听器方案:

var EventUtil = { 
    //注册
     addHandler: function(element, type, handler){ 
          if (element.addEventListener){ 
                 element.addEventListener(type, handler, false); 
          } else if (element.attachEvent){ 
                 element.attachEvent("on" + type, handler); 
          } else { 
                 element["on" + type] = handler; 
          } 
     }, 
     //移除注册
      removeHandler: function(element, type, handler){ 
          if (element.removeEventListener){ 
                 element.removeEventListener(type, handler, false); 
          } else if (element.detachEvent){ 
                 element.detachEvent("on" + type, handler); 
          } else { 
                 element["on" + type] = null; 
          } 
    } 
 
 };

事件对象引用

为了更好的处理事件，你可以根据所发生的事件的特定属性来采取不同的操作。

如事件模型一样，IE 和其他浏览器处理方法不同：IE 使用一个叫做 event 的全局事件对象来处理对象（它可以在全局变量window.event中找到），而其它所有浏览器采用的 W3C 推荐的方式，则使用独立的包含事件对象的参数传递。

跨浏览器实现这样的功能时，最常见的问题就是获取事件本身的引用及获取该事件的目标元素的引用。

下面这段代码就为你解决了这个问题：

var EventUtil ={
    getEvent: function(event){       
        return event ? event : window.event;    
    },        
    getTarget: function(event){        
       return event.target || event.srcElement;              
    }
};

停止事件冒泡和阻止事件的默认行为

“停止事件冒泡“和”阻止浏览器的默认行为“，这两个概念非常重要，它们对复杂的应用程序处理非常有用。

1.停止事件冒泡

停止事件冒泡是指，停止冒泡型事件的进一步传递（取消事件传递,不只是停止IE和DOM标准共有的冒泡型事件，我们还可以停止支持DOM标准浏览器的捕捉型事件，用topPropagation()方法）。例如上图中的冒泡型事件传递中，在body处理停止事件传递后，位于上层的document的事件监听器就不再收到通知，不再被处理。

2.阻止事件的默认行为

停止事件的默认行为是指，通常浏览器在事件传递并处理完后会执行与该事件关联的默认动作（如果存在这样的动作）。例如，如果表单中input type 属性是 “submit”，点击后在事件传播完浏览器就自动提交表单。又例如，input 元素的 keydown 事件发生并处理后，浏览器默认会将用户键入的字符自动追加到 input 元素的值中。

停止事件冒泡的处理方法：

在IE下,通过设置event对象的cancelBubble为true即可。

1
2
3

function someHandle() {
     window.event.cancelBubble = true;
}

DOM标准通过调用event对象的stopPropagation()方法即可。

1
2
3

function someHandle(event) {
    event.stopPropagation();
}

因些，跨浏览器的停止事件传递的方法是:

function someHandle(event) {
    event = event || window.event;
    if(event.stopPropagation){
       event.stopPropagation();
    }else {
       event.cancelBubble = true;
    }
}

阻止事件的默认行为的处理方法：

就像事件模型和事件对象差异一样，在IE和其它所有浏览器中阻止事件的默认行为的方法也不同。

在IE下,通过设置event对象的returnValue为false即可。

1
2
3

function someHandle() {
   window.event.returnValue = false;
}

DOM标准通过调用event对象的preventDefault()方法即可。

1
2
3

function someHandle(event) {
   event.preventDefault();
}

因些，跨浏览器的取消事件传递后的默认处理方法是：

function someHandle(event) {
   event = event || window.event;
   if(event.preventDefault){
      event.preventDefault();
   }else{
      event.returnValue = false;
   }
}

完整的事件处理兼容性函数

var EventUtil = {             
    addHandler: function(element, type, handler){     
       if (element.addEventListener){ 
          element.addEventListener(type, handler, false);      
       } else if (element.attachEvent){        
           element.attachEvent("on" + type, handler);     
       } else {        
           element["on" + type] = handler;       
       }   
    },           
    removeHandler: function(element, type, handler){      
       if (element.removeEventListener){         
           element.removeEventListener(type, handler, false);      
       } else if (element.detachEvent){         
           element.detachEvent("on" + type, handler);    
       } else {       
           element["on" + type] = null;    
       }    
    },  
    getEvent: function(event){     
        return event ? event : window.event;    
    },        
    getTarget: function(event){       
        return event.target || event.srcElement; 
    },        
    preventDefault: function(event){
       if (event.preventDefault){ 
           event.preventDefault();       
       } else {  
           event.returnValue = false;      
       }   
    },                    
    stopPropagation: function(event){      
      if (event.stopPropagation){        
         event.stopPropagation();     
      } else {         
         event.cancelBubble = true;     
      }    
    }         
};

捕获型事件模型与冒泡型事件模型的应用场合

标准事件模型为我们提供了两种方案，可能很多朋友分不清这两种不同模型有啥好处，为什么不只采取一种模型。
这里抛开IE浏览器讨论（IE只有一种，没法选择）什么情况下适合哪种事件模型。

1. 捕获型应用场合

捕获型事件传递由最不精确的祖先元素一直到最精确的事件源元素，传递方式与操作系统中的全局快捷键与应用程序快捷键相似。当一个系统组合键发生时，如果注
册了系统全局快捷键监听器，该事件就先被操作系统层捕获，全局监听器就先于应用程序快捷键监听器得到通知，也就是全局的先获得控制权，它有权阻止事件的进
一步传递。所以捕获型事件模型适用于作全局范围内的监听，这里的全局是相对的全局，相对于某个顶层结点与该结点所有子孙结点形成的集合范围。

例如你想作全局的点击事件监听，相对于document结点与document下所有的子结点，在某个条件下要求所有的子结点点击无效，这种情况下冒泡模型就解决不了了，而捕获型却非常适合，可以在最顶层结点添加捕获型事件监听器，伪码如下:

  function globalClickListener(event) {
     if(canEventPass == false) {
         //取消事件进一步向子结点传递和冒泡传递
         event.stopPropagation();
         //取消浏览器事件后的默认执行
         event.preventDefault();
     }
 }

这样一来，当canEventPass条件为假时，document下所有的子结点click注册事件都不会被浏览器处理。

2. 冒泡型的应用场合

可以说我们平时用的都是冒泡事件模型，因为IE只支持这模型。这里还是说说，在恰当利用该模型可以提高脚本性能。在元素一些频繁触发的事件中，如
onmousemove,
onmouseover,onmouseout,如果明确事件处理后没必要进一步传递，那么就可以大胆的取消它。此外，对于子结点事件监听器的处理会对父
层监听器处理造成负面影响的，也应该在子结点监听器中禁止事件进一步向上传递以消除影响。

综合案例分析

最后结合下面HTML代码作分析:

<body onclick="alert('current is body');">
 <div id="div0" onclick="alert('current is '+this.id)">
      <div id="div1" onclick="alert('current is '+this.id)">
         <div id="div2" onclick="alert('current is '+this.id)">
            <div id="event_source"
                  onclick="alert('current is '+this.id)"
                  style="height:200px;width:200px;background-color:red;">
            </div>
         </div>
   </div>
 </div>
</body>

HTML运行后点击红色区域,这是最里层的DIV,根据上面说明,无论是DOM标准还是IE,直接写在html里的监听处理函数是事件冒泡传递时调用的,由最里层一直往上传递,所以会先后出现
current is event_source
current is div2
current is div1
current is div0
current is body

添加以下片段:

var div2 = document.getElementById('div2');
EventUtil.addHandler(div2, 'click', function(event){
     event = EventUtil.getEvent(event);
	 EventUtil.stopPropagation(event); 
}, false);

Demo 演示

当点击红色区域后,根据上面说明,在泡冒泡处理期间,事件传递到div2后被停止传递了,所以div2上层的元素收不到通知,所以会先后出现:
current is event_source
current is div2

在支持DOM标准的浏览器中,添加以下代码:

1
2
3

document.body.addEventListener('click', function(event){
    event.stopPropagation();
}, true);

以上代码中的监听函数由于是捕获型传递时被调用的,所以点击红色区域后,虽然事件源是ID为event_source的元素,但捕获型选传递,从最顶层开始,body结点监听函数先被调用,并且取消了事件进一步向下传递,所以只会出现 current is body .

参考文章来：DOM标准与IE的html元素事件模型区别

—THE END—

Lightbox Clones – 基于主流JavaScript库的Lightbox项目大集合

Rainbow — Thu, 29 Oct 2009 02:17:28 +0000

Lightbox Clones – 基于主流JavaScript库的Lightbox项目大集合

你还记得你第一次看到lighbox特效吗？我敢打赌，你很惊讶。哇，太好了，我必须在我的网站上应用。
自从那时以来，许多人使用它，添加一些功能。有一些人重写代码，以使它达到完美效果。

知识扩展：lightbox 百度知道

现在，以Lightbox为原型的克隆版的Lightbox有很多了，你在《The Lightbox Clones Matrix》日志里，可以尽情的筛选你想要的 Lightbox libraries，并且想要啥样的功能，任你筛选和过滤。

还等什么！赶快去看一下吧！也许能找到你想要的Lightbox。

资源网址：The Lightbox Clones Matrix

窥探jQuery — 面向JavaScript程序员(收藏)

Rainbow — Thu, 10 Sep 2009 01:45:40 +0000

窥探jQuery — 面向JavaScript程序员

简介

Simon Willison来自英国，是一名经验丰富的开发人员。曾工作于Yahoo，是Web开发框架Django的创始人之一，也是OpenID的推动者。这是一篇针对jQuery的描述性文章，由于作者出色的分析，该文被引入jquery.com的教程库，对jQuery的推动有一定作用。
英文版权归Simon Willison所有，中译文作者yangyang（aka davidkoree）。双语版可用于非商业传播，但须注明英文版作者、版权信息，以及中译文作者。翻译水平有限，请广大读者指正。

当 jQuery 在2006年1月现身时，给我的第一印象，是这玩意儿构造得很精明。基于CSS选择器（CSS selectors）来打点一切，其思路相当灵巧（参考getElementsBySelector）。但链盒工事（chaining stuff）看起来更像个噱头，并且整体看来，jQuery库提供的功能并不能覆盖所有基础性的东西。因此我断定，jQuery只会昙花一现。

几个月以来，我逐渐明白自己想错了。从技术工艺上考量，jQuery十分凌厉。它用简洁的方法，把大量常用功能封装起来，并提供精巧的插入式API，来满足标准库之外的功能模块的实现。jQuery秉持的核心，乃DOM元素的集合（译注：通常是某些子集合）——它把元素集合作为一个根本，给高度抽象出来了。最重要的，是这种遵循最佳实践的抽象，能让jQuery与其他JavaScript代码相处融洽。

很多对jQuery的介绍，都是针对设计师和初级开发人员。接下来我想说明，为什么jQuery也会吸引那些富有经验的开发人员。

名称空间（Namespacing）

编写可重用的、优秀的JavaScript代码，其关键在于对名称空间的积极把控。JavaScript只拥有单一的、全局的名称空间（即window对象），而很多程序员（以及一些库）恣意地为之添加各种东西。要知道全局变量是魔鬼！聪明的开发人员，会使用类似组件模式的技术，来尽力减少全局对象的数量。

jQuery仅向全局名称空间引入一个标记：jQuery函数/对象。其余的要么是jQuery的直接属性（译注：原文‘directy property’系笔误，应是‘direct property’），要么就是调用jQuery函数所返回的对象的方法。

那 “语言升级”（language enhancements）又是什么呢？大多数库会提供映射，过滤，剥离，往往是浏览器的JavaScript引擎所缺少的那些功能。还有一些库，直接扩展了JavaScript内置的String和Array类，但这是冒险的做法。String.prototype和Array.prototype也有各自的名称空间，在其内添加的属性一旦发生冲突，所带来的风险，不亚于在全局环境下的草率大意。

在语言升级方面，jQuery提供了很多函数（功能），但每个函数都被赋给jQuery对象的属性：jQuery.each，jQuery.extend，jQuery.grep，jQuery.map，jQuery.merge以及jQuery.trim。如此一来，它们就不会跟其他代码产生冲突。

声名狼藉的$函数（The infamous $ function）

刚才我说到，jQuery是唯一被引入的全局标记，其实并不尽然：$标记作为jQuery的快捷方式，也被引入进来。庆幸的是，$的存在不会带来负面影响：如果你需要让原始的$起死回生（比如，这之前你的代码使用了Prototype），你可以调用jQuery.noConflict()来恢复它。

如果你既想拥有$的便利，又不希望jQuery跟其他同样使用了全局$函数的代码发生冲突，可遵循jQuery文档所建议的惯用方式：

(function($) {
    // 在这个函数体里，$可作为jQuery的引用
    // 很方便，对吧？
})(jQuery);

把一切都附加到$标记的做法，曾让我认为jQuery华而不实。不过，从体系的角度来审视这种设计，一切又是非常明了的——尽管我常喜欢在代码中定义自己的$快捷方式。

选取元素（Selecting some elements）

jQuery的每个操作，都以选取DOM中一个或更多的节点（nodes）作为开始。jQuery（拥有一种真正的面向特定领域）的选取语法，是十分有趣的，它结合了CSS 1，CSS 2，部分CSS 3语法，一些XPath语法，以及一些特定的扩展。在这里我不会做详细介绍，我只列出几个有用的例子：

jQuery(‘div.panel’): 选取了所有class="panel"的div
jQuery(‘p#intro’): 选取了所有id="intro"的段落
jQuery(‘div#content a:visible’): 选取了id="content"的div中所有可见的链接
jQuery(‘input[@name=email]‘): 选取了所有name="email"的输入域
jQuery(‘table.orders tr:odd’): 选取了类名为“orders”的表中所有的奇数行
jQuery(‘a[@href^="http://"]‘): 选取了所有（以http://开头的）外部链接
jQuery(‘p[a]‘): 选取了所有包含一个或多个链接的段落

上述例子中，:visible和:odd是jQuery实现的扩展，很具特色。而属性的选取使用@作为标记，其方式和XPath一样，要优于CSS 2。

jQuery的这套选取语法包罗万象，有些类似正则表达式，想完全消化是需要花上一段时间的。

把玩一下（Doing stuff with them）

通过jQuery的选取操作，我们能得到一些很棒的“素材”（beast）。它们是一个集合，包含了DOM元素，并且类似数组那样，拥有length属性；通过索引可以访问集合中的元素。在Firebug console的交互模式下，集合也被显示成一个数组，这个特性非常有用。集合实际上是一个jQuery对象，这个对象被赋予了很多方法（methods），用来查询，修改，扩展集合中的元素。

jQuery的方法（methods），本质上可分成三种：一种可以操作那些符合匹配的元素；一种可以返回第一个匹配到的对象的值；一种可以变更被选取的集合。

我不会列出所有的方法（可参考visual jquery.com），但我用例子做一下说明。如果你的浏览器装了Firebug，你可以以交互方式运行这些示例代码：首先使用这个bookmarklet（译注[1]）把jQuery库载入至浏览器的任意页面，然后把示例代码粘贴到Firebug console中。

jQuery(‘div#primary’).width(300);: 把id="primary"的div的宽度设为300px
jQuery(‘p’).css(‘line-height’, ‘1.8em’);: 把所有段落的line-height设为1.8em
jQuery(‘li:odd’).css({color: ‘white’, backgroundColor: ‘black’});: 向间隔的list项添加两个CSS规则；注意css()函数可以用一个对象来代替两个字符串作为参数
jQuery(‘a[@href^="http://"]‘).addClass(‘external’).attr(‘target’, ‘_blank’);: 向所有（以http://开头的）外部链接添加“external”类，然后策略性地加上target="_blank"属性。这个示例用到了链盒（chaining），稍后会做介绍。
jQuery(‘blockquote’).each(function(el) { alert(jQuery(this).text()) });: 遍历页面上的每个
，并显示出它的文字内容（包括HTML标签）
jQuery(‘a’).html(‘Click here!’);: 用阴险的“Click here!”代替页面上所有的链接的文字

下面的示例展示了jQuery如何取得第一个匹配到的对象的值：

var width = jQuery(‘div’).width();: 页面上第一个div的宽度
var src = jQuery(‘img’).attr(’src’);: 页面上第一张图片的src属性值
var color = jQuery(‘h1′).css(‘color’);: 第一个
的颜色样式值

在jQuery 的方法构造中，蕴含着令人惬意的对称性：当向方法传递两个参数或一个对象时，方法可被用来执行设置操作；如果只向方法传递一个参数，则可以让它执行取值操作（译注：读者可对照上面的示例代码感受一下）。这种对称性设计贯穿了jQuery体系，使得API的文法更容易被记忆。

本节最后的例子，展示了一些可变更被选取的元素集合的方法。这些方法大多都提高了检索DOM的简易程度：

jQuery(‘div’).not(‘[@id]‘): 返回那些没有id属性的div
jQuery(‘h2′).parent(): 返回那些是
的直接父节点元素
jQuery(‘blockquote’).children(): 返回所有
的子节点元素
jQuery(‘p’).eq(4).next(): 在页面上找到第五个段落（译注：因为集合的元素索引从0开始），然后根据节点的树层结构关系，找到并返回这个段落节点右侧的兄弟节点元素
jQuery(‘input:text:first’).parents(‘form’): 找到并返回页面上第一个type="text"的输入域所在的form节点元素，parents()的可选参数是另一个选择器

链盒（Chaining）

jQuery 开发团队经常夸耀jQuery的链盒理念（译注[2]），甚至在网站首页上宣扬“jQuery将改变你编写JavaScript的方式”。我个人感觉，这么做多少有点误导大众，我愿意告诉大家，你完全可以取jQuery之长，却应避免冗长的方法链盒（chains of methods）。

也就是说，链盒有时会像变戏法一样。除了使用链盒将各种操作DOM的方法粘到一起，你也可以使用jQuery的end()方法，来实现在特定范围内推进或回溯你需要得到的元素。这个概念很难解释清楚。本质上讲，每次使用（诸如children()或filter()）方法来改变元素集合时，你可以在这些方法之后使用end()，来重新定位你最初选取的元素集合。关于这点，Jesse Skinner在他的 Simplify Ajax development with jQuery（译注[3]）教程中给出了实例：

    $('form#login')
    // 第一步，隐藏表单中那些带有'optional'类的<label>
   .find('label.optional').hide().end()  
   // 第二步，为表单的密码输入域渲染上红色边框    
   .find('input:password').css('border', '1px solid red').end()   
    // 第三步，为表单加上提交处理 
    .submit(function(){
          return confirm('Are you sure you want to submit?');
    });

这个示例读起来就像句俏皮话。整个过程是，先选取一个表单，再在其中选取一些元素做修改，然后回溯到表单，为它定义一个submit()处理。

示例很酷，但如果你不习惯，也可以不这么用。我就很乐意用自定义变量来规划代码。

操作DOM（DOM Manipulation）

jQuery提供了几个大规模操作DOM的卓越方法。第一种非常让人惊叹：jQuery()函数能把HTML片段插入DOM元素中（实际上，函数会留意以’<’打头的字符串参数）：

1	var div = jQuery('<div>Some text</div>');

一旦你创建好了div，便可以继续用链盒向其添加属性：

1	var div = jQuery('<div>Some text</div>').addClass('inserted').attr('id', 'foo');

现在把div加到body上：

1	div.appendTo(document.body)

或用选择器把div加到已知元素的前面：

1	div.prependTo('div#primary')

处理事件（Handling events）

任何JavaScript库都需要事件处理能力，jQuery也不例外。类似attr()和css()的行为，各种与事件处理相关的方法也有双重用途：一种是把函数当作参数，赋给事件处理器；一种是不带参数，可以模拟事件被触发（译注：前提是事件已经定义，可参考visualjquery.com > Events > click()）：

jQuery(‘p’).click(function() { jQuery(this).css(‘background-color’, ‘red’); });: 为所有段落增加点击事件，当你点击它们时，段落背景会变成红色
jQuery(‘p:first’).click(): 然后在第一个段落上模拟点击的动作，它的背景会变成红色

类似的函数还包括mouseover，keyup等，对应着浏览器通常支持的那些动作。留意一下事件处理中的’this’关键字，它代表触发事件的元素；jQuery(this)是一种惯用语法，可以让this所代表的元素应用各种jQuery方法。

这里有两个与事件相关的函数值得仔细说一下：

jQuery('a').hover(function() {
    jQuery(this).css('background-color', 'orange');
     }, function() {
    jQuery(this).css('background-color', 'white');
});

hover()可设定两个函数，分别对应onmouseover和onmouseout事件。

1
2
3

jQuery('p').one('click', function() { 
    alert(jQuery(this).html()); 
});

one()设定的事件在第一次被触发后便被移除。上面的示例会让所有段落在第一次被点击时显示其文字内容。

凭借bind()和trigger()方法，jQuery也可以支持自定义事件（click()家族仅仅是便捷方法，只支持有限的事件）。自定义事件可接受参数，trigger()可接受数组作为参数，来做各种处理操作：

jQuery(document).bind('stuffHappened', function(event, msg) {   
   alert('stuff happened: ' + msg);
});
jQuery(document).trigger('stuffHappened', ['Hello!']);

渐进式编码（Unobtrusive scripting）

本小节的标题很令我钟意。我一直认为，最好的Web应用程序，往往是那些在脚本被禁用后仍能正常使用的程序。想建立这样的应用程序，最好的方法就是遵循渐进式编码，让普通页面完全加载后，再为页面中的元素赋以事件处理（更多信息可参考渐进式编码和Hijax）。

jQuery对这种编码策略提供了绝好支持。首先，从整体上看，节点选取暗合jQuery以及渐进式编码的核心理念。其次，针对window.onload问题，jQuery提供了一套解决方案，这套方案借鉴了Dean Edward的成果，使得以“DOM加载完毕”为信号的事件能跨浏览器工作。你可以在浏览器完全加载DOM后设定并运行一个函数，如下所示：

1
2
3

jQuery(document).ready(function() {
   alert('The DOM is ready!');
});

你甚至可以直接传递一个函数给jQuery()，以更简洁的方式达到同样效果：

1
2
3

jQuery(function() {
   alert('The DOM is ready!');
});

jQuery与Ajax（jQuery and Ajax）

在我所知道的主流JavaScript库中，jQuery拥有最棒的Ajax API。最简单的Ajax调用如：

1	jQuery('div#intro').load('/some/fragment.html');

代码以GET请求方式，从/some/fragment.html文件中获取HTML片段，并把片段装载到id="intro"的div中。

当我第一次看到这行代码时，几乎对它没什么印象。这看起来非常简洁，但如果你想用jQuery做些更复杂的事情，比如显示Ajax装载进度，该如何做呢？ jQuery为你准备了一些可自定义的事件（ajaxStart，ajaxComplete，ajaxError等等），来实现你想要的代码。同时 jQuery也提供了广泛的底层API，来实现更复杂的Ajax交互：

jQuery.get('/some/script.php', {'name': 'Simon'}, function(data) {
    alert('The server said: ' + data);
}); 
    // 以GET方式通过/some/script.php?name=Simon获取数据
jQuery.post('/some/script.php', {'name': 'Simon'}, function(data) {
    alert('The server said: ' + data);
}); 
    // 以POST方式向/some/script.php发送请求
jQuery.getJSON('/some.json', function(json) {
       alert('JSON rocks: ' + <a target="_blank" href="http://www.yeeyan.com/articles/tag/js"><em>jsem>a>on.foo + ' ' + json.bar);
});
    // 从/some.json接收并解析数据，把数据转换成JSON格式
jQuery.getScript('/script.js'); 
    // 以GET方式获取/script.js脚本并用eval()执行

插件（Plugins）

就你所能获得的功能的数量而言，jQuery库其实是相当小的——对代码做紧凑处理后只有20KB左右，甚至用gzip压缩后会变得更小。向标准库添加额外功能时，需用插件的方式来做，它可以（也确实能够）向现有的jQuery实例对象添加全新的方法。如果你想执行：

1	jQuery('p').bounceAroundTheScreenAndTurnGreen();

jQuery的插件机制提供了文档说明型的挂载方式（documented hooks），可以实现把上述方法添加到jQuery中。这种简易的创建形式，吸引了很多插件作者，他们让人印象深刻；现在插件目录中已经有超过100个插件了。

真正绝妙的，是你可以像自定义方法那样，来定义选择器。比如，moreSelectors插件实现了诸如“div:color(red)”的方法，来匹配包含红色文本的div。

并非天衣无缝（Leaky abstractions）

在发掘jQuery各种特性的同时，我也被某个我视之为教条（philosophical blocker）的东西所折磨着。几年来，我总是建议大家使用一种JavaScript库，前提是你们愿意梳理它的源码，并把它的工作原理彻底搞懂。我发出如此论调，是基于Joel Spolsky的不健全抽象的法则（译注[4]）。在那篇文章中，Joel指出，API把复杂性隐藏的越多，当它出现无法应付的意外时，你越有可能遭遇更多的麻烦。浏览器平台是不健全抽象的最佳代表，所以当库无法帮你摆脱困境时，你要自寻解药。保持警觉非常重要。

jQuery 使用了相当不可思议的技术，以求实现它所设想的各种功能——其中一些（比如选择器的代码）真是震天骇地。如果有必要彻底搞懂一个库的工作原理，那么对大多数开发人员来说，jQuery不会是上佳之选。然而，jQuery拥有极高的人气，并且没有太多与之相关的恐怖经典流于街巷（译注：原文是a distinct lack of horror stories，比如微软Win95的“蓝屏”就是恐怖经典:），所以具体到jQuery所用技艺的邪正之分，也就变得不那么重要了。

我想，我必须重新审视曾给大家的建议。库的运作机制并不是问题焦点：关键是应看清更具普遍性的潜在问题，知晓浏览器之间的差别，以及你使用库的哪种技术，来消除差别造成的负面影响。没有哪种库可以一劳永逸地帮你克服浏览器的古怪行为。但只要你对应付潜在问题训练有素，便可把握经脉，指出问题的源头——无论它们来自你自己编写的代码，还是库或者应付策略本身。

结语（To conclude）

我费了那么多口舌，希望能让大家明白，jQuery不只是又一个JavaScript库那么简单——它蕴含了很多值得品味揣摩的理念，甚至能启迪那些骨灰级的JavaScript程序员。如果你不打算尝试jQuery，但仍值得去花些时间探索一下jQuery的生态体系（the jQuery ecosystem）。

Simon Willison写于2007年8月15日凌晨2:27

译注：

[1] bookmarklet在原文中指的是一段“Insert jQuery”的JavaScript代码，由于译者使用Google Docs进行在线翻译，链接中的JS代码被编辑器屏蔽掉了，下面列出的代码可粘贴到浏览器的地址栏中执行，执行后才可以继续用示例代码查看jQuery的选取效果：
javascript:void(function(){var s=document.createElement(’script’);s.src=’http://code.jquery.com/jquery-1.1.2.js’;document.getElementsByTagName(‘head’)[0].appendChild(s);}())

[2] 本文使用的术语“链盒”，大抵可对应单词chain/chaining/chainable；译者在参考jQuery Magazine issue 1对jQuery 选择器运行方式的图解后，确定了这种译法。汉字是象形文字，按“盒”字的构造来体会jQuery颇有意趣：比如上面的“人”字，不正是选择器“吐出”特定元素的“嘴”吗？而“人”字下面“一”“口”“皿”的逐层累积，其形状又类似jQuery的Logo，并让人联想到链式选取过程中不同的元素集合；“盒” 即是“桶”（bucket），译者自以为绝妙！

[3] IBM developerWorks中国的官方翻译版本《使用jQuery简化Ajax开发》；译言版本分1、2两部分，由令狐葱翻译。

[4] Law of Leaky Abstractions: All non-trivial abstractions, to some degree, are leaky. 详细解读请见原文。

中文译文来源：

原文网站：译言网

原文地址： http://www.yeeyan.com/articles/view/davidkoree/4568

译者：davidkoree

有滑动效果的导航条，基于JavaScript

Rainbow — Tue, 08 Sep 2009 09:53:52 +0000

此例子是基于JavaScript写的Sliding Menu。构思巧妙，代码短小，高效。通过主流的浏览器测试。

演示一：http://cssrainbow.cn/Project/JavaScript/demo5/menueffect/index.html

演示二：http://cssrainbow.cn/Project/JavaScript/demo5/menueffect/index2.html

下载：http://cssrainbow.cn/Project/JavaScript/demo5/

FireBug 控制台指令

Rainbow — Fri, 04 Sep 2009 01:06:23 +0000

FireBug 是一个非常实用的JavaScript以及DOM查看调试工具，是 Firefox 的一个插件。

使用 FireBug 调试 AJAX 应用非常方便，终于可以告别 alert 时代了！
Console Logging 函数FireBug 为所有 Web 页面提供了一个 console 对象。

接下来我们就学习一下这个对象所包含的函数：

Logging 基础

console.log("message" [,objects]) – 将一个字符串打印到控制台。

字符串可以包含任何“String Formatting”小节描述的模式。

字符串后面的对象应该用来取代之前字符串中的模式。（译者注：大家用过C里面 printf 吧，效果基本是一样的。）

Logging 等级通常根据不同的等级来区分Logging的严重程度是很有帮助的。

FireBug 提供了4个等级。

为了达到视觉分离的效果，这些函数与 log 不同的地方就是它们在被调用的时候会自动包含一个指向代码行数的链接。

console.debug("message" [,objects]) – 记录一个 debug 消息。

console.info("message" [,objects]) – 记录一个信息.

console.warn("message" [,objects]) – 记录一个警告.

console.error("message" [,objects]) – 记录一个错误.

断言断言是一条确保代码规则的非常好的途径.

console 对象包含了一系列各种类型的断言函数，并且允许你编写自己的断言函数。

console.assert(a, "message" [,objects]) – Asserts that an a is true.

console.assertEquals(a, b, "message" [,objects]) – Asserts that a is equal to b.

console.assertNotEquals(a, b, "message" [,objects]) – Asserts that a is not equal to b.

console.assertGreater(a, b, "message" [,objects]) – Asserts that a is greater than b.

console.assertNotGreater(a, b, "message" [,objects]) – Asserts that a is not greater than b.

console.assertLess(a, b, "message" [,objects]) – Asserts that a is less than b.

console.assertNotLess(a, b, "message" [,objects]) – Asserts that a is not less than b.

console.assertContains(a, b, "message" [,objects]) – Asserts that a is in the array b.

console.assertNotContains(a, b, "message" [,objects]) – Asserts that a is not in the array b.

console.assertTrue(a, "message" [,objects]) – Asserts that a is equal to true.

console.assertFalse(a, "message" [,objects]) – Asserts that a is equal to false.

console.assertNull(a, "message" [,objects]) – Asserts that a is equal to null.

console.assertNotNull(a, "message" [,objects]) – Asserts that a is not equal to null.

console.assertUndefined(a, "message" [,objects]) – Asserts that a is equal to undefined.

console.assertNotUndefined(a, "message" [,objects]) – Asserts that a is not equal to undefined.

console.assertInstanceOf(a, b, "message" [,objects]) – Asserts that a is an instance of type b.

console.assertNotInstanceOf(a, b, "message" [,objects]) – Asserts that a is not an instance of type b.

console.assertTypeOf(a, b, "message" [,objects]) – Asserts that the type of a is equal to the string b.

console.assertNotTypeOf(a, b, "message" [,objects]) – Asserts that the type of a is not equal to the string b.

测量（Measurement）下面的一些函数可以让你方便的测量你的一些代码。

console.trace() – 记录执行点的堆栈信息。

console.time("name") – 根据 name 创建一个唯一的计时器。

console.timeEnd("name") – 根据 name 停止计时器，并且记录消耗的时间，以毫秒为单位。

console.count("name") – 记录该行代码执行的次数。

字符串格式化所有 console 的 logging 函数都可以通过以下模式格式化字符串：

%s – 将对象格式化为字符串。

%d, %i, %l, %f – 将对象格式化为数字。

%o – 将对象格式化成一个指向 inspector 的超链接。

%1.o, %2.0, etc.. – 将对象格式化成包含自己属性的可交互的表格。

%.o – 将对象格式化成具有自身属性的一个数组。

%x – 将对象格式化成一个可交互的 XML 树形结构。

%1.x, %2.x, etc.. – 将对象格式化成一个可交互的 XML 数型结构，并且展开 n 层节点。

如果你需要一个真实的 % 符号，你可以通过一个转移符号就像这样 "\%"。

命令行函数内建的命令行函数可以通过以下命令行使用：

$("id") – document.getElementById() 的简写。（译者注：跟 prototype.js 学来的吧？）

$$("css") – 返回一个符合 CSS 选择器的元素数组。

$x("xpath") – 返回一个符合 XPath 选择器的元素数组。

$0 – 返回最近被检查（inspected）的对象。

$1 – 返回最近被检查（inspected）的下一个对象。

$n(5) – 返回最近被检查的第n个对象。

inspect(object) – 将对象显示在 Inspector 中。

dir(object) – 返回一个对象的属性名数组。（译者注：跟 Python 学的？）

clear() – 清除控制台信息。

文章来源：爱在戏院前

原文链接地址：http://www.nearking.com/article.asp?id=11

快速掌握JavaScript正则表达式

Rainbow — Mon, 10 Aug 2009 15:34:55 +0000

EcmaScript正則表達式( 深入淺出系列之淺出 ^_^ )

使用方法

創建對象
var r = new RegExp("表達式","ig");
適合在動態構造匹配對象時使用；
表達式中轉義符需要使用兩次，如\\d;

直接量
var r = /表達式/ig;
使用在任何固定模式的匹配;

常用屬性

$1…$9
返回九个在模式匹配期间找到的、最近保存的部分。只读。
index
返回第一个成功匹配的开始位置。只读。
lastIndex??? *(注意)
返回最后一次成功匹配的位置(下一次匹配開始的位置)。讀寫。
只有當使用exec()或test()函數時才會寫入。
lastMatch
返回最后匹配的字符。只读。
input
返回查找的字符串。只读。

lastIndex

考慮以下代碼：

lastIndex屬于實例屬性

當一個正則表達式實例多次test或exec時，它的lastIndex將每一次都被更改。

量詞

?
出現0次或1次
*
出現0次或多次
+
出現1次或多次
{n}
一定出現n次
{n,m}
至少出現n次，最多出現m次
{n,}
至少出現n次

貪婪與非貪婪（惰性）的量詞

貪婪匹配：
?
*
+
{n}
{n,m}
{n,}

非貪婪匹配：
??
*?
+?
{n}?
{n,m}?
{n,}?

貪婪與非貪婪的匹配過程

考慮以下代碼：

//貪婪匹配
匹配整個字符串
從后逐一舍去最后一個字符繼續

http://www/hello/

//非貪婪匹配
從第一個字符開始匹配
如果失敗，讀入下一個字符繼續
http:/,??? /,??? www/,??? hello/

分組、反向引用與非捕獲性分組

用來匹配以一系列字符為一個單位的模式
(一系列的字符作為一個整體哦)
每創建一個分組，在執行test()、match()、search()、replace()后，可以通過全局$1…$9屬性來獲取匹配到的每一個分組。
分組匹配將帶來一定的效率損耗，如果有時候不需要獲取分組的結果，可以使用非捕獲性分組：(?:一系列的字符)

候選

用來匹配a or b or n…模式。比如，匹配文件類型：

前瞻

正向前瞻
var r = /(aaa(?=bbb))/;
用于匹配后面緊挨著的是bbb的串aaa

負向前瞻
var r = /(aaa(?!bbb))/;
用于匹配后面緊挨著的不是bbb的串aaa

Replace

Replace中使用正則，第二個參數是函數!

當有反向引用時：
arguments[0]：匹配到的串
arguments[1]：$1
arguments[2]：$2
………………………..
arguments[arguments.length-2]：匹配到的位置
arguments[arguments.length-1]：要匹配的字符串

否則，有3個形參：
arguments[0]：匹配到的串
arguments[1]：匹配到的位置
arguments[2]：要匹配的字符串

Replace應用

不用循环输出一至一百：

替換所有<>為[]：

快速掌握JavaScript正则表达式PPT下载：http://www.v-ec.com/dh20156/code/EcmaScriptRegExp.ppt

七(4) . 最常见的JavaScript DOM方法实战-创建和克隆元素

Rainbow — Tue, 04 Aug 2009 14:57:11 +0000

JavaScript DOM 创建和克隆元素

W3C DOM允许你创建自己的元素和文本节点，并把它们添加大文档树中。理论上上说，你可以从树中移除所有的元素，创建新元素，或者重整文档树，从而完全改变页面。但是在实践中，这个特性用起来有些限制。

DOM也允许你克隆现有的元素，已便你能方便地复制文档的某一部分并在文档中分发副本。

在我们学习之前，我还是把总结好的DOM知识体系表放在前面以方便我们查阅。

Node接口定义的节点类型都包含的特性和方法

特性和方法后面的 “冒号:” 紧跟的单词是“返回值类型”

Node

属性

遍历节点（短途旅行）:: parentNode : Node; firstChild : Node; lastChild : Node; nextSibling : Node; previousSibling : Node; childNodes : NodeList
节点信息:: nodeName :String; nodeType :number; nodeValue :String
返回一个节点的根元素（文档对象）:: ownerDocument : Document
包含了代表一个元素的特性的Attr对象；仅用于Element节点：: attributes : NamedNodeMap
获取对象层次中的父对象：: parentElement [IE] :Node

方法

修改文档树:: appendChild(Node newChild) : Node; insertBefore(Node newChild, Node refChild) : Node; removeChild(Node oldChild): Node; replaceChild(Node newChild, Node refChild) : Node
克隆一个节点：: cloneNode(boolean deep) : Node
删除一个子节点:: removeNode(boolean removeChildren) : Node
判断childNodes包含是否包含节点：: hasChildNodes() : boolean

Node

Document

属性

自己的：: documentElement : Element
继承 Node :: attributes, childNodes, firstChild, lastChild, nextSibling, nodeName, nodeType, nodeValue, ownerDocument, parentElement, parentNode, previousSibling

方法

自己的：

创建元素：: createElement(String tagName) : Element; createTextNode(String data) : Text
查找元素：: getElementById(String elementId) : Element; getElementsByTagName(String tagname) : NodeList

继承 Node :

appendChild, cloneNode, hasChildNodes, insertBefore, removeChild, removeNode, replaceChild

Element

属性

自己的：: tagName: String
继承 Node :: attributes, childNodes, firstChild, lastChild, nextSibling, nodeName, nodeType, nodeValue, ownerDocument, parentElement, parentNode, previousSibling

方法

自己的：

属性的读写：: getAttribute(String name) : String; setAttribute(String name, String value) : void

其它：: getElementsByTagName(String name) Stub : NodeList; normalize() Stub : void; removeAttribute(String name) : void

继承 Node :

appendChild, cloneNode, hasChildNodes, insertBefore, removeChild, removeNode, replaceChild

createElement()和createTextNode()

createElement()和createTextNode()做的事情正如它们的名字所说的那样。
我在第七(3) . 最常见的JavaScript DOM方法实战-修改文档树中已经用过它们。

当时的目的是把新创建的元素添加到文档树里，使它成为某个元素的最后一个子节点。

 //创建一个li新元素
 var newChild=document.createElement('li');
 //创建一个a 新元素
 var newLink=document.createElement('a')
 //创建一个 Text 节点
 var newText=document.createTextNode('My Wiki');

newChild指向新创建的

元素对象，newLink指向新创建的元素对象,而newText指向新创建的文本节点对象。
这些节点都还没有被插入文档中。正如我们上章七(3) . 最常见的JavaScript DOM方法实战-修改文档树
中，用到的appendChild()或insertBefore()将它们附加到文档树中。

例如：

  var nav=document.getElementById("nav");
  //创建一个li新元素
  var newChild=document.createElement('li');
  //创建一个a 新元素
  var newLink=document.createElement('a')
  //创建一个 Text 节点
  var newText=document.createTextNode('My Wiki');
  //把Text添加到a元素节点中
  newLink.appendChild(newText);
  //给a元素节点设置属性href和内容
  newLink.setAttribute('href',"#");
  //把a元素节点添加到新的li元素节点中
  newChild.appendChild(newLink);
  //把新的li元素节点添加到 ul 元素节点里
  nav.appendChild(newChild);

这先将文本节点附加到中，然后再将包含文本节点的附加到

中，最后把包含和文本的

附加到

中。此时我的导航条ul中多了一个 li 子节点。

createTextNode()和HTML实体

createTextNode()有一个问题：

它会按字面创建文本，而不是创建你所需要的符号。

<script  type="text/javascript">
window.onload=function(){
	var x=document.createTextNode("© Copyrights reserved");
	document.getElementById("test").appendChild(x);
}
script>

不过，我们可以使用innerHTML来代替：

<script  type="text/javascript">
window.onload=function(){	
	document.getElementById("test").innerHTML="© Copyrights reserved";
}
script>

关于innerHTML属性的用法，我们会在下一节中作为专题来具体的讨论。

cloneNode()

cloneNode()方法克隆一个节点，即它能对节点做一个完美的复制，使你可以在随后将其插入到文档树中

我还是以我的导航条为例说明：

我的导航条 HTML代码

<div id="menu">
    <h1>我的导航条</h1>          
    <ul id="nav">
       <li><a href="#">HOME</a></li>
       <li><a href="#">(X)Html / Css</a></li>
       <li><a href="#">Ajax / RIA</a></li>
       <li><a href="#">GoF</a></li>
       <li><a href="#">JavaScript</a></li>
       <li><a href="#">JavaWeb</a></li>
       <li><a href="#">jQuery</a></li>
       <li><a href="#">MooTools</a></li>
       <li><a href="#">Python</a></li>
       <li><a href="#">Resources</a></li>
    </ul>
</div>

测试cloneNode()

<script  type="text/javascript">
window.onload=function(){
     var nav_list=[];
	 var nav=document.getElementById("nav");
     nav_list=nav.getElementsByTagName("li");
	 var x=nav_list[0];
	 var y=x.cloneNode(true);
	 nav.appendChild(y);
}
script>

要想正确的使用cloneNode(),你必须了解它的一下二个特征：

1. cloneNode()接受一个可选值为true或false的参数。True 表示克隆元素和它的所有子节点。False表示克隆元素但不包含它的子节点。通常，我们在实践中用true,我从来没有遇到过想要克隆一个节点但不包含它的子节点的情形。

2. cloneNode()不会克隆事件处理程序。这相当的让人恼火，不知道这个方法是怎么定义的（原因我也不知道）所以每次你克隆一个节点，你不得不在克隆上重新定义事件处理程序。

CSSrainbow.cn » JavaScript

怎么写Tab?基于JavaScript实现的

一个getElementsByClassName 方法

版本一

The CSS Code:

The HTML Code:

The JavaScript Code:

版本二

The CSS Code :

The HTML Code :

The JavaScript Code :

版本三

The CSS Code :

The HTML Code :

The JavaScript Code :

版本四

The CSS Code :

The HTML Code :

The JavaScript Code :

版本五

The CSS Code :

The HTML Code :

The JavaScript Code :

版本六

The CSS Code :

The HTML Code :

The JavaScript Code :

版本七

The CSS Code :

The HTML Code :

The JavaScript Code :

版本八

The CSS Code :

The HTML Code :

The JavaScript Code :

版本九

The CSS Code :

The HTML Code :

The JavaScript Code :

相关日志 »

本地图片预览二三事

各种浏览器的支持情况

Internet Explorer & Opera

WebKit (Safari / Chrome)

Firefox

IE 下效果的JavaScript Code：

FF 下效果的JavaScript Code:

IE and FF 的JavaScript Code:

jQuery Code:

Ajax 图片上传

相关日志 »

关于‘TOP’置顶链接的那些事儿

方案一：在合适的地方，手动加入一个或多个‘TOP’链接。

The HTML :

The JavaScript :

方案二：‘TOP’默认是隐藏的，只要滚动条，滚动到一定高度时就显示，否则就隐藏。

The HTML :

The CSS :

The MooTools JavaScript :

The MooTools JavaScript :

The jQuery JavaScript :

方案三：在浮动的工具条中加入‘Top’ 或 ‘Bottom’锚点链接。

相关日志 »

理解JavaScript中的事件处理

什么是事件？

今天的事件

DOM事件流

冒泡型事件(Event Bubbling)

捕获型事件(Event Capturing)

DOM标准的事件模型

事件传送

事件句柄和事件接听器

事件句柄

这种传统的事件绑定技术，优缺点是显然的：

事件接听器

IE下的事件监听器：

DOM标准下的事件监听器：

跨浏览器的注册与移除元素事件监听器方案

事件对象引用

停止事件冒泡和阻止事件的默认行为