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[第几个表单].元素名字

     

     

  • 相关阅读:
    链路的有效性检测 及 基于TCP的通信为什么需要RETRY
    python join
    协程
    python socket 选项
    Spring @Resource、@Autowired、@Qualifier的区别
    maven插件
    代码中的特殊注释
    AOP 底层技术比较
    关于Android开发中的证书和密钥等问题
    tomcat部署web项目的3中方法
  • 原文地址:https://www.cnblogs.com/chengzhipcx/p/4501571.html
Copyright © 2011-2022 走看看