Javascript DOM编程艺术JS代码

//com

function addLoadEvent (func) {

	var oldonload = window.onload;

	if (typeof window.onload != 'function') {

		window.onload = func;

	}

	else {

		window.onload = function(){

			oldonload();

	    	func();

		}

	}

}

function insertAfter (newElement,targetElement) {

	var parent = targetElement.parentNode;

	if (parent.lastChild == targetElement) {

		parent.appendChild(newElement);

	}else {

		parent.insertBefore(newElement,targetElement.nextSibling);

	}

}

function addClass (element,value) {

	if(!element.className){

		element.className = value;

	} else{

		newClassName = element.className;

		newClassName += "";

		newClassName +=value;

		element.className = newClassName;

	}

}

function highlightPage () {

	if (!document.getElementsByTagName) { return false; }

	if (!document.getElementById) return false;

	var headers = document.getElementsByTagName('header');

	var navs = headers[0].getElementsByTagName('nav');

	var links = navs[0].getElementsByTagName('a');

	var linkurl;

	for (var i = 0; i < links.length; i++) {

		linkurl = links[i].getAttribute("href");

		if (window.location.href.indexOf(linkurl) != -1) {

			addClass(links[i],"here");

			var linktext = links[i].lastChild.nodeValue.toLowerCase();

			document.body.setAttribute("id", linktext);

		}

	}

}

//home

function moveElement (elementID,final_x,final_y,interval) {

	if (!document.getElementById) { return false; }

	if (!document.getElementById(elementID)) { return false; }

	var elem = document.getElementById(elementID);

	if (elem.movement) {

		clearTimeout(elem.movement);

	}

	if (!elem.style.left) {

		elem.style.left = "0px";

	}

	if (!elem.style.top) {

		elem.style.top = "0px";

	}

	var xpos = parseInt(elem.style.left, 10);

	var ypos = parseInt(elem.style.top, 10);

	if (xpos == final_x && ypos == final_y) {

		return true;

	}

	if (xpos < final_x) {

		var dist = Math.ceil((final_x-xpos)/10);

		xpos = xpos + dist;

	}

	if (xpos > final_x) {

		var dist = Math.ceil((xpos-final_x)/10);

		xpos = xpos - dist;

	}

	if (ypos < final_y) {

		var dist = Math.ceil((final_y-ypos)/10);

		ypos = ypos+dist;

	}

	if (ypos > final_y) {

		var dist = Math.ceil((ypos-final_y)/10);

		ypos = ypos-dist;

	}

	elem.style.left = xpos + "px";

	elem.style.top = ypos + "px";

	var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";

	elem.movement = setTimeout(repeat,interval);

}

function prepareSlideshow () {

	if (!document.getElementsByTagName) return false;

	if (!document.getElementById) return false;

	if (!document.getElementById("intro")) return false;

	var intro = document.getElementById('intro');

	var slideshow = document.createElement("div");

	slideshow.setAttribute("id", "slideshow");

	var frame = document.createElement("img");

	frame.setAttribute("src", "images/frame.gif");

	frame.setAttribute("id", "frame");

	slideshow.appendChild(frame);

	var preview = document.createElement("img");

	preview.setAttribute("src", "images/slideshow.gif");

	preview.setAttribute("alt", 'which you');

	preview.setAttribute("id", "preview");

	slideshow.appendChild(preview);

	insertAfter(slideshow,intro);

	var links = document.getElementsByTagName("a");

	var destination;

	for (var i = 0; i < links.length; i++) {

		links[i].onmouseover = function () {

		 	destination = this.getAttribute("href");

		 	if (destination.indexOf("index.html") != -1) {

		 		moveElement("preview",0,0,5);

		 	}

		 	if (destination.indexOf("about.html") != -1) {

		 		moveElement("preview",-150,0,5);

		 	}

		 	if (destination.indexOf("photos.html") != -1) {

		 		moveElement("preview",-300,0,5);

		 	}

		 	if (destination.indexOf("live.html") != -1) {

		 		moveElement("preview",-450,0,5);

		 	}

		 	if (destination.indexOf("contact.html") != -1) {

		 		moveElement("preview",-600,0,5);

		 	}

		}

	}

}

// About

function showSection (id) {

	var sections = document.getElementsByTagName("section");

	for (var i = 0; i < sections.length; i++) {

	 	if (sections[i].getAttribute('id') != id) {

	 		sections[i].style.display = "none";

	 	} else {

	 		sections[i].style.display = "block";

	 	}

	 }

}

function prepareInternalnav () {

	if(!document.getElementById) {

		return false;

	}

	if(!document.getElementsByTagName){

		return false;

	}

	var articles = document.getElementsByTagName("article");

	if (articles.length === 0) { return false;}

	var navs = articles[0].getElementsByTagName("nav");

	if (navs.length === 0) { return false;}

	var links = navs[0].getElementsByTagName("a");

	for (var i = 0; i < links.length; i++) {

		var sectionId = links[i].getAttribute("href").split("#")[1];

		if (!document.getElementById(sectionId)) { continue;}

		document.getElementById(sectionId).style.display = "none";

		links[i].destination = sectionId;

		links[i].onclick = function () {

			showSection(this.destination);

			return false;

		}

	}

}

//photos

function showPic (whichpic) {

	if (!document.getElementById('placeholder')) { return false; }

	var source = whichpic.getAttribute("href");

	var placeholder = document.getElementById("placeholder");

	placeholder.setAttribute("src", source);

	if (!document.getElementById('description')) { return false;}

	var whictit = whichpic.getAttribute("title");

	if(whictit){

		var text = whictit;

	}else {

		var text = "";

	}

	var description = document.getElementById('description');

	if (description.firstChild.nodeType == 3) {

		description.firstChild.nodeValue = text;

	}

	return false;

}

function preparePlaceholder () {

	if (!document.createElement) { return false;}

	if (!document.createTextNode) {return false;}

	if (!document.getElementById) {return false;}

	if (!document.getElementById('imagegallery')) {return false;}

	var placeholder = document.createElement("img");

	placeholder.setAttribute("id", "placeholder");

	placeholder.setAttribute("src", "images/placeholder.gif");

	placeholder.setAttribute("alt", "my image gallery");

	var description = document.createElement("p");

	description.setAttribute("id", "description");

	var destxt = document.createTextNode("Choose an image");

	description.appendChild(destxt);

	var gallery = document.getElementById('imagegallery');

	insertAfter(description,gallery);

	insertAfter(placeholder,description);

}

function prepareGallery() {

	if (!document.getElementsByTagName) {return false;}

	if (!document.getElementById) {return false;}

	if (!document.getElementById('imagegallery')) {return false;}

	var gallery = document.getElementById('imagegallery');

	var links = gallery.getElementsByTagName("a");

	for (var i = 0; i < links.length; i++) {

		links[i].onclick = function () {

			return showPic(this);

		}

	}

}

//live

function stripeTables () {

	if (!document.getElementsByTagName) { return false;}

	var tabs = document.getElementsByTagName('table');

	for (var i = 0; i < tabs.length; i++) {

		var odd = false;

		var trs = tabs[i].getElementsByTagName("tr");

		for (var j = 0; j < trs.length; j++) {

			if (odd == true) {

				addClass(trs[j],"odd");

				odd = false;

			}else {

				odd =true;

			}

		}

	}

}

function highlightRows() {

	if (!document.getElementsByTagName) { return false;}

	var trs = document.getElementsByTagName('tr');

	for (var i = 0; i < trs.length; i++) {

		trs[i].oldClassName = trs[i].className;

		trs[i].onmouseover = function () {

			 addClass(this,'highlight')

		};

		trs[i].onmouseout = function () {

			 this.className = this.oldClassName;

		}

	}

}

function displayAbbreviations () {

	if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) {return false;}

	var abbreviations = document.getElementsByTagName('abbr');

	if (abbreviations.length < 1) { return false;}

	var defs = new Array();

	for (var i = 0; i < abbreviations.length; i++) {

		var current_abbr = abbreviations[i];

		if(current_abbr.lastChild.nodeValue.length < 1){ continue;}

		var definition = current_abbr.getAttribute("title");

		var key = current_abbr.lastChild.nodeValue;

		defs[key] = definition;

	}

	var dlist = document.createElement("dl");

	for (key in defs) {

		var definition = defs[key];

		var dts = document.createElement('dt');

		var dt_txt = document.createTextNode(key);

		dts.appendChild(dt_txt);

		var dds = document.createElement('dd');

		var dd_txt = document.createTextNode(definition);

		dds.appendChild(dd_txt);

		dlist.appendChild(dts);

		dlist.appendChild(dds);

	}

	if (dlist.childNodes.length < 1) { return false;}

	var header = document.createElement("h3");

	var	header_text = document.createTextNode("Abbreviations");

	header.appendChild(header_text);

	var article = document.getElementsByTagName('article');

	if (article.length == 0) {return false;}

	var articleo= article[0];

	articleo.appendChild(header);

	articleo.appendChild(dlist);

}

//contant

function focusLabels () {

	if (!document.getElementsByTagName) { return false;}

	var labels = document.getElementsByTagName('label');

	for (var i = 0; i < labels.length; i++) {

	 	if (!labels[i].getAttribute("for")) { continue;}

	 	labels[i].onclick = function() {

	 		var l_id = this.getAttribute("for");

	 		if(!document.getElementById(l_id)){ return false;}

	 		var element = document.getElementById(l_id);

	 		element.focus();

	 	}

	 }

}

function resetFields (whichform) {

	//如果if返回true则结束当前函数

	if (Modernizr.input.placeholder)  return;

	for (var i = 0; i < whichform.elements.length; i++) {

		var element = whichform.elements[i];

		if(element.type == "submit") continue;

		var check = element.placeholder || element.getAttribute("placeholder");

		if(!check) continue;

		element.onfocus = function () {

			var text = this.placeholder || this.getAttribute("placeholder");

			if (this.value == text) {

				this.value = "";

				this.className = "";

			}

		}

		element.onblur = function () {

			if (this.value == "") {

				this.value = this.placeholder || this.getAttribute("placeholder");

				this.className = "placeholder";

			}

		}

		element.onblur();

	}

}

function validateForm(whichform) {

	for (var i = 0; i < whichform.elements.length; i++) {

		 	var element = whichform.elements[i];

		 	if (element.getAttribute('required') == 'required') {

		 		if (!isFilled(element)) {

		 			alert("Please fill in the "+element.name+"field");

		 			return false;

		 		}

		 	}

		 	if (element.getAttribute('type') == "email") {

		 		if (!isEmail(element)) {

		 			alert("The"+element.name+"field must be a valid email address.");

		 			return false;

		 		}

		 	}

		}

		return true;

}

// function isFilled (field) {

// 	if (field.value.replace(' ','').length == 0) { return false;}

// 	var placeholder = field.placeholder || field.getAttribute('placeholder');

// 	return (field.value != placeholder);

// }

// function isEmail (field) {

// 	return (field.value.indexOf('@') != -1 || field.value.indexOf('.') != -1);

// }

function isFilled(field) {

  return (field.value.length > 1 && field.value != field.placeholder);

}

function isEmail(field) {

  return (field.value.indexOf("@") != -1 && field.value.indexOf(".") != -1);

}

function prepareForms () {

	for (var i = 0; i < document.forms.length; i++) {

	 	var thisform = document.forms[i];

	 	resetFields(thisform);

	 	thisform.onsubmit = function () {

	 		if (!validateForm(this)) { return false; }

	 		var article = document.getElementsByTagName('article')[0];

	 		if (submitFormWithAjax(this, article)) return false;

	 			return true;

	 	}

	 }

}

//ajax

function getHTTPObject () {

	if (typeof XMLHttpRequest == "undefined")

		XMLHttpRequest = function () {

			try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); }

				catch (e) {}

			try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); }

				catch (e) {}

			try { return new ActiveXObject("Msxml2.XMLHTTP"); }

				catch (e) {}

				return false;

		}

		return new XMLHttpRequest();

}

function displayAjaxLoading (element) {

	while (element.hasChildNodes()) {

	    element.removeChild(element.lastChild);

	 }

	 var content = document.createElement('img');

	 content.setAttribute("src", "images/loading.gif");

	 content.setAttribute("alt", "Loading...");

	 element.appendChild(content);

}

function submitFormWithAjax (whichform,thetarget) {

	var request = getHTTPObject();

	if (!request) { return false; }

	displayAjaxLoading(thetarget);

	var dataParts = [];

	var element;

	for (var i = 0; i < whichform.elements.length; i++) {

	 	element = whichform.elements[i];

	 	dataParts[i] = element.name + '=' + encodeURIComponent(element.value);

	 }

	 var data = dataParts.join('&');

	 request.open('POST', whichform.getAttribute("action"), true);

	 request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

	 request.onreadystatechange = function () {

	 	//验证当前文档的状态

	 	if (request.readyState == 4) {

	 		//响应成功

	 		if (request.status == 200 || request.status == 0) {

	 			//读取响应文本match()可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配

	 			var matches = request.responseText.match(/<article>([\s\S]+)<\/article>/);

	 			if (matches.length > 0) {

	 				thetarget.innerHTML = matches[1];

	 			} else {

	 				thetarget.innerHTML = '<p>Oops, there was an error. Sorry.</p>';

	 			}

	 		} else {

	 			thetarget.innHTML = '<p> + request.statusText + </p>';

	 		}

	 	}

	 };

	 request.send(data);

	 return true;

}

function loadEvents() {

  // home

  prepareSlideshow();

  // about

  prepareInternalnav();

  // photos

  preparePlaceholder();

  prepareGallery();

  //live

  stripeTables ();

  highlightRows();

  displayAbbreviations();

  //contact

  focusLabels ();

  prepareForms ();

}

// Load events

addLoadEvent(highlightPage);

addLoadEvent(loadEvents);

书中的综合案例，讲述了部分常用的函数

Javascript DOM编程艺术JS代码的更多相关文章

JavaScript DOM 编程艺术·setInterval与setTimeout的动画实现解析
先贴上moveElement()函数的大纲,为了方便观看,删了部分代码,完整版粘到文章后面. function moveElement(elementID,final_x,final_y,interv ...
JavaScript DOM编程艺术读后感（1）—— 平稳退化
最近,在读<JavaScript DOM编程艺术(第二版)>这本书,想着将自己的读后感记录下来,作为记忆吧. 其实我并不是最近才刚开始读这本书的,我读了有一段时间了.我是一名web前端开发 ...
《JavaScript Dom 编程艺术》读书笔记-第4章
我的前端入门第一本书是<JavaScript Dom 编程艺术>,网上查找资料发现前端的入门推荐书籍最受好评的就是这本和<JavaScript 高级程序设计>了.之所以先选这本 ...
Javascript DOM 编程艺术（第二版）读书笔记——基本语法
Javascript DOM 编程艺术(第二版),英Jeremy Keith.加Jeffrey Sambells著,杨涛.王建桥等译,人民邮电出版社. 学到这的时候,我发现一个问题:学习过程中,相当一 ...
《JavaScript DOM 编程艺术》学习笔记
目录 <JavaScript DOM 编程艺术> 学习笔记第一章 js简史第二章 js语法准备工作语法第三章 DOM DOM中的D DOM中的O DOM中的M 第四章 js图片库 ...
读书笔记：JavaScript DOM 编程艺术（第二版）
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
JavaScript DOM编程艺术学习笔记（一）
嗯,经过了一周的时间,今天终于将<JavaScript DOM编程艺术(第2版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推 ...
JavaScript DOM编程艺术第一章：JavaScript简史
本系列的博客是由本人在阅读<JavaScript DOM编程艺术>一书过程中做的总结.前面的偏理论部分都是书中原话,觉得有必要记录下来,方便自己翻阅,也希望能为读到本博客的人提供一些帮助, ...
《JavaScript dom 编程艺术》 placeholder占位符IE8兼容办法。
在<JavaScript dom 编程艺术>第11章学来的. 相对于用JavaScript替换文本框的提示语句 <!DOCTYPE html> <html lang=&q ...

随机推荐

MySQL主从同步、读写分离配置步骤
现在使用的两台服务器已经安装了MySQL,全是rpm包装的,能正常使用. 为了避免不必要的麻烦,主从服务器MySQL版本尽量保持一致; 环境:192.168.0.1 (Master) 192.168. ...
sketchup 导出 fbx文件单位错误
最近在使用sketchup导出fbx文件到unity中使用时,发生了尺度单位上的错误.按照网上给出的标准教程,选定模型的单位为十进制-米.导出时选项选择'米',但是得到的fbx文件在unity中出现了 ...
uva11630 or hdu2987 Cyclic antimonotonic permutations(构造水题)
转载请注明出处: http://www.cnblogs.com/fraud/ ——by fraud Cyclic antimonotonic permutations Time Li ...
linux bugfree 安装
前段时间用了下bugzilla,请参考:linux bugzilla nginx 安装配置详解,感觉不是很好用.下面说一下,bugfree的安装 bugfree3.0.1是用php的yii框架开发的 ...
树上战争(HDU 2545 并查集求解点到根节点长度)
树上战争 Time Limit: 10000/4000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submi ...
CSS的伪类和伪元素
伪类 W3C:"W3C" 列指示出该属性在哪个 CSS 版本中定义(CSS1 还是 CSS2). 属性描述 CSS :active 向被激活的元素添加样式. 1 :focus 向 ...
appsettings.json
appsettings.json 目录索引 [无私分享:ASP.NET CORE 项目实战]目录索引简介在我们之前的Asp.net mvc 开发中,一提到配置文件,我们不由的想到 web.conf ...
information_schema.profiling学习
information_schema.profiling可以用来分析每一条SQL在它执行的各个阶段的用时,注意这个表是session 级的,也就是说如果session1 开启了它:session2没有 ...
[poj 1039]Pipes[线段相交求交点]
题意: 无反射不透明管子, 问从入口射入的所有光线最远能到达的横坐标. 贯穿也可. 思路: 枚举每一组经过 up [ i ] 和 down [ j ] 的直线, 计算最远点. 因为无法按照光线生成的方 ...
uva 1589 by sixleaves
坑爹的模拟题目.自己对于这种比较复杂点得模拟题的能力概述还不够,还多加练习.贴别是做得时候一直再想如何检查车中间有没有棋子,炮中间有没有棋子.到网上参考别人的代码才发先这么简单的办法,自己尽然想不到. ...

Javascript DOM编程艺术JS代码

Javascript DOM编程艺术JS代码的更多相关文章

随机推荐

热门专题