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

知识点：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Insert title here</title>
  6. <script>
  7.     window.onload = function() {
  8.         //1.根据ID查询一个节点
  9.         //2.根据标签名查询一组节点
  10.         //3.根据NAME查询一组节点
  11.         var inputs =
  12.             document.getElementsByName("sex");
  13.         console.log(inputs);
  14.         //4.根据层次查询节点
  15.         //查询某节点的亲属(父亲、孩子、兄弟)
  16.         //4.1查询节点的父亲
  17.         var gz = document.getElementById("gz");
  18.         var ul = gz.parentNode;
  19.         console.log(ul);
  20.         //4.2查询节点的孩子
  21.         //带空格
  22.         console.log(ul.childNodes);
  23.         //不带空格
  24.         console.log(ul.getElementsByTagName("li"));
  25.         //4.3查询节点的兄弟
  26.         //节点.parentNode.getElementsByTagName("")[i]
  27.         var li =
  28.             gz.parentNode.getElementsByTagName("li")[4];
  29.         console.log(li);
  30.     }
  31.  
  32.     function f1() {
  33.         //1.创建节点li
  34.         var li = document.createElement("li");
  35.         li.innerHTML = "杭州";
  36.         //2.追加节点
  37.         var ul = document.getElementById("city");
  38.         ul.appendChild(li);
  39.     }
  40.     function f2() {
  41.         //1.创建节点
  42.         var li = document.createElement("li");
  43.         li.innerHTML = "苏州";
  44.         //2.插入节点
  45.         var ul = document.getElementById("city");
  46.         var gz = document.getElementById("gz");
  47.         ul.insertBefore(li,gz);
  48.     }
  49.     function f3() {
  50.         //获取要删除的节点的父亲
  51.         var ul = document.getElementById("city");
  52.         //获取要删除的节点
  53.         var gz = document.getElementById("gz");
  54.         //根据父亲删除孩子
  55.         ul.removeChild(gz);
  56.     }
  57. </script>
  58. </head>
  59. <body>
  60.     <p>
  61.         <input type="radio" name="sex"/>男
  62.         <input type="radio" name="sex"/>女
  63.     </p>
  64.     <p>
  65.         <input type="button" value="追加"
  66.             onclick="f1();"/>
  67.         <input type="button" value="插入"
  68.             onclick="f2();"/>
  69.         <input type="button" value="删除"
  70.             onclick="f3();"/>
  71.     </p>
  72.     <ul id="city">
  73.         <li>北京</li>
  74.         <li>上海</li>
  75.         <li id="gz">广州</li>
  76.         <li>深圳</li>
  77.         <li>天津</li>
  78.     </ul>
  79. </body>
  80. </html>

下拉框选择案例

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Insert title here</title>
  6. <script>
  7.     var cities;
  8.     window.onload = function() {
  9.         //模拟加载所有的城市
  10.         cities = [
  11.             ["石家庄","保定","廊坊"],
  12.             ["济南","青岛","威海"],
  13.             ["南京","苏州","无锡"]
  14.         ];
  15.     }
  16.     function chg() {
  17.         console.log(1);
  18.         //获取选择的省份(序号)
  19.         var s1 = document.getElementById("province");
  20.         var index = s1.value;
  21.         //获取该省份对应的城市
  22.         var pcities = cities[index];
  23.         //删除旧的城市
  24.         var s2 = document.getElementById("city");
  25.         //var options =
  26.         //    s2.getElementsByTagName("option");
  27.         //for(var i=options.length-1;i>=1;i--) {
  28.         //    s2.removeChild(options[i]);
  29.         //}
  30.         s2.innerHTML = "<option>请选择</option>";
  31.         //追加新的城市
  32.         if(pcities) {
  33.             for(var i=0;i<pcities.length;i++) {
  34.                 var option =
  35.                     document.createElement("option");
  36.                 console.log(pcities[i]);
  37.                 option.innerHTML = pcities[i];
  38.                 s2.appendChild(option);
  39.             }
  40.         }
  41.     }
  42. </script>
  43. </head>
  44. <body>
  45.     省:
  46.     <select onchange="chg();" id="province">
  47.         <option value="-1">请选择</option>
  48.         <option value="0">河北省</option>
  49.         <option value="1">山东省</option>
  50.         <option value="2">江苏省</option>
  51.     </select>
  52.     市:
  53.     <select id="city">
  54.         <option>请选择</option>
  55.     </select>
  56. </body>
  57. </html>

push.html

购物车案例

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>购物车</title>
  5.     <meta charset="utf-8" />
  6.     <style type="text/css">
  7.       h1 {
  8.         text-align:center;
  9.       }
  10.       table {
  11.         margin:0 auto;
  12.         width:60%;
  13.         border:2px solid #aaa;
  14.         border-collapse:collapse;
  15.       }
  16.       table th, table td {
  17.         border:2px solid #aaa;
  18.         padding:5px;
  19.       }
  20.       th {
  21.         background-color:#eee;
  22.       }
  23.     </style>
  24.     <script>
  25.         //加入购物车
  26.         function add_shoppingcart(btn) {
  27.             console.log(btn);
  28.             //获取按钮的爷爷(tr)
  29.             var tr = btn.parentNode.parentNode;
  30.             //获取爷爷的孩子们(tds)
  31.             var tds = tr.getElementsByTagName("td");
  32.             //获取第1个td的内容(商品名)
  33.             var name = tds[0].innerHTML;
  34.             //获取第2个td的内容(单价)
  35.             var price = tds[1].innerHTML;
  36.             //创建一个新的行
  37.             var ntr = document.createElement("tr");
  38.             //给这个行设置内容
  39.             ntr.innerHTML =
  40.           '<td>'+name+'</td>'+
  41.           '<td>'+price+'</td>'+
  42.           '<td align="center">'+
  43.             '<input type="button" value="-"/>'+
  44.             '<input type="text" size="3" readonly value="1"/>'+
  45.             '<input type="button" value="+" onclick="increase(this);"/>'+
  46.           '</td>'+
  47.           '<td>'+price+'</td>'+
  48.           '<td align="center"><input type="button" value="x"/></td>';
  49.             //将这个行追加到tbody下
  50.             var tbody = document.getElementById("goods");
  51.             tbody.appendChild(ntr);
  52.         }
  53.         //增加
  54.         function increase(btn) {
  55.             //获取按钮的哥哥(文本框)
  56.             var td3 = btn.parentNode;
  57.             var text =
  58.                 td3.getElementsByTagName("input")[1];
  59.             //文本框内的值(数量)+1
  60.             text.value++;
  61.             //获取td3的哥哥(td2)
  62.             var tr = td3.parentNode;
  63.             var td2 =
  64.                 tr.getElementsByTagName("td")[1];
  65.             //获取td2的内容(单价)
  66.             var price = td2.innerHTML;
  67.             //计算金额
  68.             var money = price*text.value;
  69.             //获取td3的弟弟(td4)
  70.             var td4 =
  71.                 tr.getElementsByTagName("td")[3];
  72.             //写入金额
  73.             td4.innerHTML = money;
  74.         }
  75.     </script>
  76.   </head>
  77.   <body>
  78.     <h1>真划算</h1>
  79.     <table>
  80.       <tr>
  81.         <th>商品</th>
  82.         <th>单价(元)</th>
  83.         <th>颜色</th>
  84.         <th>库存</th>
  85.         <th>好评率</th>
  86.         <th>操作</th>
  87.       </tr>
  88.       <tr>
  89.         <td>罗技M185鼠标</td>
  90.         <td>80</td>
  91.         <td>黑色</td>
  92.         <td>893</td>
  93.         <td>98%</td>
  94.         <td align="center">
  95.           <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
  96.         </td>
  97.       </tr>
  98.       <tr>
  99.         <td>微软X470键盘</td>
  100.         <td>150</td>
  101.         <td>黑色</td>
  102.         <td>9028</td>
  103.         <td>96%</td>
  104.         <td align="center">
  105.           <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
  106.         </td>
  107.       </tr>
  108.       <tr>
  109.         <td>洛克iphone6手机壳</td>
  110.         <td>60</td>
  111.         <td>透明</td>
  112.         <td>672</td>
  113.         <td>99%</td>
  114.         <td align="center">
  115.           <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
  116.         </td>
  117.       </tr>
  118.       <tr>
  119.         <td>蓝牙耳机</td>
  120.         <td>100</td>
  121.         <td>蓝色</td>
  122.         <td>8937</td>
  123.         <td>95%</td>
  124.         <td align="center">
  125.           <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
  126.         </td>
  127.       </tr>
  128.       <tr>
  129.         <td>金士顿U盘</td>
  130.         <td>70</td>
  131.         <td>红色</td>
  132.         <td>482</td>
  133.         <td>100%</td>
  134.         <td align="center">
  135.           <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
  136.         </td>
  137.       </tr>
  138.     </table>
  139.  
  140.     <h1>购物车</h1>
  141.     <table>
  142.       <thead>
  143.         <tr>
  144.           <th>商品</th>
  145.           <th>单价(元)</th>
  146.           <th>数量</th>
  147.           <th>金额(元)</th>
  148.           <th>删除</th>
  149.         </tr>
  150.       </thead>
  151.       <tbody id="goods">
  152.  
  153.       </tbody>
  154.       <tfoot>
  155.         <tr>
  156.           <td colspan="3" align="right">总计</td>
  157.           <td id="total"></td>
  158.           <td></td>
  159.         </tr>
  160.       </tfoot>
  161.     </table>
  162.   </body>
  163. </html>

shopping.html

计算器案例

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>计算器</title>
  5.     <meta charset="utf-8" />
  6.     <style type="text/css">
  7.       .panel {
  8.         border: 4px solid #ddd;
  9.         width: 192px;
  10.         margin: 100px auto;
  11.         /*border-radius: 6px;*/
  12.       }
  13.       .panel p, .panel input {
  14.         font-family: "微软雅黑";
  15.         font-size: 20px;
  16.         margin: 4px;
  17.         float: left;
  18.         /*border-radius: 4px;*/
  19.       }
  20.       .panel p {
  21.         width: 122px;
  22.         height: 26px;
  23.         border: 1px solid #ddd;
  24.         padding: 6px;
  25.         overflow: hidden;
  26.       }
  27.       .panel input {
  28.         width: 40px;
  29.         height: 40px;
  30.         border:1px solid #ddd;
  31.       }
  32.     </style>
  33.     <script>
  34.         window.onload = function() {
  35.             //给div绑定单击事件
  36.             var div = document.getElementById("jsq");
  37.             div.onclick = function(e) {
  38.                 //获取事件源
  39.                 var obj = e.srcElement || e.target;
  40.                 if(obj.nodeName=="INPUT") {
  41.                     var p = document.getElementById("screen");
  42.                     if(obj.value=="=") {
  43.                         //计算
  44.                         try {
  45.                             p.innerHTML = eval(p.innerHTML);
  46.                         } catch(ex) {
  47.                             p.innerHTML = "Error";
  48.                         }
  49.                     } else if(obj.value=="C") {
  50.                         //清空
  51.                         p.innerHTML = "";
  52.                     } else {
  53.                         //累加
  54.                         p.innerHTML += obj.value;
  55.                     }
  56.                 }
  57.             }
  58.         }
  59.     </script>
  60.   </head>
  61.   <body>
  62.     <div class="panel" id="jsq">
  63.       <div>
  64.         <p id="screen"></p>
  65.         <input type="button" value="C">
  66.         <div style="clear:both"></div>
  67.       </div>
  68.       <div>
  69.         <input type="button" value="7">
  70.         <input type="button" value="8">
  71.         <input type="button" value="9">
  72.         <input type="button" value="/">
  73.  
  74.         <input type="button" value="4">
  75.         <input type="button" value="5">
  76.         <input type="button" value="6">
  77.         <input type="button" value="*">
  78.  
  79.         <input type="button" value="1">
  80.         <input type="button" value="2">
  81.         <input type="button" value="3">
  82.         <input type="button" value="-">
  83.  
  84.         <input type="button" value="0">
  85.         <input type="button" value=".">
  86.         <input type="button" value="=">
  87.         <input type="button" value="+">
  88.  
  89.         <div style="clear:both"></div>
  90.       </div>
  91.     </div>
  92.   </body>
  93. </html>

calculate.html

创建对象的三种方式：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Insert title here</title>
  6. <script>
  7.     //1.采用直接量的方式创建对象
  8.     function f1() {
  9.         var student = {
  10.             "name":"zhangsan",
  11.             "age":23,
  12.             "work":function(){
  13.                 alert("我学Java");
  14.             }
  15.         };
  16.         alert(student.name);
  17.         alert(student.age);
  18.         student.work();
  19.     }
  20.     //2.采用内置构造器创建对象
  21.     function f2() {
  22.         var teacher = new Object();
  23.         teacher.name = "苍老师";
  24.         teacher.age = 18;
  25.         teacher.work = function(){
  26.             alert("我教Java");
  27.         };
  28.         alert(teacher.name);
  29.         alert(teacher.age);
  30.         teacher.work();
  31.     }
  32.     //3.采用自定义构造器创建对象
  33.     function Coder(name,age,work) {
  34.         //需要在对象上记录传入的参数
  35.         this.name = name;
  36.         this.age = age;
  37.         this.job = work;
  38.     }
  39.     function f3() {
  40.         var coder = new Coder(
  41.             "Lisi",
  42.             28,
  43.             function(){
  44.                 alert("我写Java");
  45.             }
  46.         );
  47.         alert(coder.name);
  48.         alert(coder.age);
  49.         coder.job();
  50.     }
  51. </script>
  52. </head>
  53. <body>
  54.     <input type="button" value="按钮1"
  55.         onclick="f1();"/>
  56.     <input type="button" value="按钮2"
  57.         onclick="f2();"/>
  58.     <input type="button" value="按钮3"
  59.         onclick="f3();"/>
  60. </body>
  61. </html>

直接绑定事件

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Insert title here</title>
  6. <script>
  7.     //1.直接绑定事件
  8.     function f1(e) {
  9.         console.log(1);
  10.         console.log(e);
  11.     }
  12.     //页面加载后
  13.     window.onload = function() {
  14.         //给按钮2后绑定单击事件
  15.         var btn2 = document.getElementById("btn2");
  16.         btn2.onclick = function(e){
  17.             console.log(2);
  18.             console.log(e);
  19.         };
  20.     }
  21. </script>
  22. </head>
  23. <body>
  24.     <input type="button" value="按钮1"
  25.         onclick="f1(event);"/>
  26.     <input type="button" value="按钮2"
  27.         id="btn2"/>
  28. </body>
  29. </html>

取消冒泡

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Insert title here</title>
  6. <style>
  7.     div {
  8.         border: 1px solid red;
  9.         padding: 30px;
  10.         margin: 30px;
  11.         width: 300px;
  12.     }
  13.     p {
  14.         border: 1px solid blue;
  15.         padding: 30px;
  16.     }
  17. </style>
  18. <script>
  19.     function f1(e) {
  20.         alert("BUTTON");
  21.         //取消冒泡
  22.         //e={"stopPropagation":function(){}}
  23.         //e={"cancelBubble":false}
  24.         if(e.stopPropagation) {
  25.             e.stopPropagation();
  26.         } else {
  27.             e.cancelBubble = true;
  28.         }
  29.     }
  30. </script>
  31. </head>
  32. <body>
  33.     <div onclick="alert('DIV');">
  34.         <p onclick="alert('P');">
  35.             <input type="button" value="按钮1"
  36.                 onclick="f1(event);"/>
  37.         </p>
  38.     </div>
  39. </body>
  40. </html>

Unit07： document 对象 、 自定义对象 、 事件的更多相关文章

  1. JS内置对象-自定义对象

    1.基本概念: ①对象:对象是拥有一系列无序属性和方法的集合. ②键值对:对象中的数据是以键值对的形式存在,对象的每个属性和方法,都对应值一个键名,以键取值. ③属性:描述对象特征的一系列变量称为属性 ...

  2. Node.js自定义对象事件监听与发射

    一.Node.js是以事件驱动的,那我们自定义的一些js对象就需要能监听事件以及发射事件.在Node.js中事件使用一个EventEmitter对象发出,该对象在events模块中.它应该是使用观察者 ...

  3. CAD由一个自定义实体事件中的id得到自定义实体对象(com接口VB语言)

    由一个自定义实体事件中的id得到自定义实体对象.该函数只能在自定义实体事件中调用. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 2 ...

  4. javascript的自定义对象/取消事件/事件兼容性/取消冒泡

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. javascript . 04 匿名函数、递归、回调函数、对象、基于对象的javascript、状态和行为、New、This、构造函数／自定义对象、属性绑定、进制转换

    匿名函数:   没有名字的函数,函数整体加小括号不报错, 函数调用 : a:直接调用 (function (){函数体}) ( ) ; b:事件绑定 document.onlick = functio ...

  6. JS自定义对象，正则表达式，JQuery中的一些知识点

    一:自定义对象 1.基本概念:①对象:包含一系列无序属性和方法的集合.②键值对:对象中的数据是以键值对的形式存在的,以键取值.③属性:描述对象特征的一系列变量.[对象中的变量]④方法:描述对象行为的一 ...

  7. python 全栈开发，Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))

    一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...

  8. onblur 对象失去焦点事件

    onblur 对象失去焦点事件 一.总结 1.几乎所有的控件都支持onblur事件 二.简介 onblur 事件 Event 对象 定义和用法 onblur 事件会在对象失去焦点时发生. 语法 onb ...

  9. SSRS用自定义对象绑定报表

    有一个报表的数据源是一个对象的List, 这个对象List中还有层级,其中还有其他的对象List,这样的层级有三层.其数据是从数据库中取出来的.其LINQ的操作太多了而且复杂,所以不太可 能从LINQ ...

随机推荐

  1. 11g OCM自动打补丁

    1.先替换掉OPatch软件 每个实例都要运行 GRID_HOME和ORACLE_HOME的OPatch目录都去除掉 把OPatch软件p6880880_112000_Linux-x86-64.zip ...

  2. SPOJ 5152 Brute-force Algorithm EXTREME && HDU 3221 Brute-force Algorithm 快速幂,快速求斐波那契数列,欧拉函数,同余 难度:1

    5152. Brute-force Algorithm EXTREME Problem code: BFALG Please click here to download a PDF version ...

  3. 【51nod-1009】数字1的数量

    给定一个十进制正整数N,写下从1开始,到N的所有正数,计算出其中出现所有1的个数.   例如:n = 12,包含了5个1.1,10,12共包含3个1,11包含2个1,总共5个1. Input 输入N( ...

  4. linux oracle11g 数据 导入到10g数据库

    说明: 原用户名和密码:test/test  目标用户名和密码:test01/test 11G 服务器: 1.创建dmp文件存储目录 # mkdir -p /tmp/backup # sqlplus ...

  5. LeetCode OJ：Valid Sudoku（有效数独问题）

    Determine if a Sudoku is valid, according to: Sudoku Puzzles - The Rules. The Sudoku board could be ...

  6. jQuery动画与特效

    参考:jQuery权威指南jQuery初步jQuery选择器jQuery操作domjQuery操作dom事件jQuery插件jQuery操作AjaxjQuery动画与特效jQuery实现导航栏jQue ...

  7. C语言实现的矩阵乘法运算器

    需求 编写程序模拟矩阵乘法,一个m*n的矩阵,乘以一个 n*m 的矩阵, 并且输出结果. STEP 1  矩阵乘法的计算 一个m行n列的矩阵与一个n行p列的矩阵可以相乘,得到的结果是一个m行p列的矩阵 ...

  8. Mac工具整理

    记录一下这两年来使用Mac的一些很好的工具: 1.offic,mac的office还是很强大的,比openoffice要好很多,更比WPS要好. 2.Toad连接数据库用的,一般用来连接Oracle. ...

  9. c# JScriptProvider包装

    using System; using System.CodeDom.Compiler; using System.Reflection; using System.Web.UI; using Mic ...

  10. SQL Server(MSSQLSERVER)启动失败，提示“请求失败或服务未及时响应

    1.SQL Server(MSSQLSERVER)启动失败,提示“请求失败或服务未及时响应. --------------------------- SQL Server 配置管理器 -------- ...