zoukankan      html  css  js  c++  java
  • Java script 的dom编程

    实例1:

     </head>

     <body>

      <div id="div1">

       <p id="p1">这是一个段落</p>

       <p id="p2">这是另外一个段落</p>

         

      </div>

     </body>

     <script type="text/javascript" language="JavaScript">

      var pare=document.createElement("p");//创建一个p标签的元素

      var node=document.createTextNode("这是一个新段落");//创建一个文本节点

      pare.appendChild(node);//向p标签里面追加文本的子节点

       

      var element=document.getElementById("div1");

      element.appendChild(pare);//然后直接向div中追加p标签

     </script>

    </html>

    实例2

    购物车的例子

    <html>

     <head>

      <meta charset="utf-8">

      <title></title>

     </head>

     <script type="text/javascript" language="JavaScript">

      function gouwu(object){

       var fruits=document.getElementsByName("fruit");

       var totalprice=0;

       for(var i=0;i<fruits.length;i++){

        if(fruits[i].checked){

         totalprice+=parseInt(fruits[i].value);

        }

       }

       

       myspan.innerText=totalprice+"元";

      }

     </script>

     <body>

      <h1>购物车</h1>

      <input type="checkbox" name="fruit" onclick="gouwu(this)" value="10"/>苹果10元<br />

      <input type="checkbox" name="fruit" onclick="gouwu(this)" value="20"/>香蕉20元<br />

      <input type="checkbox" name="fruit" onclick="gouwu(this)" value="30"/>菠萝30元<br />

      <input type="checkbox" name="fruit" onclick="gouwu(this)" value="50"/>哈密瓜50元<br /><br />

      总价格:<span id="myspan" >0元</span>

     </body>

    </html>

    实例三

    <html>

     <head>

      <meta charset="utf-8">

      <title></title>

     </head>

     <script type="text/javascript" language="JavaScript">

      function selectCheckbox(obj){

       var fruits=document.getElementsByName("fruit");

       if(obj.innerText=='全选'){

        for(i=0;i<fruits.length;i++){

         fruits[i].checked=true;

        }

       }else{

        for(i=0;i<fruits.length;i++){

         fruits[i].checked=false;

        }

       }

      }

      function selectCheckbox2(){

       var fruits=document.getElementsByName("fruit");

       if (mycheckbox.checked){

        for(i=0;i<fruits.length;i++){

         fruits[i].checked=true;

        }

       }else{

        for(i=0;i<fruits.length;i++){

         fruits[i].checked=false;

        }

       }

      }

     </script>

     <body>

      <input type="checkbox" name="fruit" onclick="gouwu(this)" value="10"/>苹果10元<br />

      <input type="checkbox" name="fruit" onclick="gouwu(this)" value="20"/>香蕉20元<br />

      <input type="checkbox" name="fruit" onclick="gouwu(this)" value="30"/>菠萝30元<br />

      <input type="checkbox" name="fruit" onclick="gouwu(this)" value="50"/>哈密瓜50元<br />

      <a href="#" onclick="selectCheckbox(this)">全选</a>

      <a href="#" onclick="selectCheckbox(this)">取消</a><br />

      <input type="checkbox" id="mycheckbox" onclick="selectCheckbox2()"/>是否全选

     

    forms对象集合/form对象

    froms对象集合有:

    length :返回大小

    item(index):指定取出forms对象集合的第几个form对象,

     

    说明当访问某个表单的第几个元素的时候,可以

    1.document。forms[第几个表单].元素名字

    2.document.forms.item[第几个表单].元素名字

     

     

  • 相关阅读:
    找工作就上智联,效果真快,然而让我去的公司都是泡我呢
    只能面深度学习岗和算法岗,其他都不会
    2维矩阵前缀和技巧题目
    计算机基础背诵
    集合函数AVG,SUM,MAX,MIN
    集合函数COUNT
    修改删除数据记录
    多表查询
    查询数据表中的记录
    SQL基本语句(3) LOAD DATA INFILE
  • 原文地址:https://www.cnblogs.com/chengzhipcx/p/4501571.html
Copyright © 2011-2022 走看看