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

随机推荐

Java Lucene入门
1.lucene版本:7.2.1 pom文件: <?xml version="1.0" encoding="UTF-8"?> <project ...
【转】localStorage使用总结
原文地址:https://www.cnblogs.com/st-leslie/p/5617130.html 一.什么是localStorage.sessionStorage 在HTML5中,新加入了一 ...
LeetCode 613. Shortest Distance in a Line
Table point holds the x coordinate of some points on x-axis in a plane, which are all integers. Writ ...
PS制作简洁漂亮的立体抽丝文字
一.新建一个800*600px文档,并将Background图层创建一个副本,将其命名为Background_copy. 二.双击Background_copy图层,勾选渐变叠加,并设定以下数值勾选 ...
[转帖]SAP S4 HANA 1610与ECC的比较
SAP S4 HANA 1610与ECC的比较 https://zhuanlan.zhihu.com/p/27266476 SAP S4 HANA是下一代的ERP套件,是SAP 战略的核心,相关资料也 ...
Oracle篇之查询行及概念
Oracle: s_emp s_dept s_region 行:Row(tuple) 列:Column(attribute) conn:改变用户 Drop:删除用户 drop user bri ...
jsp篇之指令元素和动作元素
Jsp指令元素分类与书写格式: 书写格式: <%@ 指令类型属性="值" .. %> 分类: [page include taglib]三种. 1,page指令: ...
koa-router 后台路由管理框架
koa-router是koa框架配套的路由管理模块,对后台的接口分离出来. 首先引入koa和koa-router, 然后分批设置路由: 代码中的institution.modifyInsStatus是 ...
Linux下python3、virtualenv、Mysql、redis安装配置
一.在Linux安装python解释器 1.下载python3源码包 cd /opt/ wget https://www.python.org/ftp/python/3.6.2/Python-3.6. ...
Spring MVC 使用介绍（十）—— 编码
一.概述客户端与服务器端在交互过程中,需要将字符以某种编码方式转化为字节流进行传输,因此涉及字符的编码和解码.某一方以编码方案A编码,另一方须以同样的编码方案解码,否则会出现乱码. 客户端与服务器端 ...

Web从入门到放弃<3>

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

随机推荐

热门专题