Web从入门到放弃<3>
UI简单的美化全部来源于Bootstrap
知识来自《javascript dom编程艺术第二版》
<1> 点击列表 页面不跳转图片刷新:
主要点: href如何点击完如何不跳转，javascript里的<h1 id="Description">xxxx<h1/> 这个childNodes 并不是1个元素。 获取这里面的plainText用:
var descripNodeTextNode = descripNode.childNodes[0];
descripNodeTextNode.nodeValue = imgSrcPath;
html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Image</title> <link rel="stylesheet" href="bootstrap.min.css"> </head> <body> <h1 id="Description"> Images by gearslogy</h1> <ul class="list-group"> <li class="list-group-item"> <a href="1.gif" onclick="showpic(this);return false;"> Image gif</a></li> <li class="list-group-item"> <a href="1.jpg" onclick="showpic(this);return false;"> Image jpg</a></li> </ul> <img src="" title="Houdini" alt="No pictures" id="picwindow"> <script src="exmp.js"></script> <script src="jquery.min.js"></script> <script src="bootstrap.min.js"></script> </body> </html>
javascript:
function showpic(obj) { var imgSrcPath = obj.getAttribute('href'); var imgNode = document.getElementById('picwindow'); imgNode.src = imgSrcPath; // and also can use: //imgNode.setAttribute('src',imgSrcPath); // change id = Description h1 node text value var descripNode = document.getElementById('Description'); console.log(descripNode.childNodes); console.log(descripNode.childNodes[0].nodeValue); //alert(descripNode.childNodes[0].nodeValue); var descripNodeTextNode = descripNode.childNodes[0]; descripNodeTextNode.nodeValue = imgSrcPath; }
<2>
node.nodeType 获取一个节点的类型 结果可能是1,2,3
当一个html打开时候，可以执行一个javascript事件:
function testOnload() { console.log("Hello Load"); alert("ON LOAD"); } window.onload = testOnload;
书中给的css代码:
body { font-family: Consolas; color:#333; background-color: #ccc; } h1{ color:#333; background-color: transparent; } a{ color:#c60; background-color: transparent; font-weight: bold; text-decoration: none; } ul { padding: 0; } li { float:left; padding: 1em; list-style:none; display:block; } li:hover { background:#999; border-bottom-color: chartreuse; border-bottom-width: 2px; border-bottom-style: solid; } img{ display: block; clear: both; }
<3>打开一个广告窗口
popUp.js:
function popUp(url) { window.open(url,"popup","width:320,height=480"); }
html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="#" onclick="popUp('http://www.baidu.com');return false;"> Example</a> <script src="popUp.js"></script> </body> </html>
也可以
<4>完全分离javascript,html里不出现脚本:
html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ImageGallery javascript</title> </head> <body> <ul> <li><a href="images/1.png">image png</a></li> <li><a href="images/2.jpg">image jpg</a></li> </ul> <img id='viewImage' src="" alt="Click show picture"> <script src="ImageGallery.js"></script> </body> </html>
javascript:
window.onload = prepareLinks; function prepareLinks() { var getListLinks = document.getElementsByTagName('a'); for( var i=0;i<getListLinks.length;i++){ console.log(getListLinks[i]); getListLinks[i].onclick = function () { var imageLink = this.getAttribute('href'); showPicture(imageLink); return false; } } } function showPicture(url) { var imageNode = document.getElementById('viewImage'); imageNode.src = url; }
<5>
检查方法是否存在:
if(document.getElementById){
console.log("Has get element by id");
}
减少性能浪费:
跑循环先放到var 变量里，别document.getxxx().length(),接着又document..getxxx()[i]
压缩脚本:
JSMin,YUI compressor,Closure Compiler
<6>更好的Gallery(完全隔离javascript):
html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ImageGallery javascript</title> </head> <body> <ul id="imageGallery"> <li><a href="images/1.png">image png</a></li> <li><a href="images/2.jpg">image jpg</a></li> </ul> <img id='viewImage' src="" alt="Click show picture"> <h1 id="description"> </h1> <script src="ImageGallery.js"></script> </body> </html>
js:
/* window.onload = function () { prepareGallery(); SecondFunction(); }; */ function addLoadEvent(func) { var oldOnLoad = window.onload; if(typeof window.onload !== "function"){ window.onload = func; } else { window.onload = function () { oldOnLoad(); func(); } } } addLoadEvent(prepareGallery); addLoadEvent(SecondFunction); 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(clickLinkNode) { var text = clickLinkNode.href; var imgNode = document.getElementById('viewImage'); if(!imgNode) return false; imgNode.src = text; // change id=description text var descNode = document.getElementById('description'); if(descNode){ console.log(descNode); var firstChildDescNode = descNode.firstChild; if (firstChildDescNode.nodeType === 3) //text { firstChildDescNode.nodeValue = text; } } return true; } function SecondFunction() { console.log("the second function eval") }
<6> 小总结:
1,HTML-DOM语法:
document.getElementsByTagName('form') 等价于 document.forms
elements.getAttribute('src') 等价于 element.src
var source = clickLinkNode.getAttribute('href') 等价于 clickLinkNode.href
2,
<h1 id='Description'></h1> 这个标签之间要是没有字符串 ,获取的
var descNode = document.getElementById('description');
这句话其实descNode.childNodes 是个null
<h1 id='Description'> xxx </h1> 那么返回的childNodes是个列表,因为在html任何东西，及时是个空格都是一个node
3,
html一句:
<p id="Hello"> Hello PPPPP </p>
要在onload修改这个字：
window.onload=function () { var testP = document.getElementById('Hello'); var testPNodes = testP.childNodes; testPNodes[0].nodeValue = '???'; console.log(testPNodes); };
也可以用:
window.onload=function () { var testP = document.getElementById('Hello'); var textNode = testP.firstChild; textNode.nodeValue = '???'; console.log(testPNodes); };
<6>动态添加标记:
1.一个最基本的:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> document.write("<p> Hello world</p>")</script> </body> </html>
2,node.innerHTML
node.innerHTML = HTMLCODE 赋值
var getNodeHTML = node.innerHTML 获取
可以获取/替换所有的子节点.
html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script> document.write("<p> Hello world</p>")</script> <div id="block"> <h1> h1 01 </h1> <h1> h1 02 </h1> </div> <script src="cp07.js"> </script> </body> </html>
changeByJS:
window.onload= function () { //alert("Hello World"); var divnode = document.getElementById('block'); divnode.innerHTML = "<p>This is change by innerHTML</p>"; };
所以:innerHTML完全在改DOM树。
3,
var node = document.createElement()
node.appendChild()
添加理念两个方法:
1,创建一个p节点
2,添加到一个html中一个node的后面
3,创建一个文本节点
4,把文本节点追加到刚才p元素节点上.
第二个方法好理解:
1,创建p节点:
2,创建文本节点
3,p节点appendChild方法 ,把文本节点追加到p节点上
4,html一个节点追加这个p节点
例如:
javascript:
window.onload=function () { var bodyNode = document.getElementsByTagName('body')[0]; // create <p>hello world</p> var pnode = document.createElement('p'); bodyNode.appendChild(pnode); var txt = document.createTextNode("Hell world"); bodyNode.appendChild(txt); // add a <h1>this is h1</h1> var nextNode = document.createElement('h1'); var addTxt = document.createTextNode('this is h1'); nextNode.appendChild(addTxt); bodyNode.appendChild(nextNode); };
4,用javascript实现图片链接:
/* <ul> <li> <a href="images/1.png">image1</a> </li> <li> <a href="images/1.png">image2</a> </li> </ul> */
js:
/* <ul> <li> <a href="images/1.png">image1</a> </li> <li> <a href="images/1.png">image2</a> </li> </ul> */ window.onload = function () { ulnode = addUlNode(); appendLink(ulnode,'images/1.png','image1'); appendLink(ulnode,'images/2.jpg','image2'); }; function createSimpleLinks() { var getBody = document.getElementsByTagName('body')[0]; var linkNode = document.createElement('a'); linkNode.setAttribute('href','images/1.png'); var textNode = document.createTextNode('SimpleLink'); linkNode.appendChild(textNode); getBody.appendChild(linkNode); } function appendLink(listNode,linkAddress,linkName) { var liNode = document.createElement('li'); var linkNode = document.createElement('a'); linkNode.setAttribute('href',linkAddress); var textNode = document.createTextNode(linkName); linkNode.appendChild(textNode); liNode.appendChild(linkNode); listNode.appendChild(liNode); } function addUlNode() { var getBody = document.getElementsByTagName('body')[0]; var ulNode = document.createElement('ul'); getBody.appendChild(ulNode); return ulNode; }
