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
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);
};
js
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 ...
随机推荐
- Linux内核入门到放弃-Ext2数据结构-《深入Linux内核架构》笔记
Ext2文件系统 物理结构 结构概观 块组是该文件系统的基本成分,容纳了文件系统的其他结构.每个文件系统都由大量块组组成,在硬盘上相继排布: ----------------------------- ...
- mac 利用svn下载远程代码出现Agreeing to the Xcode/iOS license requires admin privileges, please re-run as root via sudo.
终端输出的信息:Agreeing to the Xcode/iOS license requires admin privileges, please re-run as root via sudo. ...
- DIY 空气质量检测表
DIY 空气质量检测表 前几天逛淘宝看到有空气颗粒物浓度测量的传感器,直接是 3.3V TTL 电压串口输出的,也不贵,也就 100 多一点.觉得挺好就买了个,这两天自己捣鼓了个小程序,搞了个软件界面 ...
- .NET Core 实现 Redis 批量查询指定格式的Key
一. 问题场景 Redis 作为当前最流行的内存型 NoSQL 数据库,被许多公司所使用,作为分布式缓存.我们在实际使用中一般都会为 key 带上指定的前缀或者其他定义的格式.当由于我们程序出现bug ...
- 【学习总结】GirlsInAI ML-diary day-15-读/写txt文件
[学习总结]GirlsInAI ML-diary 总 原博github链接-day15 认识读/写txt文件 路径: 绝对路径:文件在电脑中的位置 相对路径:下面会用到 1-准备 新建一个 pytho ...
- Kickstart 和 Cobbler ks.cfg文件详解
ks.cfg文件组成大致分为3段 命令段 键盘类型,语言,安装方式等系统的配置,有必选项和可选项,如果缺少某项必选项,安装时会中断并提示用户选择此项的选项 软件包段 %packages @groupn ...
- Python——Pycharm安装、激活、中文、
1.激活pycharm (1) 修改hosts文件:将 0.0.0.0 account.jetbrains.com 添加到文件最后面 Windows系统hosts文件路径为: c:\win ...
- Object Detection with 10 lines of code - Image AI
To perform object detection using ImageAI, all you need to do is Install Python on your computer sys ...
- android O 打开设置->声音->“点按时震动问题”
主要原因是和导航栏和屏幕最下方3个按键的属性配置有关,因为在PhoneWindowManager中调用方法performHapticFeedbackLw(null, HapticFeedbackCon ...
- Java之函数式接口
函数式接口 概述:接口中只有一个抽象方法 下面介绍的可能很抽象,理解不了,至少在我看来单独的这几个借口是没有用的,跟最下面说的 Stream流一起用才会有效果 函数式接口,即适用于函数式编程场景的接口 ...