Web从入门到放弃<3>

2022-09-21 22:24:43

UI简单的美化全部来源于Bootstrap

知识来自《javascript dom编程艺术第二版》

<1> 点击列表 页面不跳转图片刷新: 

主要点: href如何点击完如何不跳转，javascript里的<h1 id="Description">xxxx<h1/> 这个childNodes 并不是1个元素。 获取这里面的plainText用:

var descripNodeTextNode = descripNode.childNodes[0];
descripNodeTextNode.nodeValue = imgSrcPath;

Web从入门到放弃<3>

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;

}

exmp.js

<2>

node.nodeType 获取一个节点的类型 结果可能是1,2,3

当一个html打开时候，可以执行一个javascript事件:

function testOnload() {

    console.log("Hello Load");

    alert("ON LOAD");

}

window.onload = testOnload;

Web从入门到放弃<3>

书中给的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:;

}

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>

也可以

Web从入门到放弃<3>

 <4>完全分离javascript,html里不出现脚本:

Web从入门到放弃<3>

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;

}

ImageGallery.js

<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节点

例如:

Web从入门到放弃<3>

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);

};

js

4,用javascript实现图片链接:

/*

<ul>

 <li> <a href="images/1.png">image1</a> </li>

 <li> <a href="images/1.png">image2</a> </li>

</ul>

 */

Web从入门到放弃<3>

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;

}
上一篇：Java Review（三十四、JDBC）


下一篇：PHP编程效率