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 ...
随机推荐
- Python学习--Python运算符
什么是运算符? 举个简单的例子 4 + 5 = 9 . 例子中,4 和 5 被称为操作数,"+" 称为运算符. Python语言支持以下类型的运算符: 算数运算符 比较(关系)运算 ...
- Python第二天： 变量详解及变量赋值
目录 什么是变量? 怎么写一个好的变量? 下划线命名法及驼峰命名法 结语 目录 此文章针对刚学Python的小白,若觉得对变量有很好的掌握,可以观看其他的文章 在这里, 我说一下我对变量的简单总结: ...
- echarts中饼图显示百分比
通过echarts制作饼图,需要通过鼠标移动到对应的扇形才能才看数值和百分比. 解决这个问题参考的是将鼠标移动到扇形上的显示方法: tooltip : { trigger: ' ...
- C++ 中 auto 与 decltype 的用法与区别
最近在恶补 C++ 知识的时候,学习到了一些 C++11 标准的新特性,利用这些新特性,我们能够更快地提高编程效率,从而实现我们的目标,在此特意记下学习过程中所学习到的一些东西,方便日后的回顾和复习. ...
- NTT板子
不说别的. 这份NTT跑得比FFT快,不知道为什么. 以下代码针对\(10^5\)的数据范围. #include<cstdio> #include<vector> #inclu ...
- 小程序蓝牙BLE——自动连接设备（手环）
了解小程序蓝牙API: /** *蓝牙API: * 1.初始化蓝牙(判断蓝牙是否可用):openBluetoothAdapter * 2.获取蓝牙设备状态(蓝牙是否打开):getBluetoothAd ...
- CodeForces 1151C Problem for Nazar
题目链接:http://codeforces.com/problemset/problem/1151/C 题目大意: 有一个只存奇数的集合A = {1, 3, 5……2*n - 1,……},和只存偶数 ...
- 【转】CENTOS/RHEL 7 系统中设置SYSTEMD SERVICE的ULIMIT资源限制
在bash中,有个ulimit命令,提供了对shell及该shell启动的进程的可用资源控制.主要包括打开文件描述符数量.用户的最大进程数量.coredump文件的大小等. 在centos 5/6 等 ...
- Lodop某个电脑打印内容大小有问题
可能原因分析:本地设置放大比例问题,是真实的放大或缩小,1.查看比例应在100%, 2.控制面板设置显示应在100%(win7 win10中) 3.超文本样式问题,分析样式中不同浏览器版本下显示不一致 ...
- Codeforces1100F Ivan and Burgers 【整体二分】【线性基】
题目分析: 一道近似的题目曾经出现在SCOI中,那题可以利用RMQ或者线段树做,这题如果用那种做法时间复杂度会是$log$三次方的. 采用一种类似于整体二分的方法可以解决这道题. 将序列的线段树模型建 ...