js snippets

js snippets

/**
*						 ☆★☆★☆★☆★☆★☆JavaScript草稿集☆★☆★☆★☆★☆★☆
*
*								 By hustskyking
*/

//★JQuery★<!--<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>//-->

//★★★★★★★★公共部分★★★★★★★★
	function printf(obj) {
		document.write(obj + "<br />");
	}

	function $(obj) {
		return document.getElementById(obj);
	}
	function forEach(obj) {
		for (m in obj) {
			printf(m + ':' + obj[m]);
		}
	}
//★★★★★★★★注释方式★★★★★★★★★
	/**
	*	//<![CDATA[
	*		
	*	//]]>
	*/

/*
//★★★★★★★★alertBox★★★★★★★★
	function alertBox() {
		"use strict";
		var coverLayer = document.createElement("div");
		var contentLayer = document.createElement("div");
		coverLayer.setAttribute("id", "coverLayer");
		contentLayer.setAttribute("id", "contentLayer");
		contentLayer.innerHTML = "<p style='text-align:center; color:white; font-size:40px;'>Huazhong University Of Science And Technology</p>";
		document.body.appendChild(coverLayer);
		document.body.appendChild(contentLayer);
	}
	window.onload = alertBox;
*/

/*
//★★★★★★★★基本数据类型★★★★★★★★
	var x = parseFloat("20.33");
	var y = parseInt("11", 8);
	var z = Math.sin(Math.PI / 2);
	var s = "this is a string.";
	var a = [1, 2, 4, 3];
	var o = {first: 1, second: 2, third: 3};
	var result = o.valueOf();
	printf(result + "<br />");
	printf(1 + "2" + "<br />"); //12
	printf((a instanceof Array) + "<br />");
	printf((a.constructor) + "<br />");
	printf(o.hasOwnProperty("first") + "<br />");
*/

/*
//★★★★★★★★arguments数组★★★★★★★★
	function plus(x, y, z) {
		//"use strict";
		if (arguments.length !== 3) {
			throw new Error(arguments.callee);
		}
		return x + y + z;
	}
	//plus(2, 3);
	//printf(plus(2, 3, 4));
	var cal = {
		x: 1,
		y: 2,
		f: function () {
			//"use strict";
			return this.x + this.y;
		}
	};
	printf(cal.f() + "<br />");

//★★★★★★★★函数call和apply★★★★★★★★
		function fCall(x, y) {
			return x + y;
		}
		var res = fCall.call(cal, 1, 2);
		var res1 = fCall.apply(cal,[6, 9]);
		printf(res + "<br />");
		printf(res1 + "<br />");

//★★★★★★★★类和继承★★★★★★★★
	function people(name, age, sex) {
		this.name = name;
		this.age = age;
		this.sex = sex;
	}
	people.prototype.info = function () {
		printf("My name is " + this.name + ", I'm " + this.age + " years old." + "<br />");
	}
	var humen = new people("Lijing", 19, "man");
	humen.info();
*/

/*
//★★★★★★★★IE4 && IE5 没有apply函数，利用prototype来构造这样的原型函数★★★★★★★★
	if (!Function.prototype.apply) {
		Function.prototype.apply = function (object, parameters) {
			var f = this;
			var o = object || window;
			var args = patameters || [];
			
			o._$_apply_$_ = f;
			
			var stringArgs = [];
			
			for (var i = 0; i < args.length; i++) {
				stringArgs[i] = "args[" + i + "]";
			}
			
			var arglist = stringArgs.join(",");
			var methodcall = "o._$_apply_$_(" + arglist + ");";
			var result = eval(methodcall);
			
			delete o._$_apply_$_;
			
			return result;
		};
	}
*/

/*
// ★★★★★★★★类属性,类方法,类私有成员,子类与超类★★★★★★★★
	function Rectangle(width, height) {
		this.width = width;
		this.height = height;
	}
	Rectangle.prototype.area = function () {
		return this.width * this.height;
	}
	function PositionRectangle(x, y, w, h) {
		Rectangle.call(this, w, h);
		this.x = x;
		this.y = y;
	}

	PositionRectangle.prototype = new Rectangle();
	delete PositionRectangle.prototype.width;
	delete PositionRectangle.prototype.height;
	PositionRectangle.prototype.constructor = PositionRectangle;

	var r = new PositionRectangle(2, 2, 2, 2);
	printf(r.area());
	printf(r instanceof PositionRectangle && r instanceof Rectangle && r instanceof Object);

	//注：可以使用call和apply来调用被覆盖的函数
	//such as: Circle.prototype.toString.apply(this);

//★★★★★★★★非继承的扩展★★★★★★★★
	function borrowMethods(borrowFrom, addTo) {
		var from = borrowFrom.prototype;
		var to = addTo.prototype;
		for (m in from) {
			if (from[m] != "function") continue;
			to[m] = from[m];
		}
	}
*/

//★★★★★★★★确定对象类型★★★★★★★★
/*
	△ typeof null → "object";
	   typeof undefined → "undefined";
	   typeof 数组 → "object";
	   typeof 函数 → "function"
		
	△ instanceof 和构造函数 constructor 
	  【特点：他们只能允许根据已经知道的类来进行测试对象，无法用于检查未知的对象】
		
	△ 用Object.toString()测试对象的类型
		
	△ 鸭子类型识别（Duck Typing）
*/


//★★★★★★★★渐变效果★★★★★★★★
/*
	function setOpacity(obj, val) {
		if (document.documentElement.filters){
			obj.style.filter = "alpha(opacity=" + val + ")";
		}else {
			obj.style.opacity = val / 100;
		}
	}

	function fadeIn(obj) {
		var val = 10;
		var t = setInterval(function(){
				if (val >= 100) {
					clearInterval(t);
				}
				setOpacity(obj, val);
				val += 10;
			}, 250);
	}

		★★  fadeIn($("changeBox"));

		
	function setWidth(obj, val) {
		obj.style.width = parseInt(val) + "px";
	}
	function setHeight(obj, val) {
		obj.style.height = parseInt(val) + "px";
	}
	function slide(obj) {
		var val = 0;
		var t = setInterval(function(){
				if (val >= 300) {
					clearInterval(t);
				}
				setWidth(obj, val);
				setHeight(obj, val);
				val += 10;
			}, 80);
	}

		★★  slide($("changeBox"));

		
	function setTop(obj, val) {
		obj.style.top = parseInt(val) + "px";
	}
	function setLeft(obj, val) {
		obj.style.left = parseInt(val) + "px";
	}
	function move(obj) {
		var val = 0;
		var t = setInterval(function(){
				if (val >= 300) {
					clearInterval(t);
				}
				setTop(obj, val);
				setLeft(obj, val);
				val += 10;
			}, 80);
	}

		★★  move($("changeBox"));
*/

//★★★★★★★★正则表达式★★★★★★★★
	//正则表达式中的特殊符号有  ^	$	.	*	+	?	=	!	|	\	/	()	[]	{}	
	
	/**|------------------------------------------------------------
	*  |	[...]		括号内任意字符
	*  |	[^...]		非上
	*  |	.			除换行符和其他Unicode行终止符之外的任意字符
	*  |	\w			任何ASCII单字字符
	*  |	\W			非上
	*  |	\s			任何Unicode空白
	*  |	\S			非上
	*  |	\d			任何ASCII数字，等价于[0-9]
	*  |	\D			非上
	*  |	\b			匹配一个词语的边界
	*  |	\B			非上
	*  |	{n, m}		匹配至少 n 至多 m 次
	*  |	{n,}		匹配至少 n 次
	*  |	{n}			匹配恰好 n 次
	*  |	?			匹配前一项0或1次
	*  |	+			匹配前一项1次或多次
	*  |	*			匹配前一项0次或多次
	*  |	^			匹配字符串开头
	*  |	$			匹配字符串结尾
	*  |	i			忽略大小写
	*  |	g			全局匹配
	*  |	m			多行匹配
	*  |-------------------------------------------------------------
	*/
/*
	var text = "JavaScript is not Java, thanks god, that is true! Java is not Javascript!!";
	var url = "http://www.baidu.com/pic.html"
	var Reg = /java/gi;
	var RegUrl = /(\w+):\/\/([\w.]+)\/(\S*)/;
	var res = url.match(RegUrl);
	//var res = text.replace(/Java/gi, "JAVA");
	//var res = Reg.exec(text);
	//var res = Reg.test(text);
	printf(text);
	printf(res);
*/

//★★★★★★★★drag拖动★★★★★★★★
/*
	var box = document.getElementById("box");
	var drag = {
		start: function(evt) {
			var e = window.event || evt;
			box.startX = e.clientX - box.offsetLeft;
			box.startY = e.clientY - box.offsetTop;
			document.onmousemove = drag.ondrag;
			document.addEventListener ? document.addEventListener("mouseup",drag.stop,false) : document.attachEvent("onmouseup",drag.stop);
		},
		ondrag: function(evt) {
			var e = window.event || evt;
			with(box.style) {
				position = "absolute";
				left = e.clientX - box.startX + "px";
				top = e.clientY - box.startY + "px";
			};
		},
		stop: function() {
			document.onmousemove = "";
			document.detachEvent ?  document.detachEvent("onmouseup",drag.start) : document.removeEventListener("mouseup",drag.start,false);
		},
		init: function() {
			box.addEventListener ? box.addEventListener("mousedown",drag.start,false) : box.attachEvent("onmousedown",drag.start);
		}
	}
	drag.init();
*/

//★★★★★★★★浏览器Location和History★★★★★★★★
//Location: protocol + host + pathname + search
//printf(document.location == document.URL); //true

//在大多数情况下，document.location和location.href是相同的，但是，当存在服务器重定向时，
//document.location包含的是装载的URL，而location.href包含的则是原始请求的文档的URL
/*
	|-------self, window
	|
	|-------navigator
	|
	|-------frames[]		|------forms[]--------elments[]------options[]
	|						|
	|-------location		|------anchors[]
	|						|
	|-------document--------|------links[]
	|						|
	|-------history			|------images[]
	|						|
	|-------screen			|------applets[]
*/

//for(m in navigator){printf(m + ":" + screen[m]);}
/*
	printf(window.screenX);
	printf(window.screenY);
	printf(window.outerWidth);
	printf(window.outerHeight);
	printf(window.innerWidth);
	printf(window.innerHeight);
	//以上属性IE7下没有
	printf("");
	printf(screen.width);
	printf(screen.height);
	printf(screen.availWidth);
	printf(screen.availHeight);
*/
/*
	//子窗口和父窗口的相互控制
	function openWin() {
		childWin = window.open("javascript:'<h1>hello</h1>'", "newWin", "height=0,width=0");
		var val = 0;
		var t = setInterval(function(){
			if (val > 400){
				clearInterval(t);
			}
			childWin.resizeTo(val,val);
			childWin.moveTo(val,val);
			val += 10;
		},100);
		childWin.opener.focus();
		//childWin.opener.close();
	}
	function closeWin() {
		childWin.close();
	}
	
	document.onclick = openWin;
	document.onkeydown = closeWin;
*/

//★★★★★★★★ERROR提示★★★★★★★★
/*
	window.onerror = function (msg, url, line) {
		alert("Wow..my gosh!!! You got an error.\n\n" + "【Error】: " + msg + "\n【url】: " + url + "\n【line】: " + line);
	}
*/

//★★★★★★★★document★★★★★★★★
/*
	//帧结构演示
	<html>
	<frameset cols="200,*">
	  <frame src="./gustbook.html">
	  <frame src="/gustbook.html" name="view_frame">
	</frameset> 
	</html>
*/
/*
	function w() {
		printf("something");
	}
	setTimeout(w,1000); //覆盖原来的文本
	//注：一个文档绝不应该从时间句柄中调用他自己的write()方法
*/
/*
	★document.open
	功能：打开一个新文档，并擦除当前文档的内容。
	语法：document.open(mimetype,replace)
	参数：

	mimetype：可选。规定正在写的文档的类型。默认值是"text/html"。 
	replace：可选。当此参数设置后，可引起新文档从父文档继承历史条目。 
	注1：open()方法将擦除当前HTML文档的内容，开始一个新的文档，新文档用write()方法或writeln()方法编写。
	注2：调用open()方法打开一个新文档并且用write()方法设置文档内容后，必须记住用close()方法关闭文档，并迫使其内容显示出来。

	注3：属于被覆盖的文档的一部分的脚本或事件句柄不能调用该方法，因为脚本或事件句柄自身也会被覆盖。
	
	★document.close
	功能：close()方法可关闭一个由open()方法打开的输出流，并显示选定的数据。
	语法：document.close()
	参数：无。

	注：该方法将关闭open()方法打开的文档流，并强制地显示出所有缓存的输出内容。如果您使用write()方法动态地输出一个文档，必须记住当你这么做的时候要调用close()方法，以确保所有文档内容都能显示。

	★一旦调用了close()，就不应该再次调用write()，因为这会隐式地调用open()来擦除当前文档并开始一个新的文档。
*/

//★★★★★★★★节点类型★★★★★★★★
/*
	|--------------------------------|
	|  	接口			nodeType值	 |
	|--------------------------------|
	|	Element				1		 |
	|	Text				3		 |
	|	Document			9		 |
	|	Comment				8		 |
	|	DocumentFragment	11		 |
	|	Attr				2		 |
	|--------------------------------|
*/

//★★★★★★★★document.documentElement★★★★★★★★
// 引用的是 html
//appendChild(), insetBefore(), replaceChild()
//可以用document.createDocumentFragment()来创建一个DocumentFragment
/*
	function reverse(n) {
		var f = document.createDocumentFragment();
		while (n.lastChild) f.appendChild(n.lastChild);
		n.appendChild(f);
	}
*/

//★★★★★★★★查询选定的文本★★★★★★★★
/*
	function getSelectedText() {
		if (window.getSelection) {
			return window.getSelection().toString();
		}else if (document.getSelection) {
			return document.getSelection();
		}else {
			return document.selection.createRange().text;
		}
	}
	function start() {
		var text = getSelectedText();
		if (text) {
			//$("changeBox").innerHTML = text;
			window.open("http://www.baidu.com/s?wd=" + encodeURIComponent(text));
		}
	}
	if (!document.all) {
		window.onmouseup = start;
	}else {
		document.attachEvent("onmouseup", start);
	}
*/
/*
	var o = $("changeBox");
	printf(o.offsetTop);
	printf(o.offsetLeft);
	printf(o.clientWidth);
	printf(o.clientHeight);
	printf(o.scrollTop);
	printf(o.scrollLeft);
	printf(o.offsetWidth);
	printf(o.offsetHeight);
*/
/*★★★★★★★★Key Event and Mouse Event★★★★★★★★
	//屏蔽右键菜单,可以应用到任何一个区域
	//oncontextmenu="window.event.returnValue=false"
	document.onmousedown = function (e) {
		var e = window.event || e;
		if (e.button == 0) {
			document.body.style.background = "red";
		}else if (e.button == 1) {
			document.body.style.background = "blue";
		}else {
			document.body.style.background = "yellow";
		}
	}

	document.onkeydown = function (e) {
		var e = window.event || e;
		if (e.shiftKey) {
			alert("shift");
		}if (e.ctrlKey) {
			alert("ctrl");
		}else if (e.altKey) {
			alert("alt");
		}else {
			alert("others");
		}
	}

*/
/*
//★★★★★★★★合成事件★★★★★★★★
	//Document.createEvent()创建, Event.initEvent(), UIEvent.initEvent(), MouseEvent.initEvent.initMouseEvent()初始化
	//dipatchEvent方法来分派事件
	//IE中，使用Document.createEventObjec来创建一个新的事件对象。然后使用目标元素的fireEvent()方法来分派他
	var DataEvent = {};
	DataEvent.send = function (target, datatype, data) {
		if (typeof target == "string") target = $(target);
		if (document.createEvent) {
			var e = createEvent("Events");
			e.initEvent("dataavailable", true, false);
		}else if (document.createEventObject) {
			var e = document.createEventObject();
		}else return;
		e.datatype = datatype;
		e.data = data;
		if (target.dispatchEvent) target.dispatchEvent(e);
		else if (target.fireEvent) target.fireEvent("ondataavailable", e);
	};
	DataEvent.receive = function (target, handler) {
		if (typeof target == "string") target = $(target);
		if (target.addEventListener) target.addEventListener("dataavailable", handler, false);
		else if (target.attachEvent) target.attachEvent("ondataavaliable", handler);
	}
*/
//★★★★★★★★IE支持客户端永久性★★★★★★★★
/*
	var username = "hustskyking";
	var password = "psw";
	var memory = $("changeBox");
	memory.style.behavior = "url('#default#userData')";
	memory.setAttribute("username", username);
	memory.setAttribute("password", password);
	memory.save('myPersistentData');
	
	var now = (new Date()).getTime();
	var expires = now + 10*24*60*60*1000;
	memory.expires = (new Date(expires)).toUTCString();
*/
/*
	var memory = $("changeBox");
	memory.load("myPersistentData");
	alert(memory.getAttribute("username"));
*/		
/*
//★★★★★★★★AJAX★★★★★★★★
	function loadXMLDoc()
	{
		var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
		xmlhttp.
		xmlhttp.onreadystatechange = function ()
		{
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
			{
				$("changeBox").innerHTML = xmlhttp.responseText;
			}
		}
		xmlhttp.open("GET", "response.php?func=" + printf("Instead of origin HTML"), true);
		xmlhttp.send();
	}
	window.onclick = loadXMLDoc;
*/

/*
	function createXHR() {
		var aVersions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0"];
		for (var i = 0; i < aVersions; i++) {
			try {
				var oXHR = new ActiveXObject(aVersions[i]);
				return oXHR;
			}catch(oError){
				//不执行任何操作
			}
		}
		throw new Error("MSXML is not installed.");
	}

*/

/*
//在给src特性复制的同时会下载一个图像，这意味着甚至无需将该图像添加到页面中
//基于图像实现跨域通信
/**
* 	  启动并连续向服务器发送骑牛的最佳方式是什么？在有些情况下，最好是从服务器与载入一些信息，
* 以便能够快读相应用户的操；而在另外一些情况下，你可能想在不同的时间间隔内，向服务器发送
* 数据或者从服务器接收数据。
*/
/*
	var oImg = document.createElement("img");
	oImg.onload = function() {
		//alert("Image is ready");
	}
	oImg.src = "./images/001.gif";
	document.body.appendChild(oImg);

	function createIFrame(){
		var oframe = document.createElement("iframe");
		oframe.name = "myIFrame";
		oframe.id = "myIFrame";
		oframe.style.cssText = "height:500px; width:400px; border:none";
		oframe.src = "http://jqueryui.com/demos/droppable/accepted-elements.html";
		document.body.appendChild(oframe);
	}
	createIFrame();
*/

/*
//面向对象的Javascript
//1.公共成员
function Customer() {
	this.firstName = "John";
	this.lastName = "Smith";
	this.getFullName = function () {
		return this.firstName +  " " + this.lastName;
	}
}
var john = new Customer();

//2.私有变量
function Customer(firstName, lastName) {
	var _firstName = firstName;
	var _lastName = lastName;
	this.getFullName = function () {//闭包
		return _firstName +  " " + _lastName;
	}
}

//prototype属性
//扩展类的定义
//如果在prototype属性所引用的对象里没有找到，它会到这个引用对象的prototype属性里查找，如此递归查询。
Customer.prototype.getFullName = function () {
	return this.firstName + " " + this.lastName;
}

//面向对象编程和继承
function Partner() {
	this.partnerId = "";
}
Partner.prototype = new Customer();

//与上等价
Partner.prototype = {
	firstName: "",
	lastName: ""
}
*/
/*
//★★★★★★★★Cookie★★★★★★★★
function setCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}

function getCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}

function deleteCookie(name) {
	setCookie(name,"",-1);
}
*/