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 ...
随机推荐
- MAX
Max的用法1(Min类似) Matlab中max函数在矩阵中求函数大小的实例如下: C = max(A)返回一个数组各不同维中的最大元素.如果A是一个向量,max(A)返回A中的最大元素.如果A是一 ...
- 在Fabric ChainCode中导入第三方包（以状态机为例）
在企业级应用开发中,经常会涉及到流程和状态,而有限状态机(FSM)则是对应的一种简单实现,如果复杂化,就上升到Workflow和BPM了.我们在Fabric ChainCode的开发过程中,也很可能涉 ...
- C++笔记--thread pool【转】
版权声明:转载著名出处 https://blog.csdn.net/gcola007/article/details/78750220 背景 刚粗略看完一遍c++ primer第五版,一直在找一些c+ ...
- iOS开发基础篇-手写控件
一.手写控件的步骤 1)使用相应的控件类创建控件对象: 2)设置该控件的各种属性: 3)添加空间到视图中: 4)如果是 UIButton 等控件,还需考虑控件的单击事件等: 二.添加 UIButton ...
- split函数用法
split函数详解 split翻译为分裂. split()就是将一个字符串分裂成多个字符串组成的列表. split()当不带参数时以空格进行分割,当代参数时,以该参数进行分割. //---当不带 ...
- Golang 入门 : 数组
数组是指一系列同一类型数据的集合.数组中包含的每个数据被称为数组元素(element),这种类型可以是任意的原始类型,比如 int.string 等,也可以是用户自定义的类型.一个数组包含的元素个数被 ...
- 【Swift 3.1】iOS开发笔记（四）
一.唱片旋转效果(360°无限顺时针旋转) func animationRotateCover() { coverImageView.layer.removeAllAnimations() let a ...
- 关于gitee代码上传下载
1.在gitee上面创建新分支: 2.复制本地ssh秘钥(C:\Users\Administrator\.ssh) 添加到 gitee设置页面的ssh:(如果之前没有秘钥,就执行ssh-keygen ...
- vertical-align和text-align属性实现垂直水平居中
HTML: <div class="box"> <div class="content"> <span class="s ...
- 动态生成table 列
table.render({ elem: '#test-table-comelist' ,url: layui.setter.base + 'list/comelist' ,cols: [[]] ,d ...