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;

}

exmp.js

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

}

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;

}

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

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

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;

}

Web从入门到放弃<3>的更多相关文章

Web从入门到放弃<8>
Ref: Cameron D. - HTML5, JavaScript and jQuery (Programmer to Programmer) - 2015 http://www.runoob.c ...
Web从入门到放弃<7>
从这章开始读<javascript高级程序设计> <1>typeof 返回字符串 / 类型未定义:undefined 布尔:boolean 字符串:string 数值:num ...
Web从入门到放弃<5>
<1> CSS_DOM 1,structural layer 2,presentation layer 3,behavior layer style也是一个属性 <!DOCTYPE ...
Web从入门到放弃<1>
HTML大法: <01> <!DOCTYPE html> <html lang="en"> <head> <meta char ...
Web从入门到放弃<6>
<1> Canvas. 1,灰度图: js: function showAsGray() { var imgNode = document.getElementById('img'); ...
Web从入门到放弃<4>
1,插入如下html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
Web从入门到放弃<2>
<添加debug-toolbar> django现在1.11是必须这么做: pip install django-debug-toolbar 设置1: INSTALLED_APPS = [ ...
后端API入门到放弃指北
后端API入门学习指北了解一下一下概念. RESTful API标准] 所有的API都遵循[RESTful API标准]. 建议大家都简单了解一下HTTP协议和RESTful API相关资料. 阮一 ...
OpenStack从入门到放弃
OpenStack从入门到放弃目录: 为何选择云计算/云计算之前遇到的问题什么是云计算云服务模式云应用形式传统应用与云感知应用 openstack及其相关组件介绍 flat/vlan/gre ...

随机推荐

《通过C#学Proto.Actor模型》之PID
PID对象是代表Actor对象的进程,是能过Actor.Spawn(props)获取的:它有什么成员呢?既然代理Actor,首先有一个ID,标识自己是谁,Actor在Spawn时可以命名这个ID,否则 ...
springboot整合mybatis的多数据源解决办法
最近项目有一个非解决不可的问题,我们的项目中的用户表是用的自己库的数据,但是这些数据都是从一个已有库中迁过来的,所以用户信息都是在那个项目里面维护,自然而然我们项目不提供用户注册功能,这就有个问题,如 ...
记一次生产数据库"意外"重启的经历
前言在一个阳光明媚的下午,电脑右下角传来一片片邮件提醒,同时伴随着微信钉钉的震动,打开一看,应用各种出错,天兔告警,数据库服务器内存爆红,Mysql数据库实例挂掉了. 排查先交代一下数据库版本: ...
IL指令表
名称说明 Add 将两个值相加并将结果推送到计算堆栈上. Add.Ovf 将两个整数相加,执行溢出检查,并且将结果推送到计算堆栈上. Add.Ovf.Un 将两个无符号整数值相加,执行溢出检查,并且 ...
MariaDB第二章：基本增删改查
MariaDB 数据类型 MariaDB数据类型可以分为数字,日期和时间以及字符串值. 使用数据类型的原则:够用就行, 尽量使用范围小的,而不用大的常用的数据类型整数:int, bit 小数:de ...
Python Revisited Day 06 (面向对象程序设计）
目录 6.1 面向对象方法 duck typing 访问限制 __ 6.2 自定义类 6.2.1 属性与方法预定义的特殊方法 __...__ 一般的方法名起始和结尾不应该使用俩个下划线,除非是预定义 ...
ASP.NET下MVC设计模式的实现
[转载]MVC架构在Asp.net中的应用和实现转载自:http://www.cnblogs.com/baiye7223725/archive/2007/06/07/775390.aspx 摘要:本 ...
SQL中ON和WHERE的区别
SQL中ON和WHERE的区别 - 邃蓝星空 - 博客园 https://www.cnblogs.com/guanshan/articles/guan062.html
其它综合-企业级CentOS 7.6 操作系统的安装
企业级CentOS 7.6版本安装过程 1. 环境: 使用的虚拟机软件是VMware,版本为 12 .(网上一搜一大推,在此不再演示.) 使用的ISO镜像为CentOS7.6.(自己也可以在网上搜镜像 ...
Java垃圾收集器概述
垃圾收集器的操作查找未使用的对象,释放内存,并压缩堆,避免内存碎片一个java程序,有执行应用程序逻辑的线程和执行GC的线程组.当GC跟踪对象引用,或在内存中移动对象,它必须确保应用程序线程没有使 ...

Web从入门到放弃<3>

Web从入门到放弃<3>的更多相关文章

随机推荐

热门专题