I come, I see, I conquer

                    —Gaius Julius Caesar
  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 :: 管理 ::
web前台设计技术

 

一、Javascript & jQuery

 

javascript

 

1、Javascript的解析与执行

 

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    
    <!-- 浏览器对每个块或文件进行独立的扫描，然后对全局的代码进行顺序执行，所以，在一个块(文件)中，函数可以在调用之后进行“定义式”定义；但
         在两个块中，定义函数所在的块必须在函数被调用的块之前。-->
    <script type="text/javascript">
        f1();
    </script>
    <script type="text/javascript">
        function f1() {
            alert("NOT same block: Hello World!");
        }
    </script>

    <!-- JavaScript是一种描述型脚本语言，由浏览器进行动态的解析与执行。函数的定义方式大体有以下两种，“定义式”函数定义和“赋值式”函数定义，
         浏览器对于不同的方式有不同的解析顺序。页面加载过程中，浏览器会对页面上或载入的每个js代码块(或文件)进行扫描，如果遇到定义式函数，则进
         行预处理(类似于C等的编译)，处理完成之后再开始由上至下执行；遇到赋值式函数，则只是将函数赋给一个变量，不进行预处理，待调用到的时候才
         进行处理。-->
    <script type="text/javascript">
        //“定义式”函数定义
        f2();
        function f2() {
            alert("SAME block: Hello World!");
        }
        //“赋值式”函数定义
        f3();
        var f3 = function () {
            alert("Hello wild!");
        }
    </script>

    <!--变量必须先声明后引用-->
    <script type="text/javascript">
        alert(undefinedVar);     // 弹出"undefined";
        var myStr = "Variable: Hello World!";
        alert(myStr);            // 弹出"Hello World";
    </script>

    <!--body的onload事件触发条件是body内容加载完成，而body中的js代码会在这一事件触发之前运行-->
    <script type="text/javascript">
        function mf() {
            alert("body中的程序执行完后，body中的onload再调用我！");
        }
    </script>
</head>
<body onload="mf();">
    <!--javascript程序是单线程依次执行的-->
    <script type="text/javascript"> 
        function fn1() {
            var sum = 0;
            for (var ind = 0; ind < 1000; ind++) {
                sum += ind;
            }
            alert("答案是" + sum);
        }
        function fn2() {
            alert("早知道了，我就是不说");
        }
        fn1();
        fn2();
    </script>
</body>
</html>
<!--html标签外-->
<script type="text/javascript">
    alert("outside html tag!");
</script>

 

输出结果：

SAME block: Hello World!

答案是499500

早知道了，我就是不说

outside html tag!

body中的程序执行完后，body中的onload再调用我！

 

参考：http://www.cnblogs.com/xiachufeng/archive/2010/01/26/1657019.html

         http://dancewithnet.com/2007/03/22/order-of-execution-of-javascript-on-web/

 

 

 

2、Javascript部分语法

 

(1) 数值数组

 

var moveTime = new Array();

moveTime[0] = 0;

moveTime[1] = 0;

或

var cssList = new Array("s01/s_euro2012_1.6.1.css","s02/s_1.6.1.css","s03/s_1.6.1.css","s04/s_1.6.1.css");

 

(2) 关联数组

如果在填充数组时只给出了元素的值，这个数组就将是一个数值数组，它的各个元素下标将被自动创建和刷新。我们可以通过在填充数组时为每个新元素明确地给出下标的方式来改变这种默认的行为。在为新元素给出下标时，不必局限于整数数字，数组下标可以是字符串。

var arch = new Array();

arch["name"] = "John";

arch["year"] = 2000;

 

用关联数组代替数值数组意味着，我们可以通过各元素的名字而不是下标数字来引用它们。这可以大大提高脚本的可读性。另外，数组的元素可以是另外一个数组。如下所示：

var beats = Array();

beats[0] = arch;

其实是一个二维数组了。那么，beats[0]["name"]的值是"John"，beats[0]["year"]的值是2000。

在此基础上进一步改进，beats数组也填充为关联数组。如下：

beats["vaclist"] = arch;

现在beats["vaclist"]["name"]的值是"John"，......

 

也可以这样定义：

gp=[];

gp["News"]=["2","/site/area/xxx.htm"];

gp["stocknum"]=["1","",""];

gp["sports"]=["2","/site/sports/x.htm"];

gp["car"]=["2","/site/tech/xx.htm"];

gp["edu"]=["1",""];

使用方法：gp["News"][0]， gp["News"][1]

 

 

3、Javascript自定义对象

javascript中的内建对象（如Math、Object、Array、Date、String等）不能满足需求时，用户可以创建自定义对象。

 

(1) 构造函数方式和原型方式

构造函数方式：属性及对象的方法放在构造方法里面定义。

原型方式：对象属性及方法定义通过对象的prototype来定义。

语法：

function 对象名(参数列表)
{
    this.属性1=参数1;
    this.属性2=参数2;
    …
    this.方法名=function(参数列表)
    {
        代码块;
    }
}

示例：

<script type="text/javascript">
    function sayHello() {
        alert("outer defined func," + this.name);
    };
    function Person(name) {
        this.name = name;  //构造函数方式
        this.showName = function() {
            alert("inner defined func," + this.name);
        };
        this.sayHello = sayHello; //构造函数方式
    }
    Person.prototype.protoSayHello = function(name)//原型方式
    {
        if (this.name === name) {
            alert("prototype defined func," + name);
        }
    };
    //使用
    var person1 = new Person('Jim');
    person1.protoSayHello("Jim");
    person1.showName();
    person1.sayHello();
</script>

 

(2) 扩展object生成自定义对象

语法：

var 对象名=new Object();
对象名.自定义属性1;
对象名.自定义属性2;
…
对象名.方法名=function()
{
    程序语句块;
}

示例：

var person2 = new Object();
person2.name = "";
person2.age = "";
person2.gdr = "";
person2.init = function(name,age,gdr) {
    this.name = name;
    this.age = age;
    this.gdr = gdr;
};
person2.showMsg = function() { 
    alert("Name："+this.name+"\nAge："+this.age+"\nGender："+this.gdr);
};

person2.init("Lucy",20,"Female");
person2.showMsg();

 

(3) 直接定义对象的结构

直接定义对象的结构能生成一个新的自定义对象类型，但是不能使用new新建实例。该方法在只需生成某个应用对象并进行相关操作的情况下使用时，代码紧凑，编程效率高。在一些特殊情况在使用，一般不推荐使用。

语法：

var 对象的名字
{
    属性名1:初始化值1,
    属性2:初始化2,
    …
    方法名1:function()
    {
        程序语句块;
    },
    方法名2:function()
    {
        程序语句块;
    },
    …
}

示例：

var peason3 =
{ 
    name:null,
    age:null,
    gdr:null,
    init:function(name,age,gdr) { 
        this.name = name;
        this.age = age;
        this.gdr = gdr;
    }, 
    showMsg:function() { 
        alert("Name："+this.name+"\nAge："+this.age+"\nGender："+this.gdr);
    }
}

person3.int("Alen",30,"Female");
person3.showMsg();

 

 

内置对象请参考：http://www.w3schools.com/jsref/default.asp

理解js中的内建对象：http://www.ibm.com/developerworks/web/library/wa-objectsinjs-v1b/

内置对象：http://www.jb51.net/article/20364.htm

面向对象的js编程介绍：https://developer.mozilla.org/en/Introduction_to_Object-Oriented_JavaScript

 

操作符、语句、函数、事件、保留字

javascript mdn：https://developer.mozilla.org/en/JavaScript

javascript kit：http://www.javascriptkit.com/

jQuery API Reference

jQuery UI Reference

 

javavscript source：http://www.javascriptsource.com/

jQuery：http://jquery.com/

精通Javascript+jQuery：http://learning.artech.cn/20080621.mastering-javascript-jquery.html

JavaScript教程：http://www.w3school.com.cn/js/index.asp  

jQuery 1.4中文文档：http://jquery-api-zh-cn.googlecode.com/svn/trunk/xml/jqueryapi.xml

jQuery教程：http://www.w3school.com.cn/jquery/index.asp 

 


 

二、Ajax

 

1. 认识Ajax

    - 传统的web采用同步交互的形式，即用户向服务器发送一个请求，然后服务器根据用户的请求执行相应的任务，并返回结果
    - Ajax与传统的web应用不同，它采用的是异步交互的方式
    - Ajax的组成部分
    　 - JavaScript
    　 - CSS
    　 - DOM
　    - XMLHttpRequest 对象

2. XMLHttpRequest对象

    - 异步对象链接服务器
　     - 创建
　     - 建立请求
    - 异步对象链接服务器
　     - onreadystatechange事件
　     - send()发送
    - GET VS POST

    参考：http://learning.artech.cn/20080613.javascsript-ajax.html

 

AJAX教程：http://www.w3school.com.cn/ajax/index.asp 

 

 

 

 

三、CSS & DIV


1、BOX模型

 

 

 

 

2、选择器与样式

 

所有的元素都有class属性，不同的元素可以用同样的class属性。id属性的用途是给网页里的某个元素加上独一无二的标识符，不同的元素必须有不同的id属性值。

 

class为topNav标签下的topNavItem标签下的所有u标记：

.topNav .topNavItem u{position:relative;z-index:105; padding:0 10px; text-decoration:none}

LUI标签下的vip标签，LUI标签下的ico_level标签, ....

#LUI .vip,#LUI .ico_level,#LUI .ico_qvip,#LUI .tIcon{*position:static;*top:0;float:left;height:19px;margin-top:6px;vertical-align:text-top}

div块的样式为head、hideHead、camphoto三种样式的并集，如有重复，后面样式覆盖前面样式

<div id="camphoto" class="head hideHead camphoto">

id为content的h1标签下的h2标签

h1#content h2 {}


 

3、DIV的position和display属性

  • static
  • relative：定准基准；没有脱离标准流
  • absolute：定位基准跟父容器有关；脱离标准流
  • fixed：与浏览器窗口为基准

 

  • display：inline
  • display：block
  • display：none

 

4、DIV+CSS布局

 

用DIV将页面分块： 



用CSS调整各块的位置： 

 

 

设计举例：

css方案一：

#header, #pagefooter, #container 
{
    margin:0 auto;
    width:760px;
}
#container
{
    position:relative;
}
#content
{
    position:absolute;
    top:0;
    left:0;
    width:500px;
}
#side
{
    margin:0 0 0 500px;
}

绝对定位法的缺陷：container容器的高度是由side决定的，因为side这个div是以标准流方式进行的，而content是一个绝对定位的div，所以它会脱离标准流。这时如果content内容的高度比side还要高，就会出现content与pagefooter重叠。我们可以改为方案二的浮动法。

 

css方案二：

#header, #pagefooter, #container 
{
    margin:0 auto;
    width:760px;
}
#content
{
    float:left;
    width:500px;
}
#side
{
    float:left;
    width:500px;
}
#pagefooter
{
    clear:both;
}

 

 

5、实例

 

实例一：博客设计DIY

  • 分析构架：设计分析（网页中需要哪些元素），排版构架
  • 模块拆分：导航与banner，左侧列表，内部内容，footer脚注
  • 整体调整

讲解：http://learning.artech.cn/20070620.css-div-case-study-1.html

代码：https://files.cnblogs.com/JCSU/css_div_eg_blog.rar

 

实例二：公司网站

  • 分析构架：设计分析，排版构架
  • 模块拆分：Logo与顶端链接，左侧导航与搜索，主体内容，内容banner，新闻快递，公司咨询，英文刊物
  • 整体调整

讲解：http://learning.artech.cn/20070622.css-div-case-study-3.html

代码：https://files.cnblogs.com/JCSU/css_div_eg_company.rar

 

6、设计步骤

 

排版时考虑的不是“这个东西放在这儿，那个东西放在那儿”，而是页面中信息的类别和信息的结构，网站的含义和逻辑关系。

(1) 通盘考虑网站内容：产品信息、价格信息、公司信息、报表、服务信息、购物篮、论坛

(2) 分析页面：主子导航条、页眉页脚、内容、其他信息

(3) 看看你的那些标记：消灭<font>和<b>，把描述外观的标记改成描述结构的标记，如把<b>替换成<strong>

(4) 把你的页面合理的分布在DIV中

(5) 是开始编写CSS的时候了

 

 

7、设计经验

 

(1) 文章标题列表中日期居右显示的两种方法

 

方法一：

<p>This is title of article<span>2011-02-03</span></p>
p{ position:relative; }
span{ position:absolute; right:0px; }

 

方法二：

<p><span>2011-02-03</span>This is title of article</p>
p span{    float:right; }

 

(2) padding结合background制作带图标的新闻标题

如下图所示：

实现方法：

.vico{padding-right:21px;background:url(http://mat1.gtimg.com/www/iskin09/vico1.png) right center no-repeat;}
<h3>
    <span class="fnb">·</span>
    <a href="#" class="vico">正直播神九航天员返回</a>
    <a href="#">将被搀扶出舱</a>
    <a href="#">快讯</a>
</h3>
<div style="height:23px;padding-left:98px;background:url(http://mat1.gtimg.com/www/iskin960/euro2012logo7.png) no-repeat 12px center;position:relative;">
    <h3>
        <span class="fnb"></span>
        <a href="#"style="position:absolute;top:0;left:10px;width:82px;height:20px;display:block;"></a>
        <a href="#">意大利2-1淘汰德国 巴洛特利两球</a>
    </h3>
</div>

 

 


(3) 好的设计考虑

  1. XHTML标签充分的语意化
  2. 尽量少的嵌套
  3. 页面里基本只显示用户需要看的数据（我们用CSS直接控制用户需要看的数据的显示的样式）。页面基本由基础的h1~h6、p、ul、ol、li、form、div标签来实现。
  4. 页面对搜索引擎友好（没有CSS支持时，浏览页面时同样清晰，层次分明，十分容易查看数据。），已做了基本的SEO优化

 

CSS教程：http://www.w3school.com.cn/css/index.asp

CSS设计彻底研究（适合提高）：http://learning.artech.cn/20070430.css-reserch-content-table.html

CSS/DIV页面布局设计（适合入门）：http://learning.artech.cn/20070501.css-div-tutorial-content-table.html

DIV+CSS：http://www.divcss5.com/


 


 

四、CSS3 & HTML 5

CSS3 Takes on the World：http://channel9.msdn.com/events/MIX/MIX11/EXT20

CSS3手册：http://www.divcss5.com/css3/

The Expressive Web：http://beta.theexpressiveweb.com/

 

 

 

五、HTML

块级元素列表
<address> 定义地址
<caption> 定义表格标题
<dd> 定义列表中定义条目
<div> 定义文档中的分区或节
<dl> 定义列表
<dt> 定义列表中的项目
<fieldset> 定义一个框架集
<form> 创建 HTML 表单
<h1> 定义最大的标题
<h2> 定义副标题
<h3> 定义标题
<h4> 定义标题
<h5> 定义标题
<h6> 定义最小的标题
<hr> 创建一条水平线
<legend> 元素为 fieldset 元素定义标题
<li> 标签定义列表项目
<noframes> 为那些不支持框架的浏览器显示文本，于 frameset 元素内部
<noscript> 定义在脚本未被执行时的替代内容
<ol> 定义有序列表
<ul> 定义无序列表
<p> 标签定义段落
<pre> 定义预格式化的文本
<table> 标签定义 HTML 表格
<tbody> 标签表格主体（正文）
<td> 表格中的标准单元格
<tfoot> 定义表格的页脚（脚注或表注）
<th> 定义表头单元格
<thead> 标签定义表格的表头
<tr> 定义表格中的行
行内元素列表
<a> 标签可定义锚
<abbr> 表示一个缩写形式
<acronym> 定义只取首字母缩写
<b> 字体加粗
<bdo> 可覆盖默认的文本方向
<big> 大号字体加粗
<br> 换行
<cite> 引用进行定义
<code> 定义计算机代码文本
<dfn> 定义一个定义项目
<em> 定义为强调的内容
<i> 斜体文本效果
<img> 向网页中嵌入一幅图像
<input> 输入框
<kbd> 定义键盘文本
<label> 标签为 input 元素定义标注（标记）
<q> 定义短的引用
<samp> 定义样本文本
<select> 创建单选或多选菜单
<small> 呈现小号字体效果
<span> 组合文档中的行内元素
<strong> 语气更强的强调的内容
<sub> 定义下标文本
<sup> 定义上标文本
<textarea> 多行的文本输入控件
<tt> 打字机或者等宽的文本效果
<var> 定义变量

 

HTML系列教程：http://www.w3school.com.cn/h.asp


 

 

六、DOM

DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。DOM 被分为不同的部分（核心、XML及HTML）和级别（DOM Level 1/2/3）：

 

1、Core DOM

定义了一套标准的针对任何结构化文档的对象


2、XML DOM
DOM 将 XML 文档作为一个树形结构，而树叶被定义为节点。

XML DOM 教程：http://www.w3school.com.cn/xmldom/index.asp

 


 

3、HTML DOM
HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树）。

 

 

根据 DOM，HTML 文档中的每个成分都是一个节点。

DOM 是这样规定的：

  • 整个文档是一个文档节点
  • 每个 HTML 标签是一个元素节点
  • 包含在 HTML 元素中的文本是文本节点
  • 每一个 HTML 属性是一个属性节点
  • 注释属于注释节点

 

查找并访问元素节点

你可通过若干种方法来查找您希望操作的元素节点：

  • 通过使用 getElementById() 和 getElementsByTagName() 方法
  • 通过使用一个元素节点的 parentNode、firstChild 以及 lastChild 属性

 

节点信息

每个节点都拥有包含着关于节点某些信息的属性。这些属性是：

  • nodeName（节点名称）
  • nodeValue（节点值）
  • nodeType（节点类型）

 

nodeName

nodeName 属性含有某个节点的名称。

  • 元素节点的 nodeName 是标签名称
  • 属性节点的 nodeName 是属性名称
  • 文本节点的 nodeName 永远是 #text
  • 文档节点的 nodeName 永远是 #document

注释：nodeName 所包含的 XML 元素的标签名称永远是大写的

 

nodeValue

对于文本节点，nodeValue 属性包含文本。

对于属性节点，nodeValue 属性包含属性值。

nodeValue 属性对于文档节点和元素节点是不可用的。

 

nodeType

nodeType 属性可返回节点的类型。

最重要的节点类型是：

元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9

 

(1) 访问元素结点：document.getElementById(id)

                         document.getElementsByTagName(tag)

(2) 访问属性：object.getAttribute(attribute)

                   object.setAttribute(attribute,value)

                    不过，object不是文档对象，而是元素结点对象。

                    如：alert(getElementById("topNav").getAttribute("Title"));

(3) 几个新属性：childNodes、nodeType、nodeValue、firstChild、lastChild

 

附录一 DOM方法（常用DOM方法，非全体）
◇创建节点
  ·createElement()：按照给定的标签名创建一个新的元素节点。这个方法的返回值是一个指向新建元素节点的引用指针：Reference = document.createElement(element);创建的节点没有添加到文档里，只存在于JavaScript上下文里的DocumentFragment对象。
  ·createTextNode()：创建一个包含着给定文本的新文本节点。这个方法返回值是一个指向新建文本节点的引用指针：reference=document.createTextNode(text);
◇复制节点
  ·cloneNode()：将为给定的节点创建一个副本。这个方法返回值是一个指向新建克隆节点的引用指针：reference=node.cloneNode(deep);参数deep是一个布尔型参数，取值只可能为true或false，这个参数决定是否要把被复制节点的子节点也一同复制到新建节点里去。
◇插入/剪切节点
  ·appendChild()：给元素节点追加一个子节点，这个方法的返回值是一个指向新增子节点的引用指针：reference=element.appendChild(newChild);还可剪切原有节点。
  ·insertBefore()：把一个给定节点插入到一个给定元素节点的给定子节点前面，它返回一个指向新增子节点的引用指针。Reference=element.insertBefore(newNode,targetNode);

                            parentElement.insertBefore(newElement,targetElement);
◇删除节点
  ·removeChild()：从一个给定元素里删除一个子节点，返回一个指向已被删除的子节点的引用指针。Reference=element.removeChild(node);
◇替换节点
  ·replaceChild()：把一个给定父元素里的一个子节点替换为另外一个节点，返回一个指向已被替换的那个子节点的引用指针。Reference=element.replaceChild(newChild,oldChild);
◇设置属性节点
  ·setAttribute()：为给定元素节点添加一个新的属性值或是改变它的现有属性的值。属性的名字和值必须以字符串形式传递给此方法。Element.setAttribute(attributeName,attributeValue);
◇查找节点
  ·getAttribute()：返回一个给定元素的一个给定属性节点的值，必须以字符串的形式传递给这个方法。attributeValue=element.getAttribute(attributeName);
  ·getElementById()：寻找一个有着给定id属性值的元素，返回一个有着给定id值的节点（对象）：element=document.getElementById(ID);
  ·getElementsByTagName()：寻找有着给定标签名的所有元素，返回一个节点集合数组，数组里每个元素都是一个对象。Elements=document.getElementSByTagName(tagName);
  ·hasChildNodes：检查一个给定元素是否有子节点，返回一个布尔值true或false。booleanValue=element.hasChildNodes;
 
--------------------------------------------------------------------------------------- 

附录二 DOM属性（常用DOM属性，非全体）
◇节点的属性
  ·nodeName：属性返回一个字符串，其内容是给定节点的名字：name=node.nodeName;
  ·nodeType：属性返回一个整数，这个数值代表着给定节点的类型：integer=node.nodeType;
       — 1.  ELEMENT_NODE
       — 2. ATTRIBUTE_NODE
       — 3.  TEXT_NODE
       — 4.  CDATA_SECTION_NODE
       — 5.  ENTITY_REFERENCE_NODE
       — 6.  ENTITY_NODE
       — 7.  PROCESSING_INSTRUCTION_NODE
       — 8.  COMMENT_NODE
       — 9.  DOCUMENT_NODE
       — 10.  DOCUMENT_TYPE_NODE
       — 11.  DOCUMENT_FRAGMENT_NODE
       — 12.  NOTATION_NODE
  ·nodeValue：返回给定节点的当前值，返回的是一个字符串。nodeValue是一个读/写属性。元素节点返回null，不能赋予值。Value=node.nodeValue;
◇遍历节点树
  ·childNodes：属性将返回一个数组，这个数组由给定元素节点的子节点构成。是一个只读属性。nodeList=node.childNodes;
  ·firstChild：属性将返回一个给定元素节点的第一个子节点，返回一个节点对象的引用指针。是一个只读属性。Reference=node.firstChild;
  ·lastChild：属性将返回一个给定元素节点的最后一个子节点，返回一个节点对象的引用指针。是一个只读属性。Reference=node.lastChild;
  ·nextSibling：属性将返回一个给定节点的下一个子节点，返回一个节点对象的引用指针。是一个只读属性。Reference=node.nextSibling;
  ·parentNode：属性将返回一个给定节点的下一个父节点，返回一个节点对象的引用指针。是一个只读属性。Reference=node.parentNode;
  ·previousSibling：属性将返回一个给定节点的前一个子节点，返回一个节点对象的引用指针。是一个只读属性。Reference=node.previousSibling;

 

参考《JavaScript DOM 编程艺术》，以下是效果和部分代码：

 

<head id="Head1" runat="server">
    <title>Image Gallery</title>
    <style type="text/css">
        ul{padding:0px; height:25px;}
        li{float:left; padding-left:1em; list-style:none;}
        img {clear:both;}
    </style>

    <script type="text/javascript">
        function showPic(whichpic) {
            var source = whichpic.getAttribute("href");
            document.getElementById("placeholder").setAttribute("src", source);
            var text = whichpic.getAttribute("title");
            var desc = document.getElementById("description");
            desc.childNodes[0].nodeValue = text;
        }
        //定义一个DOM中不存在的insertAfter
        function insertAfter(newElement, targetElement) {
            var parent = targetElement.parentNode;
            if (parent.lastChild == targetElement) {
                parent.appendChild(newElement);
            } else {
                parent.insertBefore(newElement, targetElement.nextSibling);
            }
        }
        function changeLayout() {
            //childNodes、nextSibling、previousSibling
            var liTags = document.getElementsByTagName("li");
            alert(liTags.length);
            alert(liTags[0].childNodes[0].childNodes[0].nodeValue);
            alert(liTags[0].nextSibling.childNodes[0].childNodes[0].nodeValue);
            //nodeName、nodeType、nodeValue
            alert(document.getElementById("description").nodeName + "\n" +
                  document.getElementById("description").nodeType + "\n" +
                  document.getElementById("description").childNodes[0].nodeValue);
            //removeChild、parentNode
            var oldimg = document.getElementById("placeholder");
            oldimg.parentNode.removeChild(oldimg);
            var oldp = document.getElementById("description");
            oldp.parentNode.removeChild(oldp);
            //createElement、setAttribute
            var placeholder = document.createElement("img"); 
            placeholder.setAttribute("id", "placeholder");
            placeholder.setAttribute("src", "images/placeholder.gif");
            placeholder.setAttribute("alt", "my image gallery");
            //createTextNode、appendChild
            var description = document.createElement("p");
            description.setAttribute("id", "description");
            var desctext = document.createTextNode("Choose an image.");
            description.appendChild(desctext);
            //用DOM中的insertBefore方法添加img元素结点
            var gallery = document.getElementById("imagegallery");
            gallery.parentNode.insertBefore(placeholder, gallery);
            //用自定义的insertAfter方法添加p元素结点
            insertAfter(description, placeholder);
        }
    </script>
</head>
<body>
    <h1>
        Snapshots</h1>
    <ul id="imagegallery">
        <li><a href="images/fireworks.jpg" title="A fireworks display" onclick="showPic(this);return false;">
            Fireworks</a></li>
        <li><a href="images/coffee.jpg" title="A cup of black coffee" onclick="showPic(this);return false;">
            Coffee</a> </li>
        <li><a href="images/rose.jpg" title="A red, red rose" onclick="showPic(this);return false;">
            Rose</a> </li>
        <li><a href="images/bigben.jpg" title="The famous clock" onclick="showPic(this);return false;">
            Big Ben</a> </li>
    </ul>

    <script type="text/javascript">
        var placeholder = document.createElement("img"); //创建img元素结点
        placeholder.setAttribute("id", "placeholder");
        placeholder.setAttribute("src", "images/placeholder.gif");
        placeholder.setAttribute("alt", "my image gallery");
        var description = document.createElement("p"); //创建p元素结点
        description.setAttribute("id", "description");
        var desctext = document.createTextNode("Choose an image."); //创建p的文本结点
        description.appendChild(desctext);

        document.getElementsByTagName("body")[0].appendChild(placeholder);
        document.getElementsByTagName("body")[0].appendChild(description);
    </script>

    <input type="button" value="ChangeByScripting" onclick="changeLayout();" />

</body>

 

下载：JavaScript DOM 编程艺术英文原版附源代码


 

 

七、BOM

 

 

八、XML

XML系列教程：http://www.w3school.com.cn/x.asp



 

 

九、综合


1、innerHTML的用法

要点：getElementById();  innerHTML

<body>

    <script type="text/javascript">
        function f() {
            var ct = document.getElementById("container");
            var str = [];
            str.push("<h1>Content1</h1>");
            str.push("<h2>Content2</h2>");
            str.push("<h3>Content3</h3>");
            ct.innerHTML = str.join('');  //javascript中的字符串拼接方法
            
            document.getElementById("bottomdiv").innerHTML = "Bottom";
        }
    </script>
    
    <div id="container"></div>
    <div id="bottomdiv"></div>
    
    <input type="button" onclick="return f();" value="innerHTMLtest" />
    
</body>

  

2、Javascript修改CSS

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!--样式-->
<style type="text/css">
.topNav { list-style-type:none; background-color: Gray; margin:0px;}
.topNav li { float:left; color:Red; margin-right:4px;}
div { border:4px solid #666; height:19px; padding:0px;}
.divs{ border:1px; font-size:large; float:left;} 
</style>
<!--脚本-->
<script type="text/javascript">
    function changeStyle() {
        //getElementById
        document.getElementById("topNav").className = "topNav";
        //getElementByTagName
        var liArray = document.getElementsByTagName("li");
        for (var i = 0; i < liArray.length; i++) {
            liArray[i].style.backgroundColor = "black";
        }
        //getElementByTagName
        var objs = document.getElementsByTagName("div");
        for (var j = 1; j < objs.length; j++) {
            objs[j].className = "divs";
        }
    }
</script>
</head>
<body>
<!--页面布局-->
<div>
    <ul id="topNav">
        <li>Home</li>
        <li>Products</li>
        <li>Services</li>
    </ul>
</div>
<div id="div1">div1's content</div>
<div id="div2">div2's content</div>
<div id="div3">div3's content</div>
<input type="button" value="ChangeStyle" onclick="changeStyle();"/>
</body>
</html>

 

图示：


  

JavaScript CSS Style属性对照表：http://www.cnblogs.com/enone/archive/2010/12/29/1920469.html 

 

 

 

W3C：http://www.w3.org/

 

posted on 2012-06-26 15:04  jcsu  阅读(782)  评论(0)    收藏  举报