当前位置： 代码迷 >> 综合 >> WEBBASIC Unit07 document 对象 、 自定义对象 、 事件
  详细解决方案

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

热度：10   发布时间：2023-12-11 15:04:59.0

一.图片轮播

这里写图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>div {border: 1px solid red;width: 218px;height: 218px;margin: 30px auto;}.hide {display: none;}.show {display: inline-block;} </style>
<script>var n = 0;var id;window.onload = function(){
     start();}function stop() {
     clearInterval(id);}function start() {
     id = setInterval(function(){
     n++;//获取所有的图片var imgs = document.getElementsByTagName("img");//将它们都隐藏for(var i=0;i<imgs.length;i++) {imgs[i].className = "hide";}//将下一个图片显示var next = n%imgs.length;imgs[next].className = "show";},2000);} </script>
</head>
<body><!-- hover是伪类选择器;onmouseover:鼠标悬停事件;onmouseout:鼠标离开事件;--><div onmouseover="stop();"onmouseout="start();"><img src="../images/01.jpg"/><img src="../images/02.jpg" class="hide"/><img src="../images/03.jpg" class="hide"/><img src="../images/04.jpg" class="hide"/><img src="../images/05.jpg" class="hide"/><img src="../images/06.jpg" class="hide"/></div>
</body>
</html>

二.省市联动

这里写图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>window.onload = function() {
     //查询节点//1.根据ID查询节点//2.根据标签名查询节点//3.根据NAME查询节点var radios = document.getElementsByName("sex");console.log(radios);//4.根据层次(关系)查询节点var gz = document.getElementById("gz");//1)查询某节点的父亲var ul = gz.parentNode;console.log(ul);//2)查询某节点的孩子(带文本)var lis = ul.childNodes;console.log(lis);//3)查询某节点的孩子(不带文本)lis = ul.getElementsByTagName("li");console.log(lis);//4)节点.父亲.孩子们[i]var sh = gz.parentNode.getElementsByTagName("li")[1];console.log(sh);}function f1() {
     //创建新节点var li = document.createElement("li");//修改此lili.innerHTML = "天津";//追加新节点var ul = document.getElementById("city");ul.appendChild(li);}function f2() {
     //创建节点var li = document.createElement("li");//修改节点li.innerHTML = "石家庄";//插入节点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><ul id="city"><li>北京</li><li>上海</li><li id="gz">广州</li><li>深圳</li><li>杭州</li></ul><p><input type="button" value="增加"onclick="f1();"/><input type="button" value="插入"onclick="f2();"/><input type="button" value="删除"onclick="f3();"/></p>
</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 p = document.getElementById("province").value;console.log(p);//获取本省份的城市var pcities = cities[p];//先删除旧的城市var select = document.getElementById("city");//var options = // select.getElementsByTagName("option");//for(var i=options.length-1;i>0;i--) {
     // select.removeChild(options[i]);//}select.innerHTML = "<option>请选择</option>";//再追加新的城市if(pcities) {for(var i=0;i<pcities.length;i++) {var option = document.createElement("option");option.innerHTML = pcities[i];select.appendChild(option);}}} </script>
</head>
<body>省:<select id="province"onchange="chg();"><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>

三.加入购物车

这里写图片描述

<!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>//加入购物车//调用时传入了参数this,指代点击的//那个按钮,声明参数接收它,参数名//不能是关键字this.function add_shoppingcart(btn) {
     console.log(btn);//获取按钮的爷爷var tr = btn.parentNode.parentNode;//获取爷爷的孩子们var tds = tr.getElementsByTagName("td");//获取老大的内容var name = tds[0].innerHTML;//获取老二的内容var price = tds[1].innerHTML;//创建一个新的trvar ntr = document.createElement("tr");//给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="+"/>'+'</td>'+'<td>'+price+'</td>'+'<td align="center"><input type="button" value="x"/></td>';//将新行追加到tbody下var tbody = document.getElementById("goods");tbody.appendChild(ntr);}</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>

四.加法

这里写图片描述

五.自定义对象

1.直接量(JSON)

  • {“name”:”zhangsan”,”age”:25}
  • {}代表一个对象,内含键值对
  • key通常是字符串,value可以是任意类型的数据
    简单

2.构造器(首字母大写的函数)

2.1内置构造器

  • 特殊: Date, Array, String, RegExp
  • 通用: Object

2.2自定义构造器

  • 创建一个首字母大写的函数
  • 明确的声明参数
  • 将参数记录到此对象上

3.总结

  • 无论用哪个方式创建出来的对象都一样,都是Object
  • 若对象需要复用,建议用第3种
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>//采用直接量方式创建对象function f1() {
     var stu = {"name":"zhangsan","age":25,"work":function(){
     alert("我学Java");}};alert(stu.name);alert(stu.age);stu.work();}//采用内置构造器创建对象function f2() {
     var tch = new Object();tch.name = "cang";tch.age = 20;tch.work = function(){
     alert("我教Java");}alert(tch.name);alert(tch.age);tch.work();}//采用自定义构造器创建对象function Coder(name,age,work) {
     this.name = name;this.age = age;//this指代当前对象//this.job给当前对象加job属性//=work是将参数work赋值给此属性this.job = work;}function f3() {
     var coder = new Coder("wangwu",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>

六.事件

1.事件概述

1)什么是事件

  • 就是用户的操作,就是JS调用的时机

2)事件的分类

  • 鼠标事件
  • 键盘事件
  • 状态事件:某条件成立时自动触发

2.事件定义

1)直接定义事件

  • οnclick=”f1();”

2)动态绑定事件

  • 在页面加载后
  • 通过js获取节点
  • 通过修改属性的方式给节点追加事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>//1.直接定义事件function f1(e) {
     console.log(1);console.log(e);}//2.动态绑定事件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>

3.事件对象(*)

1)什么是事件对象

  • 在事件触发的那一刻
  • 浏览器会创建一个对象,用来封装事件相关的信息
  • 包括:鼠标的坐标, 键盘的按键等
  • 该对象叫做事件对象(event)

2)如何获得事件对象

直接定义事件时

  • 在调用函数时传入event
  • 在声明的函数上加参数接收event

动态绑定事件时

  • 在调用函数时浏览器会自动传入event
  • 在声明的函数上加参数接收event

4.事件机制(*)

1)什么是冒泡机制

  • 事件是由内向外传播的

2)如何取消冒泡

    if(e.stopPropagation) {e.stopPropagation();} else {e.cancelBubble = true;}

3)冒泡机制的作用

  • 可以简化事件的定义
  • 具体看计算器案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>div {width: 200px;border: 1px solid red;padding: 30px;}p {border: 1px solid red;text-align: center;padding: 30px;} </style>
<script>function f1(e) {
     alert("button");//取消冒泡//IE:e={cancelBubble:false}//其他:e={stopPropagation:function(){}}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>

4)待解决的问题


  • 需要知道事件发生的具体部位
  • 称之为事件源

通过事件对象可以获得事件源

5)计算器案例

这里写图片描述

<!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>
  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.