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 ...
随机推荐
- private,protected,public和default的区别
private,protected,public和default的区别 除了default以外,其他都是Java语言的关键字.default代表的是对类成员没有进行修饰的情况.它本身也代表了一种访问控 ...
- 路由信息对象Route之属性query和params的区别
query的使用 第一步:在<router-link/>标签中配置如下 <router-link :to="{name:'beijing',query:{id:1,user ...
- pyspider安装出现问题参考
File "c:\users\13733\appdata\local\programs\python\python37\lib\site-packages\pyspider\run.py&q ...
- 安装inotify-tools监控工具
安装inotify-tools监控工具 yum install -y inotify-tools 2:查看inotify-tools包的工具程序 [root@dns3 ~]# rpm -ql inot ...
- vue.js实战——splice使用
Vue在检测到数组变化时,并不是直接重新渲染整个列表,而是最大化地复用DOM元素.替换的数组中含有相同元素的项不会被重新渲染,因此可以大胆地用新数组来替换就数组,不用担心性能问题. 需要注意的是,以下 ...
- rsync 远程拷贝
rsync -vzP win7.qcow2 agu@192.168.1.198:/tmp/
- mysql-笔记--增删改查
查看数据库:可以使用 show databases; 命令查看已经创建了哪些数据库 指定数据库:在登录后使用 use 语句指定, 命令: use 数据库名;要对一个数据库进行操作, 必须先选择该数据库 ...
- 清北学堂part2
今天的内容分为两部分,能听懂的和听不懂的... 整一整当前阶段(oi)非常重要的知识点,扩展欧几里得, 其他的不是不重要,只是代码实现效果不很好 代码: #include<bits/stdc++ ...
- WebView 安全之 addJavascriptInterface
WebView是Android平台下的一个重要组件,通常用来在Activity中嵌入一个简单的浏览器,实现在线网页浏览的功能.比如下面代码实现访问Google页面: WebView webView = ...
- openstack oslo.messaging库
openstack oslo.messaging库 2017年04月13日 22:13:25 li_101357 阅读数:1383 版权声明:本文为博主原创文章,未经博主允许不得转载. https ...