动态创建标记+css_dom+js动态效果
生活随笔
收集整理的這篇文章主要介紹了
动态创建标记+css_dom+js动态效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
【7】動態創建標記
【7.1】一些傳統方法
【7.1.1】document.write方法，不推薦使用
<!DOCTYPE html> <html lang="en"> <head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>Testing</title> </head> <body> <script>document.write("<p>this is inserted.</p>"); </script> </body> </html> 【7.1.2】innerHTML 屬性：可以用來讀寫某給定元素里的html內容；?
<!DOCTYPE html> <html lang="en"> <head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>Testing</title> </head> <script type="text/javascript" src="example.js"> </script> <body> <div id="testdiv"><p>this is <em>my</em> content. </p> </div> </body> </html> window.onload = function() {var para = document.createElement("p");var testdiv = document.getElementById("testdiv");alert(testdiv.innerHTML);testdiv.appendChild(para);var txt = document.createTextNode("Hello world");para.appendChild(txt); } 【7.2】dom方法
【7.2.1】createElement 方法：創建一個元素節點；
var para = document.createElement("p");
【荔枝】查看上面<p>元素的 nodeType 和 nodeName值；
window.onload = function() { var para = document.createElement("p"); var info = "nodeName: "; info += para.nodeName; info += ", nodeType:"; info += para.nodeType; alert(info); }
（3）
【7.2.3】createTextNode方法：創建文本節點
1）荔枝：
var text = document.createTextNode("hello world.");
（4）
window.onload = function() {var para = document.createElement("p");var testdiv = document.getElementById("testdiv");alert(testdiv.innerHTML);// appendChild方法添加para為testdiv的子元素；testdiv.appendChild(para);// createTextNode方法：創建文本節點var txt = document.createTextNode("Hello world");para.appendChild(txt); } 【7.2.4】一個更復雜的組合
1）利用js生成<p>元素， 且元素內容為 this is my content.
（5）
window.onload = function() {// 利用js生成<p>元素，// 且元素內容為 this is my content.var para = document.createElement("p");var t1 = document.createTextNode("this is");var em = document.createElement("em");var t2 = document.createTextNode("my");var t3 = document.createTextNode("content. ");para.appendChild(t1);em.appendChild(t2);para.appendChild(em);para.appendChild(t3);var testdiv = document.getElementById("testdiv");testdiv.appendChild(para); } <!DOCTYPE html> <html lang="en"> <head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>Testing</title> </head> <script type="text/javascript" src="example3.js"> </script> <body> <div id="testdiv"> </div> </body> </html> 【7.3】重回圖片庫
【7.3.1】在已有元素前面插入一個新元素
parent.insertBefore(newElement, targetElement);
【7.3.2】在已有元素后面插入一個新元素
沒有insertAfter， 自定義的insertAfter如下；
function insertAfter(newElement, target) { var parent = target.parentNode; if (parent.lastChild == target ){ parent.appendChild(newElement); } else { parent.insertBefore(newElement, target.nextSibling); } } 【7.3.3】圖片庫二次改進版
1）有5個函數，如下：
addLoadEvent;
insertAfter;
preparePlaceholder;
prepareGallery;
showPic;
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 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(placeholder,gallery);insertAfter(description,placeholder); }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);}links[i].onkeypress = links[i].onclick;} }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; } addLoadEvent(preparePlaceholder); addLoadEvent(prepareGallery); <!DOCTYPE html> <html lang="en"> <head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>Image Gallery</title><script type="text/javascript" src="scripts/showPic.js"></script><link rel="stylesheet" href="styles/layout.css" type="text/css" media="screen" /> </head> <body><h1>Snapshots</h1><ul id="imagegallery"><li><a href="images/fireworks.jpg" title="A fireworks display"><img src="images/thumbnail_fireworks.jpg" alt="Fireworks" /></a></li><li><a href="images/coffee.jpg" title="A cup of black coffee" ><img src="images/thumbnail_coffee.jpg" alt="Coffee" /></a></li><li><a href="images/rose.jpg" title="A red, red rose"><img src="images/thumbnail_rose.jpg" alt="Rose" /></a></li><li><a href="images/bigben.jpg" title="The famous clock"><img src="images/thumbnail_bigben.jpg" alt="Big Ben" /></a></li></ul> </body> </html>
（6）
【7.4】ajax
1）ajax的主要優勢：對頁面的請求以異步方式發送到服務器； 而服務器不會用整個頁面來響應請求，它會在后臺處理請求， 與此同時用戶還能繼續瀏覽頁面并與頁面交互；
【7.4.1】XMLHttpRequest對象
1）ajax的核心是 XMLHttpRequest對象。這個對象充當著瀏覽器中的腳本（客戶端）與服務器之間的中間人的角色。
2）以往的請求都由瀏覽器發出，而javascript通過這個對象可以自己發送請求，同時也自己處理響應；
【荔枝】如何發送ajax請求；
<!DOCTYPE html> <html lang="en"> <head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>ajax</title> </head> <body><div id="new"></div><script src="scripts/ajax.js"></script> </body> </html> function getHttpObject() {if (typeof XMLHttpRequest == "undefined") {// 定義XMLHttpRequest函數 ，返回 ActiveXObject對象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;}}// 返回XMLHttpRequest實例return new XMLHttpRequest(); }// 在 document加載完畢后，執行addLoadEvent函數， // 以綁定 func函數作為document加載完畢后，瀏覽器加載的函數； function addLoadEvent(func) {var oldonload = window.onload;if (typeof window.onload != 'function') {window.onload = func;} else {window.onload = function() {oldonload();func();}} }function getNewContent() {var request = getHttpObject();if (request) {request.opne("GET", "example.txt", true);request.onreadystatechange = function() {if (request.readyState == 4) {var para = document.createElement("p");var text = document.createTextNode(request.responseText);para.appendChild(text);document.getElementById("new").appendChild(para);}};request.send(null);} else {alert("sorry, your browser does not support XMLHttpRequest.");} } addLoadEvent(getNewContent); 【分析】
1表示正在加載；
2表示加載完畢；
3表示正在交互；
4表示完成；
????<dt>w3c</dt>
????<dd>world wide web.</dd>
????<dt>dom</dt>
????<dd>document objecty model. </dd>
</dl>
（1） <!DOCTYPE html> <html lang="en"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>Explaining the Document Object Model</title><link rel="stylesheet" type="text/css" media="screen" href="styles/typography.css" /><script type="text/javascript" src="scripts/addLoadEvent.js"></script><script type="text/javascript" src="scripts/displayAbbreviations.js"></script></head><body><h1>What is the Document Object Model?</h1><p> The <abbr title="World Wide Web Consortium">W3C</abbr> definesthe <abbr title="Document Object Model">DOM</abbr> as:</p><blockquote cite="http://www.w3.org/DOM/"><p> A platform- and language-neutral interface that will allow programsand scripts to dynamically access and update thecontent, structure and style of documents.</p></blockquote><p> It is an <abbr title="Application Programming Interface">API</abbr>that can be used to navigate <abbr title="HyperText Markup Language"> HTML</abbr> and <abbr title="eXtensible Markup Language">XML </abbr> documents.</p></body> </html> 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("h2");// 創建文本節點var header_text = document.createTextNode("Abbreviations");header.appendChild(header_text); // 添加元素節點到bodydocument.body.appendChild(header); // 添加定義列表到bodydocument.body.appendChild(dlist); } // 使得displayAbbreviations函數在document加載完畢后就立即加載 addLoadEvent(displayAbbreviations); 【8.5】顯示文獻來源鏈接表
（2）
1）源碼如下： <!DOCTYPE html> <html lang="en"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>Explaining the Document Object Model</title><link rel="stylesheet" type="text/css" media="screen" href="styles/typography.css" /><script type="text/javascript" src="scripts/addLoadEvent.js"></script><script type="text/javascript" src="scripts/displayAbbreviations.js"></script><script type="text/javascript" src="scripts/displayCitations.js"></script></head><body><h1>What is the Document Object Model?</h1><p> The <abbr title="World Wide Web Consortium">W3C</abbr> definesthe <abbr title="Document Object Model">DOM</abbr> as:</p><blockquote cite="http://www.baidu.com"><p> A platform- and language-neutral interface that will allow programsand scripts to dynamically access and update thecontent, structure and style of documents.</p></blockquote><p> It is an <abbr title="Application Programming Interface">API</abbr>that can be used to navigate <abbr title="HyperText Markup Language"> HTML</abbr> and <abbr title="eXtensible Markup Language">XML </abbr> documents.</p></body> </html> function displayCitations() {if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false; // 獲取所有的 blockquote 的元素節點var quotes = document.getElementsByTagName("blockquote"); // 遍歷blockquotefor (var i=0; i<quotes.length; i++) { // 瀏覽器不支持cite屬性，則繼續；if (!quotes[i].hasAttribute("cite")) continue; // store the cite attributevar url = quotes[i].getAttribute("cite"); // 獲取 blockquote元素的所有節點var quoteChildren = quotes[i].getElementsByTagName('*'); // 瀏覽器不支持的話，則繼續；if (quoteChildren.length < 1) continue; // 獲取blockquote元素的最后一個節點var elem = quoteChildren[quoteChildren.length - 1]; // 創建一個連接var link = document.createElement("a");var link_text = document.createTextNode("source");link.appendChild(link_text);link.setAttribute("href",url);var superscript = document.createElement("sup");superscript.appendChild(link); // 把標記 superscript 添加到 blockquote元素的最后一個子節點elem.appendChild(superscript);} } addLoadEvent(displayCitations); 分析1）var quoteChildren = quotes[i].getElementsByTagName('*'); 把包含在當前 blockquote 元素里的所有元素節點找出來；
【8.6】顯示 快捷鍵清單
1）accesskey 屬性可以把一個元素如鏈接與鍵盤上的某個特定按鍵關聯在一起；如?
<a href="http://www.baidu.com" accesskey="1">home</a>
2）下面利用dom技術，動態創建一份快捷鍵清單，如下：
（3）
【源碼如下】 <!DOCTYPE html> <html lang="en"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>Explaining the Document Object Model</title><link rel="stylesheet" type="text/css" media="screen" href="styles/typography.css" /><script type="text/javascript" src="scripts/addLoadEvent.js"></script><script type="text/javascript" src="scripts/displayAbbreviations.js"></script><script type="text/javascript" src="scripts/displayCitations.js"></script><script type="text/javascript" src="scripts/displayAccesskeys.js"></script></head><body><ul id="navigation"><li><a href="index.html" accesskey="1">Home</a></li><li><a href="search.html" accesskey="4">Search</a></li><li><a href="contact.html" accesskey="0">Contact</a></li></ul><h1>What is the Document Object Model?</h1><p> The <abbr title="World Wide Web Consortium">W3C</abbr> definesthe <abbr title="Document Object Model">DOM</abbr> as:</p><blockquote cite="http://www.w3.org/DOM/"><p> A platform- and language-neutral interface that will allow programsand scripts to dynamically access and update thecontent, structure and style of documents.</p></blockquote><p> It is an <abbr title="Application Programming Interface">API</abbr>that can be used to navigate <abbr title="HyperText Markup Language"> HTML</abbr> and <abbr title="eXtensible Markup Language">XML </abbr> documents.</p></body> </html> function displayAccesskeys() {if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false; // 獲取所有鏈接元素var links = document.getElementsByTagName("a"); // 創建一個數組存儲快捷鍵var akeys = new Array(); // 遍歷鏈接for (var i=0; i<links.length; i++) {var current_link = links[i]; // 如果瀏覽器不支持快捷鍵屬性，則繼續if (current_link.getAttribute("accesskey") == null) continue; // 獲取 accesskey 屬性值；var key = current_link.getAttribute("accesskey"); // 獲取鏈接元素 <a> 的節點值；var text = current_link.lastChild.nodeValue; // add them to the arrayakeys[key] = text;} // 創建一個無序列表var list = document.createElement("ul"); // 遍歷快捷鍵for (key in akeys) {var text = akeys[key]; // 創建一個字符串用于存儲 快捷鍵 和 對應的鏈接var str = key + " : "+text; // 創建一個列表項 <li>var item = document.createElement("li");var item_text = document.createTextNode(str);item.appendChild(item_text); // 加入到列表list.appendChild(item);} // 創建標題var header = document.createElement("h3");var header_text = document.createTextNode("Accesskeys");header.appendChild(header_text); // 添加標題到 <body> 元素document.body.appendChild(header); // 添加列表到 <body> 元素document.body.appendChild(list); } addLoadEvent(displayAccesskeys);
1）style屬性值的數據類型為 object； <!DOCTYPE html> <html lang="en"> <head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>style is object</title></head> <body><p id="example" style="color: grey; font-family: 'Arial',sans-serif;"> An example of a paragraph</p><script type="text/javascript"> window.onload = function() {var para = document.getElementById("example");alert(typeof para.nodeName); // 獲取節點名稱的數據類型；string 類型alert(typeof para.style); // 獲取節點style屬性的數據類型；object 類型 }</script> </body> </html>2）style屬性包含元素的樣式： element.style.property 來獲取樣式值； <!DOCTYPE html> <html lang="en"> <head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>Example</title><script type="text/javascript"> window.onload = function() {var para = document.getElementById("example");para.style.color = "black";para.style.font = "2em 'Times',serif";alert("The font family is " + para.style.fontFamily); // 獲取style屬性的fontFamily屬性值 }</script> </head> <body><p id="example" style="color: grey; font-family: 'Arial',sans-serif;"> An example of a paragraph</p> </body> </html> 【9.2.1】獲取樣式
1）獲取 style屬性的color屬性； element.style.color ；
2）可以使用css速記屬性，可以把多個樣式組合在一起寫成一行。比如，聲明了 font:12px 'Arial', sans-serif, CSS font-size屬性將被設置為 12px, CSS font-family 屬性將被設置為 'Arial'， sans-serif；
p#example{
color: grey;
font: 12px, 'Arial', sans-serif;
}
則 document.getElementById("example").style.fontSize 等于空 或 無法獲取值；
而且 把 p#example{
color: grey;
font: 12px, 'Arial', sans-serif;
}
放在 <head>元素的子元素<style>里面，dom sytle屬性依然檢索不到；
【9.2.2】設置樣式
1）通過dom腳本賦值操作來更新樣式：
element.style.property = value;
如 para.style.color = "green";
para.style.font = "2em 'Times', serif";
【9.3】何時應該用dom腳本設置樣式
1）絕大多數情況下，應該使用 css 去設置樣式，而不使用dom腳本；
css3樣式表定義如下：
?tr:nth-child(odd) {background-color: #ffc; }
?tr:nth-child(even) {background-color: #fff; }
（2） <!DOCTYPE html> <html lang="en"> <head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>Cities</title><link rel="stylesheet" type="text/css" media="screen" href="styles/format.css" /><script type="text/javascript" src="scripts/addLoadEvent.js"></script><script type="text/javascript" src="scripts/stripeTables.js"></script><script type="text/javascript" src="scripts/displayAbbreviations.js"></script><script type="text/javascript" src="scripts/highlightRows.js"></script> </head> <body><table><caption>Itinerary</caption><thead><tr><th>When</th><th>Where</th></tr></thead><tbody><tr><td>June 9th</td><td>Portland, <abbr title="Oregon">OR</abbr></td></tr><tr><td>June 10th</td><td>Seattle, <abbr title="Washington">WA</abbr></td></tr><tr><td>June 12th</td><td>Sacramento, <abbr title="California">CA</abbr></td></tr></tbody></table> </body> </html> // 實現表格的奇偶行的斑馬線效果 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;}}} } // 為元素 element添加樣式類 value function addClass(element,value) {if (!element.className) {element.className = value;} else {newClassName = element.className;newClassName+= " ";newClassName+= value;element.className = newClassName;} } addLoadEvent(stripeTables);// 鼠標停留在某行，則某行高亮 function highlightRows() {if(!document.getElementsByTagName) return false;var rows = document.getElementsByTagName("tr");for (var i=0; i<rows.length; i++) {//鼠標進入的表格行效果rows[i].onmouseover = function() {this.style.fontWeight = "bold";}//鼠標退出的表格行效果rows[i].onmouseout = function() {this.style.fontWeight = "normal";}} } addLoadEvent(highlightRows);function addLoadEvent(func) {var oldonload = window.onload;if (typeof window.onload != 'function') {window.onload = func;} else {window.onload = function() {oldonload();func();}} } 【9.3.3】響應事件
1）只要有可能，盡量選擇css設置樣式；
2）css提供的 :hover等偽class屬性允許根據html元素的狀態來改變樣式；dom也可以使用 onmouseover來對html元素的狀態變化做出響應；如： a:hover { color: #c60; } tr: hover { font-weight: bold; } 【總結】如果想改變某個元素的呈現效果，使用css；如果想改變某個元素的行為，使用dom；
【9.4】className屬性
1）與其使用 dom改變某個元素的樣式，不如通過 js 代碼去更新這個元素的class 屬性；
外部css樣式表，定義如下：
.intro {
font-weight:bold;
font-size:1.2em;
}
elem.setAttribute("class", "intro");
也可以使用 element.className = value 來設置；
// 實現表格的奇偶行的斑馬線效果 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) {// 直接改變奇數行的背景色實現斑馬效果rows[j].style.backgroundColor = "#ffc";odd = false;} else {odd = true;}}} } 【10】用javascript實現動畫效果
【10.1】動畫基礎知識
1）網頁元素在瀏覽器窗口里的位置是一種表示性信息； 位置信息通常由css負責設置；如：
element {
position: absolute;
top: 50px;
left: 100px;
}
2）下面是實現同樣效果的 dom 代碼：
element.style.position = "absolute";
element.style.left = "100px";
element.style.top = "50px";
3）position 屬性的合法值有： static， fixed固定定位， relative相對定位 和 absolute絕對定位 四種值；
static是默認值；? http://www.w3school.com.cn/cssref/pr_class_position.asp
（1）
【10.1.2】時間
1）variable = setTImeout("function", interval) 間隔 interval 時間就調用 func 函數； interval的單位是毫秒；
2）clearTimeout(variable) 取消等待執行隊列里的 function函數； 因為 variable 與 執行的函數名function 有綁定關系；
3）js 函數 parseInt 可以把字符串里的數值信息提取出來，如：
parseInt("30 steps") 返回 數值30 ；
【10.2.3】 css
1）css的overflow屬性：用來處理一個元素的尺寸超出其容器尺寸的情況；
2）overflow 有4種取值： visible， hidden, scroll, auto；
visible不裁剪溢出內容；
hidden隱藏溢出內容；
scroll 內容溢出后，有滾動條；
auto 若溢出則顯示滾動條；否則不顯示滾動條；
【荔枝】 使用 js 函數 moveElement 來移動 topics.gif 圖片。 根據用戶鼠標指針懸停在哪個鏈接上，我們將這個圖片向左或向右移動。
（3） #slideshow {width: 100px;height: 100px;position: relative;overflow: hidden; } 【分析】 把position設置為 relative很重要，因為想讓子圖片使用絕對位置；通過使用relative， 子元素的 (0, 0) 坐標將固定在 slideshow div 的左上角； <!DOCTYPE html> <html lang="en"> <head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>Web Design</title><style type="text/css" media="screen">@import url(styles/layout.css);</style><script type="text/javascript" src="scripts/addLoadEvent.js"></script><script type="text/javascript" src="scripts/moveElement.js"></script><script type="text/javascript" src="scripts/prepareSlideshow.js"></script> </head> <body><h1>Web Design</h1><p>These are the things you should know.</p><ol id="linklist"><li><a href="structure.html">Structure</a></li><li><a href="presentation.html">Presentation</a></li><li><a href="behavior.html">Behavior</a></li></ol><div id="slideshow"><img src="topics.gif" alt="building blocks of web design" id="preview" /></div> </body> </html> function prepareSlideshow() { // 瀏覽器是否支持以下方法；if (!document.getElementsByTagName) return false;if (!document.getElementById) return false; // 確保元素存在if (!document.getElementById("linklist")) return false;if (!document.getElementById("preview")) return false; // 為元素 preview添加style 樣式var preview = document.getElementById("preview");preview.style.position = "absolute";preview.style.left = "0px";preview.style.top = "0px"; // 獲取元素 <ol>var list = document.getElementById("linklist");// 獲取所有鏈接 <a>var links = list.getElementsByTagName("a"); // 綁定動畫效果到鏈接links[0].onmouseover = function() {moveElement("preview",-100,0,10);}links[1].onmouseover = function() {moveElement("preview",-200,0,10);}links[2].onmouseover = function() {moveElement("preview",-300,0,10);} }addLoadEvent(prepareSlideshow);
2）如果用戶移動鼠標的速度夠快，積累在 setTimeout隊列里的事件就會導致動畫效果產生滯后。為了消除動畫滯后的現象，可以用? clearTimeout? 函數清除積累在 setTimeout隊列里的事件：
clearTimeout(movement);?
（4）
<!DOCTYPE html> <html lang="en"> <head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>Message</title><script type="text/javascript" src="scripts/addLoadEvent.js"></script><script type="text/javascript" src="scripts/positionMessage.js"></script><script type="text/javascript" src="scripts/moveElement.js"></script> </head> <body><p id="message">Whee!</p><p id="message2">Whoa!</p> </body> </html> // 調用位置移動函數移動文本節點位置 function positionMessage() {if (!document.getElementById) return false;if (!document.getElementById("message")) return false;var elem = document.getElementById("message");elem.style.position = "absolute";elem.style.left = "50px";elem.style.top = "100px";moveElement("message",125,25,20);if (!document.getElementById("message2")) return false;var elem = document.getElementById("message2");elem.style.position = "absolute";elem.style.left = "50px";elem.style.top = "50px";moveElement("message2",125,75,20); } // 移動元素位置的函數 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 函數清除積累在 setTimeout 隊列里的事件 clearTimeout(elem.movement); } var xpos = parseInt(elem.style.left); var ypos = parseInt(elem.style.top); if (xpos == final_x && ypos == final_y) { return true;}if (xpos < final_x) {xpos++;}if (xpos > final_x) {xpos--;}if (ypos < final_y) {ypos++;}if (ypos > final_y) {ypos--;}elem.style.left = xpos + "px";elem.style.top = ypos + "px";var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";movement = setTimeout(repeat,interval); }// document加載完畢后，調用 window.onload 函數； // 即把func函數加入了 onload加載函數列表中； function addLoadEvent(func) {var oldonload = window.onload;if (typeof window.onload != 'function') {window.onload = func;} else {window.onload = function() {oldonload();func();}} }addLoadEvent(positionMessage); 【10.2.6】通過js生成html標記來改進動畫效果
1）以上的荔枝每次都僅移動一個像素，為了增加趣味性，可以移動多個像素，實現如下：
【經典代碼如下】 dist 就是 每次移動的像素值；
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;}
【7.1】一些傳統方法
【7.1.1】document.write方法，不推薦使用
<!DOCTYPE html> <html lang="en"> <head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>Testing</title> </head> <body> <script>document.write("<p>this is inserted.</p>"); </script> </body> </html> 【7.1.2】innerHTML 屬性：可以用來讀寫某給定元素里的html內容；?
<!DOCTYPE html> <html lang="en"> <head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>Testing</title> </head> <script type="text/javascript" src="example.js"> </script> <body> <div id="testdiv"><p>this is <em>my</em> content. </p> </div> </body> </html> window.onload = function() {var para = document.createElement("p");var testdiv = document.getElementById("testdiv");alert(testdiv.innerHTML);testdiv.appendChild(para);var txt = document.createTextNode("Hello world");para.appendChild(txt); } 【7.2】dom方法
【7.2.1】createElement 方法：創建一個元素節點；
var para = document.createElement("p");
【荔枝】查看上面<p>元素的 nodeType 和 nodeName值；
window.onload = function() { var para = document.createElement("p"); var info = "nodeName: "; info += para.nodeName; info += ", nodeType:"; info += para.nodeType; alert(info); }
（3）
【7.2.2】appendChild方法
1）parent.appendChild(child); 讓child元素成為? parent元素節點的子元素；【7.2.3】createTextNode方法：創建文本節點
1）荔枝：
var text = document.createTextNode("hello world.");
（4）
window.onload = function() {var para = document.createElement("p");var testdiv = document.getElementById("testdiv");alert(testdiv.innerHTML);// appendChild方法添加para為testdiv的子元素；testdiv.appendChild(para);// createTextNode方法：創建文本節點var txt = document.createTextNode("Hello world");para.appendChild(txt); } 【7.2.4】一個更復雜的組合
1）利用js生成<p>元素， 且元素內容為 this is my content.
（5）
window.onload = function() {// 利用js生成<p>元素，// 且元素內容為 this is my content.var para = document.createElement("p");var t1 = document.createTextNode("this is");var em = document.createElement("em");var t2 = document.createTextNode("my");var t3 = document.createTextNode("content. ");para.appendChild(t1);em.appendChild(t2);para.appendChild(em);para.appendChild(t3);var testdiv = document.getElementById("testdiv");testdiv.appendChild(para); } <!DOCTYPE html> <html lang="en"> <head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>Testing</title> </head> <script type="text/javascript" src="example3.js"> </script> <body> <div id="testdiv"> </div> </body> </html> 【7.3】重回圖片庫
【7.3.1】在已有元素前面插入一個新元素
parent.insertBefore(newElement, targetElement);
【7.3.2】在已有元素后面插入一個新元素
沒有insertAfter， 自定義的insertAfter如下；
function insertAfter(newElement, target) { var parent = target.parentNode; if (parent.lastChild == target ){ parent.appendChild(newElement); } else { parent.insertBefore(newElement, target.nextSibling); } } 【7.3.3】圖片庫二次改進版
1）有5個函數，如下：
addLoadEvent;
insertAfter;
preparePlaceholder;
prepareGallery;
showPic;
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 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(placeholder,gallery);insertAfter(description,placeholder); }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);}links[i].onkeypress = links[i].onclick;} }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; } addLoadEvent(preparePlaceholder); addLoadEvent(prepareGallery); <!DOCTYPE html> <html lang="en"> <head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>Image Gallery</title><script type="text/javascript" src="scripts/showPic.js"></script><link rel="stylesheet" href="styles/layout.css" type="text/css" media="screen" /> </head> <body><h1>Snapshots</h1><ul id="imagegallery"><li><a href="images/fireworks.jpg" title="A fireworks display"><img src="images/thumbnail_fireworks.jpg" alt="Fireworks" /></a></li><li><a href="images/coffee.jpg" title="A cup of black coffee" ><img src="images/thumbnail_coffee.jpg" alt="Coffee" /></a></li><li><a href="images/rose.jpg" title="A red, red rose"><img src="images/thumbnail_rose.jpg" alt="Rose" /></a></li><li><a href="images/bigben.jpg" title="The famous clock"><img src="images/thumbnail_bigben.jpg" alt="Big Ben" /></a></li></ul> </body> </html>
（6）
【7.4】ajax
1）ajax的主要優勢：對頁面的請求以異步方式發送到服務器； 而服務器不會用整個頁面來響應請求，它會在后臺處理請求， 與此同時用戶還能繼續瀏覽頁面并與頁面交互；
【7.4.1】XMLHttpRequest對象
1）ajax的核心是 XMLHttpRequest對象。這個對象充當著瀏覽器中的腳本（客戶端）與服務器之間的中間人的角色。
2）以往的請求都由瀏覽器發出，而javascript通過這個對象可以自己發送請求，同時也自己處理響應；
【荔枝】如何發送ajax請求；
<!DOCTYPE html> <html lang="en"> <head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>ajax</title> </head> <body><div id="new"></div><script src="scripts/ajax.js"></script> </body> </html> function getHttpObject() {if (typeof XMLHttpRequest == "undefined") {// 定義XMLHttpRequest函數 ，返回 ActiveXObject對象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;}}// 返回XMLHttpRequest實例return new XMLHttpRequest(); }// 在 document加載完畢后，執行addLoadEvent函數， // 以綁定 func函數作為document加載完畢后，瀏覽器加載的函數； function addLoadEvent(func) {var oldonload = window.onload;if (typeof window.onload != 'function') {window.onload = func;} else {window.onload = function() {oldonload();func();}} }function getNewContent() {var request = getHttpObject();if (request) {request.opne("GET", "example.txt", true);request.onreadystatechange = function() {if (request.readyState == 4) {var para = document.createElement("p");var text = document.createTextNode(request.responseText);para.appendChild(text);document.getElementById("new").appendChild(para);}};request.send(null);} else {alert("sorry, your browser does not support XMLHttpRequest.");} } addLoadEvent(getNewContent); 【分析】
- 分析1） 代碼中的? ? onreadystatechange? ? 是一個事件處理函數， 它會在服務器給 XMLHttpRequest 對象送回響應的時候被觸發執行；??
- 分析2） 在指定了請求目標，也明確如何處理響應后，就可以用send方法來發送請求了；
- request.send(null);
- 分析3） readyState屬性的值有5個：
1表示正在加載；
2表示加載完畢；
3表示正在交互；
4表示完成；
- 分析4）服務器發送回來的數據通過兩個屬性來完成， responseText屬性 ，該屬性用于保存文本字符串形式的數據； responseXML屬性用于保存? Content-Type 頭部中指定為 text/xml 的數據；
【8】充實文檔的內容
【8.4】顯示縮略語列表
【8.4.1】編寫 displayAbbreviations 函數
1） dl, dt, dd 分別表示定義列表，定義標題，定義描述；其中定義列表是表現縮略語及其解釋的理想結構；
definition list, definition title, definition description
????<dt>w3c</dt>
????<dd>world wide web.</dd>
????<dt>dom</dt>
????<dd>document objecty model. </dd>
</dl>
2）利用js動態創建 dl, dt, dd
（1） <!DOCTYPE html> <html lang="en"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>Explaining the Document Object Model</title><link rel="stylesheet" type="text/css" media="screen" href="styles/typography.css" /><script type="text/javascript" src="scripts/addLoadEvent.js"></script><script type="text/javascript" src="scripts/displayAbbreviations.js"></script></head><body><h1>What is the Document Object Model?</h1><p> The <abbr title="World Wide Web Consortium">W3C</abbr> definesthe <abbr title="Document Object Model">DOM</abbr> as:</p><blockquote cite="http://www.w3.org/DOM/"><p> A platform- and language-neutral interface that will allow programsand scripts to dynamically access and update thecontent, structure and style of documents.</p></blockquote><p> It is an <abbr title="Application Programming Interface">API</abbr>that can be used to navigate <abbr title="HyperText Markup Language"> HTML</abbr> and <abbr title="eXtensible Markup Language">XML </abbr> documents.</p></body> </html> 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("h2");// 創建文本節點var header_text = document.createTextNode("Abbreviations");header.appendChild(header_text); // 添加元素節點到bodydocument.body.appendChild(header); // 添加定義列表到bodydocument.body.appendChild(dlist); } // 使得displayAbbreviations函數在document加載完畢后就立即加載 addLoadEvent(displayAbbreviations); 【8.5】顯示文獻來源鏈接表
（2）
1）源碼如下： <!DOCTYPE html> <html lang="en"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>Explaining the Document Object Model</title><link rel="stylesheet" type="text/css" media="screen" href="styles/typography.css" /><script type="text/javascript" src="scripts/addLoadEvent.js"></script><script type="text/javascript" src="scripts/displayAbbreviations.js"></script><script type="text/javascript" src="scripts/displayCitations.js"></script></head><body><h1>What is the Document Object Model?</h1><p> The <abbr title="World Wide Web Consortium">W3C</abbr> definesthe <abbr title="Document Object Model">DOM</abbr> as:</p><blockquote cite="http://www.baidu.com"><p> A platform- and language-neutral interface that will allow programsand scripts to dynamically access and update thecontent, structure and style of documents.</p></blockquote><p> It is an <abbr title="Application Programming Interface">API</abbr>that can be used to navigate <abbr title="HyperText Markup Language"> HTML</abbr> and <abbr title="eXtensible Markup Language">XML </abbr> documents.</p></body> </html> function displayCitations() {if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false; // 獲取所有的 blockquote 的元素節點var quotes = document.getElementsByTagName("blockquote"); // 遍歷blockquotefor (var i=0; i<quotes.length; i++) { // 瀏覽器不支持cite屬性，則繼續；if (!quotes[i].hasAttribute("cite")) continue; // store the cite attributevar url = quotes[i].getAttribute("cite"); // 獲取 blockquote元素的所有節點var quoteChildren = quotes[i].getElementsByTagName('*'); // 瀏覽器不支持的話，則繼續；if (quoteChildren.length < 1) continue; // 獲取blockquote元素的最后一個節點var elem = quoteChildren[quoteChildren.length - 1]; // 創建一個連接var link = document.createElement("a");var link_text = document.createTextNode("source");link.appendChild(link_text);link.setAttribute("href",url);var superscript = document.createElement("sup");superscript.appendChild(link); // 把標記 superscript 添加到 blockquote元素的最后一個子節點elem.appendChild(superscript);} } addLoadEvent(displayCitations); 分析1）var quoteChildren = quotes[i].getElementsByTagName('*'); 把包含在當前 blockquote 元素里的所有元素節點找出來；
【8.6】顯示 快捷鍵清單
1）accesskey 屬性可以把一個元素如鏈接與鍵盤上的某個特定按鍵關聯在一起；如?
<a href="http://www.baidu.com" accesskey="1">home</a>
2）下面利用dom技術，動態創建一份快捷鍵清單，如下：
（3）
【源碼如下】 <!DOCTYPE html> <html lang="en"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>Explaining the Document Object Model</title><link rel="stylesheet" type="text/css" media="screen" href="styles/typography.css" /><script type="text/javascript" src="scripts/addLoadEvent.js"></script><script type="text/javascript" src="scripts/displayAbbreviations.js"></script><script type="text/javascript" src="scripts/displayCitations.js"></script><script type="text/javascript" src="scripts/displayAccesskeys.js"></script></head><body><ul id="navigation"><li><a href="index.html" accesskey="1">Home</a></li><li><a href="search.html" accesskey="4">Search</a></li><li><a href="contact.html" accesskey="0">Contact</a></li></ul><h1>What is the Document Object Model?</h1><p> The <abbr title="World Wide Web Consortium">W3C</abbr> definesthe <abbr title="Document Object Model">DOM</abbr> as:</p><blockquote cite="http://www.w3.org/DOM/"><p> A platform- and language-neutral interface that will allow programsand scripts to dynamically access and update thecontent, structure and style of documents.</p></blockquote><p> It is an <abbr title="Application Programming Interface">API</abbr>that can be used to navigate <abbr title="HyperText Markup Language"> HTML</abbr> and <abbr title="eXtensible Markup Language">XML </abbr> documents.</p></body> </html> function displayAccesskeys() {if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false; // 獲取所有鏈接元素var links = document.getElementsByTagName("a"); // 創建一個數組存儲快捷鍵var akeys = new Array(); // 遍歷鏈接for (var i=0; i<links.length; i++) {var current_link = links[i]; // 如果瀏覽器不支持快捷鍵屬性，則繼續if (current_link.getAttribute("accesskey") == null) continue; // 獲取 accesskey 屬性值；var key = current_link.getAttribute("accesskey"); // 獲取鏈接元素 <a> 的節點值；var text = current_link.lastChild.nodeValue; // add them to the arrayakeys[key] = text;} // 創建一個無序列表var list = document.createElement("ul"); // 遍歷快捷鍵for (key in akeys) {var text = akeys[key]; // 創建一個字符串用于存儲 快捷鍵 和 對應的鏈接var str = key + " : "+text; // 創建一個列表項 <li>var item = document.createElement("li");var item_text = document.createTextNode(str);item.appendChild(item_text); // 加入到列表list.appendChild(item);} // 創建標題var header = document.createElement("h3");var header_text = document.createTextNode("Accesskeys");header.appendChild(header_text); // 添加標題到 <body> 元素document.body.appendChild(header); // 添加列表到 <body> 元素document.body.appendChild(list); } addLoadEvent(displayAccesskeys);
【9】css-dom
【9.1】三位一體的網頁
- 結構層：由 html 或 xhtml的標記語言負責創建；
- 表示層：由 css 負責完成；
- 行為層：負責內容應該如何響應事件這一問題；這是javascript語言和dom發揮作用的領域；
1）style屬性值的數據類型為 object； <!DOCTYPE html> <html lang="en"> <head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>style is object</title></head> <body><p id="example" style="color: grey; font-family: 'Arial',sans-serif;"> An example of a paragraph</p><script type="text/javascript"> window.onload = function() {var para = document.getElementById("example");alert(typeof para.nodeName); // 獲取節點名稱的數據類型；string 類型alert(typeof para.style); // 獲取節點style屬性的數據類型；object 類型 }</script> </body> </html>2）style屬性包含元素的樣式： element.style.property 來獲取樣式值； <!DOCTYPE html> <html lang="en"> <head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>Example</title><script type="text/javascript"> window.onload = function() {var para = document.getElementById("example");para.style.color = "black";para.style.font = "2em 'Times',serif";alert("The font family is " + para.style.fontFamily); // 獲取style屬性的fontFamily屬性值 }</script> </head> <body><p id="example" style="color: grey; font-family: 'Arial',sans-serif;"> An example of a paragraph</p> </body> </html> 【9.2.1】獲取樣式
1）獲取 style屬性的color屬性； element.style.color ；
2）可以使用css速記屬性，可以把多個樣式組合在一起寫成一行。比如，聲明了 font:12px 'Arial', sans-serif, CSS font-size屬性將被設置為 12px, CSS font-family 屬性將被設置為 'Arial'， sans-serif；
【注意】 dom style屬性不能用來檢索在外部CSS文件里聲明的樣式；
如 css 文件有如下聲明，p#example{
color: grey;
font: 12px, 'Arial', sans-serif;
}
則 document.getElementById("example").style.fontSize 等于空 或 無法獲取值；
而且 把 p#example{
color: grey;
font: 12px, 'Arial', sans-serif;
}
放在 <head>元素的子元素<style>里面，dom sytle屬性依然檢索不到；
【注意】style對象只包含在 html代碼里用 style屬性聲明的樣式；這幾乎沒有作用，因為樣式應該與標記分離開；（干貨——style樣式應該與標記分離開）
【9.2.2】設置樣式
1）通過dom腳本賦值操作來更新樣式：
element.style.property = value;
如 para.style.color = "green";
para.style.font = "2em 'Times', serif";
【9.3】何時應該用dom腳本設置樣式
1）絕大多數情況下，應該使用 css 去設置樣式，而不使用dom腳本；
【9.3.1】根據元素在節點樹里的位置來設置樣式
1）有3種方法：- 方法1）為標簽元素如<p> 統一聲明樣式
p{
font-size: 1em;
}
- 方法2）為class屬性的所有元素統一聲明樣式
.className{
font-size: 1em;
}
- 方法3）為id屬性的元素單獨聲明樣式
#idName {
font-size: 1em;
}
- 補充方法4）為有類似屬性的多個元素聲明樣式
input[type*="text"] {
font-size: 1em;
}
- 補充方法5）根據元素的位置聲明樣式
p:first-of-type{
font-sieze: 1em;
}
2）css2 定義了很多選擇器，如 :first-child, :last-child； css3定義了如 :nth-child() 和 :nth-of-type() 之類的位置選擇器；
【荔枝】為 <h1> 元素的下一個元素節點添加樣式類
（1）
【源碼】
css3樣式表定義如下：
?tr:nth-child(odd) {background-color: #ffc; }
?tr:nth-child(even) {background-color: #fff; }
（2） <!DOCTYPE html> <html lang="en"> <head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>Cities</title><link rel="stylesheet" type="text/css" media="screen" href="styles/format.css" /><script type="text/javascript" src="scripts/addLoadEvent.js"></script><script type="text/javascript" src="scripts/stripeTables.js"></script><script type="text/javascript" src="scripts/displayAbbreviations.js"></script><script type="text/javascript" src="scripts/highlightRows.js"></script> </head> <body><table><caption>Itinerary</caption><thead><tr><th>When</th><th>Where</th></tr></thead><tbody><tr><td>June 9th</td><td>Portland, <abbr title="Oregon">OR</abbr></td></tr><tr><td>June 10th</td><td>Seattle, <abbr title="Washington">WA</abbr></td></tr><tr><td>June 12th</td><td>Sacramento, <abbr title="California">CA</abbr></td></tr></tbody></table> </body> </html> // 實現表格的奇偶行的斑馬線效果 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;}}} } // 為元素 element添加樣式類 value function addClass(element,value) {if (!element.className) {element.className = value;} else {newClassName = element.className;newClassName+= " ";newClassName+= value;element.className = newClassName;} } addLoadEvent(stripeTables);// 鼠標停留在某行，則某行高亮 function highlightRows() {if(!document.getElementsByTagName) return false;var rows = document.getElementsByTagName("tr");for (var i=0; i<rows.length; i++) {//鼠標進入的表格行效果rows[i].onmouseover = function() {this.style.fontWeight = "bold";}//鼠標退出的表格行效果rows[i].onmouseout = function() {this.style.fontWeight = "normal";}} } addLoadEvent(highlightRows);function addLoadEvent(func) {var oldonload = window.onload;if (typeof window.onload != 'function') {window.onload = func;} else {window.onload = function() {oldonload();func();}} } 【9.3.3】響應事件
1）只要有可能，盡量選擇css設置樣式；
2）css提供的 :hover等偽class屬性允許根據html元素的狀態來改變樣式；dom也可以使用 onmouseover來對html元素的狀態變化做出響應；如： a:hover { color: #c60; } tr: hover { font-weight: bold; } 【總結】如果想改變某個元素的呈現效果，使用css；如果想改變某個元素的行為，使用dom；
【9.4】className屬性
1）與其使用 dom改變某個元素的樣式，不如通過 js 代碼去更新這個元素的class 屬性；
外部css樣式表，定義如下：
.intro {
font-weight:bold;
font-size:1.2em;
}
elem.setAttribute("class", "intro");
也可以使用 element.className = value 來設置；
2）可以利用字符串拼接操作，把新的class設置值追加到 className屬性上去，如下：
element.className += " intro "; // intro 前面有一個空格；3）以上內容封裝到js函數，實現如下：
// 為元素 element添加樣式類 value function addClass(element,value) {if (!element.className) {element.className = value;} else {newClassName = element.className;newClassName+= " ";newClassName+= value;element.className = newClassName;} } 【荔枝】直接改變奇數行的背景色實現斑馬效果// 實現表格的奇偶行的斑馬線效果 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) {// 直接改變奇數行的背景色實現斑馬效果rows[j].style.backgroundColor = "#ffc";odd = false;} else {odd = true;}}} } 【10】用javascript實現動畫效果
【10.1】動畫基礎知識
1）網頁元素在瀏覽器窗口里的位置是一種表示性信息； 位置信息通常由css負責設置；如：
element {
position: absolute;
top: 50px;
left: 100px;
}
2）下面是實現同樣效果的 dom 代碼：
element.style.position = "absolute";
element.style.left = "100px";
element.style.top = "50px";
3）position 屬性的合法值有： static， fixed固定定位， relative相對定位 和 absolute絕對定位 四種值；
static是默認值；? http://www.w3school.com.cn/cssref/pr_class_position.asp
（1）
【10.1.2】時間
1）variable = setTImeout("function", interval) 間隔 interval 時間就調用 func 函數； interval的單位是毫秒；
2）clearTimeout(variable) 取消等待執行隊列里的 function函數； 因為 variable 與 執行的函數名function 有綁定關系；
3）js 函數 parseInt 可以把字符串里的數值信息提取出來，如：
parseInt("30 steps") 返回 數值30 ；
【荔枝】不斷刷新元素的位置
【10.2.3】 css
1）css的overflow屬性：用來處理一個元素的尺寸超出其容器尺寸的情況；
2）overflow 有4種取值： visible， hidden, scroll, auto；
visible不裁剪溢出內容；
hidden隱藏溢出內容；
scroll 內容溢出后，有滾動條；
auto 若溢出則顯示滾動條；否則不顯示滾動條；
【荔枝】 使用 js 函數 moveElement 來移動 topics.gif 圖片。 根據用戶鼠標指針懸停在哪個鏈接上，我們將這個圖片向左或向右移動。
（3） #slideshow {width: 100px;height: 100px;position: relative;overflow: hidden; } 【分析】 把position設置為 relative很重要，因為想讓子圖片使用絕對位置；通過使用relative， 子元素的 (0, 0) 坐標將固定在 slideshow div 的左上角； <!DOCTYPE html> <html lang="en"> <head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>Web Design</title><style type="text/css" media="screen">@import url(styles/layout.css);</style><script type="text/javascript" src="scripts/addLoadEvent.js"></script><script type="text/javascript" src="scripts/moveElement.js"></script><script type="text/javascript" src="scripts/prepareSlideshow.js"></script> </head> <body><h1>Web Design</h1><p>These are the things you should know.</p><ol id="linklist"><li><a href="structure.html">Structure</a></li><li><a href="presentation.html">Presentation</a></li><li><a href="behavior.html">Behavior</a></li></ol><div id="slideshow"><img src="topics.gif" alt="building blocks of web design" id="preview" /></div> </body> </html> function prepareSlideshow() { // 瀏覽器是否支持以下方法；if (!document.getElementsByTagName) return false;if (!document.getElementById) return false; // 確保元素存在if (!document.getElementById("linklist")) return false;if (!document.getElementById("preview")) return false; // 為元素 preview添加style 樣式var preview = document.getElementById("preview");preview.style.position = "absolute";preview.style.left = "0px";preview.style.top = "0px"; // 獲取元素 <ol>var list = document.getElementById("linklist");// 獲取所有鏈接 <a>var links = list.getElementsByTagName("a"); // 綁定動畫效果到鏈接links[0].onmouseover = function() {moveElement("preview",-100,0,10);}links[1].onmouseover = function() {moveElement("preview",-200,0,10);}links[2].onmouseover = function() {moveElement("preview",-300,0,10);} }addLoadEvent(prepareSlideshow);
【10.2.5】 變量作用域問題
1）使用 js 函數 moveElement 來移動 topics.gif 圖片。 根據用戶鼠標指針懸停在哪個鏈接上，我們將這個圖片向左或向右移動。2）如果用戶移動鼠標的速度夠快，積累在 setTimeout隊列里的事件就會導致動畫效果產生滯后。為了消除動畫滯后的現象，可以用? clearTimeout? 函數清除積累在 setTimeout隊列里的事件：
clearTimeout(movement);?
（4）
<!DOCTYPE html> <html lang="en"> <head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>Message</title><script type="text/javascript" src="scripts/addLoadEvent.js"></script><script type="text/javascript" src="scripts/positionMessage.js"></script><script type="text/javascript" src="scripts/moveElement.js"></script> </head> <body><p id="message">Whee!</p><p id="message2">Whoa!</p> </body> </html> // 調用位置移動函數移動文本節點位置 function positionMessage() {if (!document.getElementById) return false;if (!document.getElementById("message")) return false;var elem = document.getElementById("message");elem.style.position = "absolute";elem.style.left = "50px";elem.style.top = "100px";moveElement("message",125,25,20);if (!document.getElementById("message2")) return false;var elem = document.getElementById("message2");elem.style.position = "absolute";elem.style.left = "50px";elem.style.top = "50px";moveElement("message2",125,75,20); } // 移動元素位置的函數 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 函數清除積累在 setTimeout 隊列里的事件 clearTimeout(elem.movement); } var xpos = parseInt(elem.style.left); var ypos = parseInt(elem.style.top); if (xpos == final_x && ypos == final_y) { return true;}if (xpos < final_x) {xpos++;}if (xpos > final_x) {xpos--;}if (ypos < final_y) {ypos++;}if (ypos > final_y) {ypos--;}elem.style.left = xpos + "px";elem.style.top = ypos + "px";var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";movement = setTimeout(repeat,interval); }// document加載完畢后，調用 window.onload 函數； // 即把func函數加入了 onload加載函數列表中； function addLoadEvent(func) {var oldonload = window.onload;if (typeof window.onload != 'function') {window.onload = func;} else {window.onload = function() {oldonload();func();}} }addLoadEvent(positionMessage); 【10.2.6】通過js生成html標記來改進動畫效果
1）以上的荔枝每次都僅移動一個像素，為了增加趣味性，可以移動多個像素，實現如下：
【經典代碼如下】 dist 就是 每次移動的像素值；
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;}
（5）
#slideshow {width: 100px;height: 100px;position: relative;overflow: hidden; } #preview {position: absolute; } <!DOCTYPE html> <html lang="en"> <head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>Web Design</title><style type="text/css" media="screen">@import url(styles/layout.css);</style><script type="text/javascript" src="scripts/addLoadEvent.js"></script><script type="text/javascript" src="scripts/insertAfter.js"></script><script type="text/javascript" src="scripts/moveElement.js"></script><script type="text/javascript" src="scripts/prepareSlideshow.js"></script> </head> <body><h1>Web Design</h1><p>These are the things you should know.</p><ol id="linklist"><li><a href="structure.html">Structure</a></li><li><a href="presentation.html">Presentation</a></li><li><a href="behavior.html">Behavior</a></li></ol> </body> </html> // 元素移動函數 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;}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() { // Make sure the browser understands the DOM methodsif (!document.getElementsByTagName) return false;if (!document.getElementById) return false; // Make sure the elements existif (!document.getElementById("linklist")) return false;var slideshow = document.createElement("div");slideshow.setAttribute("id","slideshow");var preview = document.createElement("img");preview.setAttribute("src","topics.gif");preview.setAttribute("alt","building blocks of web design");preview.setAttribute("id","preview");slideshow.appendChild(preview);var list = document.getElementById("linklist");insertAfter(slideshow,list); // Get all the links in the listvar links = list.getElementsByTagName("a"); // Attach the animation behavior to the mouseover eventlinks[0].onmouseover = function() {moveElement("preview",-100,0,10);}links[1].onmouseover = function() {moveElement("preview",-200,0,10);}links[2].onmouseover = function() {moveElement("preview",-300,0,10);} }addLoadEvent(prepareSlideshow);// 在 targetElement 元素后面插入新元素 newElement function insertAfter(newElement,targetElement) {var parent = targetElement.parentNode;if (parent.lastChild == targetElement) {parent.appendChild(newElement);} else {parent.insertBefore(newElement,targetElement.nextSibling);} }總結
以上是生活随笔為你收集整理的动态创建标记+css_dom+js动态效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 怎么隐藏qq空间名称（怎么隐藏qq空间名
- 下一篇： eclipse发布web项目到tomca