Web从入门到放弃<4>
1，插入
如下html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <h1>snapshot</h1> <ul id="imageGallery">
<li><a href="images/1.png" title="AA samples"> image 1</a></li>
<li><a href="images/2.jpg" title="China map"> image 2</a></li>
</ul> <script src="showpic.js"></script> </body>
</html>
现在要修改以前的使 description(显示链接描述) 和 placeholder(显示图片) 以javascript形式插入:
window.onload = function () {
var body = document.getElementsByTagName('body')[0];
var placeHolder = document.createElement('img');
placeHolder.setAttribute('id','placeHolder');
placeHolder.setAttribute('src','#');
placeHolder.setAttribute('alt','Selection to change pictures');
var description = document.createElement('p');
description.setAttribute('id','description');
var descText = document.createTextNode('Description');
description.appendChild(descText);
body.appendChild(placeHolder);
body.appendChild(description);
}
当前会显示成这样:
<1>node.insertBefore(element,target)
如果要将placeholder (也就是Selection to change pictures) 插入到snapshot 之后，但在image1,image2之前:
然后让Description在placehoder 之前:
window.onload = function () {
var body = document.getElementsByTagName('body')[0];
var placeHolder = document.createElement('img');
placeHolder.setAttribute('id','placeHolder');
placeHolder.setAttribute('src','#');
placeHolder.setAttribute('alt','Selection to change pictures');
var description = document.createElement('p');
description.setAttribute('id','description');
var descText = document.createTextNode('Description');
description.appendChild(descText);
//body.appendChild(placeHolder);
//body.appendChild(description);
var gallery = document.getElementById('imageGallery');
body.insertBefore(placeHolder,gallery); // insert in before imageGallery
body.insertBefore(description,placeHolder); // insert description before placeholder
};
其中body 也可以:
var body = gallery.parentNode;
var body = document.getElementsByTagName('body')[0];
var body = document.body;
如下换下顺序:
body.insertBefore(placeHolder,gallery); // insert in before imageGallery
body.insertBefore(description,gallery); // insert description before imageGallery
图片程序最终版本:
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="background-color: darkgrey; font-family: Consolas">
<h1 style="background-color: #222222;color: white; padding: 0">snapshot</h1>
<ul id="imageGallery">
<li><a href="images/1.png" title="AA samples">image1</a></li>
<li><a href="images/2.jpg" title="China map">image2</a></li>
</ul>
<script src="showpic.js"></script>
</body>
</html>
js:
function addLoadEvent(func) {
var oldEvent = window.onload;
if(typeof window.onload !== 'function'){
window.onload = func; // if have no event , direct use new event function
}
else{
window.onload = function () {
oldEvent(); // add origin event
func(); // add new event
}
}
}
function insertAfter(newElement,targetElement) {
var parent = targetElement.parentNode;
if (parent.lastChild === targetElement){
parent.appendChild(newElement);
}
else{
//console.log("function2 will insert:" , newElement, "| to targetElement:", targetElement, "->nextSibling",targetElement.nextSibling);
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
function preparePlaceHolder() {
var body = document.getElementsByTagName('body')[0];
var placeHolder = document.createElement('img');
placeHolder.setAttribute('id','placeHolder');
placeHolder.setAttribute('src','#');
placeHolder.setAttribute('alt','Selection to change pictures');
var description = document.createElement('p');
description.setAttribute('id','description');
var descText = document.createTextNode('Description');
description.appendChild(descText);
//body.appendChild(placeHolder);
//body.appendChild(description);
var gallery = document.getElementById('imageGallery');
//body.insertBefore(placeHolder,gallery); // insert in before imageGallery
//body.insertBefore(description,gallery); // insert description before imageGallery
insertAfter(placeHolder,gallery);
insertAfter(description,placeHolder);
}
function prepareGallery() {
// get gallery
var gallery = document.getElementById('imageGallery');
var links = gallery.getElementsByTagName('a');
for(var i =0;i<links.length;i++){
links[i].onclick = function () {
console.log(this);
return showPic(this);
};
links[i].onkeypress = links[i].onclick;
}
}
function showPic(obj) {
var source = obj.getAttribute('href');
var title = obj.getAttribute('title');
var placeholder = document.getElementById('placeHolder');
if(!placeholder) return false;
placeholder.src = source;
// get description
var description = document.getElementById('description');
if (description)
description.firstChild.nodeValue = title;
return false;
}
addLoadEvent(preparePlaceHolder);
addLoadEvent(prepareGallery);
2,Ajax
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="new">
</div> <script src="example.js"></script> </body>
</html>
js:
function addLoadEvent(func){
oldEvent = window.onload;
if(typeof window.onload !== "function"){
window.onload = func;
} else{
window.onload = function () {
oldEvent();
func();
}
}
}
function getHTTPObject(){
return new XMLHttpRequest();
}
function getNewContent()
{
var request = getHTTPObject();
console.log(request);
if(request)
{
request.open("GET","example.txt",true);
request.onreadystatechange = function () // event
{
if(request.readyState === 4) // if ==4 , meaning:completed
{
alert("request Received");
var para = document.createElement('p');
var txt = document.createTextNode(request.responseText);
para.appendChild(txt);
var getDiv = document.getElementById('new');
getDiv.appendChild(para);
}
};
request.send(null); // send request
}
else
{
alert("Your browser doesn't support XMLHttpRequest");
}
alert('function done');
}
addLoadEvent(getNewContent);
3,一个javascript列表疑惑:
var defs = new Array();
defs[0] = 1;
defs['a'] = 2;
defs['b'] = 3;
console.log(defs);
console.log("length :", defs.length);
for(val in defs) {
console.log(defs[val]);
}
上面的列表length是1
val 在for 循环是个key,所以访问用defs[val]
不过在下面是一定相同的:
var defs2 = [1,2,3,4,5,6];
for(var i=0;i<defs2.length;i++){
console.log(defs2[i]);
}
console.log('use key to access');
for(val in defs2){
console.log(defs2[val]);
}
列表内容混合时候,遍历一定for(key in defs){ console.log(defs[key];}
跟字典区别:
a = [];
a['name'] = 'liuyangping';
a['age'] = 27;
console.log(a); b = {'name':'liuyangping','age':27};
b['name'] = 'json';
console.log(b);
4,动态生成列表
在网页经常会有
<p> What's <abbr title="Application programming interface">API</abbr>? </p>
如果想动态的显示解释，而不用鼠标hover上去才会显示注释:
用javascript来动态生成:如图
文本中有Dom, API是以斜体字(style)显示，是一个abbr标签。
从bbreviations:开始都是用java动态生成。这样解释比较明了:
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="typography.css" rel="stylesheet" media="screen">
</head> <h1> What is the document object model</h1> <body style="background-color: darkgrey"> <blockquote cite="http://www.w3.org/DOM/"> <p> what is <abbr title="Document object model">Dom</abbr> ?
document object model, document object model, document object model</p></blockquote> <p>It is an <abbr title="Application programming interface">API</abbr></p> <script src="cp_01.js"> </script>
</body>
</html>
css:
body{
background-color: #333333;
font-family: Consolas;
}
abbr{
text-decoration: none;
border:;
font-style: italic;
}
js:
function addLoadEvent(func) {
var oldOnLoad = window.onload;
if(typeof window.onload !== "function"){
window.onload = func;
}
else {
window.onload = function () {
oldOnLoad();
func();
}
}
}
function displayAbbreviations() {
var abbreviations = document.getElementsByTagName('abbr');
if(abbreviations.length<1)return false;
var defs = new Array();
for(var i=0; i<abbreviations.length;i++){
var current_abbr = abbreviations[i];
var definition = current_abbr.getAttribute('title');
var key = current_abbr.lastChild.nodeValue;
defs[key] = definition;
}
for(key in defs){
console.log(defs[key]);
}
var dlist = document.createElement('dl');
for(key in defs){
var definition = defs[key];
var dtitle = document.createElement('dt');
var dtitleText = document.createTextNode(key);
dtitle.appendChild(dtitleText);
var ddesc = document.createElement('dd');
var ddesc_text = document.createTextNode(definition);
ddesc.appendChild(ddesc_text);
dlist.appendChild(dtitle);
dlist.appendChild(ddesc);
}
// create abbreviations
var header = document.createElement('h2');
var header_text = document.createTextNode('Abbreviations:');
header.appendChild(header_text);
document.body.appendChild(header);
document.body.appendChild(dlist);
}
addLoadEvent(displayAbbreviations);
又重新试了下{} Object的遍历 重新搞个:
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="font-family: Consolas"> <h1>The world most popular animation softwares</h1> <blockquote >
<p>
<abbr title="3D Studio Max，常简称为3ds Max或MAX，
是Autodesk公司开发的基于PC系统的三维动画渲染和制作软件。其前身是基于DOS操作系">3DMAX</abbr>,
<abbr title="Maya是美国Autodesk公司出品的世界顶级的三维动画软件，应用对象是专业的影视广告，
角色动画，电影特技等。Maya功能完善，工作灵活，易学易用，制作效率极高，
渲染真实感极强，是电影级别的高端制作软件">MAYA</abbr>、
<abbr title="LightWave是一个具有悠久历史和众多成功案例的为数不多的重量级3D软件之一">LIGHTWAVE</abbr> ,
<abbr title="Houdini （电影特效魔术师） Side Effects Software的旗舰级产品，是创建高级视觉效果的有效工具，
因为它有横跨公司的整个产品线的能力，Houdini Master为那些想让电脑动画更加精彩的动画制作家们提供了空前的能力和工作效率。">Houdini</abbr>
</p>
</blockquote> <script src="index.js"> </script>
</body>
</html>
js:
function addLoadEvent(func) {
var oldEvent = window.onload;
if(typeof window.onload !== "function"){
window.onload = func;
}
else{
window.onload = function () {
oldEvent();
func();
}
}
}
function makeAbbreviations() {
var dlist = document.createElement('dl');
var abbreviations = document.getElementsByTagName('abbr');
var items = {};
for(var i=0;i<abbreviations.length;i++){
var title = abbreviations[i].title;
var abbrText = abbreviations[i].lastChild.nodeValue;
items[abbrText] = title;
}
console.log(items);
for(var p in items){
console.log(items[p]);
var dtitle = document.createElement('dt');
var dtitleText = document.createTextNode(p);
dtitle.appendChild(dtitleText);
var definition = document.createElement('dd');
var definitionText = document.createTextNode(items[p]);
definition.appendChild(definitionText);
dlist.appendChild(dtitle);
dlist.appendChild(definition);
}
var header = document.createElement('h2');
var headerText =document.createTextNode('Abbreviations:');
header.appendChild(headerText);
document.body.appendChild(header);
document.body.appendChild(dlist);
}
addLoadEvent(makeAbbreviations);
。
Web从入门到放弃<4>的更多相关文章
- 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从入门到放弃<3>
UI简单的美化全部来源于Bootstrap 知识来自<javascript dom编程艺术第二版> <1> 点击列表 页面不跳转图片刷新: 主要点: href如何点击完如何不 ...
- 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 ...
随机推荐
- 可视化工具Grafana：简介及安装
随着业务的越发复杂,对软件系统的要求越来越高,这意味着我们需要随时掌控系统的运行情况.因此,对系统的实时监控以及可视化展示,就成了基础架构的必须能力. 这篇博客,介绍下开源的可视化套件grafana的 ...
- GIT归纳整理
1. 将repo_a的分支提交到repo_b分支 repo_a:表示原始git库地址:repo_b:表示新增的git库地址. git remote add new_remote repo_b:new_ ...
- Golang 入门系列（一）Go环境搭建
安装 Go Go语言的优劣,这里就不介绍了,下面直接讲Go 的安装: Go 的官方网站:http://golang.org/(需要FQ软件) 国内下载地址:http://www.golangtc.co ...
- DependencyInjection源码解读之ServiceProvider
var services = new ServiceCollection(); var _serviceProvider = services.BuildServiceProvider(); serv ...
- IntelliJ IDEA 2018.3 重大升级，哪些功能打动了你？
前言 2018.11.28 IntelliJ IDEA 2018.3 正式版发布.对于一个忠实爱好者,迫不及待的我下载了最新版本来体验下.而且 IDEA 今年的第三次重大更新提供了不容错过的显著功能! ...
- Centos6.6安装docker
今天在虚拟机上体验一下docker, 操作系统:Centos6.6 内核版本:2.6 1. https://download.csdn.net/download/dujiaoyang000/10872 ...
- java的List列表转成Tree（树形）结构列表
直接看借鉴博客:https://blog.csdn.net/massivestars/article/details/53911620/ 由于我的业务没有父子级id两个字段,只有一个层级id字段来分层 ...
- CodeForces 219D Choosing Capit
题目链接:http://codeforces.com/contest/219/problem/D 题目大意: 给定一个n个节点的数和连接n个节点的n - 1条有向边,现在要选定一个节点作为起始节点,从 ...
- 【SPOJ】DIVCNTK min_25筛
题目大意 给你 \(n,k\),求 \[ S_k(n)=\sum_{i=1}^n\sigma_0(i^k) \] 对 \(2^{64}\) 取模. 题解 一个min_25筛模板题. 令 \(f(n)= ...
- docker-跨主机存储
容器分类 从业务数据的角度看,容器可以分为两类:无状态(stateless)容器和有状态(stateful)容器. 无状态是指容器在运行过程中不需要保存数据,每次访问的结果不依赖上一次访问,比如提供静 ...