zoukankan html css js c++ java

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>

View Code

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;

View Code

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

View Code

<3>打开一个广告窗口

popUp.js:

function popUp(url) {
    window.open(url,"popup","320,height=480");
}

View Code

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>

View Code

也可以

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

View Code

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>

View Code

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

<h1 id='Description'></h1> 这个标签之间要是没有字符串 ,获取的

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

这句话其实descNode.childNodes 是个null

<h1 id='Description'> xxx </h1> 那么返回的childNodes是个列表,因为在html任何东西，及时是个空格都是一个node

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>

View Code

changeByJS:

window.onload= function () {
    //alert("Hello World");
    var divnode = document.getElementById('block');
    divnode.innerHTML = "<p>This is change by innerHTML</p>";
};

所以:innerHTML完全在改DOM树。

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

View Code

查看全文

相关阅读:
[codevs]线段树练习5
【Java学习笔记之十六】浅谈Java中的继承与多态
 【Java学习笔记之十五】Java中的static关键字解析
 【Java学习笔记之十四】Java中this用法小节
 【Java学习笔记之十三】初探Java面向对象的过程及代码实现
 【Java学习笔记之十二】Java8增强的工具类：Arrays的用法整理总结
 hdu2896 AC自动机
 hdu2222 AC自动机
 字符串匹配--AC自动机模板
 字符串匹配--（K）MP模板

原文地址：https://www.cnblogs.com/gearslogy/p/8120424.html