javascript(3)

于 2015-11-24 17:16:38 发布
阅读量769 收藏 1
点赞数
分类专栏： javaScript 文章标签： javascript 
一、JavaScript的内置对象

1.String

创建String对象

直接量方式
var object = '值';
var object = "值";

构造函数方式
var object  = new String("value");

属性
length
描述:获取字符串的长度
语法:int object.length


方法
toLowerCase()
描述:转换成小写字母
语法:string object.toLowerCase()

toUpperCase()
描述:转换成大写字母
语法:string object.toUpperCase()

substr() [补P17[2]]
描述:截取字符串
语法:string object.substr(int start[,int length])
说明:
A.字符从0开始编号
B.起始位置为负数,则倒数

substring()
描述:截取字符串
语法:string object.substring(start[,end])
说明:包含起始位置,但不包含结束位置。

indexOf()
描述:返回一个字符串在另一个字符串第一次出现的位置
语法:int object.indexOf(string str[,int start])
说明:如果没有出现则返回-1

lastIndexOf()
描述:返回一个字符串在另一个字符串最后一次出现的位置
语法:int object.lastIndexOf(string str[,int start])
说明:如果没有出现则返回-1

charAt(int pos) 等价于 substr(int pos,1)

replace()
描述:字符替换
语法:string object.replace(object regExp,string replacement)

split
描述:将字符串拆分成数组
语法:array object.split(string separator)

2.Math

属性
Math.PI
Math.SQRT2

方法
Math.ceil()
描述:向上取整
语法:int Math.ceil(float val)
Math.floor()
描述:向下取整
语法:int Math.floor(float val)

Math.pow()
描述:幂运算
语法:float Math.pow(float base ,float exp)

Math.sqrt()
描述:平方
语法:float Math.sqrt(float val)

Math.min()
描述:返回最小值
语法:float Math.min(float val,float val,....)
Math.max()
描述:返回最大值
语法:float Math.max(float val,float val,....)

Math.round()
描述:四舍五入
语法:float Math.round(float val)
说明:保留到整数位。

Math.random()
描述:产生随机数
语法:float Math.random()

3.Array

创建数组

 直接量方式
 var object = [值,....]
 构建函数方式
 var object  = new Array(值,...)
 属性
 length
 描述:返回数组成员的数量
 语法:int object.length

  访问数组成员 
  数组名称[下标]  
  说明:数组的下标从0开始。  

   for...in语句
   作用:遍历数组/对象
   语法:
   for(变量名称 in 数组/对象){
        ...  
    }

    方法

    join()
    描述:将数组成员连接成字符串 
    语法:string object.join([string separator])

    push()

    描述:在数组的未尾添加一个或多个成员
    语法:int object.push(val,...)

    unshift()
    描述:在数组的开头添加一个或多个成员
    语法:int object.unshift(val,...)

    pop()
    描述:删除数组的最后一个成员，并且返回该成员
    语法:val object.pop()
    shift()
    描述:删除数组的第一个成员，并且返回该成员
    语法:val object.shift()

    slice()
    描述:截取数组
    语法:array object.slice(start[,end])

    reverse()  
    描述:数组反转
    语法:array object.reverse()

4.Date

创建Date对象

var object = new Date()

方法
getYear()
描述:获取年份
语法:int object.getYear()

getFullYear()
描述:获取年份
语法:int object.getFullYear()

getMonth()
描述:获取月份(取值范围为0~11)
语法:int object.getMonth()
getDate()
描述:获取日期(多少号)
语法:int object.getDate()
getDay()
描述:获取星期的第几天(0为星期日,依次类推)
语法:int object.getDay()

getHours()
描述:获取小时
语法:int object.getHours()
getMinutes()
描述:获取分钟
语法:int object.getMinutes()
getSeconds()
描述:获取秒
语法:int object.getSeconds()

getTime()
描述:获取毫秒
语法:int object.getTime()

二、自定义函数

1.什么是自定义函数

完成某种功能的代码段。

2.创建自定义函数

function 函数名称([参数[,...]]){
    ...
    ...
    [return 返回值]
}

3.调用自定义函数

[var 变量名称=] 函数名称([值[,...]])

4.变量作用域

4.1 JS编译和执行过程

A.编译,只负责变量的声明和函数的定义。
   而且所有变量的初始值为undefined.

B.执行,自上而下,

4.2 变量作用域

全局变量

局部变量

5.arguments对象

arguments对象指由函数的参数所组成的对象。

length属性

6.匿名函数

没有名称的函数称为匿名函数。

7.全局函数
parseInt()
parseFloat()
isNaN()

encodeURI
描述:对于URL地址中的信息进行编码
语法:string encodeURI(string str)

decodeURI
描述:对于URL地址中的信息进行解码
语法:string decodeURI(string str)

其中空格将转换成%20

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
      <title>XHTML</title>
      <script type="text/javascript">
      //直接量方式
      var str1 = 'JavaScript';
      //构造函数方式
      var str2 = new String('JSD1407');
      document.write('str1的长度是' + str1.length + '<br/><br/>');
      document.write('str2的长度是' + str2.length + '<br/><br/>');
      document.write('字符串aa的长度是' +  'aa'.length + '<br/><br/>')
      document.write('str1转换成小写的结果是:' + str1.toLowerCase() + '<br/><br/>');
      document.write('str1转换成大写的结果是:' + str1.toUpperCase() + '<br/><br/>');
      //JavaScript
      document.write(str1.substr(1,2) + '<br/><br/>');
      document.write(str1.substr(1) + '<br/><br/>');
      document.write(str1.substr(-3) + '<br/><br/>');/*IE不支持负数*/
      document.write(str1.substr(-3,2) + '<br/><br/>');/*IE不支持负数*/
      document.write(str1.substring(0,5) + '<br/><br/>');
      document.write(str1.indexOf('a') + '<br/><br/>');
      document.write(str1.indexOf('a',2) + '<br/><br/>');
      document.write(str1.indexOf('w') + '<br/><br/>');
      document.write(str1.charAt(2) + '<br/><br/>');
      document.write(str1.charCodeAt(1) + '<br/><br/>')

      </script>
   </head>
   <body>

   </body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
      <title>JavaScript</title>
      <script type="text/javascript">
      //字符替换
      var str1 = 'JavaScript';
      var str2 = str1.replace('a','w');
      var str3 = str1.replace(/a/,'w');
      var str4 = str1.replace(/a/g,'w');
      document.write(str2 + '<br/><br/>');
      document.write(str3 + '<br/><br/>');
      document.write(str4 + '<br/><br/>');
      //反向引用
      //1.匹配到的部分使用小括号括起来
      //2.在替换时使用$1,$2...来表示匹配的结果
      var str5 = 'd0k328373k4s7z9d5j38s3f9ff';
      var str6 = str5.replace(/(\d)/g,'<font color="blue">$1</font>');
      document.write(str5 + '<br/><br/>');
      document.write(str6 + '<br/><br/>');
      //课外作业
      var str7 = '07/24/2014';
      //2014-07-24


      </script>
   </head>
   <body>

   </body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
      <title>JavaScript</title>
      <script type="text/javascript">
      var str = '   a   b    ';
      //字符替换
      function ltrim(str){
        return str.replace(/^\s+/g,'');
      }                        
      function rtrim(str){
        return str.replace(/\s+$/g,'');
      }      
      function trim(str){
        return str.replace(/^\s+|\s+$/g,'');
      }
      function gtrim(str){
        return str.replace(/\s+/g,'');
      }
      document.write(str + '<br/>');
      document.write('1' + ltrim(str) + '2<br/>');
      document.write('1' + rtrim(str) + '2<br/>');
      document.write('1' + trim(str) + '2<br/>');
      document.write('1' + gtrim(str) + '2<br/>');
      </script>
   </head>
   <body>

   </body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
      <title>Math</title>
      <script type="text/javascript">
        document.write(Math.PI + '<br/><br/>');
        document.write(Math.SQRT2 + '<br/><br/>');
        document.write(Math.ceil(3.001) + '<br/><br/>');
        document.write(Math.floor(3.999) + '<br/><br/>');
        document.write(Math.pow(2,3) + '<br/><br/>');
        document.write(Math.sqrt(4) + '<br/><br/>');
        document.write(Math.max(8,56,77,9) + '<br/><br/>');
        document.write(Math.min(8,56,77,9) + '<br/><br/>');
        document.write(Math.round(3.42) + '<br/><br/>');
        document.write(Math.round(3.52) + '<br/><br/>');
        document.write(Math.random());
      </script>
   </head>
   <body>

   </body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
      <title>Array</title>
      <script type="text/javascript">
        //直接量方式
        var arr1 = ['Tom',23,3.6,true];
        //构造函数方式
        //数组arr2包含三个成员,其值均为undefined   
        var arr2 = new Array(3);
        //数组arr3包含两个成员,其值分别为2和4
        var arr3 = new Array(2,4);
        document.write('arr1中有' + arr1.length + '个成员<br/><br/>');
        document.write('arr2中有' + arr2.length + '个成员<br/><br/>');
        document.write('arr3中有' + arr3.length + '个成员<br/><br/>');
        document.write(arr1[2] + '<br/><br/>');
        document.write(arr2[0] + '<br/><br/>');
        document.write(arr2[1] + '<br/><br/>');
        document.write(arr2[2] + '<br/><br/>');
        document.write(arr3[0] + '<br/><br/>');
        document.write(arr3[1] + '<br/><br/>');

      </script>
   </head>
   <body>

   </body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
      <title>Array</title>
      <script type="text/javascript">
        //数组遍历       
        var arr1 = ['Tom',23,3.6,true];
        for(var i=0;i<arr1.length;i++){
           document.write(arr1[i] + '<br/><br/>');
        }
        /////////////////////////////////
        var arr2 = new Array();
        arr2[0] = '中国';
        arr2[1] = '人民';
        arr2[7] = '共和';
        arr2[9] = '国';
        for(i in arr2){
           document.write(arr2[i]);
        }
        document.write('<br/><br/>');
        /////////////////////////////
        //关联数组,下标为字符
        var arr3 = new Array();
        arr3['username'] = '张三';
        arr3['sex'] = '男';
        arr3['age'] = 25;
        arr3['salary'] = 8963.46;
        for(key in arr3){
           document.write(arr3[key] + '<br/>');
        }
        /////////////////////////////
        var arr4 = new Array();
        arr4[0] = new Array();
        arr4[0]["name"] = "JSD1407";
        document.write(arr4[0]['name']);
        ////////////////////////////////

        var rowset = new Array();
        rowset[0] = new Array();

        rowset[0]['id']=1;
        rowset[0]['username']='Tom';
        rowset[0]['age']=26;

        rowset[1] = new Array();
        rowset[1]['id']=3;
        rowset[1]['username']='John';
        rowset[1]['age']=19;   

        rowset[2] = new Array();
        rowset[2]['id']=8;
        rowset[2]['username']='Rose';
        rowset[2]['age']=31;        

        for(var i=0;i<rowset.length;i++){
          var person = rowset[i];
          document.write('<p>');
          document.write('编号' + person['id']);
          document.write('姓名' + person['username']);
          document.write('年龄' + person['age']);
          document.write('</p>');
        }








      </script>
   </head>
   <body>

   </body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
      <title>Array</title>
      <script type="text/javascript">

        var arr1 = ['Tom',23,3.6,true];
        var str1 = arr1.join();
        document.write(str1 + '<br/><br/>');
        var str2 = arr1.join('|');
        document.write(str2 + '<br/><br/>');
        var str3 = '1~2~3~4';
        var arr2 = str3.split('~');
        for(key in arr2){
           document.write(arr2[key] + '<br/><br/>');
        }
        ///////////////////////////////

        var arr3 = ['C','D','E'];       
        document.write('数组arr3有' + arr3.length + '个成员,它们是:' + arr3 + '<br/><br/>');
        var count = arr3.push('F','G');
        document.write('数组arr3现有' + count + '个成员，它们是:' + arr3 + '<br/><br/>');
        var count = arr3.unshift('A','B');
        document.write('数组arr3现有' + count + '个成员，它们是:' + arr3 + '<br/><br/>');
        /////////////////////////////////
        var first = arr3.shift();
        document.write('数组3现有' + arr3.length + '个成员,它们是:' + arr3 + ',成员' + first + '被删除<br/><br/>');
        var last = arr3.pop();      
        document.write('数组3现有' + arr3.length + '个成员,它们是:' + arr3 + ',成员' + last + '被删除<br/><br/>');
        /////////////////////////////////
        var arr4 = arr3.slice(1,4);
        document.write('截取后的结果是:' + arr4 + '<br/><br/>');
        var arr5 = arr4.reverse();
        document.write('反转后的结果是:' +  arr5);
      </script>
   </head>
   <body>

   </body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
      <title>Array</title>
      <script type="text/javascript">
         var now = new Date();
         var year = now.getYear();
         //IE将返回2014,而Chrome等将返回114         
         document.write(year + '年<br/><br/>');
         var fullYear = now.getFullYear();
         var month = now.getMonth() + 1;
         var day  = now.getDate();
         var weeksArr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
         var week = now.getDay();         
         var hours = now.getHours();
         var minutes = now.getMinutes();
         var seconds = now.getSeconds();
         document.write(fullYear + '年<br/><br/>');
         document.write(month + '月<br/><br/>');
         document.write(day + '日<br/><br/>');
         document.write(weeksArr[week] + '<br/><br/>');
         document.write(hours + '点<br/><br/>');
         document.write(minutes + '分<br/><br/>');
         document.write(seconds + '秒<br/><br/>');
         /
         var timer = now.getTime();
         document.write(timer);




      </script>
   </head>
   <body>

   </body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
      <title>Array</title>
      <script type="text/javascript">
        var i = 1;
        function fun(){          
          window.alert(i);
          i = 2;                
        }
        window.alert(i);
        fun();
        window.alert(i);
        /*结果1，1，2*/
      </script>
   </head>
   <body>

   </body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
      <title>Array</title>
      <script type="text/javascript">
        var i = 1;
        function fun(i){          
          window.alert(i);
          i = 2;                         
        }
        window.alert(i);
        fun();
        window.alert(i);
        /*1,undefined,1*/
      </script>
   </head>
   <body>

   </body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
      <title>Array</title>
      <script type="text/javascript">
      //计算平均值
      function avg(){
         var args = arguments;/*arguments对象指由函数的参数所组成的对象。*/
         if(args.length < 2){
            return false;
         } else {
            var sum = 0;
            for(var n = 0;n<args.length;n++){
               sum += args[n];
            }
            return (sum / args.length);
        }
      }
      window.alert(avg()); //false 
      window.alert(avg(3)); // false
      window.alert(avg(3,5)); // 4
      window.alert(avg(2,4,6)); //4
      window.alert(avg(1,5,3,9)); //4.5
      </script>
   </head>
   <body>

   </body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
      <title>Array</title>
      <script type="text/javascript">
      var n  = function(){
         return 3 + 4;
      }
      document.write(n());


      </script>
   </head>
   <body>

   </body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
      <title>Array</title>
      <script type="text/javascript">
      //立即执行的匿名函数

      (function(a,b){
        var sum = a + b;
        document.write(sum);
      })(3,66);



      </script>
   </head>
   <body>

   </body>
</html>
DOM (document object model)

DOM提供处理XML、HTML文档的API
DOM的主要操作：节点的获取、节点的动态创建、
创建的删除及节点的替换

节点（Node），在DOM树所存在的任何一个元素
（如HTML元素，文本、属性等）

节点的类型：
Node.ELEMENT_NODE,1(元素类型)
Node.ATTRIBUTE_NODE,2(属性类型)
Node.TEXT_NODE,3(文本类型)
Node.COMMENT_NODE,8(注释类型)
Node.DOCUMENT_NODE,9(文档类型)



2.document对象： 加载到内存中浏览器中的对象
方法：
 getElementById

 document属于HTMLDocument类型的对象
 而document又实现了NOde接口，所有Node接口的
 所有方法都被docum所实现。

 getElementById返回Element对象
   element对象才有setAttribute等方法


p,h1,h2,h3...h6==>align
ul,ol ==>type
img ==>src alt title width...

//2属性
object.setAttribute()
object.getAttribute()
object.removeAttribute()

//文本的值
object.firstChild.nodeValue
//3Node接口
 属性:
   firstChild
   lastChild
   nextSibling 
   previousSibling
    nodeName
    nodeType
    nodeValue
    ...

方法:
 appendChild()
追加子节点
  语法:object.appendChild(node);

insertBefore():插入子节点
语法：object.insertBefore(newNode[,refNode])


   createElement():创建一个新节点
   语法：Element document.createElement(string name);

   createTextNode:创建文本节点
   语法：textNode document.createTextNode(string value)

    createComment:创建注释节点
语法：commentNode document.createComment(string value)

   createAttribute:创建属性节点
    语法:attrNode document.createAttribute(string name)


removeChild():删除节点
语法：object.removeChild(node)

repalceChild():节点的替换
语法：object.replaceChild(newNode,oldNode)

getElementsByTagName

   element.getElementsByTagName(string name);
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>XHTML</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <script type="text/javascript">
          function chAtt(){
              //alert(document);
              //获取对象
              var pEle = document.getElementById("p1");
              //修改属性，水平居中
              pEle.setAttribute('align','center');

          }
      </script>
      </head>

   <body>
       <p id="p1">文本样式</p>
       <input onclick="chAtt()" type="button" value="单击我，看变化">
   </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>XHTML</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <script type="text/javascript">
          function chAtt(){
              //获取对象
              var pEle = document.getElementById("p1");
              //获得属性，
              var alignVal = pEle.getAttribute('align');
              //window.alert(alignVal); //null

              //设置属性
              if(alignVal == 'center'){
                  pEle.setAttribute('align','left');
              }else{
                  pEle.setAttribute('align','center');
              }


          }
      </script>
      </head>

   <body>
       <p id="p1">文本样式</p>
       <input onclick="chAtt()" type="button" value="单击我，看变化">
   </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>XHTML</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <script type="text/javascript">

        function chImg(){
            //获得对象
            var imgEle = document.getElementById("image1");
            //window.alert(imgEle);
            //设置属性
            imgEle.setAttribute('src','images/8.jpg');
            imgEle.setAttribute('width','110');
            imgEle.setAttribute('height','110');
            imgEle.setAttribute('alt','学校8');
            imgEle.setAttribute('title','学校8');
            imgEle.setAttribute('border','3');
        }
      </script>
      </head>

   <body>
       <p><img id="image1" src="images/3.jpg" alt=""/></p>
       <input onclick="chImg()" type="button" value="单击我，看变化">
   </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>XHTML</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <script type="text/javascript">
        var i=0;
        function chImg(){
            //获得对象
            var imgEle = document.getElementById("image1");
            //window.alert(imgEle);
            //设置属性
            if(i==0){
                imgEle.setAttribute('src','images/b.png');
              i=1;
            }else if(i==1){
                imgEle.setAttribute('src','images/c.png');
              i=2;
            }else if(i==2){
                imgEle.setAttribute('src','images/d.png');
              i=0;
            }

        }
      </script>
      </head>

   <body>
       <p><img id="image1" src="images/a.jpg" alt=""/></p>
       <input onclick="chImg()" type="button" value="单击我，看变化">
   </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>XHTML</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <script type="text/javascript">
        function chgText(){
            //1.获取对象
            var pEle = document.getElementById("p1");
            //2.获取文本节点
            //‘123’实际上是文本节点(text)的内容（文本节点text被隐藏了）
            var txtNode = pEle.firstChild;
            //alert(txtNode.nodeValue);
            //DOM (document object model)里一切都是节点

            //修改文本节点的节点值
            txtNode.nodeValue='文字变了吧';
            }
      </script>
      </head>

   <body>
       <p id="p1">123</p>
       <input onclick="chgText()" type="button" value="单击我，看变化">
   </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>XHTML</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <script type="text/javascript">
        function chg(){
            //获取对象
            var linkEle = document.getElementById("link1");
            //设置属性
            linkEle.setAttribute('href','http://www.tmooc.cn/');
            linkEle.setAttribute('target','_blank');

            //修改文本节点的节点值
            linkEle.firstChild.nodeValue='tts网址';
        }
      </script>
      </head>

   <body>
       <p><a id="link1" href="#">这是一个空链接</a></p>
       <input onclick="chgLink()" type="button" value="单击我，看变化">
   </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>XHTML</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <script type="text/javascript">
        function removeAttr(){
            //获取对象
            var pEle = document.getElementById("p1");
            //设置属性
            pEle.removeAttribute('align');
        }
      </script>
      </head>

   <body>
       <p id="p1" align="center">12345</p>
       <input onclick="removeAttr()" type="button" value="单击我，看变化">
   </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>XHTML</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <script type="text/javascript">
        function createImage(){
            //1.创建图像对象
            var imgEle = document.createElement('img');
            //2.设置属性
            imgEle.setAttribute('src','images/e.gif');
            //3.将当前的图像对象添加到文档树
            document.body.appendChild(imgEle);

            /**
               createElement():创建一个新节点
                                                 语法：Element document.createElement(String name);
            */
        }
      </script>
      </head>

   <body>

       <input onclick="createImage()" type="button" value="单击我，看变化">
   </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>XHTML</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <style type="text/css">
      .a1{
        width:400px;
        height:150px;
        border:1px solid #f00;
      }
      </style>
      <script type="text/javascript">
        function createPara(){
            //1.创建段落对象
            var PEle = document.createElement('p');
            //2.创建文本节点
            var txtNode =  document.createTextNode('呵呵，你好');
            //3.将文本节点添加到段落节点内
            PEle.appendChild(txtNode);
            //4将段落节点添加到div对象上
            document.getElementById('div1').appendChild(PEle);

        }
      </script>
      </head>

   <body>

       <input onclick="createPara()" type="button" value="单击我，看变化">
       <div id="div1" class="a1">

       </div>
   </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>XHTML</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">

      <script type="text/javascript">
        function createDescription(){
            //1.创建注释节点（很少用）
            var cmtEle = document.createComment("这是注释(bug模式能看到)");
            //2.添加到文档树
            document.body.appendChild(cmtEle);
        }
      </script>
      </head>

   <body>

       <input onclick="createDescription()" type="button" value="单击我，看变化">

   </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>XHTML</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <style type="text/css">
          #div1{
            width:200px;
            height:150px;
            border:2px solid #f00;
          }
      </style>
      <script type="text/javascript">
        function createAttr(){
            //1.创建属性节点
            var dataAttr=document.createAttribute("data");

            //2.设置属性值
            dataAttr.nodeValue = '123456';

            //3.给对象添加属性
            document.getElementById("div1").setAttributeNode(dataAttr);
        }
      </script>
      </head>

   <body>
        <div id="div1"></div>
       <input onclick="createAttr()" type="button" value="单击我，看变化">
   </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>XHTML</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <script type="text/javascript">
        function createImg(){
            //1.创建图像
            var imgEle = document.createElement('img');
            //2.设置属性
            imgEle.setAttribute('src','images/d.png');
            //3.获取参照节点
            var pEle = document.getElementById('p2');
            //4.插入节点
            document.body.insertBefore(imgEle,pEle);
        }
      </script>
      </head>

   <body>
        <p>我是第1段</p>
        <p id="p2">我是第2段</p>
       <input onclick="createImg()" type="button" value="单击我，看变化">
   </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>XHTML</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <script type="text/javascript">
        function removeElement(){
            //1.获取节点
            var pEle = document.getElementById("p2");

            //2.删除节点
            document.body.removeChild(pEle);
        }
      </script>
      </head>

   <body>
        <p>我是第1段</p>
        <p id="p2">我是第2段</p>
       <input onclick="removeElement()" type="button" value="单击我，看变化">
   </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>XHTML</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <script type="text/javascript">
        function removeElement(){
            //1.获取节点
            var divEle = document.getElementById("div1");

            //2.获取子节点的集合
            //var childEles = divEle.childNodes;

            //  3.删除子节点
            for(var i=0;i<divEle.childNodes.length;i++){
                divEle.removeChild(divEle.childNodes[i]);

                //divEle.childNodes.length动态减少，所以i--;
                //（for循环也可以倒着从后往前删除）
                i--;
            }
            //3.获取子节点集合的数量(谷歌跟ie不一样，
            //谷歌跟火狐认为2个节点之间多了个空的文本节点)
            //var counts = childEles.length;
            //var str = "";
            //for(var i=0;i<counts;i++){
             //   var childEle = childEles[i];
              //  str+=childEle.nodeName+"\n";

            //}
            //alert(str);
        }
      </script>
      <style type="text/css">
         #div1{
           border:2px solid #f00;
         }
      </style>
      </head>

   <body>
     <div id="div1">
        <h1>标题1--0</h1>
        <p>第1段--1</p>
        <p>第2段--2</p>
        <h1>标题1--3</h1>
        <p>第3段--4</p>
     </div>
       <input onclick="removeElement()" type="button" value="单击我，看变化">
   </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>XHTML</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <script type="text/javascript">
        function removeElement(){
            //1.获取对象
            var rowEle = document.getElementById('r2');
            //var tabEle = document.getElementById('t1');

            //2.删除行对象,tr的父亲实际上是tbody（有时还有thead）
            //tabEle.removeChild(rowEle);
            //parentNode：父节点
            rowEle.parentNode.removeChild(rowEle);
        }
      </script>
      </head>

   <body>
     <table id="t1" width="500" cellpadding="10" cellspacing="0" border="1">
     <tr>
        <td>1</td>
     </tr>
     <tr id="r2">
        <td>2</td>
     </tr>
     <tr>
        <td>3</td>
     </tr>  
     </table>
       <input onclick="removeElement()" type="button" value="单击我，看变化">
   </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>XHTML</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <script type="text/javascript">
        function replaceElement(){
           //替换，（较少用）
           //1.获取被替换对象
            var pEle = document.getElementById("p1");
            //2.创建图像对象（替换对象）
            var imgEle = document.createElement("img");
            imgEle.setAttribute('src','images/e.gif');

            //将子节点装载进来：
            document.body.appendChild(imgEle);
            //3.将段落替换为图像
            document.body.replaceChild(imgEle,pEle);
        }
      </script>
      </head>

   <body>
       <p id="p1">段落文本</p>
       <input onclick="replaceElement()" type="button" value="单击我，看变化">
   </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>XHTML</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <script type="text/javascript">
        function getParaCounts(){
            //获取整个文档中的段落总数
            //var pEles = document.getElementsByTagName("p");
            //var counts = pEles.length;

            //获取div中的段落总数
            var divEle = document.getElementById('a3');
            var pEles = divEle.getElementsByTagName("p");
            var counts = pEles.length;
            alert(counts);
        }
      </script>
      </head>

   <body>
       <p id="a1">段落文本1</p>
       <p class="a2">段落文本2</p>
       <div id="a3" style="border:2px solid #f00">
          <h1>标题</h1>
          <p align="left">段落文本1</p>
          <p>段落文本2</p>
          <p>段落文本2</p>
          <h2>标题2</h2>

       </div>
       <input onclick="getParaCounts()" type="button" value="单击我，看变化">
   </body>
</html>

  W3CDOM：可处理HTML和XML
1.HTMLDOM：只能处理HTML文档的API

2.W3CDOM与HTMLDOM的区别：
   W3CDOM可处理HTML和XML文档
   HTMLDOM仅能处理HTML文档

 document是HTMLDocument类型的对象
3.获取对象
HTMLElement document.getElementById(string id)

4.访问HTML对象的属性
object.属性名 = 值
[var 变量名 =] object.属性名

说明：
A。HTML标记的属性即HTMLDOM节点的属性
B。如果HTML标记的属性为合成词，在HTMLDOM中应采用“驼峰标记法”命名。
C。HTML标记的class属性，在HTMLDOM中应使用className取代（因为class是ECMAScript予保留的关键字）

D。HTML标记的style属性，在HTMLDOM中将返回
CSSStyleDecleration(或CSS2Properties)对象

5.CSSStyleDeclaration对象
访问CSS样式
  CSSStyleDeclaration.属性名 = 值
或
  [var 变量名 =] CSSStyleDeclaration属性名
  说明：
A。如果CSS样式为单个单词，则CSSStyleDeclaration对象中直接引用赋值。
B。如果CSS样式带有短横线，则CSSStyleDeclaration对象中去掉短横线，
   然后再使用驼峰标记法。 （例如：font-size  ==> fontSize）
C。css样式中的float属性在CSSStyleDeclaration对象中，
  如果浏览器为chrome,Firefox等，则是使用cssFloat取代；
  如果浏览器为ie，则使用styleFloat取代


HTMLDOM与W3CDOM处理属性时，在处理HTML文档时，建议使用HTMLDOM方法实现
   但是在删除使用时，只能使用W3CDOM，因为HTMLDOM无法删除属性

6.访问HTML对象的文本
 object.innerText
 object.innerHTML

              innerText:所有文本都认为是纯文本，HTML标记不会被解析
              innerHTML ：HTML标记可以被解析
7.添加节点
A。全部HTML节点的创建都可以通过W3CDOM实现。
B。有几个特殊的HTMLDOM节点，它们拥有自己的创建、删除方法

7.1图像
  通过构造函数方式
 [var 变量名 = ] new Image(width,height)
7.2 
 1)列表框
  add（）方法：添加option对象
  语法：object.add(optionElement)

  remove()方法：删除option对象
  语法：object.remove(index)

  options属性
  返回列表框中所有列表项的集合
  语法：object.options

  value
  返回列表框中被选定选项的值
  语法：string object.value


 2)列表选项
  创建列表选项对象（option对象）--构造函数方式：
  [var 变量名 = ] new Option(text[value,[,defaultSelected[,selected]]])

text:列表项显示的文本
value：列表项的提交值，如果省略value，则提交值与显示文本相同。
defaultSelected，指是否为默认选项（boolean）
selected，值是否被选定（boolean）

  body-->onload(页面加载完后执行xxx)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>XHTML</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <script type="text/javascript">
        function changeAttr(){
            //1.获取对象
            //getElementById方法属于HTMLDocument对象
            //而HTMLDocument是HTMLDOM的顶级对象
            var pEle = document.getElementById('p1');
            //alert(document);
            //2.设置属性
            //A.W3CDOM
            //pEle.setAttribute('align','center');

            //B.HTML DOM
            pEle.align = 'center';
        }
      </script>
      </head>

   <body>
       <p id="p1">段落文本</p>

       <input onclick="changeAttr()" type="button" value="单击我，看变化">
   </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>XHTML</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <script type="text/javascript">
        function changeAttr(){
            //1.取得对象
            var imgEle = document.getElementById('img1');
            //2.设置属性（HTML DOM）
            imgEle.src = 'images/8.jpg';
            imgEle.width = '110';
            imgEle.height = '110';
            imgEle.border = '5';
            imgEle.alt = '呵呵';
            imgEle.title = '呵呵';
        }
      </script>
      </head>

   <body>
       <img src="images/3.jpg" id="img1"/>

       <input onclick="changeAttr()" type="button" value="单击我，看变化">
   </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>XHTML</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <script type="text/javascript">
        function changeAttr(){
            //1.取得对象
            var tableEle = document.getElementById('t1');
            //2.设置属性（HTML DOM）
            tableEle.width = '600';
            //如果HTML标记的属性为合成词，在HTMLDOM中应采用“驼峰标记法”命名(第二个单词首字母大写)。
            tableEle.borderColor = 'red';//仅仅ie支持变色，建议使用css样式
            tableEle.cellPadding = '20';
            tableEle.cellSpacing = '0';

        }
      </script>
      </head>

   <body>
       <table id="t1"  border="1">
         <tr>
            <td>A</td>
            <td>A</td>
            <td>A</td>
         </tr>
         <tr>
            <td>A</td>
            <td>A</td>
            <td>A</td>
         </tr>
         <tr>
            <td>A</td>
            <td>A</td>
            <td>A</td>
         </tr>

       </table>

       <input onclick="changeAttr()" type="button" value="单击我，看变化">
   </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>XHTML</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <style type="text/css">
        .a1{
           color:red;
           font-size:40px;
           font-family:微软雅黑；
        }
      </style>
      <script type="text/javascript">
        function changeAttr(){
            //1.取得对象
            var pEle = document.getElementById('p1');
            /*2.设置属性,HTML DOM
            HTML标记的class属性，
                                     在HTMLDOM中应使用className取代
                                 （因为class是ECMAScript予保留的关键字）*/
            pEle.className = 'a1';

            //2 W3C DOM
            //pEle.setAttribute('class','a1');

        }
      </script>
      </head>

   <body>
       <p id="p1">段落文本</p>

       <input onclick="changeAttr()" type="button" value="单击我，看变化">
   </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>XHTML</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">

      <script type="text/javascript">
        function changeAttr(){
            //1.取得对象
            var pEle = document.getElementById('p1');
            //2.设置属性
            //返回CSSStyleDeclaration对象
             var CSSStyleObject = pEle.style;
            //设置CSS样式

            //如果CSS样式为单个单词，则CSSStyleDeclaration对象中直接引用赋值。
            CSSStyleObject.color = 'red';
            CSSStyleObject.border = '2px solid #F00';
            /*如果CSS样式带有短横线，则CSSStyleDeclaration对象中去掉短横线，
                                  然后再使用驼峰标记法。font-size  ==> fontSize*/
            CSSStyleObject.fontSize = '50px';
            CSSStyleObject.borderBottomColor = 'blue';

        }
      </script>
      </head>

   <body>
       <p id="p1">段落文本</p>

       <input onclick="changeAttr()" type="button" value="单击我，看变化">
   </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>XHTML</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     <style type="text/css">
         #s1{
            width:200px;
            height:100px;
            background:#0f0;
         }
         #s2{
            width:300px;
            height:100px;
            background:#00f;
         }
      </style>
      <script type="text/javascript">
        function changeAttr(){
            //1.获取对象
            var sEle1 = document.getElementById('s1');
            var sEle2 = document.getElementById('s2');
            //2.设置CSS样式
            //window.ActiveXObject,仅仅IE浏览器支持
            if(window.ActiveXObject){
                sEle1.style.styleFloat = 'left';
                sEle2.style.styleFloat = 'left';
            }else{
                sEle1.style.cssFloat = 'left';
                sEle2.style.cssFloat = 'left';

            }

            /*css样式中的float属性在CSSStyleDeclaration对象中，
                                     如果浏览器为Chrome,Firefox等，则是使用cssFloat取代；
                                     如果浏览器为ie，则使用styleFloat取代*/

        }
      </script>

      </head>

   <body>
       <div style="border:2px solid #f00">
          <div id="s1"></div>
          <div id="s2"></div>

       </div>

       <input onclick="changeAttr()" type="button" value="单击我，看变化">
   </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>XHTML</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">

      <script type="text/javascript">
        function changeText(){
            //1.获取对象
            var pEle = document.getElementById('p1');
            //2.设置内容（HTML DOM）
            //pEle.innerText = '<i>7890</i>';
            pEle.innerHTML = '<i>7890</i>';

            /*
              innerText:所有文本都认为是纯文本，HTML不会被解析
              innerHTML ：HTML可以被解析（innerHTML较常用）
              W3C标准里没有innerText和innerHTML，但是浏览器都支持
            */

        }
      </script>

      </head>

   <body>
       <p id="p1">123456</p>

       <input onclick="changeText()" type="button" value="单击我，看变化">
   </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>XHTML</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <style type="text/css">
            #box1{
                border:2px solid #f00;
            }
      </style>
      <script type="text/javascript">
        function addChild(){
            //1。创建对象
            var pEle = document.createElement('p');
            var hEle = document.createElement('h1');
           //2.设置对象属性(HTMLDOM实现)
           pEle.align = 'center';
           hEle.align = 'right';
           //3.设置对象内容(HTMLDOM实现)
           pEle.innerHTML = '段落文本';
           hEle.innerHTML = '标题文本';
           //4.将对象追加到父对象中
           var boxEle = document.getElementById('box1');
           boxEle.appendChild(pEle);
           boxEle.appendChild(hEle);
        }
      </script>

      </head>

   <body>
       <div id="box1">

       </div>

       <input onclick="addChild()" type="button" value="单击我，看变化">
   </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>XHTML</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <script type="text/javascript">
        function addChild(){
            //1。创建对象
            //var pEle = document.createElement('img');
            //构造函数方式：
            var imgEle = new Image(220,220);
           //2.设置对象属性
           //imgEle.src = 'images/8.jpg';
           imgEle.setAttribute('src','images/8.jpg');
           //3
           document.body.appendChild(imgEle);

        }
      </script>

      </head>

   <body>

       <input onclick="addChild()" type="button" value="单击我，看变化">
   </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>XHTML</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <script type="text/javascript">
        function addChild(){
           //1。获取对象
           var inputEle = document.getElementById('names');
           var selEle = document.getElementById('cities'); 
           //2.获取文本框的值
           var txt = inputEle.value;
           //alert(txt);
           //3创建option对象（构造函数方式）
           /**
           创建列表选项对象（option对象）--构造函数方式：
  [var 变量名 = ] new Option(text[value,[,defaultSelected[,selected]]])

text:列表项显示的文本
value：列表项的提交值，如果省略value，则提交值与显示文本相同。
defaultSelected，指是否为默认选项（boolean）
selected，值是否被选定（boolean）
           */
           var optEle = new Option(txt,'',false,true);
           //window.alert(optEle);
           //4.将option对象添加到select对象
           selEle.add(optEle);
           //5.清楚文本框的值
           inputEle.value = '';
        }
        function clearOptions(){
            //获取对象
            var selEle = document.getElementById('cities');
            //清理option对象
            /*
            for(var i=0;i<selEle.options.length;i++){
                selEle.remove(i);
                i--;
            }
            */
            //下面也可以
            selEle.options.length=0;

        }
      </script>

      </head>

   <body>
       <input type="text" id="names"/><br/>
       <select id="cities"></select><br/><br/>
       <input onclick="addChild()" type="button" value="单击我，看变化"/>
       <input onclick="clearOptions()" type="button" value="清理掉所有option"/>
   </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>XHTML</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <script type="text/javascript">
        var proArr = new Array();
        proArr[1] = ['东城区','西城区','海淀区','丰台区'];
        proArr[2]=['徐汇区','浦东新区','静安区'];
        proArr[3]=['南开区','河东区','河西区','和平区'];
        proArr[4]=['济南市','菏泽市','青岛市','烟台市'];
        function changeCity(){
           //1.获取对象
           var proEle = document.getElementById('provinces');
           var cityEle = document.getElementById('cities');
           //2.获取省份的值
           var proVal = proEle.value;

           //alert(proVal);
           //3清理城市列表框
           cityEle.options.length=0;
           //4根据省份的值动态为城市列表框添加选项（option）
           for(var i=0;i<proArr[proVal].length;i++){
             var optEle = new Option(proArr[proVal][i],'',false,true);
             cityEle.add(optEle);
           }


           /*
           if(proVal=='1'){//北京
             var optEle = new Option('东城区','1');
             cityEle.add(optEle);
             var optEle = new Option('西城区','2');
             cityEle.add(optEle);
             var optEle = new Option('海淀区','3');
             cityEle.add(optEle);

           }else if(proVal=='2'){//上海
             var optEle = new Option('浦东区','1');
             cityEle.add(optEle);
             var optEle = new Option('徐汇区','2');
             cityEle.add(optEle);
             var optEle = new Option('静安区','3');
             cityEle.add(optEle);
           }else if(proVal=='3'){//天津
             var optEle = new Option('河东区','1');
             cityEle.add(optEle);
             var optEle = new Option('河西区','2');
             cityEle.add(optEle);
             var optEle = new Option('和平区','3');
             cityEle.add(optEle);
             var optEle = new Option('南开区','4');
             cityEle.add(optEle);
           }else if(proVal=='4'){//山东省
             var optEle = new Option('济南市','1');
             cityEle.add(optEle);
             var optEle = new Option('青岛市','2');
             cityEle.add(optEle);
             var optEle = new Option('烟台市','3');
             cityEle.add(optEle);
           }
           */
        }
      </script>

      </head>
  <!-- bodyonload(页面加载完后执行xxx)
        初始化北京下面的 列表
     -->

   <body onload="changeCity()">
       <select id="provinces" onchange="changeCity()">
         省份：<option value="1">北京市</option>
         <option value="2">上海市</option>
         <option value="3">天津市</option>
         <option value="4">山东省</option>
       </select><br/><br/>
       <select id="cities"></select><br/><br/>
          </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>XHTML</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <style>
        .wrap{
          border:2px solid #f00;
          width:400px;
          height:150px;
        }

      </style>
      <script type="text/javascript">
        function tabEffect(id){
           //1.获取对象
           var d1Ele = document.getElementById('d1');
           var d2Ele = document.getElementById('d2');
           var d3Ele = document.getElementById('d3');
           //2.控制对象的css样式
           if(id == 'd1'){
             d1Ele.style.display = 'block';
             d2Ele.style.display = 'none';
             d3Ele.style.display = 'none';
           }else if(id=='d2'){
             d1Ele.style.display = 'none';
             d2Ele.style.display = 'block';
             d3Ele.style.display = 'none';
           }else if(id=='d3'){
             d1Ele.style.display = 'none';
             d2Ele.style.display = 'none';
             d3Ele.style.display = 'block';
           }
        }
      </script>

      </head>
   <body>
     <p><a href="#" onclick="tabEffect('d1')">国内新闻</a>
     &nbsp;|&nbsp;<a href="#" onclick="tabEffect('d2')">国际新闻</a>
     &nbsp;|&nbsp;<a href="#" onclick="tabEffect('d3')">体育新闻</a></p>
     <div id="d1" class='wrap'>
        <p><a href="#">国内新闻标题1</a></p>
        <p><a href="#">国内新闻标题1</a></p>
        <p><a href="#">国内新闻标题1</a></p>
     </div>
     <div id="d2" class='wrap' style="display:none">
        <p><a href="#">国际新闻标题2</a></p>
        <p><a href="#">国际新闻标题2</a></p>
        <p><a href="#">国际新闻标题2</a></p>
     </div>
     <div id="d3" class='wrap' style="display:none">
        <p><a href="#">体育新闻标题2</a></p>
        <p><a href="#">体育新闻标题2</a></p>
        <p><a href="#">体育新闻标题2</a></p>
     </div>
     <p>段落文本</p>
   </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
     <title>XHTML</title>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   </head>
   <body>
     <input type="text" value="请输入您的用户名" onfocus="this.value=''">
   </body>
</html>
wahxsm
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值