意想不到技师_javaScript笔记,怎么着通过JavaScript函数获取Web报表单元格的值

 在润乾报表中。

1 Html内容
1.1)
Html就是超文本标志语言的简写,是最基础的网页语言
Html是因而标签来定义的语言,代码都以由标签所结合
Html代码不用区分轻重缓急写
Html代码由<html>发轫</html>甘休.里面由头有个别<head></head>和体部分<body></body>两片段构成
头片段是给Html页面扩张部分赞助可能性质消息,它里面包车型地铁内容会首先加载
体部分是的确存放页面数据的地点

转移二个3000*5的表格,每种单元格的内容是行号+逗号+列号

AJAX(Asynchronous JavaScript and
XML):基于XML的异步JavaScript,简称AJAX,是种种本领的综合.
   一种客户端技巧,为互连网用户提供越来越友善的互相分界面,尤其通畅的用户体验.也等于所谓的胖客户端,使网页的效益能够像安装在Computer上的运用软件或系统相同本人华丽.
它由如下二种技巧构成:CSS + DOM + XMLHttpRequest+ JavaScript .
       各部分机能如下:
       CSS : 调控页面包车型地铁突显 。
       DOM : 调整文书档案结构 。
       XMLHttpRequest: 担当与服务器实行异步通讯 。
       JAVAScript : 调用,调控其余三个组成都部队分。
若果去掉XMLHttpRequest则为DHTML本事.

怎么通过JavaScript函数获取Web报表单元格的值

1.2)
绝大好些个标签都以有开首和终结标签,个中某些标签因为唯有单一作用,恐怕尚未要修饰的剧情,那么能够在标签内告竣
想要对标签修饰的内容开始展览更拉长的操作,就用到了标签中的属性,通过对属性值的改观,扩充了越来越多的功力选用.
属性与属性值之间用”=”连接,属性值能够用双引号或单引号或然不用引号,一般都会用双引号,或百货店鲜明书写标准
格式:<标签名 属性名=”属性值”> 数据内容</标具名>
     <标签名 属性名=”属性值” />

格局一:使用createElement生成表格,使用insertRow和insertCell方法生成行列,单元格的剧情使用innerHTML属性进行填写。
办法二:使用createElement生成表格,使用CreateElement方法生成行列,单元格的内容使用了createTextNode方法填充。
主意三:拼接表格innerHTML属性的字符串,使用字符串 += 操作符链接字符串
措施四:拼接表格innerHTML属性的字符串,各样字符串追加数组里面,最终调用数组的join方法生成指标字符串。

==========================================================
焦点流程如下:
   1) 事件触发通讯进度
   2)
     2.1 创建XMLHttpRequest对象  createXHR()
     2.2 计划要发送到服务器的参数 .
     2.3 钦点用于拍卖回复的函数 . xhr.onreadystatechange = fn [
回调函数 ] ;
     2.4 open() , send() ;
    
   3) 编写回调函数 .
      3.1
        通讯进程截止  : xhr.readyState == 4
        服务器实践    : xhr.status == 200  
      3.2 对服务器的回复结果进行拍卖 :
          复杂的用xhr.responseXML (DOM形式)
   轻松的用xhr.responseText(重临的字符串)
          

 

1.3)操作观念:
为了操作数据,都亟待对数据实行分化标签的包装,通过标签中的属性对包裹的数据实行操作
标签就相当于贰个器皿,对容器中的数据开始展览操作,就是在随时随地的改观容器的属性值

运作时刻相比:
格局 运转时刻(ms)
方法一 93037
方法二 3341
方法三 2795
方法四 500

       

XMLHttpRequest与服务器之间数据交流的法子有get和post二种.
动用POST情势提交:
      url = “/ajax/test.jsp” ;
      XMLHttpRequest.open( “POST” , url );
      XMLHttpRequest.setRequestHeader( “Content-Type” ,
“application/x-www-form-urlencoded” );//纵然是POST,那么必须内定央浼头.

报表呈今后web页面以后,有的时候必要获得某单元格的值。

2 常用竹签的选择
2.1)字体标签<font>
事例:<font size=5 color=red>字体标签示例</font>
注:轻易颜色可以直接写对应的英文单词,复杂颜色用16进制表示,表现方式#FF0000八个数为一组,按红,绿,蓝排列,如:#00FF00表示翠绿.建议用工具选拔

现实的主次如下:

      XMLHttpRequest.send( “name=zhangsan&age=12&email=xxxxx” ) ;

动用GET格局交给
      url = “/ajax/test.jsp” ;
      XMLHttpRequest.open( “GET” , url?a=1&b=2 ) ;
      XMLHttpRequest.send(null);

==========================================================
以下给出简单示例代码,以供参考:
**************************************
test.html
**************************************
<html> 
 <head>
  <script type=”text/javascript”>  
   var xhr ;
   
   //初始化 XMLHttpRequest 对象
   // return value : 1 : IE , 2 , Mozila , 0 : create XMLHttpRequest’s
object error ;
   function createXHR(){
    //创建XMLHttpRequest对象xhr .
    if( window.ActiveXObject ){
    /*对window.ActiveXObject的调用会再次来到三个指标,也说不定回到null,
    if语句会把再次来到的结果作为是true或false,倘诺回去对象则为true,重回null则为false,
    以此提醒浏览器是不是帮衬ActiveX控件,相应的意识到浏览器是还是不是Internet
Explorer.
    以下类同.*/
     xhr = new ActiveXObject( “Microsoft.XMLHTTP” ) ;
     return 1 ;
    }else if( window.XMLHttpRequest
){//此句是支撑XMLHttpRequest则展开如下操作
     xhr = new XMLHttpRequest();
     return 2 ; 
    }else{//不支持XMLHttpRequest则返回0
     return 0 ;
    }                           
   } 
   
   //将用户填写的用户名发送给服务器端验证
   function checkUserName(){
    var ret = createXHR();//<!–step 2.创建XHR  –>
    if( ret == 0 ){
      alert( “create xhr error” ) ;
    }else{
     //在xhr中登记用于拍卖回复的函数(callBack)
     
     xhr.onreadystatechange = callBack ;<!–step
3.装置回调函数,用于重回数据的拍卖  –>
     //此处回调前边未有加括号是因为借使javascript将函数复给变量时在前面加了(),那么就能够立马实施了.此处需非常注意
     /**/
     //使用Get形式向服务器发送诉求  .
     var url = makeQueryString( “/ajax/check.jsp” );  
     xhr.open(  “get” , url ) ;
     xhr.send( null );//<!–step 4.殡葬乞求到服务器  –>
     //<!–step 5.呼吁的管理,此处由chenk.jsp实行拍卖  –>
      /*  
     //通过Post 方式向服务器发送数据 .
     var url = “/ajax/check.jsp” ;
     xhr.open( “post” , url ) ;            
     xhr.setRequestHeader( “Content-Type” ,
“application/x-www-form-urlencoded” )
;//关于此处请参见前边附带的连带文书档案
     xhr.send( makeQueryString( null )  ) ;
     */
    }   
   }   
   
   //在钦定的U途乐L上增添参数
   function makeQueryString( url ){
    var name = document.getElementById( “nameId” ).value ;
    var queryString ;
    if( url == null ){//为null时是选择POST实行发送
     return “name=” + name ; 
    }else{//使用GET进行发送
     return url + “?name=” + name ; 
    }
   }  
   
   function callBack(){ <!–step 6.回调函数的答问  –>
     //通讯进程截止 .
     //readyState :0:未初阶化(uninitialized) 1: 初阶化阶段(loading)
     //2 :连接创立阶段(loaded) 3 : 通讯中阶段(interactive)
     //4 : 通讯截至(complete)
     if( xhr.readyState == 4 ){ 
      //status==200,表示服务器运转如常,其余值代表错误
      if( xhr.status == 200 ){ 
       processResult();
      }else{
       alert( “error!” ) ; 
      }
     }
   }
                            
   function processResult(){
    //获得回复内容 ,把回应内容显示在网页上
    var span = document.getElementById( “msgId” ) ;
    span.innerHTML = xhr.responseText ; 
   }
  </script>
 </head>
 <body>
  <table>
   <tbody>
    <tr>
     <td>User Name</td>
     <td><input type=”text” id=”nameId”
onblur=”checkUserName();”/><!–step 1.拓展函数触发  –>
      <span id=”msgId”></span>
     </td>
    </tr>
    <tr>
     <td>Password</td>
     <td><input type=”password” /></td>
    </tr>                                     
    
    <tr>
     <td colspan=”2″>
      <input type=”button” value=”user register” /> 
     </td>
    </tr>
   </tbody>
  </table>
 </body>
</html>
***********************************************************************
check.jsp
***********************************************************************
<%@page contentType=”text/html;charset=utf-8″
isELIgnored=”false”%>
<%@page pageEncoding=”GBK”%>
<%@taglib uri=”” prefix=”c”%>
<!–step 5.呼吁的拍卖,此处由chenk.jsp进行管理  –>
<%
   Thread.sleep( 2000 ) ;
%>
<c:if test=”${ empty param.name}”>
 <font
color=”red”><b>必须填写用户名</b></font>
</c:if>
<c:if test=”${ ! empty param.name}”>
 <c:if test=”${ param.name == ‘ajax’}”>
  <font color=”red”><b>用户名已存在</b></font>
 </c:if>                                     
 <c:if test=”${ param.name != ‘ajax’}”>
  <font
color=”green”><b>用户名能够使用</b></font>
 </c:if>
</c:if>                

润乾报表中可以透过在jsp页面中设定JavaScript函数来落实那么些功能。

2.2)题指标签:<h1><h2>…<h6>
因为题目是文本中常用的内容,为了便利操作而定义的,其实就是有些字体和粗体的整合

复制代码 代码如下:

如上代码只作为轻易演示,列出了骨干的调用创设等艺术等.

以下为附加内容:
********************************************************************
有关application/x-www-form-urlencoded等字符编码的解释表达

 在Form成分的语法中,EncType阐明提交数据的格式 用 Enctype
属性钦定将数据回发到服务器时浏览器选择的编码类型。 下面是注脚:
application/x-www-form-urlencoded:

窗体数据被编码为名称/值对。那是标准的编码格式。 multipart/form-data:
窗体数据被编码为一条消息,页上的种种控件对应信息中的几个有的。
text/plain: 窗体数据以

纯文本情势进行编码,个中不含任何控件或格式字符。
 补充
form的enctype属性为编码格局,常用有三种:application/x-www-form-urlencoded和multipart/form-data,默以为application/x-www-form-urlencoded。
当action为get时候

,浏览器用x-www-form-urlencoded的编码情势把form数据转换来贰个字串(name1=value1&name2=value2…),然后把那几个字串append到url前边,用?分割,加载这些新的url。

当action为post时候,浏览器把form数据封装到http
body中,然后发送到server。
如果未有type=file的控件,用暗中认可的application/x-www-form-urlencoded就足以了。
可是如

果有type=file的话,就要动用multipart/form-data了。浏览器会把任何表单以控件为单位划分,并为每一种部分加上Content-Disposition(form-data大概file),Content-Type(默

感到text/plain),name(控件name)等音信,并丰硕分割符(boundary)。
********************************************************************
注意:
javascript将函数复给变量一定不能够写前边的(),倘若写了就实施了.
********************************************************************
利用xhr.responseXML时 dom的局地深入分析方法: .
            getElementById( “id” ) ;
            getElementsByTagNames( “tr” ) ;
            appendChild( childNode ) ;

 

2.3)特殊字符:
只要要在网页上展现一些特殊符号,举例< >
&等.因为那一个标志在代码中会被浏览器度和胆识别并表达,所以用一些相当措施来表示
< &qt; & " &req; © ™  
< > & ”     空格

<html>
<head>
<title>test page</title>
<script type=’text/javascript’>
<!–
function createTable() {
var t = document.createElement(‘table’);
for (var i = 0; i < 2000; i++) {
var r = t.insertRow();
for (var j = 0; j < 5; j++) {
var c = r.insertCell();
c.innerHTML = i + ‘,’ + j;
}
}
document.getElementById(‘table1’).appendChild(t);
t.setAttribute(‘border’, ‘1’);
}
function createTable2() {
var t = document.createElement(‘table’);
var b = document.createElement(‘tbody’);
for (var i = 0; i < 2000; i++) {
var r = document.createElement(‘tr’);
for (var j = 0; j < 5; j++) {
var c = document.createElement(‘td’);
var m = document.createTextNode(i + ‘,’ + j);
c.appendChild(m);
r.appendChild(c);
}
b.appendChild(r);
}
t.appendChild(b);
document.getElementById(‘table1’).appendChild(t);
t.setAttribute(‘border’, ‘1’);
}
function createTable3() {
var data = ”;
data += ‘<table border=1><tbody>’;
for (var i = 0; i < 2000; i++) {
data += ‘<tr>’;
for (var j = 0; j < 5; j++) {
data += ‘<td>’ + i + ‘,’ + j + ‘</td>’;
}
data += ‘</tr>’;
}
data += ‘</tbody><table>’;
document.getElementById(‘table1’).innerHTML = data;
}
function createTable4() {
var data = new Array();
data.push(‘<table border=1><tbody>’);
for (var i = 0; i < 2000; i++) {
data.push(‘<tr>’);
for (var j = 0; j < 5; j++) {
data.push(‘<td>’ + i + ‘,’ + j + ‘</td>’);
}
data.push(‘</tr>’);
}
data.push(‘</tbody><table>’);
document.getElementById(‘table1’).innerHTML = data.join(”);
}
function showFunctionRunTime(f) {
var t1 = new Date();
f();
var t2 = new Date();
alert(t2 – t1);
}
//–>
</script>
</head>
<body>
<div id=”table1″ style=”border: 1px solid black”>
</div>
<script>
showFunctionRunTime(createTable);
showFunctionRunTime(createTable2);
showFunctionRunTime(createTable3);
showFunctionRunTime(createTable4);
</script>
</body>
</html>

            removeChild( childNode ) ;

 

 

版权表明:本文为博主原创文章,未经博主允许不得转发。


上面就通过一个下例子简介一下如何通过JavaScript函数获取Web报表单元格的值。

3 列表
3.1)列表标签<dl>
<dt>:上层项目
<dd>:下层项目
专注:<dt>和<dd>都要放在<dl>中使用
例子:
<dl>
 <dt>游戏名称</dt>
  <dd>星际争当霸主</dd>
  <dd>紫罗兰色境界</dd>
 <dt>部门名称</dt>
  <dd>技术部</dd>
  <dd>培训部</dd>
</dl>
效果:
 游戏名称
  星际争伯
  郎窑红境界
 部门名称
  技术部
  培训部

1、inserRow()和insertCell()函数
  insertRow()函数能够带参数,格局如下:
  insertRow(index)
  那一个函数将新行增添到index的那一行前,比如insertRow(0),是将新行增多到第一行在此之前。暗中认可的insertRow()函数约等于insertRow(-1),将新行加多到表的末梢。
  insertCell()和insertRow的用法同样。
  2、动态设置属性和事件
  上边包车型大巴innerHTML和innerText都以列的质量。
  innerText是增进到<tb></tb>之间的文本,innerHTML是增添到<tb></tb>之间的HTML代码
  设置任何质量也是用同一的办法,举例,设置行背景象
  tr.bgColor = ‘red’;
设置colspan属性
td.colSpan = 3;
  
  设置事件也同样,要求轻松说雅培(Abbott)(Beingmate)些。
  比方,笔者要让点击新加行的时候实践三个和好定义的函数
newClick,newClick函数如下:
  function newClick(){
   alert(“那是新添长的行”);
  }
  对onclick事件设置这几个函数的代码如下:
  tr.onclick = newClick;
  这里须要理论的是,=前边的有的必须是函数名,而且不可能带引号,
  newTr.onclick = newClick();
  newTr.onclick = ‘newClick’;
  newTr.onclick = “newClick”;
  上边的写法都以一无所能的。
  上面包车型大巴写法,也是没有错的
  newTr.onclick = function newClick(){
   alert(“那是新加上的行”);
  }
动态删除表格
方法1:

先是,将揭晓报表的jsp页面中的报表标签<report:html>放在三个<table>标签中,

3.2)列表中项目的记对应的标签
<ol>:数字标签(a A 1 i r)
<ul>:是标识标签
<li>:具体项目内容标签.此标签只在<ol>和<ul>中央银立见成效
因而type属性改动项目标识,假若想做出效果更加好的列表,如:玉深褐圆点就用css

复制代码 代码如下:

<table algin=”center” width=”100%” height=”100%”>
<tr><td>
<report:html name=”report1″ reportFileName=”<%=report&>”
 funcBarLocation=”top”
 needPageMark=”yes”
 generateParaForm=”no”
 params=”<%=param.toString()%>”
 exceptionPage=”/reportjsp/myError2.jsp”
 />
</td></tr>
</table>

4 图像
4.1)图像标签<img>
例:<img src=”1.jpg” align=”middle” border=”3″ alt=”Introduce of the
photos”/>
align:属性定义图片的排列格局,
border:用来设置图像的边框
src:连接三个文件

<table id=mxh border=1>
<tr>
<td>第1行</td><td
onclick=”deleteRow(‘mxh’,this.parentElement.rowIndex)”>删除本行</td>
</tr>
<tr>
<td>第2行</td><td
onclick=”deleteRow(‘mxh’,this.parentElement.rowIndex)”>删除本行</td>
</tr>
</table>
<script>
function deleteRow (tableID, rowIndex) {
var table =document.all[tableID]
table.deleteRow(rowIndex);
}
function getRowNum(tableID){
var tab = document.all[tableID]
//表格行数
var rows = tab.rows.length ;
//表格列数
var cells = tab.rows.item(0).cells.length ;
}
</script>

当中<report:html>中的name属性可用来定位单元格

4.2)图像地图<map>
选取:当要在图像中甄选某一局地作为延续的时候.如中华夏族民共和国地形图各种省所对应的区域
map标签要和img标签共同使用.Href是超连接
<img src=”Sunset.jpg” alt=”the introduce of the photos”
usemap=”#Map” />
 <map>
  <area shape=”rect”coords=”50.12.221,111″ href=”1.html”>
  <area shape=”rect”coords=”52.11.121,133″ href=”2.html”>
 </map>

方法2:

例如:report1_A1就意味着的是报表的A1单元格。

 

复制代码 代码如下:

然后,在昭示报表的jsp页面中追加一段得到单元格值JavaScript函数,函数如下
<script language=”javascript”>
function_getDispValueByName(){
var cell = document.getElementById(”report1_A1″);
//通过ID去稳固单元格地点
alert(cell.value); //用alert()函数弹出这么些单元格的值
}
</script>

5 表格
5.1)表格标签<table>
组成:
题指标签<caption>给表格提供标题
表头标签:<th>一般对表格的首先行仍然第一列实行格式化,正是粗体显示,并有时用
行标签:<tr>
单元格标签<td>加载行标签的在那之中,能够省略明了为,先有行,在行中再进入单元格
格式:
<table border=”1″
width=”40%”><!–值为百分比能够让表格的上升的幅度随浏览器窗口的分寸变化–>
 <caption>表格标题</caption>
 <tr><!–第一行–>
  <th>姓名</th>
  <th>年龄</th>
 </tr>
 <tr algin=”center”><!–第二行–>
  <td>张三</td>
  <td>23</td>
 </tr>
</table>

<table id=mxh border=1>
<tr>
<td>第1行</td><td
onclick=”deleteRow(this.parentElement)”>删除本行</td>
</tr>
<tr>
<td>第2行</td><td
onclick=”deleteRow(this.parentElement)”>删除本行</td>
</tr>
亚洲必赢官网 ,</table>
<script>
function deleteRow (obj) {
obj.parentElement.removeChild(obj);
}
</script>

这么就落实了通过javaScript函数获取web报表单元格值的功效。

5.2)例子
colspan:表示单元格占两列
rowspan:表示单元格占两行

您或者感兴趣的稿子:

  • javascript落到实处动态扩展删除表格行(包容IE/FF)
  • 一组JS创立和操作表格的函数会集
  • JavaScript
    学习笔记(十三)Dom创制表格
  • JavaScript与DOM组合动态成立表格实例
  • js动态创制表格,删除行列的小例子
  • javascript如何创立表格(javascript绘制表格的两种办法)
  • JavaScript获得表格(table)当前行的值、删除行、扩展行
  • 基于JavaScript实现动态创设表格和充实表格行数

版权注明:本文为博主原创小说,未经博主允许不得转发。

[html]  <html> 
 <head> 
  <!–font size=”3″ color=”red”>哈哈,我来啦!</font–> 
 </head> 
 
 <body> 
  <table border=”1″ bordercolor=”00ffff” width=”50%”
cellspacing=”0″ 
  cellpadding=”10″> 
   <caption>作者是标题</caption> 
   <tbody > 
    <tr> 
     <th colspan=”2″>小编是张三</th> 
     <!–td>小编是李四</td–> 
    </tr> 
 
 
    <tr> 
     <td align=”center”><b>我是王五</b></td> 
     <td>笔者是赵六</td> 
    </tr> 
   </tbody> 
 
   <tbody > 
    <tr> 
     <th rowspan=”2″>笔者是张三</th> 
     <td>小编是李四</td> 
    </tr> 
 
 
    <tr> 
     <td align=”center”><b>作者是王五</b></td> 
      
    </tr> 
   </tbody> 
  </table> 
 </body> 
</html> 


<html>
 <head>
  <!–font size=”3″ color=”red”>哈哈,我来啦!</font–>
 </head>

 <body>
  <table border=”1″ bordercolor=”00ffff” width=”50%”
cellspacing=”0″
  cellpadding=”10″>
   <caption>笔者是标题</caption>
   <tbody >
    <tr>
     <th colspan=”2″>作者是张三</th>
     <!–td>笔者是李四</td–>
    </tr>

    <tr>
     <td align=”center”><b>笔者是王五</b></td>
     <td>笔者是赵六</td>
    </tr>
   </tbody>

   <tbody >
    <tr>
     <th rowspan=”2″>笔者是张三</th>
     <td>作者是李四</td>
    </tr>

    <tr>
     <td align=”center”><b>我是王五</b></td>
    
    </tr>
   </tbody>
  </table>
 </body>
</html>

 

5.3)tbody的作用
能够垄断表格分行下载,从而巩固下载速度,网页的开发是先表格的从头到尾的经过总体下载完成后,才显得出来的,分行下载能够先出示部分剧情,那样会压缩用户等待事件
使用tbody的不到是足以使得这几个富含在内的代码不用在全部表格都剖判后多只呈现,正是说假设有多行,那么只要得到三个tbody行,就能够来得一行
tbody那些标签能够调整表格分行下载,当表格内容相当的大时比较使用,在供给分行下载处加上
<tbody>和</tbody>

6 超链接标签<a>有二种用法
6.1)超链接
超链接<a href=” “>
例子:
<a href=”” target=”_blank”>新浪</a>
href属性值可以是url,也足以是地面文件,
target属性是内定在老大窗口展开,个中_blank代表在新窗口中开采
title:当鼠标放到新浪的时候,展现搜狐的证实
例子:

[html]  <html> 
 <head> 
 
 </head> 
 
 <body> 
  <a name=”top”>最上部地方<a/><br/> 
   
  <a href=”” title=”图片表明”><img
src=”xiaoyunhui.jpg” width=”5%”/></a> 
  <br/> 
  <a href=”” target=”_blank”> 
  <font size=”5″
color=”blue”>新浪<font/></a><br/> 
  <a
href=”mailto:a[email protected]”>联系大家</a><br/> 
  <a href=”thunder://avadcadfa”>下载</a> 
   
  <hr color=”ff0000″ /> 
  <table align=”center” border=”1″ color=”blue” height=”300″
width=”300″> 
   <tbody> 
    <tr> 
     <th>第一行第三个单元格</th> 
     <th>第一行第二个单元格</th> 
    <tr> 
 
     
    <tr> 
     <td>第二行第1个单元格</td> 
     <td>第二行第四个单元格</td> 
    <tr> 
   </body> 
  <table> 
 
  <table align=”center” border=”1″ color=”blue” height=”300″
width=”300″> 
   <tbody> 
    <tr> 
     <th>第一行第三个单元格</th> 
     <th>第一行第一个单元格</th> 
    <tr> 
 
     
    <tr> 
     <td>第二行第三个单元格</td> 
     <td>第二行第一个单元格</td> 
    <tr> 
   </body> 
  <table> 
 
  <table align=”center” border=”1″ color=”blue” height=”300″
width=”300″> 
   <tbody> 
    <tr> 
     <th>第一行第八个单元格</th> 
     <th>第一行第贰个单元格</th> 
    <tr> 
 
     
    <tr> 
     <td>第二行第多少个单元格</td> 
     <td>第二行第一个单元格</td> 
    <tr> 
   </body> 
  <table> 
 
  <a href=”#top”>回到最上部<a/> 
 </body> 
</html> 

<html>
 <head>

 </head>

 <body>
  <a name=”top”>最上端地点<a/><br/>
 
  <a href=”” title=”图片表明”><img
src=”xiaoyunhui.jpg” width=”5%”/></a>
  <br/>
  <a href=”” target=”_blank”>
  <font size=”5″
color=”blue”>新浪<font/></a><br/>
  <a
href=”mailto:[email protected]”>联系大家</a><br/>
  <a href=”thunder://avadcadfa”>下载</a>
 
  <hr color=”ff0000″ />
  <table align=”center” border=”1″ color=”blue” height=”300″
width=”300″>
   <tbody>
    <tr>
     <th>第一行第叁个单元格</th>
     <th>第一行第二个单元格</th>
    <tr>

   
    <tr>
     <td>第二行第多少个单元格</td>
     <td>第二行第二个单元格</td>
    <tr>
   </body>
  <table>

  <table align=”center” border=”1″ color=”blue” height=”300″
width=”300″>
   <tbody>
    <tr>
     <th>第一行第几个单元格</th>
     <th>第一行第3个单元格</th>
    <tr>

   
    <tr>
     <td>第二行第二个单元格</td>
     <td>第二行第4个单元格</td>
    <tr>
   </body>
  <table>

  <table align=”center” border=”1″ color=”blue” height=”300″
width=”300″>
   <tbody>
    <tr>
     <th>第一行第贰个单元格</th>
     <th>第一行第叁个单元格</th>
    <tr>

   
    <tr>
     <td>第二行第贰个单元格</td>
     <td>第二行第三个单元格</td>
    <tr>
   </body>
  <table>

  <a href=”#top”>回到顶端<a/>
 </body>
</html>

 

6.2)定位标志<a name=” “>
貌似在本页面中应用,当网页内容过长,定位标识会比拖动滚动条方便神速
注:定位标志要和超链接结合使用才使得
例子:
<a name=”标识”>标志地点</a>
<p>…..<!–过多空行以塑造网页过长的作用–>
<a href=”#标记”>再次来到标识位置</a>
在意:使用一定标志时一定要在href值的上马处进入$标志名

7表单
7.1)表单标签<form>
表单标签是最常用的价签,用于与服务器端的互动
<input>:输入标签:接受用户输入新闻

7.2)type选拔标签
type属性钦赐输入标签的种类
文件框text:输入的文书新闻平昔彰显在框中
密码框password;输入的文本以原点也许星号的花样突显
单选框radio:如性别接纳
复选框checkbox:如兴趣选拔
隐藏字段hidden:在页面上不显得,但在付给的时候随别的剧情一齐提交
付出按键submit:用于提交表单中的内容
重新载入参数开关reset:将零件中填入的内容设置为早先值
按键button:自定义两个开关暗中认可是一直不任何效果的可感觉其自定义事件
file:前期扩大内容,文件上传会自动生成贰个文本框,和贰个浏览按键
图像image:它能够代替submit开关,为了提交按键的奴颜婢膝,能够用image的src属性链接二个难堪的开关图片,实现提交效果
例子:

[html]  <html> 
 <head> 
 
 </head> 
  
 <body> 
 <fieldset> 
  <legend>注册区域</legend> 
  <form action=”; 
   <table border=”1″ bordercolor=”blue” cellspacing=”0″
cellpadding=”10″ width=”50%” algin=”center”> 
    <tr> 
     <th colspan=”2″>消息注册页面</th> 
      
    </tr> 
     
    <tr> 
     <td>用户名:</td> 
     <td><input type=”text” name=”user” /> </td> 
    </tr> 
     
    <tr> 
     <td>密码:</td> 
     <td><input type=”password” name=”psw” /> </td> 
    </tr> 
     
    <tr> 
     <td>鲜明密码:</td> 
     <td><input type=”password” name=”repsw”/>
</td> 
    </tr> 
 
    <tr> 
     <td>性别:</td> 
     <td> 
      <input type=”radio” name=”sex” value=”man” />男  
      <input type=”radio” name=”sex” value=”gril”/>女 
     </td> 
    </tr> 
     
    <tr> 
     <td>技术:</td> 
     <td> 
      <input type=”checkbox” name=”chb” value=”java”/>java  
<input type=”checkbox” name=”chb” value=”jsp”/>jsp <input
type=”checkbox” name=”chb” value=”Servlet”/>Servlet  
 
     </td> 
    </tr> 
     
    <tr> 
     <td>国家:</td> 
     <td> 
       
      <select name=”country” > 
       <option value=”none”>–采纳国家–</option> 
       <option value=”cn”>中国</option> 
       <option value=”en”>英国</option>          <option
value=”usa”>美国</option> 
      </select> 
 
 
     </td> 
    </tr> 
     
    <tr> 
      
     <th colspan=”2″> 
       <input type=”submit” />  
       <input type=”reset” /> 
     </th> 
    </tr> 
  
   </table>    
 
 
  </form> 
   
 </fieldset> 
 </body> 
 
</html> 

<html>
 <head>

 </head>
 
 <body>
 <fieldset>
  <legend>注册区域</legend>
  <form action=”;
   <table border=”1″ bordercolor=”blue” cellspacing=”0″
cellpadding=”10″ width=”50%” algin=”center”>
    <tr>
     <th colspan=”2″>音讯注册页面</th>
    
    </tr>
   
    <tr>
     <td>用户名:</td>
     <td><input type=”text” name=”user” /> </td>
    </tr>
   
    <tr>
     <td>密码:</td>
     <td><input type=”password” name=”psw” /> </td>
    </tr>
   
    <tr>
     <td>分明密码:</td>
     <td><input type=”password” name=”repsw”/> </td>
    </tr>

    <tr>
     <td>性别:</td>
     <td>
      <input type=”radio” name=”sex” value=”man” />男
      <input type=”radio” name=”sex” value=”gril”/>女
     </td>
    </tr>
   
    <tr>
     <td>技术:</td>
     <td>
      <input type=”checkbox” name=”chb” value=”java”/>java  
<input type=”checkbox” name=”chb” value=”jsp”/>jsp <input
type=”checkbox” name=”chb” value=”Servlet”/>Servlet

     </td>
    </tr>
   
    <tr>
     <td>国家:</td>
     <td>
     
      <select name=”country” >
       <option value=”none”>–选拔国家–</option>
       <option value=”cn”>中国</option>
       <option value=”en”>英国</option>          <option
value=”usa”>美国</option>
      </select>

     </td>
    </tr>
   
    <tr>
    
     <th colspan=”2″>
       <input type=”submit” />
       <input type=”reset” />
     </th>
    </tr>
 
   </table>  

  </form>
 
 </fieldset>
 </body>

</html>

 

7.3)
<select>选用标签,提供用户挑选内容.如用户所在的省市.size属性为展现等级次序个数
 <option>:子项标签
属性selected未有属性值,加在子项上,个中四个子项上,子项就改为私下认可被挑选

7.4)<textarea>:多行文本框.如:个人音信描述

7.5)<label>:用于给各要素定义神速键
  for属性:钦点赶快键功效的表单成分,必供给与效益的表单成分的id值一样
  accesskey属性:钦命飞速键,此快速键需求和alt键组合使用
  例子:
  <label for=”user” accesskey=”u” >用户名(u)</label>
  <input type=”text” id=”user” />

7.6)get方法和post方法的区分
<form action=”” method=”get”>
<form action=”” method=”post”>
get:会将送交的数额呈以往地点栏上,对中国“氢弹之父”感性安全性不高,提交数据的容量受地址栏的限量,获取到的音信封装在音信头以前(封装在http央求行)
post:不会将数据展现在地址栏,安全性高,能够交到概略积的数码,获取的的音讯封装在数据体中,也等于http新闻头之后的空行后.

对于服务端来说:
表单提交尽量用post,因为关乎到编码难点
对此post提交的中文.在服务端能够直接行使setCharacterEncoding(“gbk”)就足以缓慢解决

应用表单的零件不必然要定义form标签.
唯有亟待将数据实行服务端的付出的时候才会用到form标签因为form有个action属性,能够链接到服务端
表单提交:
先定义form表单中的action属性值,钦点表单数据提交的指标地(服务端)
显明提交模式,通过点名method属性值.假设不定义,那么method的值私下认可是get

8)头标签
头标签放在<head></head>头部分之间.包罗:title base meta link

8.1)<title>钦赐浏览器的标题栏展现内容

8.2)<base>
href属性:内定网页中具有的超链接目录.能够是地面目录,也得以是网络目录.注意值的结尾处一定要用/表示目录.只效劳于相对路径的超链接文件
当要翻新网址的时候,能够先把立异的文书都备份都此外一个盘,然后在备份文件上边完全更新完事后,把目录指向更新后的文件就行了,那样就制止了在原作件上边修改,当修改到一半的时候,用户访问不了的景色
target属性:钦点展开超链接格局.如_blank代表全体的超链接在新窗口中打开
例子:

 <head>
  <base href=”c:\” target=”_blank”>
 </head>
 
 <body>
  <a href=”news.html”><u>新闻</u></a>
 </body>
8.3)<meta>
name属性:网页的描述新闻.当取keywords时,content属性的源委就当作搜索引擎的显要字张开查找
http-equiv属性:模拟HTTP协议的照顾新闻头
例子:
<meta name=”keywords” content=”犀利哥,凤姐,曾哥” />
<meta http-equiv=”refresh” content=”3″;url=””
/>
意味着张开此页面3秒后自动转到微博页面
笔者们能够设置在本页面注册成功后,转到主页

8.4)<link>
rel属性:描述目的文书档案与近期文书档案的关系.
type属性:文书档案类型.
media:钦赐目录文书档案在这种设备上起功能.
例子:
<link rel=”stylesheet” type=”text/css” media=”screen,print”
href=”a.css” />

9)其余标签
<marquee>让内容动起来
direction属性:left right down up
behavior属性:scroll alternate slide
<pre>能够将文件内容按在代码区的旗帜彰显在页面上
<i>斜体标签
<u>下横线标签
<strong>加粗标签
<p>段落标签,跟<br>标签分裂,两段时期会有空子
<br>换行标签
<sub>首字母下沉
<sup>字母上涨,如次数幂

10)XHTML XML
XHTML是可扩展的超文本标识语言(Extensible HyperText 马克up Language)
XHTML是w3c协会在两千年的时候为了进步HTML退出的,本来是想代替Html的,可是开掘Internet上用       
Html写的网页太多了,未能如愿.能够理解为它是html一个晋升版本
XHTML的代码结构进一步严俊,是依据xml的一种选取
xml是可扩充标志语言(Extensible 马克up Language)
  xml是对数码音信的描述.Html是多少体现的陈说
  Xml代码规定的越来越严谨,如:标签不了事便是错误
  xml标准能够被越来越多的应用程序所讲解,将称为一种通用的数据调换语言
诸君服务器,框架都将xml作为配置文件

10)CSS样式
10.1)css层叠样式表
将网页中的样式分离出来,完全由css来支配
压实体制的复用性以及可扩展性
格式:
 选择器{属性名:属性值;属性名:属性值…}

10.2)css和html相结合的二种方法:
每多少个html标签都有三个style属性
当页面有八个标签有同样样式时,能够开始展览复用
 <style>
  css代码
 <style>
当有多个页面中的标签的样式一样时,还足以将样式单独封装成一个css文件
通过在种种页面中定义
 <style>
  @import url(“1.css”);
 <style>
通过html中head标签中的link标签连接二个css文件
<link rel=”stylesheet” href=”1.css” />
技能:为了提升同样样式的复用性以及可扩大性,能够将多少个标签样式进行独立定义,并封装成css文件
p.css,div.css
在二个css文件中动用css的import将五个标签样式文件导入
下一场在html页面上,使用link标签导入那几个总的css文件就能够
例子:
1.css
@import url(“p.css”);
@import url(“div.css”);
<link rel=”stylesheet” href=”1.css” />

10.3)选拔器:其实正是样式要效益的价签容器
当样式分离后,html功效于标签封装数据.然后将css加载到钦点标签上

10.3.1)选取器的骨干分类:
标签选取器:其实正是html中的每二个标具名
类选拔器:其实便是每五个标签中的class属性.
 用.的样式表示,只用来给css所利用,能够对两样标签进行相一样式设定
ID选拔器:其实便是每二个标签中的id属性,不过要确认保证id唯一性,用#来标识
 id不只能够被css所采纳,还是可以够被javascript所使用

10.3.2)选择器优先级:ID>class>标签

10.3.3)增加选拔器:
涉嫌选拔器:其实正是对标签中的标签实行体制订义.接纳器 选拔器…
结合选拔器:对几个选拔器实行限购听那么些样式定义,将多少个采取器通过,隔离的样式
意想不到技师_javaScript笔记,怎么着通过JavaScript函数获取Web报表单元格的值。伪成分选拔器:其实正是因素的一种境况
 a:link:超链接被点前状态
 a;visited:超链接被点击后情状
 a:hover:悬停在超链接上
 a:active:点击超链接时
 在概念那几个处境时,有叁个所有人家:L V H A
 p:first-letter
 p:first-line
 :focus:很遗憾,ie6不支持,但ff支持
css滤镜:其实通过一些代码达成拉长了体制
当使用到css的越多属性时,还索要查阅css api

11)JavaScript概述
11.1)javaScript是基于对象和事件的脚本语言
特点:
   安全性(不一样意直接访问本地硬盘),它能够做的便是消息的动态交互
   跨平台性,(只就算足以分解js的浏览器都得以实践,和平台非亲非故)

11.2)JavaScript与Java不同
   js是Netscape集团的成品,java是sun集团的制品
   js是基于对象,java是面向对象
   js只须要解释就能够举行,java必要先编写翻译成字节码文件,再实施
   js是弱类型,java是强类型

11.3)JavaScript与Html的结缘情势
想要将别的代码融合Html中,都以标签的情势
  js代码存放在标签对<script>…</script>中
  使用script标签的src属性引进三个js文件.(方便早先时期维护,扩大)
例子:<script src=”test.js” type=”javascript”></script>
注:规范中script标签中务必进入type属性

11.4)javaScript语法
每一项语言都有友好的语法则则,js语法与java很像,所以读书起来相比较易于,js在那之中也许有变量,语句,函数,数组等大面积语言结合成分.

11.4.1)变量
经过重大字var来定义,弱类型就是说不用钦命具体的数据类型
例子:var x = 3;x = “hello”;
留意:javascript中都以字符串,没有字符一说,用单引号恐怕双引号都以表示字符串
注:js中独特的常量值:undefined,当变量未有伊始化就被接纳,该变量的值便是undefined(未定义).

11.4.2)语句(与java语句格式一样)
认清结构(if语句)
注:var x = 3;
   if(x == 4)//可以展开相比运算
   if(x =
4)//能够开始展览赋值运算,而且能够长久以来实行剖断,不报错.因为在js中0正是false,非0便是  
true(平常用1象征).所以if(x=4)结果是true
分选结构(switch语句)
巡回结构(while语句,do…while语句,for语句)
稳重:分歧的是,未有了实际数据类型的限量,使用时要留心
例子:

  <Script type=”text/javaScript”>
  alert (true+5)
  var x = 3;
  var y = “abc”;
  if(x=1)
  alert (x);
  else
  alert (y);
  </Script>

选拔逻辑运算符实行布尔表明式连接的时候,需如果短路与和鸿沟或.
&& ||因为在js中,非0即为true,0为false,非null为true,null为false

js特有的话语:
with(对象){}
能够鲜明目的所利用的范围.在限定内,能够一贯动用钦赐对象的属性和行为
而不用 对象.  的款式调用,简化了对象的操作

for(变量 in 对象):能够对目的的质量及表现张开遍历
 
11.4.3)函数
11.4.3.1)一般函数
格式:
fnuction 函数名(情势参数…)
{
 试行语句
 return返回值
}
函数是多条试行语句的封装体,唯有被调用才会运转
留意:调用有参数的函数,但不曾给其传值,函数同样能够运作,或然调用未有参数的函数,给其传值,该函数也完全一样运维.说的简单题;只要写了函数名背后跟了一对小括号,该函数就能够运营,那么传递的参数呢?
实际,在函数中有叁个参数数组对象arguments,该对象将传递的参数都封装在贰个数组中.
例子:
function demo()//定义函数
{
 alert(arguments.length)
}
demo(“hello”,123,true);//调用函数
那正是说弹出的对话框结果是3,借使想获得全数的参数值,能够通过for循环遍历该数组

11.4.3.2)无名氏函数,无名函数便是一种简写格式
格式:
function()
{
 施行语句
}
例子1:
var fun=function()
{
 alert(“hello world”);
}
fun();

例子2:
window.onload=function()
{
 alert(“load ok”);
}

11.4.3.3)动态函数
因而js的嵌入对象function完结
例子:
var demo=new function(“x”,”y”;”alert(x+y);”);
demo(4,6);
如同:
function demo(x,y)
{
 alert(x+y);
}
demo(4,6);
昨今分歧的是动态函数,参数以及函数体都能够经过参数进行传递,能够动态钦命

11.4.3.4)函数使用时要留神的一对:
function show()
{
 return “show run”;
}
var method=show();
var method=show;
两句代码都以天经地义的,
第一句表示的是show方法运营后的结果赋值给method变量.
第二句表示的是show指向的靶子的地方值赋值给method.那么method也针对了该对象
那么就能够由此method();的款型来调用那个show方法.

11.5)数组
惠及操作多成分的器皿,能够对中间的因素举办编号
特性:能够存跋扈元素,长度是可变的,该数组中存放的要素类型能够是见仁见智的.
格式:
格式1:var arr=new Array();
arr[0] = “hello”;
arr[1] = 123;
格式2:var arr=[‘hello’,123,true,”abc”];
格式3二维数组的概念:var arr=[[3,2,1],[1,2]];

通过遍历就可以对数组进行基本操作
for(var x=0;x<arr.length;x++)
{
 alert(arr[x]);
}

11.6)对象
js除了曾经提供的停放对象外,也能够自定义对象.
例子:
function Person()
{

}
var p=new Person();
p.name=”zhansan”;//定义成员变量
p.age=20;
//定义成员函数
p.run=function()
{
 alert(“run”);
}
p.run();
或者:
function Person(name,age)
{
 this.name=name;
 this.age=age;
}
var p=new Person(“zhangsan”,20);

11.6.1)js用于操作对象的口舌
with语句
格式:
with(对象)
{

}
行使:当调用三个目的中多少个成员时,为了简化调用,制止”对象.”这种格式的双重书写
var p=new Person(“zhangsan”,20);
alert(p.name+”,”p.age);

11.6.2)prototype属性
javascript已经定义了一些目的,这么些目的都有二个属性叫做prototype原型
prototype可以博得钦命的对象援用,可以经过该援用给已有个别对象给予一些新的法力
那正是说在选用该指标时,可以直接调用定义好的新成效.
事例1定义三个获得最大值的章程:
function getMax()
{
 var max=0;
 for(var x=1; x<this.length; x++)
 {
  if(this[max]<this[x])
   max=x;
 }
 return this[max];
}
var arr=[3,2,1,222,11,111,121];
arr.sort();//直接调用Array对象的sort方法对数组实行排序.
那正是说可不得以像调用sort方法一样调用get马克斯方法吗?
就需求将get马克斯方法增多到Array对象当中.

Array.prototype.getMax=getMax;
var x=arr.getMax();
alert(“max”+x);

事例2:抽出字符串两端的空格

[html]
<html> 
 <head> 
 
 </head> 
 
 <body> 
 <script type=”text/javascript”> 
 function myTrim() 
 { 
  var start=0; 
  var end=this.length-1; 
  while(start<=end && this.charAt(start)==” “) 
   start++; 
 
  while(start<=end && this.charAt(end)==” “) 
   end–; 
   
  return this.substring(start,end+1); 
 } 
  
 String.prototype.trim=myTrim; 
 
 var str1=”   abcdefg   “; 
 var str2=str1.trim(); 
 alert(str2); 
 </script> 
 </body> 
 
</html> 

<html>
 <head>

 </head>

 <body>
 <script type=”text/javascript”>
 function myTrim()
 {
  var start=0;
  var end=this.length-1;
  while(start<=end && this.charAt(start)==” “)
   start++;

  while(start<=end && this.charAt(end)==” “)
   end–;
 
  return this.substring(start,end+1);
 }
 
 String.prototype.trim=myTrim;

 var str1=”   abcdefg   “;
 var str2=str1.trim();
 alert(str2);
 </script>
 </body>

</html>

 

11.6.3)常见的大局方法
parseInt(numstr,[radix]);//将数字格式的字符串转成整数,借使钦命了基数,那么numstr,就能依据试行基数进行转换.
var num=parseInt(“110”,2);//表示”110″这一个字符串会依据二进制进行转换

var x=6;
alert(x.toString(2));//110//获取6对应的二进制表现格局

12)DOM(document object model)文书档案对象模型
实质上就是将有个别标识型的文档以及文书档案中的内容当成对象.
怎么要将那几个文书档案以及中间的竹签封装成对象呢?
因为能够在对象中定义其性子和作为,能够方便操作这个目的

DOM在封装标志型文书档案时,有三层模型.
DOM1:针对html文档.
DOM2:针对xml文档
DOM3:针对xml文档

html,xhtml,xml:那个都以标识型文档
DHTML:是几个技艺的综合体,叫做动态的html
 html:担任将数据开始展览标签的包裹
 css:担当标签的体裁
 dom:担任标签以及标签中的数据封装成对象
 javascript:担当通进度序设计方法来操作那么些指标
标签之间存在那档期的顺序关系:
window
 |–
 |–
 |–
document

html
 |–head
  |–title
  |–base
  |–link
  |–meta
  |–style
  |–script
 |–body
  |–div
  |–form
   |–input
   |–select
  |–span
  |–a
  |–table
   |–tbody
    |–tr
     |–td
     |–th
  |–dl
   |–dt
   |–dd
透过这么些标签档期的顺序,能够形象的当作是一个树形结构,那么大家也得以称标记型文档,加载进内部存款和储蓄器的是一颗DOM树,那几个标签以及标签的数码都是这棵树上的节点

当标识型文书档案加载进内部存款和储蓄器,那么内部存款和储蓄器中有了贰个一拍即合的DOM树
DOM对已标志型文书档案的解析有贰个弊病就是文书档案过大,相对消耗财富.
对此大型文书档案能够利用SAX这种艺术深入分析.

节点类型:
标签型节点:类型:1
属性节点:类型:2
文本型节点:类型:3
注释型节点:类型:8
document:类型:9

专注:标签之间存在空行时,会油不过生一个赤手的文件节点,在赢得节点时必定要留神
节点的关联:
父节点
子节点
手足节点
 上一个小朋友节点
 下贰个弟兄节点

获得可以经过节点的层系关系实现.
也足以经过document对象完毕
getElementById通过di属性值获取相应的节点对象.若是有多少个id值一样,获取到的是率先个id所属对 
象,尽量确定保证id唯一性.重回的是三个指标

getElementByName通过name属性值获取对象,再次回到的是一群对象,其实就二个对象数组

getElementsByTagName:既未有id也绝非name时,可以通过标签名来获取节点对象.重回的是一群对象,   
其实是叁个指标数组

例子:

[html]
<html> 
 <head> 
 
 <script type=”text/javascript”> 
 
 function demo() 
 { 
 var divobj=document.getElementById(“divid”); 
 //获取父节点 
 var parent=divobj.parentNode; 
 //getNodeInfo(parent); 
 
 //获取子节点 
 var childs=divobj.childNodes; 
 //getNodeInfo(childs[0]);//div中的文本节点 
 
 //获取兄弟节点 
  //1,获取上叁个男生节点 
  var preNode=divobj.previousSibling.previousSibling; 
  //getNodeInfo(preNode); 
  //2,获取下八个小朋友节点 
  var nextNode=divobj.nextSibling; 
  //getNodeInfo(nextNode); 
 
 
  
 //须要:获取a标签的文本 
 var aNode=divobj.nextSibling.nextSibling; 
 var aText=aNode.childNodes[0]; 
 //getNodeInfo(aText); 
 
 
 //供给:获取单元格–文本 
 var tabNode=divobj.nextSibling;//获得table标签对象 
  
//getNodeInfo(tabNode.childNodes[0].childNodes[0].childNodes[0].childNodes[0]);//这种办法太疯狂了,不可取 
 
 var tdNodes=tabNode.getElementsByTagName(“td”); 
 //getNodeInfo(tdNodes[0].childNodes[0]); 
  
 } 
 
 var info=””; 
 function getDocAll() 
 { 
  var nodes=document.all;//获取document文书档案中所有的节点指标的援引 
   
  for(var x=0; x<nodes.length; x++) 
  { 
   info
+=nodes[x].nodeName+”…”+nodes[x].nodeType+”<br/>”; 
  } 
 
  //var node=document.all(7);//获取document文书档案的第多个节点 
 
  document.write(info); 
   
 } 
  
 
 function getNodeInfo(node) 
 { 
 alert(“name:”+node.nodeName+”…”+”type:”+node.nodeType+”…”+”value:”+node.nodeValue); 
 } 
 
 /* 
 public void listFile(File dir) 
 { 
  System.out.println(getSpace(level)+dir.getName()); 
  level++; 
  File[] files=dir.listFiles(); 
  for(int x=0; x<files.length; x++) 
  { 
   if(files[x].isDirectory()) 
    listFile(files[x]); 
   else 
    System.out.println(getSpace(level)+files[x].getName()); 
  } 
 } 
 
 public String getSpace(int level) 
 { 
  StringBuilder sb=new StringBuilder(); 
  for(int x=0; x<level; x++) 
  { 
   sb.append(“|–“); 
  } 
  return sb.toString(); 
 } 
 */ 
 
 //通过递归获取节点的层系关系 
 var str=””; 
 function listNodes(node,level) 
 { 
  printInfo(node,level); 
   
  level++; 
  var nodes = node.childNodes; 
  for(var x=0; x<nodes.length; x++) 
  { 
   if(nodes[x].hasChildNodes()) 
    listNodes(nodes[x],level); 
   else 
    printInfo(nodes[x],level); 
  } 
 } 
 
 function getSpace(level) 
 { 
  var s=””; 
  for(var x=0; x<level; x++) 
  { 
   s +=”|—–“; 
  } 
  return s; 
 } 
 
 function printInfo(node,level) 
 { 
 str
+=getSpace(level)+”name:”+node.nodeName+”…”+”type:”+node.nodeType+”…”+”value:”+node.nodeValue+”<br/>” 
 } 
 
 function getNodes() 
 { 
  listNodes(document,0); 
  document.write(str); 
 } 
  
 //获取节点的兼具属性 
 function getAtts() 
 { 
  var q=””; 
  var divobj=document.getElementById(“divid”); 
  var atts=divobj.attributes; 
  for(var x=0; x<atts.length; x++) 
  { 
   q +=
atts[x].nodeName+”…”+atts[x].nodeType+”…”+atts[x].nodeValue+”<br/>” 
  } 
  document.write(q); 
 } 
 </script> 
 </head> 
 
 <body> 
 <input type=”button” value=”演示” onclick=”getAtts()” /> 
 
 <div id=”divid”> 
  aaaaa 
 </div> 
 
 <table> 
  <tr> 
   <td>单元格一</td> 
   <td>单元格二</td> 
  </tr> 
 
  <tr> 
   <td>单元格一</td> 
   <td>单元格二</td> 
  </tr> 
 </table> 
 
 <a href=”; 
 <span>审判区域</span> 
 </body> 
</html> 

<html>
 <head>

 <script type=”text/javascript”>

 function demo()
 {
 var divobj=document.getElementById(“divid”);
 //获取父节点
 var parent=divobj.parentNode;
 //getNodeInfo(parent);

 //获取子节点
 var childs=divobj.childNodes;
 //getNodeInfo(childs[0]);//div中的文本节点

 //获取兄弟节点
  //1,获取上四个男生节点
  var preNode=divobj.previousSibling.previousSibling;
  //getNodeInfo(preNode);
  //2,获取下一个男子节点
  var nextNode=divobj.nextSibling;
  //getNodeInfo(nextNode);

 
 //需要:获取a标签的公文
 var aNode=divobj.nextSibling.nextSibling;
 var aText=aNode.childNodes[0];
 //getNodeInfo(aText);

 //须要:获取单元格–文本
 var tabNode=divobj.nextSibling;//获得table标签对象
 
//getNodeInfo(tabNode.childNodes[0].childNodes[0].childNodes[0].childNodes[0]);//这种艺术太疯癫了,不可取

 var tdNodes=tabNode.getElementsByTagName(“td”);
 //getNodeInfo(tdNodes[0].childNodes[0]);
 
 }

 var info=””;
 function getDocAll()
 {
  var nodes=document.all;//获取document文书档案中享有的节点目的的引用
 
  for(var x=0; x<nodes.length; x++)
  {
   info +=nodes[x].nodeName+”…”+nodes[x].nodeType+”<br/>”;
  }

  //var node=document.all(7);//获取document文书档案的第多个节点

  document.write(info);
 
 }
 

 function getNodeInfo(node)
 {
 alert(“name:”+node.nodeName+”…”+”type:”+node.nodeType+”…”+”value:”+node.nodeValue);
 }

 /*
 public void listFile(File dir)
 {
  System.out.println(getSpace(level)+dir.getName());
  level++;
  File[] files=dir.listFiles();
  for(int x=0; x<files.length; x++)
  {
   if(files[x].isDirectory())
    listFile(files[x]);
   else
    System.out.println(getSpace(level)+files[x].getName());
  }
 }

 public String getSpace(int level)
 {
  StringBuilder sb=new StringBuilder();
  for(int x=0; x<level; x++)
  {
   sb.append(“|–“);
  }
  return sb.toString();
 }
 */

 //通过递归获取节点的档期的顺序关系
 var str=””;
 function listNodes(node,level)
 {
  printInfo(node,level);
 
  level++;
  var nodes = node.childNodes;
  for(var x=0; x<nodes.length; x++)
  {
   if(nodes[x].hasChildNodes())
    listNodes(nodes[x],level);
   else
    printInfo(nodes[x],level);
  }
 }

 function getSpace(level)
 {
  var s=””;
  for(var x=0; x<level; x++)
  {
   s +=”|—–“;
  }
  return s;
 }

 function printInfo(node,level)
 {
 str
+=getSpace(level)+”name:”+node.nodeName+”…”+”type:”+node.nodeType+”…”+”value:”+node.nodeValue+”<br/>”
 }

 function getNodes()
 {
  listNodes(document,0);
  document.write(str);
 }
 
 //获取节点的兼具属性
 function getAtts()
 {
  var q=””;
  var divobj=document.getElementById(“divid”);
  var atts=divobj.attributes;
  for(var x=0; x<atts.length; x++)
  {
   q +=
atts[x].nodeName+”…”+atts[x].nodeType+”…”+atts[x].nodeValue+”<br/>”
  }
  document.write(q);
 }
 </script>
 </head>

 <body>
 <input type=”button” value=”演示” onclick=”getAtts()” />

 <div id=”divid”>
  aaaaa
 </div>

 <table>
  <tr>
   <td>单元格一</td>
   <td>单元格二</td>
  </tr>

  <tr>
   <td>单元格一</td>
   <td>单元格二</td>
  </tr>
 </table>

 <a href=”;
 <span>审判区域</span>
 </body>
</html>

 

13)window对象
例子:

[html]
<html> 
 <head> 
 <script type=”text/javascript”> 
 function windemo() 
 { 
  //navigator是window窗口对象的当中二个指标,包涵了浏览器的消息 
  var name=window.navigator.appName; 
  var version=window.navigator.appVersion; 
  //alert(name+”…”+version); 
   
  /* 
  //location是地址栏对象 
  var url =
window.location.href=” 
  var url2 =
window.location.href;//不内定href值,url2私下认可是开荒页面包车型地铁地址 
  //alert(url); 
  */ 
   
  /* 
  //confirm(string
str)该措施是window对象的法门,弹出分明和注销的对话框 
  var b=window.confirm(“汉子,那是何等对话框呢?”); 
  alert(b); 
  */ 
 
  /* 
  //做三个振动荧屏作用 
  //window.moveTo(200,400);//移到钦赐地点 
  for(var x=0; x<88; x++) 
  { 
  window.moveBy(20,0);//偏移值,左向右边偏移20,上到下不偏移 
  window.moveBy(0,20); 
  window.moveBy(0,-20); 
  window.moveBy(-20,0); 
  } 
  */ 
   
  //window方法 
  //var text=window.prompt(“笔者是对话框”,”哈哈哈”); 
  //alert(text); 
 } 
 
 function addemo() 
 { 
 //window.open(“ad.html”,”_blank”,”height=400,width=600,location=no
menubar=no scrollbars=no,resizable=no,status=no,toolbar=no”); 
 
 //window.setTimeout(“alert(‘kk’)”,3000); 
 //window.setInterval(“alert(‘iter’)”,三千);//窗口每隔3秒弹出iter 
 } 
 
  
 /* 
 window.onload=function() 
 { 
 window.open(“ad.html”,”_blank”,”height=400,width=600,location=no
menubar=no scrollbars=no,resizable=no,status=no,toolbar=no”); 
 
 } 
 
 window.onunload=function() 
 { 
  //alert(“onunload”); 
 } 
 
 window.onbeforeunload=function() 
 { 
  //alert(“onbeforeunload”); 
 } 
 */ 
 
 //keyCode按下键盘,输出对应的ascii值 
 function keyDemo() 
 { 
  /* 
  //文本框中只好输入1到9的数字 
  if(!(window.event.keyCode>=48 && window.event.keyCode<=57)) 
  { 
   alert(“不允许录入违规数字”); 
   //returnValue,设置和获得重返值.使得违规数字不呈现在文本框中 
   event.returnValue=false; 
  } 
  */ 
 
  //srcElement得到事件源对象 
  var node= event.srcElement; 
  alert(node.type); 
 } 
 </script> 
 </head> 
 
 <body> 
 <input type=”text” onkeypress=”keyDemo()” /><br/> 
 <input type=”button” value=”window演示” onclick=”addemo()” /> 
 </body> 
</html> 

<html>
 <head>
 <script type=”text/javascript”>
 function windemo()
 {
  //navigator是window窗口对象的内部一个指标,包涵了浏览器的新闻
  var name=window.navigator.appName;
  var version=window.navigator.appVersion;
  //alert(name+”…”+version);
 
  /*
  //location是地址栏对象
  var url =
window.location.href=”
  var url2 =
window.location.href;//不钦定href值,url2暗许是开采页面包车型地铁地方
  //alert(url);
  */
 
  /*
  //confirm(string str)该办法是window对象的办法,弹出明确和裁撤的对话框
  var b=window.confirm(“男士,那是什么对话框呢?”);
  alert(b);
  */

  /*
  //做贰个震荡显示器功用
  //window.moveTo(200,400);//移到钦赐地方
  for(var x=0; x<88; x++)
  {
  window.moveBy(20,0);//偏移值,左向左边偏移20,上到下不偏移
  window.moveBy(0,20);
  window.moveBy(0,-20);
  window.moveBy(-20,0);
  }
  */
 
  //window方法
  //var text=window.prompt(“作者是对话框”,”哈哈哈”);
  //alert(text);
 }

 function addemo()
 {
 //window.open(“ad.html”,”_blank”,”height=400,width=600,location=no
menubar=no scrollbars=no,resizable=no,status=no,toolbar=no”);

 //window.setTimeout(“alert(‘kk’)”,3000);
 //window.setInterval(“alert(‘iter’)”,三千);//窗口每隔3秒弹出iter
 }

 
 /*
 window.onload=function()
 {
 window.open(“ad.html”,”_blank”,”height=400,width=600,location=no
menubar=no scrollbars=no,resizable=no,status=no,toolbar=no”);

 }

 window.onunload=function()
 {
  //alert(“onunload”);
 }

 window.onbeforeunload=function()
 {
  //alert(“onbeforeunload”);
 }
 */

 //keyCode按下键盘,输出对应的ascii值
 function keyDemo()
 {
  /*
  //文本框中只可以输入1到9的数字
  if(!(window.event.keyCode>=48 && window.event.keyCode<=57))
  {
   alert(“分裂意录入违规数字”);
   //returnValue,设置和取得重回值.使得不合法数字不出示在文本框中
   event.returnValue=false;
  }
  */

  //srcElement得到事件源对象
  var node= event.srcElement;
  alert(node.type);
 }
 </script>
 </head>

 <body>
 <input type=”text” onkeypress=”keyDemo()” /><br/>
 <input type=”button” value=”window演示” onclick=”addemo()” />
 </body>
</html>

13)利用超链接实现转移字体大小的效劳
 定义数据封装的竹签(定义分界面)
 注册事件
 事件管理
需求:
页面中有贰个音讯区域.
通过超链接 大 中 小
能够让用户改造区域中的字体大小

代码如下:
js代码:
function getDivobj(divid)
{
 return document.getElementById(divid);
 
}

html中的代码:
<html>
 <head>

 <script type=”text/javascript”
src=超链接改换字体大小封装的document.js></script>
 <script type=”text/javascript”>

 //定义改动字体大小的效应
 function changeSize1(size)
 {
 //var divobj=document.getElementById(“divid”);
 var divobj=getDivobj(“divid”);
 divobj.style.fontSize=size;//这里若是字体要转移背景观,前景观时将在传入大多的数,而且前期要修改也不便利,干脆把这行代码抽取出来,定义三个css样式,我们在函数中调用css样式就行了
 }

 //定义退换字体大小的效果与利益2,传入css样式
 function changeSize2(className)
 {
  var divobj=getDivobj(“divid”);
  divobj.className=className;
 }
 </script>

 //设置css样式
 <style type=”text/css”>
 .norm{
  background-color:#66ffoo;
  color:#ff000;
  font-size:16px;
 }

 .max{
  background-color:#66ffcc;
  color:#ff00cc;
  font-size:24px;
 }

 .min{
  background-color:#66ffcc;
  color:#000000;
  font-size:10px;
 }
 </style>

 </head>

 <body>

 //href=”javascript:void(0)”//设置不运转超链接引擎
 <a href=”javascript:void(0)”
onclick=changeSize2(“max”)>大</a>
 <a href=”javascript:void(0)”
onclick=changeSize2(“norm”)>中</a>
 <a href=”javascript:void(0)”
onclick=changeSize2(“min”)>小</a><br/>

 <h2>小编是信息题目</h2>
 
 //class=”norm”设置div对象的暗中同意的css样式
 <div id=”divid” class=”norm”>
 我们好,男子作者是情报内容!!!我们好,男生小编是情报内容!!!</br>
 大家好,男生小编是情报内容!!!大家好,男人作者是音信内容!!!</br>
 大家好,哥们作者是消息内容!!!大家好,男子我是情报内容!!!</br>
 我们好,男子笔者是情报内容!!!大家好,男士作者是情报内容!!!</br>
 我们好,男子我是情报内容!!!大家好,男人小编是音信内容!!!</br>
 </div>
 </body>
</html>

14)展开闭合效果
最主要使用几个主意:
getElementByTagName(String
str),把节点名称传进去,再次回到document中享有的该名称的节点指标数组
overflow:css样式中的属性,功效是当该区域抢先了规定的界按时,能够体现visible,隐藏hidden也许auto和scroll有二种属性值
以下是进行闭合效果的事例:

[html]
<html> 
 <head> 
 
 <script type=”text/javascript”
src=”doctool.js”></script> 
 <script type=”text/javascript”> 
  
 function change() 
 { 
  //var divNode=document.getElementsByTagName(“div”)[0]; 
  var divNode=byTag(“div”)[0]; 
  //alert(divNode.nodeName); 
  /* 
  //方法一:鼠标事件,单击字体调用本办法:展开闭合效果 
  var b=true; 
  if(b) 
  { 
   divNode.style.height=”8px”; 
   divNode.style.overflow=”hidden”; 
   b=false; 
  } 
  else 
  { 
   divNode.style.height=”8px”; 
   divNode.style.overflow=”visible”; 
   b=true; 
  } 
   
 
  //方法二:打开闭合效果 
  if(divNode.className==”close”) 
  { 
   divNode.className=”open”; 
  } 
  else 
  { 
  
divNode.className=”close”;//因为一初叶并未设置overflow的值,所以暗许是空的字符串,所以首先次会走else语句 
  } 
  */ 
 } 
  
 
  //点击上层项目下层项目呈现出来 
  function list1() 
  { 
   var dtNode=event.srcElement; 
   var dlNode=dtNode.parentNode; 
   //alert(dtNode.nodeName+”…”+dlNode.nodeName); 
    
   if(dlNode.className==”open”) 
   { 
    dlNode.className=”close”; 
   } 
   else 
   { 
    dlNode.className=”open”; 
   } 
  } 
   
  //当点击叁个品种,其余门类都要关门,唯有三个档期的顺序开荒 
  function list(dtNode) 
  { 
   var dlNode=dtNode.parentNode;//获得dt节点对象的父节点dl 
   var dlNodes=byTag(“dl”);//获取具备的dl标签 
   for(var x=0; x<dlNodes.length; x++)//循环得到的富有dl标签 
   { 
    //要是该节点和源节点相等,实施操作 
    if(dlNodes[x]==dlNode) 
    { 
     if(dlNode.className==”open”) 
     { 
      dlNode.className=”close”; 
     } 
     else 
     { 
      dlNode.className=”open”;  
     }           } 
    //假设不是源节点,则把overflow设置为hidden 
    else 
      
     dlNodes[x].className=”close”; 
   } 
  } 
 /* 
 获取事件源对象的三种办法: 
 1.通过event对象是srcElement属性 
 2.将事件源对象通过this传入 
 */ 
 </script> 
 
 <style type=”text/css”> 
 .open{ 
   
  overflow:visible; 
 } 
 .close{ 
   
  overflow:hidden; 
 } 
 
 dl{ 
  overflow:hidden; 
  height:16px; 
 } 
 </style> 
 </head> 
 
 </body> 
 <!–必要:通过点击完成叁个进展闭合效果 
 <div onclick=”change()”> 
 哈哈,男人作者来啦<br/> 
 哈哈,男士我来啦<br/> 
 哈哈,男生笔者来啦<br/> 
 哈哈,男生作者来啦<br/> 
 哈哈,男人笔者来啦<br/> 
 哈哈,男士笔者来啦<br/> 
 </div> 
 –> 
 
 <dl> 
  <dt onclick=”list(this)”>上层项目上层项目</dt> 
  <dd>下层项目下层项目</dd> 
  <dd>下层项目下层项目</dd> 
  <dd>下层项目下层项目</dd> 
  <dd>下层项目下层项目</dd> 
  <dd>下层项目下层项目</dd> 
 </dl> 
 
 <dl> 
  <dt onclick=”list(this)”>上层项目上层项目</dt> 
  <dd>下层项目下层项目</dd> 
  <dd>下层项目下层项目</dd> 
  <dd>下层项目下层项目</dd> 
  <dd>下层项目下层项目</dd> 
  <dd>下层项目下层项目</dd> 
 </dl> 
 
  
 <dl> 
  <dt onclick=”list(this)”>上层项目上层项目</dt> 
  <dd>下层项目下层项目</dd> 
  <dd>下层项目下层项目</dd> 
  <dd>下层项目下层项目</dd> 
  <dd>下层项目下层项目</dd> 
  <dd>下层项目下层项目</dd> 
 </dl> 
 
 </body> 
</html> 
 
14) 
给表格里的要素进行排序 
例子: 
<html> 
 <head> 
 
 <link rel=”stylesheet” href=”tab.css” /> 
 <script type=”text/javascript” > 
  
 var b=”true”; 
 //将表格里的年华进行排序 
 function sorttab() 
 { 
   
  //1,获取表格中兼有的行对象 
  var tabNode=document.getElementsByTagName(“table”)[0]; 
  var trs=tabNode.rows;//取得表格中的行数 
  //alert(trs.length); 
   
  //2,定义不常容器,将表格中要求到场排序的行对象不时存款和储蓄 
  var arr=new Array();//有时容器中存入的是引用 
  for(var x=1; x<trs.length; x++) 
  { 
   arr[x-1]=trs[x];//从1角标开始赋值给数组 
  } 
  //alert(arr.length); 
  sort(arr);//给数组排序 
  var
tbdNode=tabNode.childNodes[0];//获得tbody标签,因为它的首先个子标签是tr 
 
  if(b) 
  { 
   for(var x=0; x<arr.length;x++) 
   { 
    //alert(arr[x].cells[0].innerText+”…”+arr[x].cells[1]); 
    tbdNode.appendChild(arr[x]);//把行增多到tbody中 
   } 
   b=false; 
  } 
 
  else 
  { 
   for(var x=arr.length-1; x>=0;x–) 
   { 
    //alert(arr[x].cells[0].innerText+”…”+arr[x].cells[1]); 
    tbdNode.appendChild(arr[x]); 
   } 
   b=true; 
  } 
 } 
  
 function sort(arr) 
 { 
  for(var x=0; x<arr.length; x++) 
  { 
    
   for(var y=x+1; y<arr.length; y++) 
   { 
   
//parseInt把表格中的字符串文本转为数字格式,以数字方式开始展览相比,不然它会规行矩步字符串的花样张开比较:字符串中23<5得出不想要的结果 
   
if(parseInt(arr[x].cells[1].innerText)>parseInt(arr[y].cells[1].innerText)) 
    { 
     var temp=arr[x]; 
     arr[x]=arr[y]; 
     arr[y]=temp; 
    } 
 
   } 
  } 
 } 
  
 </script> 
 </head> 
 
 <body> 
 
 <table> 
  <tr> 
   <th>姓名</th> 
   <th><a href=”javascript:void(0)”
onclick=”sorttab()”>年龄</a></th> 
   <th>地址</th> 
  </tr> 
 
  <tr> 
   <th>张三</th> 
   <th>30</th> 
   <th>北京</th> 
  </tr> 
 
  <tr> 
   <th>李四</th> 
   <th>31</th> 
   <th>北京</th> 
  </tr> 
 
  <tr> 
   <th>王五</th> 
   <th>28</th> 
   <th>北京</th> 
  </tr> 
 
  <tr> 
   <th>赵六</th> 
   <th>22</th> 
   <th>北京</th> 
  </tr> 
 
  <tr> 
   <th>周七</th> 
   <th>26</th> 
   <th>北京</th> 
  </tr> 
 
  <tr> 
   <th>孙八</th> 
   <th>33</th> 
   <th>北京</th> 
  </tr> 
 </table> 
 </body> 
</html> 
 
15)页面展现效果 
<html> 
 <head> 
 
 <style type=”text/css”> 
 table,table th{ 
  border:#0066ff 1px solid; 
  width:600px; 
 } 
 table th{ 
  padding:10px; 
 } 
 </style> 
 
 <script type=”text/javascript”> 
 function opendemo(page) 
 { 
  window.open(page,”_blank”,”height=500px,width=600px”); 
 } 
 </script> 
 </head> 
 
 <body> 
 <table> 
  <tr> 
   <th> 
   <input type=”button” value=”弹出table张开闭合页面效果”
onclick=”opendemo(‘table里的伸开闭合效果.html’)” /> 
   </th> 
 
   <th> 
   <input type=”button” value=”演示效果” onclick=”opendemo()”
/> 
   </th> 
 
   <th> 
   <input type=”button” value=”演示效果” onclick=”opendemo()”
/> 
   </th> 
  </tr> 
  <tr> 
   <th> 
   <input type=”button” value=”演示效果” onclick=”opendemo()”
/> 
   </th> 
 
   <th> 
   <input type=”button” value=”演示效果” onclick=”opendemo()”
/> 
   </th> 
 
   <th> 
   <input type=”button” value=”演示效果” onclick=”opendemo()”
/> 
   </th> 
  </tr> 
  <tr> 
   <th> 
   <input type=”button” value=”演示效果” onclick=”opendemo()”
/> 
   </th> 
   <th> 
   <input type=”button” value=”演示效果” onclick=”opendemo()”
/> 
   </th> 
 
   <th> 
   <input type=”button” value=”演示效果” onclick=”opendemo()”
/> 
   </th> 
  </tr> 
   
 </table> 
 </body> 
</html> 

<html>
 <head>

 <script type=”text/javascript” src=”doctool.js”></script>
 <script type=”text/javascript”>
 
 function change()
 {
  //var divNode=document.getElementsByTagName(“div”)[0];
  var divNode=byTag(“div”)[0];
  //alert(divNode.nodeName);
  /*
  //方法一:鼠标事件,单击字体调用本办法:打开闭合效果
  var b=true;
  if(b)
  {
   divNode.style.height=”8px”;
   divNode.style.overflow=”hidden”;
   b=false;
  }
  else
  {
   divNode.style.height=”8px”;
   divNode.style.overflow=”visible”;
   b=true;
  }
 

  //方法二:张开闭合效果
  if(divNode.className==”close”)
  {
   divNode.className=”open”;
  }
  else
  {
  
divNode.className=”close”;//因为一开头并没有设置overflow的值,所以默许是空的字符串,所以首先次会走else语句
  }
  */
 }
 

  //点击上层项目下层项目显示出来
  function list1()
  {
   var dtNode=event.srcElement;
   var dlNode=dtNode.parentNode;
   //alert(dtNode.nodeName+”…”+dlNode.nodeName);
  
   if(dlNode.className==”open”)
   {
    dlNode.className=”close”;
   }
   else
   {
    dlNode.className=”open”;
   }
  }
 
  //当点击三个门类,别的项目都要关闭,唯有一个项目开荒
  function list(dtNode)
  {
   var dlNode=dtNode.parentNode;//得到dt节点对象的父节点dl
   var dlNodes=byTag(“dl”);//获取具备的dl标签
   for(var x=0; x<dlNodes.length; x++)//循环获得的具有dl标签
   {
    //假使该节点和源节点相等,实行操作
    if(dlNodes[x]==dlNode)
    {
     if(dlNode.className==”open”)
     {
      dlNode.className=”close”;
     }
     else
     {
      dlNode.className=”open”;
     }           }
    //要是或不是源节点,则把overflow设置为hidden
    else
    
     dlNodes[x].className=”close”;
   }
  }
 /*
 获取事件源对象的两种艺术:
 1.通过event对象是srcElement属性
 2.将事件源对象通过this传入
 */
 </script>

 <style type=”text/css”>
 .open{
 
  overflow:visible;
 }
 .close{
 
  overflow:hidden;
 }

 dl{
  overflow:hidden;
  height:16px;
 }
 </style>
 </head>

 </body>
 <!–需要:通过点击达成三个开始展览闭合效果
 <div onclick=”change()”>
 哈哈,男生小编来啦<br/>
 哈哈,男生作者来啦<br/>
 哈哈,男人作者来啦<br/>
 哈哈,男士笔者来啦<br/>
 哈哈,男士笔者来啦<br/>
 哈哈,汉子小编来啦<br/>
 </div>
 –>

 <dl>
  <dt onclick=”list(this)”>上层项目上层项目</dt>
  <dd>下层项目下层项目</dd>
  <dd>下层项目下层项目</dd>
  <dd>下层项目下层项目</dd>
  <dd>下层项目下层项目</dd>
  <dd>下层项目下层项目</dd>
 </dl>

 <dl>
  <dt onclick=”list(this)”>上层项目上层项目</dt>
  <dd>下层项目下层项目</dd>
  <dd>下层项目下层项目</dd>
  <dd>下层项目下层项目</dd>
  <dd>下层项目下层项目</dd>
  <dd>下层项目下层项目</dd>
 </dl>

 
 <dl>
  <dt onclick=”list(this)”>上层项目上层项目</dt>
  <dd>下层项目下层项目</dd>
  <dd>下层项目下层项目</dd>
  <dd>下层项目下层项目</dd>
  <dd>下层项目下层项目</dd>
  <dd>下层项目下层项目</dd>
 </dl>

 </body>
</html>

14)
给表格里的成分实行排序
例子:
<html>
 <head>

 <link rel=”stylesheet” href=”tab.css” />
 <script type=”text/javascript” >
 
 var b=”true”;
 //将表格里的岁数进行排序
 function sorttab()
 {
 
  //1,获取表格中具有的行对象
  var tabNode=document.getElementsByTagName(“table”)[0];
  var trs=tabNode.rows;//获得表格中的行数
  //alert(trs.length);
 
  //2,定义临时容器,将表格中须要加入排序的行对象有时存款和储蓄
  var arr=new Array();//不时容器中存入的是援用
  for(var x=1; x<trs.length; x++)
  {
   arr[x-1]=trs[x];//从1角标发轫赋值给数组
  }
  //alert(arr.length);
  sort(arr);//给数组排序
  var
tbdNode=tabNode.childNodes[0];//获得tbody标签,因为它的率先个子标签是tr

  if(b)
  {
   for(var x=0; x<arr.length;x++)
   {
    //alert(arr[x].cells[0].innerText+”…”+arr[x].cells[1]);
    tbdNode.appendChild(arr[x]);//把行增加到tbody中
   }
   b=false;
  }

  else
  {
   for(var x=arr.length-1; x>=0;x–)
   {
    //alert(arr[x].cells[0].innerText+”…”+arr[x].cells[1]);
    tbdNode.appendChild(arr[x]);
   }
   b=true;
  }
 }
 
 function sort(arr)
 {
  for(var x=0; x<arr.length; x++)
  {
  
   for(var y=x+1; y<arr.length; y++)
   {
   
//parseInt把表格中的字符串文本转为数字格式,以数字格局张开相比较,不然它会奉公守法字符串的情势进行相比较:字符串中23<5得出不想要的结果
   
if(parseInt(arr[x].cells[1].innerText)>parseInt(arr[y].cells[1].innerText))
    {
     var temp=arr[x];
     arr[x]=arr[y];
     arr[y]=temp;
    }

   }
  }
 }
 
 </script>
 </head>

 <body>

 <table>
  <tr>
   <th>姓名</th>
   <th><a href=”javascript:void(0)”
onclick=”sorttab()”>年龄</a></th>
   <th>地址</th>
  </tr>

  <tr>
   <th>张三</th>
   <th>30</th>
   <th>北京</th>
  </tr>

  <tr>
   <th>李四</th>
   <th>31</th>
   <th>北京</th>
  </tr>

  <tr>
   <th>王五</th>
   <th>28</th>
   <th>北京</th>
  </tr>

  <tr>
   <th>赵六</th>
   <th>22</th>
   <th>北京</th>
  </tr>

  <tr>
   <th>周七</th>
   <th>26</th>
   <th>北京</th>
  </tr>

  <tr>
   <th>孙八</th>
   <th>33</th>
   <th>北京</th>
  </tr>
 </table>
 </body>
</html>

15)页面展现效果
<html>
 <head>

 <style type=”text/css”>
 table,table th{
  border:#0066ff 1px solid;
  width:600px;
 }
 table th{
  padding:10px;
 }
 </style>

 <script type=”text/javascript”>
 function opendemo(page)
 {
  window.open(page,”_blank”,”height=500px,width=600px”);
 }
 </script>
 </head>

 <body>
 <table>
  <tr>
   <th>
   <input type=”button” value=”弹出table打开闭合页面效果”
onclick=”opendemo(‘table里的进行闭合效果.html’)” />
   </th>

   <th>
   <input type=”button” value=”演示效果” onclick=”opendemo()” />
   </th>

   <th>
   <input type=”button” value=”演示效果” onclick=”opendemo()” />
   </th>
  </tr>
  <tr>
   <th>
   <input type=”button” value=”演示效果” onclick=”opendemo()” />
   </th>

   <th>
   <input type=”button” value=”演示效果” onclick=”opendemo()” />
   </th>

   <th>
   <input type=”button” value=”演示效果” onclick=”opendemo()” />
   </th>
  </tr>
  <tr>
   <th>
   <input type=”button” value=”演示效果” onclick=”opendemo()” />
   </th>
   <th>
   <input type=”button” value=”演示效果” onclick=”opendemo()” />
   </th>

   <th>
   <input type=”button” value=”演示效果” onclick=”opendemo()” />
   </th>
  </tr>
 
 </table>
 </body>
</html>

15)表格中央银行颜色间隔展现效果
用到八个新事件:
onmouseover:鼠标经过
onmouseout:鼠标移开
事例:表格中央银行颜色间隔呈现效果:

[html]
<html> 
 <head> 
  
 <link rel=”stylesheet” href=”tab.css” /> 
 <style type=”text/css” > 
 .one{ 
  background-color:#33ffcc; 
 } 
 .two{ 
  background-color:#ffff66; 
 } 
 .over{ 
  background-color:#00ffoo; 
 } 
 </style> 
 
 <script type=”text/javascript” > 
 
 //行颜色间隔显示 
 function trcolor() 
 { 
  var
tabNode=document.getElementsByTagName(“table”)[0];//得到table对象 
  var trs=tabNode.rows;//获得全部行对象 
  var name; 
  for(var x=1; x<trs.length; x++) 
  { 
   if(x%2==0) 
    trs[x].className=”one”; 
   else 
    trs[x].className=”two”; 
   //alert(trs[x].nodeName); 
 
  
trs[x].onmouseover=function()//给每二个行对象赋三个平地风波性质,onmouseover鼠标经过事件 
   { 
    name=this.className;//先把从前的className存款和储蓄起来 
     
    //alert(this.nodeName);//问题:为什么this换成trs[x]就报错呢兄弟? 
    this.className=”over”; 
   }; 
   trs[x].onmouseout=function()//onmouseout鼠标离开事件 
   { 
    this.className=name;//把原先的className赋给行对象 
   }; 
  } 
 } 
 //为何这里trcolor不用加括号,而事件那么些就要加括号吧? 
 window.onload=trcolor;//窗口加载的时候调用函数 
 </script> 
 </head> 
 
 <body> 
 
  
 <table> 
  <tr > 
   <th>姓名</th> 
   <th><a href=”javascript:void(0)”
onclick=”sorttab()”>年龄</a></th> 
   <th>地址</th> 
  </tr> 
 
  <tr > 
   <td>张三</td> 
   <td>30</td> 
   <td>北京</td> 
  </tr> 
 
  <tr> 
   <td>李四</td> 
   <td>31</td> 
   <td>北京</td> 
  </tr> 
 
  <tr> 
   <td>王五</td> 
   <td>28</td> 
   <td>北京</td> 
  </tr> 
 
  <tr> 
   <td>赵六</td> 
   <td>22</td> 
   <td>北京</td> 
  </tr> 
 
  <tr> 
   <td>周七</td> 
   <td>26</td> 
   <td>北京</td> 
  </tr> 
 
  <tr> 
   <td>孙八</td> 
   <td>33</td> 
   <td>北京</td> 
  </tr> 
 </table> 
 
 </body> 
</html> 
 
16)checked属性为true表示checkbox被选中 
<html> 
 <head> 
  
 <script type=”text/javascript” > 
  
 function getSum() 
 { 
  var items=document.getElementsByName(“item”); 
  var spanNode=document.getElementById(“sum”); 
  //alert(“kkk”); 
  var sum=0; 
  for(var x=0; x<items.length; x++) 
  { 
   if(items[x].checked)//checked属性为true表示checkbox被选中 
    sum+=parseInt(items[x].value); 
  } 
   
  //spanNode.innerText=sum+”元”; 
  var str=sum+”元”; 
  spanNode.innerHTML=str.fontsize(7); 
 } 
 
 function checkAll(allNode) 
 { 
  //var allNode=document.getElementsByName(“all”)[0]; 
   
  var itemsNode=document.getElementsByName(“item”); 
  for(var x=0; x<itemsNode.length; x++) 
  { 
   if(allNode.checked) 
    itemsNode[x].checked=allNode.checked; 
  } //<span id=”sum”></span>   
 } 
 </script> 
 </head> 
 
 <body> 
 
 <input type=”checkbox” name=”all”
onclick=”checkAll(this)”/>全选<br/> 
 
 <input type=”checkbox” name=”item” value=”三千”/>台式机计算机:
三千元<br/> 
 <input type=”checkbox” name=”item” value=”两千”/>台式机Computer:
三千元<br/> 
 <input type=”checkbox” name=”item” value=”三千”/>台式机Computer:
3000元<br/> 
 <input type=”checkbox” name=”item” value=”两千”/>台式机计算机:
3000元<br/> 
 <input type=”checkbox” name=”item” value=”3000″/>台式机Computer:
三千元<br/> 
 <input type=”checkbox” name=”item” value=”三千”/>台式机Computer:
2000元<br/> 
 <input type=”checkbox” name=”item” value=”两千”/>笔记本计算机:
2000元<br/> 
 
 <input type=”checkbox” name=”all”
onclick=”checkAll(this)”/>全选<br/> 
 
 <input type=”button”  value=”获取总金额” onclick=”getSum()
“/><span
id=”sum”></span>//这里用<span>标签而不用用div标签是因为span不会换行,而div标签会在下一行展现 
   
 </body> 
</html> 
 
16)select标签的言传身教例子 
<html> 
 <head> 
 <style type=”text/css” > 
 #cssid{ 
  height:100px; 
  width:300px; 
  background-color:#ffcc00; 
 } 
 #textid{ 
  background-color:#cccccc; 
  width:300px; 
 } 
 </style> 
 
 <script type=”text/javascript” > 
 function change() 
 { 
  var selNode=document.getElementById(“selid”); 
  //options()获得select对象的option对象总的数量 
  //selNode.selectedIndex获得选中选项位于select中的地方 
  var value=selNode.options[selNode.selectedIndex].value; 
 
  var divNode1=document.getElementById(“cssid”); 
  var divNode2=document.getElementById(“textid”); 
 
  divNode1.style.textTransform=value; 
  divNode2.innerText=”text-transform : “+value+”;”; 
 } 
 </script> 
  
 </head> 
 
 <body> 
   
 <div id=”cssid”> 
  Good good study,Day day up! 
 </div> 
 <p></p>  
 
 <select id=”selid” onchange=”change()”> 
  <option value=”none”>–text-transform–</option> 
  <option value=”capitalize”>首字母大写</option> 
  <option value=”uppercase”>全体字母大写</option> 
  <option value=”lowercase”>全体字母小写</option>  
 </select> 
 <p></p> 
 <div id=”textid”> 
  text-transform : none; 
 </div> 
 </body> 
</html> 

<html>
 <head>
 
 <link rel=”stylesheet” href=”tab.css” />
 <style type=”text/css” >
 .one{
  background-color:#33ffcc;
 }
 .two{
  background-color:#ffff66;
 }
 .over{
  background-color:#00ffoo;
 }
 </style>

 <script type=”text/javascript” >

 //行颜色间隔显示
 function trcolor()
 {
  var
tabNode=document.getElementsByTagName(“table”)[0];//得到table对象
  var trs=tabNode.rows;//获得全数行对象
  var name;
  for(var x=1; x<trs.length; x++)
  {
   if(x%2==0)
    trs[x].className=”one”;
   else
    trs[x].className=”two”;
   //alert(trs[x].nodeName);

  
trs[x].onmouseover=function()//给每二个行对象赋一个风浪性质,onmouseover鼠标经过事件
   {
    name=this.className;//先把原先的className存款和储蓄起来
   
    //alert(this.nodeName);//问题:为什么this换成trs[x]就报错呢兄弟?
    this.className=”over”;
   };
   trs[x].onmouseout=function()//onmouseout鼠标离开事件
   {
    this.className=name;//把原先的className赋给行对象
   };
  }
 }
 //为啥这里trcolor不用加括号,而事件那贰个将要加括号吧?
 window.onload=trcolor;//窗口加载的时候调用函数
 </script>
 </head>

 <body>

 
 <table>
  <tr >
   <th>姓名</th>
   <th><a href=”javascript:void(0)”
onclick=”sorttab()”>年龄</a></th>
   <th>地址</th>
  </tr>

  <tr >
   <td>张三</td>
   <td>30</td>
   <td>北京</td>
  </tr>

  <tr>
   <td>李四</td>
   <td>31</td>
   <td>北京</td>
  </tr>

  <tr>
   <td>王五</td>
   <td>28</td>
   <td>北京</td>
  </tr>

  <tr>
   <td>赵六</td>
   <td>22</td>
   <td>北京</td>
  </tr>

  <tr>
   <td>周七</td>
   <td>26</td>
   <td>北京</td>
  </tr>

  <tr>
   <td>孙八</td>
   <td>33</td>
   <td>北京</td>
  </tr>
 </table>

 </body>
</html>

16)checked属性为true表示checkbox被选中
<html>
 <head>
 
 <script type=”text/javascript” >
 
 function getSum()
 {
  var items=document.getElementsByName(“item”);
  var spanNode=document.getElementById(“sum”);
  //alert(“kkk”);
  var sum=0;
  for(var x=0; x<items.length; x++)
  {
   if(items[x].checked)//checked属性为true表示checkbox被选中
    sum+=parseInt(items[x].value);
  }
 
  //spanNode.innerText=sum+”元”;
  var str=sum+”元”;
  spanNode.innerHTML=str.fontsize(7);
 }

 function checkAll(allNode)
 {
  //var allNode=document.getElementsByName(“all”)[0];
 
  var itemsNode=document.getElementsByName(“item”);
  for(var x=0; x<itemsNode.length; x++)
  {
   if(allNode.checked)
    itemsNode[x].checked=allNode.checked;
  } //<span id=”sum”></span> 
 }
 </script>
 </head>

 <body>

 <input type=”checkbox” name=”all”
onclick=”checkAll(this)”/>全选<br/>

 <input type=”checkbox” name=”item” value=”两千”/>台式机Computer:
三千元<br/>
 <input type=”checkbox” name=”item” value=”两千”/>台式机Computer:
两千元<br/>
 <input type=”checkbox” name=”item” value=”两千”/>台式机Computer:
两千元<br/>
 <input type=”checkbox” name=”item” value=”三千”/>台式机计算机:
2000元<br/>
 <input type=”checkbox” name=”item” value=”两千”/>台式机Computer:
3000元<br/>
 <input type=”checkbox” name=”item” value=”3000″/>台式机计算机:
2000元<br/>
 <input type=”checkbox” name=”item” value=”2000″/>台式机Computer:
3000元<br/>

 <input type=”checkbox” name=”all”
onclick=”checkAll(this)”/>全选<br/>

 <input type=”button”  value=”获取总金额” onclick=”getSum()
“/><span
id=”sum”></span>//这里用<span>标签而不用用div标签是因为span不会换行,而div标签会在下一行展现
 
 </body>
</html>

16)select标签的亲自去做例子
<html>
 <head>
 <style type=”text/css” >
 #cssid{
  height:100px;
  width:300px;
  background-color:#ffcc00;
 }
 #textid{
  background-color:#cccccc;
  width:300px;
 }
 </style>

 <script type=”text/javascript” >
 function change()
 {
  var selNode=document.getElementById(“selid”);
  //options()获得select对象的option对象总的数量
  //selNode.selectedIndex获得选中选项位于select中的地方
  var value=selNode.options[selNode.selectedIndex].value;

  var divNode1=document.getElementById(“cssid”);
  var divNode2=document.getElementById(“textid”);

  divNode1.style.textTransform=value;
  divNode2.innerText=”text-transform : “+value+”;”;
 }
 </script>
 
 </head>

 <body>
 
 <div id=”cssid”>
  Good good study,Day day up!
 </div>
 <p></p>

 <select id=”selid” onchange=”change()”>
  <option value=”none”>–text-transform–</option>
  <option value=”capitalize”>首字母大写</option>
  <option value=”uppercase”>全体字母大写</option>
  <option value=”lowercase”>全部字母小写</option>
 </select>
 <p></p>
 <div id=”textid”>
  text-transform : none;
 </div>
 </body>
</html>

17)实例计算
DOM编程:
 1,定义分界面
  通过html张开标签将数据举办包装
 2,定义一些静态的样式
  通过css.
 3,必要动态的成就和用户的互相
  a,先明确事件源
  b,显明事件并将事件注册到事件源上.
  c,通过javascript的函数对象事件进展管理.
  d,在管理过程供给料定被管理的区域.

17.1)创制table标签的实例
思路:
 1.创建贰个table节点.document.createElement(“table”);
 2.因此table节点的insertRow()方法创造表格的行对象并增添到rows集结中
 3.通过行对象的insertCell()方法创设单元格对象,并增多到cells会集中
 4,给单元格加多数据.
  a,创设三个节点如文本节点,document.createTextNode(“文本内容”);
  通过单元格对象的appendChile方法将文件节点加多到单元格的尾巴部分
  b,能够通过单元格的innerHTML,加多单元格中的成分.
  tdNode.innerHTML=”<img src=’1.jpg’ alt=’图片表明音信’/>”;
 5,建设构造好表格节点,增添到DOM树中,也便是页面包车型客车钦命地点上.

17.2)怎么样删除表格中的行依旧列.
思路:
 1,删除行:获取表格对象,通过表格对象中的deleTow方法,将点名的行索引传入到deleteRow方法中
 2,删除列:表格未有直接删除列的秘籍,要因而删除每一行中钦赐的单元格来变成删除列的动作.
  获取全体行对象,并拓展遍历,通过行对象的deleteCell方法将点名单元格删除.

17.3)对表格中的数据开始展览排序.
思路:
 1,获取表格中的全数行对象
 2,定义有的时候存款和储蓄,将需求举办排序的行对象存入到数组中.
 3,对数组进行排序,通过比较每二个行对象中钦定的单元格中的数据,假使是整数需求经过parseInt调换
 4,将排序后的数组通过遍历,将每叁个行对象重新扩展加回表格,通过tbody节点的appendChild方法
 5,其实排序正是将每一种行对象的援用去除

17.4)表格的行颜色间隔显示,并在鼠标钦赐的行上高亮突显.
思路:
 1,获取具备的行对象,将索要间隔颜色显示的行对象开始展览动态的className属性的钦点,那么前提是:先定义类选择器
 2,为了完结高亮,供给用到五个事件:onmouseover(鼠标进入)和onmouseout(鼠标移出);
 3,为了艺术可以在遍历对象时,将每一个行对象都进行七个事件性质的内定,并因此佚名函数完结事件的拍卖
 4,高亮的原理便是将鼠标进入时钦点颜色更改,改造前先记下住原先行对象的样式
  那样在鼠标离开时,能够将样式还原

17.5)完结叁个与css手册中一样示例
 通过下拉菜单选取先钦赐样式属性的应用效果.

17.6)表单中的组件.
 单选框,复选框
 那多少个零件都有三个属性来代表其当选与否的气象:checked

 完毕贰个对复选框,实行全选的操作.
 思路:将全选那多少个复选框的checked状态赋给全部的别样checkbox就可以
 <input type=”checkbox” name=”all” onlick=”checkAll” />全选
 <input type=”checkbox” name=”item”  />
 <input type=”checkbox” name=”item”  />
 <input type=”checkbox” name=”item”  />
 <input type=”checkbox” name=”all” onlick=”checkAll” />

 <script type=”text/javascript”>
 function checkAll(index)
 {
  var node=document.getElementsByName(“all”)[index];
  var items=document.getElementsByName(“item”);

  for(var x=0; x<items.length; x++)
  {
   items[x].checked=node.checked;
  }
 }
 </script>

17.7)获取鼠标的坐标,让钦点区域随鼠标移动
 获取鼠标坐标:event.x event.y

 这里必要选用的平地风波:body对象的onmouseover事件.
 还亟需采取一个css样式,直接定义页面,所以区域都在同等档期的顺序.
 为了对某一区域开始展览一定,将该区域分别到另一个档期的顺序,用到css中position属性
获取鼠标的坐标,让钦赐区域随鼠标移动代码如下:

[html]
<html> 
 <head> 
  
 <style type=”text/css”> 
 #bodyid{ 
  border:0066ff 1px solid; 
  height:600px; 
  width:800px; 
 } 
 
 </style> 
 
 <script type=”text/javascript”> 
 //为了对某一区域开始展览固化,将该区域分别到另贰个等级次序,用到css中position属性position:absolute 
 window.onload=function() 
 { 
   
  document.body.onmousemove=function() 
  { //alert(“1”); 
   var adNode=document.getElementById(“ad”); 
   adNode.style.left=event.x-12; 
   adNode.style.top=event.y-10; 
  } 
   
 } 
 /* 
 问题: 
  
 moved方法不写括号老师说这么是把moved指向的靶子赋给window.onload 
 写了括号是把moved方法的回到值赋给window.onload 
  
 为啥两种情势出来的结果都以一模二样的吗?二种写法对程序运营,有怎么着差别呢? 
 function moved() 
 { 
   
  document.body.onmousemove=function() 
  { //alert(“1”); 
   var adNode=document.getElementById(“ad”); 
   adNode.style.left=event.x-12; 
   adNode.style.top=event.y-10; 
  } 
   
 } 
 window.onload=moved; 
 
 window.onload=moved(); 
 */ 
 function closead() 
 { 
  var adNode=document.getElementById(“ad”); 
 
adNode.style.display=”none”;//display=”none”表示div标签里面不显得此外东西 
 } 
 </script> 
 </head> 
 
 <body> 
 
 <div id=”ad” style=”position:absolute; left:0;top:0″
onclick=”closead()”> 
 <a href=”” target=”_blank”> 
  
 <img src=”1.jpg” height=”100px” width=”150px”></a> 
 </div> 
 
 <div id=”bodyid”> 
 body区域 
 </div> 
 </body> 
</html> 

<html>
 <head>
 
 <style type=”text/css”>
 #bodyid{
  border:0066ff 1px solid;
  height:600px;
  width:800px;
 }

 </style>

 <script type=”text/javascript”>
 //为了对某一区域开始展览定位,将该区域分别到另二个等级次序,用到css中position属性position:absolute
 window.onload=function()
 {
 
  document.body.onmousemove=function()
  { //alert(“1”);
   var adNode=document.getElementById(“ad”);
   adNode.style.left=event.x-12;
   adNode.style.top=event.y-10;
  }
 
 }
 /*
 问题:
 
 moved方法不写括号老师说这么是把moved指向的指标赋给window.onload
 写了括号是把moved方法的回来值赋给window.onload
 
 为何三种方法出来的结果都以一律的呢?二种写法对程序运转,有怎样差异吗?
 function moved()
 {
 
  document.body.onmousemove=function()
  { //alert(“1”);
   var adNode=document.getElementById(“ad”);
   adNode.style.left=event.x-12;
   adNode.style.top=event.y-10;
  }
 
 }
 window.onload=moved;

 window.onload=moved();
 */
 function closead()
 {
  var adNode=document.getElementById(“ad”);
 
adNode.style.display=”none”;//display=”none”表示div标签里面不显示其余事物
 }
 </script>
 </head>

 <body>

 <div id=”ad” style=”position:absolute; left:0;top:0″
onclick=”closead()”>
 <a href=”” target=”_blank”>
 
 <img src=”1.jpg” height=”100px” width=”150px”></a>
 </div>

 <div id=”bodyid”>
 body区域
 </div>
 </body>
</html>

 

 

Html内容 1.1)
Html正是超文本标识语言的简写,是最基础的网页语言
Html是由此标签来定义的言语,代码都以由标签所构成
Html代码不用区分大小…

网站地图xml地图