zoukankan      html  css  js  c++  java

  • 吴裕雄--天生自然WEB前端开发实战--DOM编程

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
</body>
</html>
    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>SetTimeout方法</title>
<script>
window.onload=function(){
    dispTime=document.getElementById("dispTime")
    dispTime.value="hello";
    interval=1000;            //设定时间1秒

    function change()  {
        var today = new Date();        //获取当前时间
        dispTime.innerHTML = two(today.getHours()) + ":" 
        dispTime.innerHTML+= two(today.getMinutes()) + ":" 
        dispTime.innerHTML+= two(today.getSeconds());
        timerID=window.setTimeout(change,interval);
    }
    function two(x){
        return(x>=10?x:"0"+x);
    }
    change()
}
</script>
</head>

<body>
<label id="dispTime"></label>
</body>
</html>
    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>setInterval方法</title>
<script>
window.onload=function(){
   imgCount=0;        //当前图片计数器
   myImg=document.getElementById("myImg");
   myBox=document.getElementById("box");
   myNumberBox=document.getElementById("number");
   
   myNumberLi=myNumberBox.getElementsByTagName("li");
   for(i=0;i<myNumberLi.length;i++){
     myNumberLi[i].index=i;
     myNumberLi[i].onclick=function(){
        for(i=0;i<myNumberLi.length;i++){
            myNumberLi[i].classList.remove("active");
        }
        
        this.classList.add("active");
        imgCount=this.innerHTML-1;
        myImg.src="images/"+imgCount+".jpg";
     }
   }
   
   myBox.onmouseover=function(){
    clearInterval(timeOUT);
   }
   myBox.onmouseout=function(){
    timeOUT=setInterval(changeImg,1000);   
   }
   function changeImg(){
       imgCount++;
       imgCount=imgCount%5;
       myImg.src="images/"+imgCount+".jpg";
       for(i=0;i<myNumberLi.length;i++){
            myNumberLi[i].classList.remove("active");
        }
       myNumberLi[imgCount].classList.add("active");
   }
   
  timeOUT=setInterval(changeImg,1000);
}
</script>
<style>
 *{ margin:0px; padding:0px;}
 #box{ width:520px; height:280px; border:1px solid red; margin:100px auto;
 position:relative;}
 #box ul{ list-style:none; }
 #number{ position:absolute; right:10px; bottom:10px; }
 #number li{ width:20px; height:20px;  border-radius:50%; text-align:center; line-height:20px; float:left; margin:5px; background:white}
 #number li:hover{ color:white; background:red;}
 #box ul li.active{ background:#F30; }
</style>

</head>

<body>
<div id="box">
 <ul>
   <li><img src="images/0.jpg" id="myImg"></li>
 </ul>
 <ul id="number">
   <li class="active">1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
 </ul>
</div>
</body>
</html>
    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>SetTimeout方法</title>
<script>
window.onload=function(){
  window.open("http://www.whpu.edu.cn", "", " toolbar=no,menubao=no")
}
</script>
</head>

<body>
    Hello World!
</body>
</html>
    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>SetTimeout方法</title>
<script>
window.onunload=function(){
  alert("欢迎下次光临，再见！");
}
</script>
</head>

<body>
    Hello World!
</body>
</html>
    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>document对象属性</title>
<style>
body{ background-color:#CF9;}
</style>
<script>
window.onload=function(){
  myDisp=document.getElementById("disp");
  myDisp.innerHTML="当前文档的标题："+document.title+"<br>";  
  myDisp.innerHTML+="当前文档的最后修改日期："+document.lastModified+"<br>"; 
  myDisp.innerHTML+="当前文档中包含"+document.links.length+"个超级链接"+"<br>";   //输出超级链接的个数
  myDisp.innerHTML+="当前文档中包含"+document.images.length+"个图像"+"<br>";   
//输出图像的个数
myDisp.innerHTML+="当前文档中包含"+document.forms.length+"个表单"+"<br>";
//输出表单的个数 
}
</script>
</head>
<body>
 <a href="http://www.whpu.edu.cn">超级链接1</A>  <!--形成超级链接--> 
 <a href="http://www.baidu.com">超级链接2</A> 
 <img src="images/0.jpg" height="100" width="120" />  <!--链接图像-->
 <img src="images/1.jpg" height="100" width="120" />  <!--链接图像--> 
 <img src="images/2.jpg" height="100" width="120" />  <!--链接图像-->  
 <form action ="login.php"> 
  <input type="text" id="username" /> 
 </form> 
 <div id="disp"></div>
</body>
</html>
    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>getElementById方法</title>
<script> 
window.onload=function(){
  var myId=document.getElementById("myId"); 
  alert("获得的元素标记是"+myId.nodeName); 
}

</script> 
</head>

<body>
 <input id="myId" name='myId' type="text"/> 
 <div id='myId'> 
  getElementById方法测试
 </div> 
</body>
</html>
    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>getElementsByName方法</title>
<script> 
window.onload=function(){
  var myName=document.getElementsByName("abc");
  var myDisp=document.getElementById("disp");
  myDisp.innerHTML="选中的复选个数是："+myName.length+"<br>";
  myDisp.innerHTML+="第2个复选框的提交的值是:"+myName[1].value+"<br>";
  myDisp.innerHTML+="第3个复选框的选中状态是:"+myName[2].checked+"<br>";
}
</script> 
</head>

<body>
 <form action="reg.php" method="post">
   用户名：<input type="text" name="username"><br>
   爱好：
    <input type="checkbox" name="abc" value="music">音乐
    <input type="checkbox" name="abc" value="football">足球
    <input type="checkbox" name="abc" value="badminton" checked>羽毛球
    <input type="checkbox" name="abc" value="basketball">篮球
 </form>
 <div id="disp"></div>
</body>
</html>
    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>getElementsByTagName方法</title>
<script> 
window.onload=function(){
    // 获得所有tagName是body的元素（当然每个页面只有一个） 
    var myDocumentElements=document.getElementsByTagName("body"); 
    var myBody=myDocumentElements.item(0); 
    // 获得body子元素种的所有P元素 
    var myBodyElements=myBody.getElementsByTagName("p"); 
    // 获得第二个P元素 
    var myP=myBodyElements.item(1);
    var myDisp=document.getElementById("disp");
     //显示这个元素的文本 
    myDisp.innerHTML="显示第二个P元素的内容是："+myP.firstChild.nodeValue;
}
</script> 
</head>
<body>
 <p>hello</p> 
 <p>world</p> 
 <div id="disp"></div>
</body>
</html>
    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>appendChild方法</title>
<script> 
window.onload=function(){
  var newNode=document.createElement("li") 
  var newText=document.createTextNode("羽毛球") 
  newNode.appendChild(newText) 
  document.getElementById("myNode").appendChild(newNode) 
}
</script> 
</head>
<body>
  <ul id="myNode">
    <li>音乐</li>
    <li>足球</li>
    <li>篮球</li>
  </ul> 
</body>
</html>
    document.write("Javascript寮曠敤鏂瑰紡锛�");
    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>removeChild方法</title>
<script> 
window.onload=function(){
  var myUlNode=document.getElementById("myNode");    //获取<ul>对象
  var myLiNode=myUlNode.getElementsByTagName("li");    //获取<ul>对象下的所有<li>对象
  var childNode=myLiNode[1];                        //定义文字"足球"的<li>对象
  var removedNode=myUlNode.removeChild(childNode)     //删除<ul>下指定的<li>对象
}
</script> 
</head>
<body>
  <ul id="myNode">
    <li>音乐</li>
    <li>足球</li>
    <li>篮球</li>
  </ul> 
</body>
</html>
    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>cloneNode方法</title>
<script> 
window.onload=function(){
  var youUlNode=document.getElementById("youNode");    //获取<ul>对象
  var myUlNode=document.getElementById("myNode");    //获取<ul>对象

  var youLiNode=youUlNode.getElementsByTagName("li");//获取<ul>对象下的所有<li>对象
  var lastNodeNumber=youLiNode.length-1;
  var newNode=youLiNode[lastNodeNumber].cloneNode(true);            //复制某一个<li>对象
  myUlNode.appendChild(newNode);                     //添加<li>对象到指定<ul>对象中
}
</script> 
</head>
<body>
  <ul id="youNode">你的爱好：
    <li>音乐</li>
    <li>足球</li>
    <li>羽毛球</li>
  </ul> 
  <ul id="myNode">我的爱好：
    <li>篮球</li>
    <li>游泳</li>
  </ul>
</body>
</html>
    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>replaceChild方法</title>
<script> 
window.onload=function(){
  var myUlNode=document.getElementById("myNode");    //获取<ul>对象
  var myLiNode=myUlNode.getElementsByTagName("li"); //获取<ul>对象下的所有<li>对象
  var lastNodeNumber=myLiNode.length-1;                //设定指向最后一个<li>元素下标值
  var oldNode=myLiNode[lastNodeNumber];                //获取最后一个<li>元素
  var newNode=document.createElement("li");         //创建一个新<li>元素
  var text=document.createTextNode("羽毛球");         //创建元素文本
  newNode.appendChild(text);                         //添加元素文本到新的<li>元素
  myUlNode.replaceChild(newNode,oldNode);            //用新<li>元素替换<ul>中指定的元素
}
</script> 
</head>
<body>
  <ul id="myNode">我的爱好：
    <li>音乐</li>
    <li>足球</li>
    <li>游泳</li>
  </ul>
</body>
</html>
    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>insertBefore方法</title>
<script> 
window.onload=function(){
  var myUlNode=document.getElementById("myNode");    //获取<ul>对象
  var myLiNode=myUlNode.getElementsByTagName("li"); //获取<ul>对象下的所有<li>对象
  var lastNodeNumber=myLiNode.length-1;                //设定指向最后一个<li>元素下标值
  var oldNode=myLiNode[lastNodeNumber];                //获取最后一个<li>元素
  var newNode=document.createElement("li");         //创建一个新<li>元素
  var text=document.createTextNode("羽毛球");         //创建元素文本
  newNode.appendChild(text);                         //添加元素文本到新的<li>元素
  myUlNode.insertBefore(newNode,oldNode);            //用新<li>元素替换<ul>中指定的元素
}
</script> 
</head>
<body>
  <ul id="myNode">我的爱好：
    <li>音乐</li>
    <li>足球</li>
    <li>游泳</li>
  </ul>
</body>
</html>
    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>childNodes属性</title>
<script type="text/javascript">
  window.onload=function(){
    elementSum=0;            //元素结点计数器
    textSum=0;                //文本结点计数器
    var oUl=document.getElementById("ul");
    var span1=document.getElementById("span1");
    var span2=document.getElementById("span2");
    var span3=document.getElementById("span3");
    for(var i=0;i<oUl.childNodes.length;i++){
        span2.innerHTML+=oUl.childNodes[i].nodeType+" - ";
        switch(oUl.childNodes[i].nodeType){
         case 1:elementSum++;
                 break;
         case 3: textSum++
        }
    }
    span1.innerHTML=oUl.childNodes.length;
    span2.innerHTML=elementSum;
    span3.innerHTML=textSum;
  }
</script>
</head>
<body>
  <ul id="ul">
    <li>音乐</li>
    <li>足球</li> 
    羽毛球
  </ul>
  chileNodes显示的节点数：<span id="span1"></span><br>
  其中：<br>
   元素类型的节点数是：  <span id="span2"></span><br>
   文本类型的节点数是：  <span id="span3"></span>
  <br/>
</body>
</html>
    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>结点访问属性</title>
<script type="text/javascript">
  window.onload=function(){
    var oUl=document.getElementById("action");
    var display=document.getElementById("display");
    display.innerHTML="UL的第一个子元素结点内容: "+oUl.firstChild.innerHTML;
    display.innerHTML+="<br>UL的最后一个子元素结点内容: "+oUl.lastChild.innerHTML;
    //display.innerHTML+="<br>父元素结点内容: "+oUl.parentChild.nodeName;
    display.innerHTML+="<br>UL的第一个子元素的兄弟元素结点内容： "
                +oUl.firstChild.nextSibling.innerHTML;
    display.innerHTML+="<br>UL的最后一个子元素的前一个兄弟元素结点内容： "+oUl.lastChild.previousSibling.innerHTML;
    display.innerHTML+="<br>UL的父元素标记是："+oUl.parentNode.nodeName;

  }
</script>
</head>
<body>
<div id="main">
  <ul id="action"><li>音乐</li><li>足球</li><li>羽毛球</li><li>游泳</li></ul>
  <div id="display"></div>
</div>
</body>
</html>
    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>nodeName属性</title>
<script type="text/javascript">
  window.onload=function(){
    var myDiv=document.getElementById("main");
    var display=document.getElementById("display");
    display.innerHTML="ID属性值是Box的标记名为："+myDiv.nodeName;

  }
</script>
</head>
<body>
<div id="main"></div>
<span id="display"></span>
</body>
</html>
    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>元素创建</title>
<script type="text/javascript">
  window.onload=function(){
   //获得body的引用 
    var mybody=document.getElementsByTagName("body").item(0); 
    //创建一个<table></table>元素 
    mytable = document.createElement("TABLE"); 
    //创建一个<TBODY></TBODY>元素 
    mytablebody = document.createElement("TBODY"); 
    // 创建行列 
    for(j=0;j<3;j++) { 
        //创建一个<TR></TR>元素 
        mycurrent_row=document.createElement("TR"); 
        for(i=0;i<3;i++) { 
        //创建一个<TD></TD>元素 
        mycurrent_cell=document.createElement("TD"); 
        //创建一个文本元素 
        currenttext=document.createTextNode("本单元格行是： "+j+", 列是 "+i); 
        //把新的文本元素添加到单元TD上 
        mycurrent_cell.appendChild(currenttext); 
        // appends the cell TD into the row TR 
        //把单元TD添加到行TR上 
        mycurrent_row.appendChild(mycurrent_cell); 
        } 
        //把行TR添加到TBODY上 
        mytablebody.appendChild(mycurrent_row); 
    } 
    // 把 TBODY 添加到 TABLE 
    mytable.appendChild(mytablebody); 
    // 把 TABLE 添加到 BODY 
    mybody.appendChild(mytable); 
    // 把mytable的border 属性设置为2 
    mytable.setAttribute("border","2"); 
  }
</script>
</head>
<body>
<div id="main"></div>
<span id="display"></span>
</body>
</html>
    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>form对象属性、事件、方法</title>
<script type="text/javascript">
  window.onload=function(){
   var myBtn=document.getElementById("btn");
   myBtn.onclick=function(){
     newWin=window.open("","","title=hello,height=300,width=350") 
      //通过表单的length属性，输出表单form1内嵌的表单元素的个数 
     newWin.document.write("文档中共包含"+document.form1.length+"个元素,分别是：<P>");   //再通过length属性控制循环输出各个元素的名称 
     newWin.document.write("<UL>") 
     for(i=0;i<document.form1.length;i++){
       newWin.document.write("<LI>"+document.form1.elements[i].name+"</LI>"); 
     }
     newWin.document.write("<UL>") 
    }
  }
</script>
</head>
<body>
<form  name="form1" action ="login.aspx"> 
  文本框1:<input name ="lbCurrent" /><P> 
  文本框2:<input name ="lbNext" /><P> 
  <H3>单击按钮显示表单中的元素信息:</H3> 
  请单击按钮<input type="button"  id="btn" name="lyd" value="显示表单中的元素名称" /> 
</form> 
</body>
</html>
    <!doctype html><html><head><meta charset="utf-8"><title>js1</title>
<script>
window.onload=function(){
    var myColor=new Array("red","green","blue","pink","yellow","grey");
    for(var i=1;i<6;i++)
    {
        document.write("<h"+i+">hello"+i+"</h"+i+">");    
    }
    for(var i=0;i<6;i++){
        document.write("<font size='"+(i+1)+"' color='"+myColor[i]+"'>hello world!</font><br>"    );
    }
}
</script>
</head><body></body><ml>
    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>元素创建</title>
<script type="text/javascript">
  window.onload=function(){
   //获得body的引用 
    var mybody=document.getElementsByTagName("body").item(0); 
    //创建一个<table></table>元素 
    mytable = document.createElement("TABLE"); 
    //创建一个<TBODY></TBODY>元素 
    mytablebody = document.createElement("TBODY"); 
    // 创建行列 
    for(j=0;j<3;j++) { 
        //创建一个<TR></TR>元素 
        mycurrent_row=document.createElement("TR"); 
        for(i=0;i<3;i++) { 
        //创建一个<TD></TD>元素 
        mycurrent_cell=document.createElement("TD"); 
        //创建一个文本元素 
        currenttext=document.createTextNode("<input type='text'>本单元格行是： "+j+", 列是 "+i); 
        //把新的文本元素添加到单元TD上
        var input = document.createElement('input');
        input.type = 'text';
        input.value = '要设置的value';
        mycurrent_cell.appendChild(input); 
        mycurrent_cell.appendChild(currenttext); 
        // appends the cell TD into the row TR 
        //把单元TD添加到行TR上 
        mycurrent_row.appendChild(mycurrent_cell); 
        } 
        //把行TR添加到TBODY上 
        mytablebody.appendChild(mycurrent_row); 
    } 
    // 把 TBODY 添加到 TABLE 
    mytable.appendChild(mytablebody); 
    // 把 TABLE 添加到 BODY 
    mybody.appendChild(mytable); 
    // 把mytable的border 属性设置为2 
    mytable.setAttribute("border","2"); 
  }
</script>
</head>
<body>
<div id="main"></div>
<span id="display"></span>
</body>
</html>
    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>订单处理</title>
<script>
window.onload=function(){
    var myTab=document.getElementById("myTable");
    var mySelect=document.getElementsByName("select1");
    var addBtn=document.getElementById("addBtn");
    var delBtn=document.getElementById("delBtn");
    
    addBtn.onclick=function(){
     var row = document.createElement('tr');         //创建行  
       
     var idCell = document.createElement('td');     //创建第一列书名  
     idCell.innerHTML = "<input type='text' value='西游4记' name='book0'>"; //填充数据  
     row.appendChild(idCell); //加入行  ，下面类似  
       
     var nameCell = document.createElement('td');    //创建第二列单价  
     nameCell.innerHTML = "<input type='text' value='20.0' name='value0'>";  
     row.appendChild(nameCell);  
       
     var jobCell = document.createElement('td');    //创建第三列  
     jobCell.innerHTML ="<input type='checkbox' name='select1'>";  
     row.appendChild(jobCell);  
     
     myTab.appendChild(row);
    }
    delBtn.onclick=function(){
        count=mySelect.length-1;                    //从后向前判断元素，删除元素 
        for(i=count;i>-1;i--){
          if(mySelect.item(i).checked){
              myTab.deleteRow(i+1);
          }
        }
    }
        
}
</script>
</head>

<body>
<form action="#" method="post">
<table width="500" border="1" id="myTable">
  <tr>
    <td>书名</td>
    <td>单价</td>
    <td>选中</td>
  </tr>
  <tr>
    <td><input type="text" value="西游1记" name="book0"></td>
    <td><input type="text" value="38.0" name="value0"></td>
    <td><input type="checkbox" name="select1" ></td>
  </tr>
  <tr>
    <td><input type="text" value="西游2记" name="book0"></td>
    <td><input type="text" value="38.0" name="value0"></td>
    <td><input type="checkbox" name="select1" ></td>
  </tr>
  <tr>
    <td><input type="text" value="西游3记" name="book0"></td>
    <td><input type="text" value="38.0" name="value0"></td>
    <td><input type="checkbox" name="select1" ></td>
  </tr>
</table><br>
    <input type="button" id="addBtn" value="增加一行">
    <input type="button" id="delBtn" value="删除选中行">
</form>
</body>
</html>
  • 相关阅读:
    java移位的具体应用
    mysql计划任务（轮询执行脚本）
    算法题(1)
    transient关键字及Serializable的序列化与反序列化
    java后台调用短信接口，实现发送短信验证码的控制层实现
    防卫导弹
    C++ STL
    字母转换
    三分·三分求极值
    各种数据类型取值范围
  • 原文地址：https://www.cnblogs.com/tszr/p/13870459.html
Copyright © 2011-2022 走看看