包含了五个页面,N多函数,完成工作有幻灯片,点击显示内容功能,图片库,表格优化,表单优化,我自己没有写最后表单的ajax
在博客上只放了 js 函数代码,是供自己温习,想要学习建议阅读书籍。
案例放在github,地址:https://github.com/UnaMaatin/javascript-dom
// Global
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
//与insertBefor方法对应
function insertAfter(newElement,targetElement) {
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {
parent.appendChild(newElement);
} else {
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
//追加 class名称
function addClass(element,value) {
if (!element.className) {
element.className = value;
} else {
newClassName = element.className;
newClassName+= " ";
newClassName+= value;
element.className = newClassName;
}
}
//为导航链接动态添加 class=“here”
function highlightPage() {
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
//获取并遍历
var headers = document.getElementsByTagName('header');
if (headers.length == 0) return false;
var navs = headers[0].getElementsByTagName('nav');
if (navs.length == 0) return false;
var links = navs[0].getElementsByTagName("a");
for (var i=0; i<links.length; i++) {
var linkurl;
for (var i=0; i<links.length; i++) {
linkurl = links[i].getAttribute("href");
//判断当前页面url是否包含链接url的字符串
//indexOf(),对字符串检索,没有匹配到返回-1
if (window.location.href.indexOf(linkurl) != -1) {
links[i].className = "here";
//获取当前链接的文本值,用tolowerCase()方法转换小写形式
var linktext = links[i].lastChild.nodeValue.toLowerCase();
//给每个页面添加独特的ID属性
document.body.setAttribute("id",linktext);
}
}
}
}
/*添加独特的ID属性,更新css文件,利用这些id为不同的页面应用不同的背景图*/
// 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);
var ypos = parseInt(elem.style.top);
if (xpos == final_x && ypos == final_y) {
return true;
}
//Math.Ceil()对一个树进行上舍入
//每次移动十分之一或者十一分之一的距离
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");
//在此案例这个图片是一个类似相框的背景图,添加到创建的div上
frame.setAttribute("src","images/frame.gif");
frame.setAttribute("alt","");
frame.setAttribute("id","frame");
slideshow.appendChild(frame);
//声明:要做出幻灯片效果需要的图片是几张拼接在一起的
var preview = document.createElement("img");
preview.setAttribute("src","images/slideshow.gif");
preview.setAttribute("alt","a glimpse of what awaits you");
preview.setAttribute("id","preview");
slideshow.appendChild(preview);
//在指定子节点后面添加子节点
insertAfter(slideshow,intro);
//遍历,使其移动到相应的位置上,调用movement函数传入5毫秒的interval值
var links = document.getElementsByTagName("a");
for (var i=0; i<links.length; i++) {
links[i].onmouseover = function() {
var destination = this.getAttribute("href");
//把href值进行检索匹配,成功执行moveElement
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++ ) {
//作为参数传入的id对应的部分,等于就显示,不等于就隐藏
if (sections[i].getAttribute("id") != id) {
sections[i].style.display = "none";
} else {
sections[i].style.display = "block";
}
}
}
function prepareInternalnav() {
if (!document.getElementsByTagName) return false;
if (!document.getElementById) 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 nav = navs[0];
var links = nav.getElementsByTagName("a");
//遍历nav元素里的a
for (var i=0; i<links.length; i++ ) {
//提取到 herf 属性值里 #后面的字符串
var sectionId = links[i].getAttribute("href").split("#")[1];
//检测是否有带有相应的id元素
if (!document.getElementById(sectionId)) continue;
//页面加载后,默认隐藏所有部分
document.getElementById(sectionId).style.display = "none";
//把提取到的字符串作为lins[i]的属性,
links[i].destination = sectionId;
links[i].onclick = function() {
//作为参数调用showSection函数
showSection(this.destination);
return false;
}
}
}
// Photos 图片库案例,可参照第七章博客
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 desctext = document.createTextNode("Choose an image");
description.appendChild(desctext);
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);
}
}
}
function showPic(whichpic) {
if (!document.getElementById("placeholder")) return true;
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
if (!document.getElementById("description")) return false;
if (whichpic.getAttribute("title")) {
var text = whichpic.getAttribute("title");
} else {
var text = "";
}
var description = document.getElementById("description");
if (description.firstChild.nodeType == 3) {
description.firstChild.nodeValue = text;
}
return false;
}
// Live 表格可参考第九章博客
function stripeTables() {
if (!document.getElementsByTagName) return false;
var tables = document.getElementsByTagName("table");
for (var i=0; i<tables.length; i++) {
var odd = false;
var rows = tables[i].getElementsByTagName("tr");
for (var j=0; j<rows.length; j++) {
if (odd == true) {
addClass(rows[j],"odd");
odd = false;
} else {
odd = true;
}
}
}
}
function highlightRows() {
if(!document.getElementsByTagName) return false;
var rows = document.getElementsByTagName("tr");
for (var i=0; i<rows.length; i++) {
rows[i].oldClassName = rows[i].className
rows[i].onmouseover = function() {
addClass(this,"highlight");
}
rows[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.childNodes.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 dtitle = document.createElement("dt");
var dtitle_text = document.createTextNode(key);
dtitle.appendChild(dtitle_text);
var ddesc = document.createElement("dd");
var ddesc_text = document.createTextNode(definition);
ddesc.appendChild(ddesc_text);
dlist.appendChild(dtitle);
dlist.appendChild(ddesc);
}
if (dlist.childNodes.length < 1) return false;
var header = document.createElement("h3");
var header_text = document.createTextNode("Abbreviations");
header.appendChild(header_text);
var articles = document.getElementsByTagName("article");
if (articles.length == 0) return false;
articles[0].appendChild(header);
articles[0].appendChild(dlist);
}
// Contact
/* focusLabels()
1.取得文档中labe元素
2.如果lable有for属性,添加一个事件处理函数
3.在lable被单击时,提取for属性的值,这个值就是相应表单字段ID值。
4.确保存在相应的表单字段
5.让相应表单字段获得焦点
*/
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 id = this.getAttribute("for");
if (!document.getElementById(id)) return false;
var element = document.getElementById(id);
element.focus();
}
}
}
function loadEvents() {
// home
prepareSlideshow();
// about
prepareInternalnav();
// photos
preparePlaceholder();
prepareGallery();
// live
stripeTables();
highlightRows();
displayAbbreviations();
// contact
focusLabels();
}
// Load events
addLoadEvent(highlightPage);
addLoadEvent(loadEvents);