Unit07： document 对象 、 自定义对象 、 事件

时间：2022-09-09 03:40:49

　　　　Unit07： document 对象 、 自定义对象 、 事件　　　　

知识点：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script>

    window.onload = function() {

        //1.根据ID查询一个节点

        //2.根据标签名查询一组节点

        //3.根据NAME查询一组节点

        var inputs =

            document.getElementsByName("sex");

        console.log(inputs);

        //4.根据层次查询节点

        //查询某节点的亲属(父亲、孩子、兄弟)

        //4.1查询节点的父亲

        var gz = document.getElementById("gz");

        var ul = gz.parentNode;

        console.log(ul);

        //4.2查询节点的孩子

        //带空格

        console.log(ul.childNodes);

        //不带空格

        console.log(ul.getElementsByTagName("li"));

        //4.3查询节点的兄弟

        //节点.parentNode.getElementsByTagName("")[i]

        var li =

            gz.parentNode.getElementsByTagName("li")[4];

        console.log(li);

    }

    function f1() {

        //1.创建节点li

        var li = document.createElement("li");

        li.innerHTML = "杭州";

        //2.追加节点

        var ul = document.getElementById("city");

        ul.appendChild(li);

    }

    function f2() {

        //1.创建节点

        var li = document.createElement("li");

        li.innerHTML = "苏州";

        //2.插入节点

        var ul = document.getElementById("city");

        var gz = document.getElementById("gz");

        ul.insertBefore(li,gz);

    }

    function f3() {

        //获取要删除的节点的父亲

        var ul = document.getElementById("city");

        //获取要删除的节点

        var gz = document.getElementById("gz");

        //根据父亲删除孩子

        ul.removeChild(gz);

    }

</script>

</head>

<body>

    <p>

        <input type="radio" name="sex"/>男

        <input type="radio" name="sex"/>女

    </p>

    <p>

        <input type="button" value="追加"

            onclick="f1();"/>

        <input type="button" value="插入"

            onclick="f2();"/>

        <input type="button" value="删除"

            onclick="f3();"/>

    </p>

    <ul id="city">

        <li>北京</li>

        <li>上海</li>

        <li id="gz">广州</li>

        <li>深圳</li>

        <li>天津</li>

    </ul>

</body>

</html>

下拉框选择案例

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script>

    var cities;

    window.onload = function() {

        //模拟加载所有的城市

        cities = [

            ["石家庄","保定","廊坊"],

            ["济南","青岛","威海"],

            ["南京","苏州","无锡"]

        ];

    }

    function chg() {

        console.log(1);

        //获取选择的省份(序号)

        var s1 = document.getElementById("province");

        var index = s1.value;

        //获取该省份对应的城市

        var pcities = cities[index];

        //删除旧的城市

        var s2 = document.getElementById("city");

        //var options =

        //    s2.getElementsByTagName("option");

        //for(var i=options.length-1;i>=1;i--) {

        //    s2.removeChild(options[i]);

        //}

        s2.innerHTML = "<option>请选择</option>";

        //追加新的城市

        if(pcities) {

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

                var option =

                    document.createElement("option");

                console.log(pcities[i]);

                option.innerHTML = pcities[i];

                s2.appendChild(option);

            }

        }

    }

</script>

</head>

<body>

    省:

    <select onchange="chg();" id="province">

        <option value="-1">请选择</option>

        <option value="0">河北省</option>

        <option value="1">山东省</option>

        <option value="2">江苏省</option>

    </select>

    市:

    <select id="city">

        <option>请选择</option>

    </select>

</body>

</html>

push.html

购物车案例

<!DOCTYPE html>

<html>

  <head>

    <title>购物车</title>

    <meta charset="utf-8" />

    <style type="text/css">

      h1 {

        text-align:center;

      }

      table {

        margin:0 auto;

        width:60%;

        border:2px solid #aaa;

        border-collapse:collapse;

      }

      table th, table td {

        border:2px solid #aaa;

        padding:5px;

      }

      th {

        background-color:#eee;

      }

    </style>

    <script>

        //加入购物车

        function add_shoppingcart(btn) {

            console.log(btn);

            //获取按钮的爷爷(tr)

            var tr = btn.parentNode.parentNode;

            //获取爷爷的孩子们(tds)

            var tds = tr.getElementsByTagName("td");

            //获取第1个td的内容(商品名)

            var name = tds[0].innerHTML;

            //获取第2个td的内容(单价)

            var price = tds[1].innerHTML;

            //创建一个新的行

            var ntr = document.createElement("tr");

            //给这个行设置内容

            ntr.innerHTML =

          '<td>'+name+'</td>'+

          '<td>'+price+'</td>'+

          '<td align="center">'+

            '<input type="button" value="-"/>'+

            '<input type="text" size="3" readonly value="1"/>'+

            '<input type="button" value="+" onclick="increase(this);"/>'+

          '</td>'+

          '<td>'+price+'</td>'+

          '<td align="center"><input type="button" value="x"/></td>';

            //将这个行追加到tbody下

            var tbody = document.getElementById("goods");

            tbody.appendChild(ntr);

        }

        //增加

        function increase(btn) {

            //获取按钮的哥哥(文本框)

            var td3 = btn.parentNode;

            var text =

                td3.getElementsByTagName("input")[1];

            //文本框内的值(数量)+1

            text.value++;

            //获取td3的哥哥(td2)

            var tr = td3.parentNode;

            var td2 =

                tr.getElementsByTagName("td")[1];

            //获取td2的内容(单价)

            var price = td2.innerHTML;

            //计算金额

            var money = price*text.value;

            //获取td3的弟弟(td4)

            var td4 =

                tr.getElementsByTagName("td")[3];

            //写入金额

            td4.innerHTML = money;

        }

    </script>

  </head>

  <body>

    <h1>真划算</h1>

    <table>

      <tr>

        <th>商品</th>

        <th>单价(元)</th>

        <th>颜色</th>

        <th>库存</th>

        <th>好评率</th>

        <th>操作</th>

      </tr>

      <tr>

        <td>罗技M185鼠标</td>

        <td>80</td>

        <td>黑色</td>

        <td>893</td>

        <td>98%</td>

        <td align="center">

          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>

        </td>

      </tr>

      <tr>

        <td>微软X470键盘</td>

        <td>150</td>

        <td>黑色</td>

        <td>9028</td>

        <td>96%</td>

        <td align="center">

          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>

        </td>

      </tr>

      <tr>

        <td>洛克iphone6手机壳</td>

        <td>60</td>

        <td>透明</td>

        <td>672</td>

        <td>99%</td>

        <td align="center">

          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>

        </td>

      </tr>

      <tr>

        <td>蓝牙耳机</td>

        <td>100</td>

        <td>蓝色</td>

        <td>8937</td>

        <td>95%</td>

        <td align="center">

          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>

        </td>

      </tr>

      <tr>

        <td>金士顿U盘</td>

        <td>70</td>

        <td>红色</td>

        <td>482</td>

        <td>100%</td>

        <td align="center">

          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>

        </td>

      </tr>

    </table>

    <h1>购物车</h1>

    <table>

      <thead>

        <tr>

          <th>商品</th>

          <th>单价(元)</th>

          <th>数量</th>

          <th>金额(元)</th>

          <th>删除</th>

        </tr>

      </thead>

      <tbody id="goods">

      </tbody>

      <tfoot>

        <tr>

          <td colspan="3" align="right">总计</td>

          <td id="total"></td>

          <td></td>

        </tr>

      </tfoot>

    </table>

  </body>

</html>

shopping.html

计算器案例

<!DOCTYPE html>

<html>

  <head>

    <title>计算器</title>

    <meta charset="utf-8" />

    <style type="text/css">

      .panel {

        border: 4px solid #ddd;

        width: 192px;

        margin: 100px auto;

        /*border-radius: 6px;*/

      }

      .panel p, .panel input {

        font-family: "微软雅黑";

        font-size: 20px;

        margin: 4px;

        float: left;

        /*border-radius: 4px;*/

      }

      .panel p {

        width: 122px;

        height: 26px;

        border: 1px solid #ddd;

        padding: 6px;

        overflow: hidden;

      }

      .panel input {

        width: 40px;

        height: 40px;

        border:1px solid #ddd;

      }

    </style>

    <script>

        window.onload = function() {

            //给div绑定单击事件

            var div = document.getElementById("jsq");

            div.onclick = function(e) {

                //获取事件源

                var obj = e.srcElement || e.target;

                if(obj.nodeName=="INPUT") {

                    var p = document.getElementById("screen");

                    if(obj.value=="=") {

                        //计算

                        try {

                            p.innerHTML = eval(p.innerHTML);

                        } catch(ex) {

                            p.innerHTML = "Error";

                        }

                    } else if(obj.value=="C") {

                        //清空

                        p.innerHTML = "";

                    } else {

                        //累加

                        p.innerHTML += obj.value;

                    }

                }

            }

        }

    </script>

  </head>

  <body>

    <div class="panel" id="jsq">

      <div>

        <p id="screen"></p>

        <input type="button" value="C">

        <div style="clear:both"></div>

      </div>

      <div>

        <input type="button" value="7">

        <input type="button" value="8">

        <input type="button" value="9">

        <input type="button" value="/">

        <input type="button" value="4">

        <input type="button" value="5">

        <input type="button" value="6">

        <input type="button" value="*">

        <input type="button" value="1">

        <input type="button" value="2">

        <input type="button" value="3">

        <input type="button" value="-">

        <input type="button" value="0">

        <input type="button" value=".">

        <input type="button" value="=">

        <input type="button" value="+">

        <div style="clear:both"></div>

      </div>

    </div>

  </body>

</html>

calculate.html

创建对象的三种方式：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script>

    //1.采用直接量的方式创建对象

    function f1() {

        var student = {

            "name":"zhangsan",

            "age":23,

            "work":function(){

                alert("我学Java");

            }

        };

        alert(student.name);

        alert(student.age);

        student.work();

    }

    //2.采用内置构造器创建对象

    function f2() {

        var teacher = new Object();

        teacher.name = "苍老师";

        teacher.age = 18;

        teacher.work = function(){

            alert("我教Java");

        };

        alert(teacher.name);

        alert(teacher.age);

        teacher.work();

    }

    //3.采用自定义构造器创建对象

    function Coder(name,age,work) {

        //需要在对象上记录传入的参数

        this.name = name;

        this.age = age;

        this.job = work;

    }

    function f3() {

        var coder = new Coder(

            "Lisi",

            28,

            function(){

                alert("我写Java");

            }

        );

        alert(coder.name);

        alert(coder.age);

        coder.job();

    }

</script>

</head>

<body>

    <input type="button" value="按钮1"

        onclick="f1();"/>

    <input type="button" value="按钮2"

        onclick="f2();"/>

    <input type="button" value="按钮3"

        onclick="f3();"/>

</body>

</html>

直接绑定事件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script>

    //1.直接绑定事件

    function f1(e) {

        console.log(1);

        console.log(e);

    }

    //页面加载后

    window.onload = function() {

        //给按钮2后绑定单击事件

        var btn2 = document.getElementById("btn2");

        btn2.onclick = function(e){

            console.log(2);

            console.log(e);

        };

    }

</script>

</head>

<body>

    <input type="button" value="按钮1"

        onclick="f1(event);"/>

    <input type="button" value="按钮2"

        id="btn2"/>

</body>

</html>

取消冒泡

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<style>

    div {

        border: 1px solid red;

        padding: 30px;

        margin: 30px;

        width: 300px;

    }

    p {

        border: 1px solid blue;

        padding: 30px;

    }

</style>

<script>

    function f1(e) {

        alert("BUTTON");

        //取消冒泡

        //e={"stopPropagation":function(){}}

        //e={"cancelBubble":false}

        if(e.stopPropagation) {

            e.stopPropagation();

        } else {

            e.cancelBubble = true;

        }

    }

</script>

</head>

<body>

    <div onclick="alert('DIV');">

        <p onclick="alert('P');">

            <input type="button" value="按钮1"

                onclick="f1(event);"/>

        </p>

    </div>

</body>

</html>

相关文章