Unit07： document 对象 、 自定义对象 、 事件
2024-08-24 05:29:08
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>
最新文章
- Hawk 1.1 快速入门(链家二手房)
- web应用中使用JavaMail发送邮件 。。转载
- oracle-day1
- HDU 1258 Sum It Up
- 使用sp_addextendedproperty添加描述信息
- JavaScript系列：常用方法
- 给windows服务打包，并生成安装程序
- makefile 学习（一）
- 设置图片Alpha
- Fuck Flyme Theme
- ARM的NEON协处理器是什么
- uc/os 笔记（转）
- hdu 1531 King
- nodejs连接mysql实例
- [Swift]LeetCode415. 字符串相加 | Add Strings
- JAVA体系学习-导向
- Asp.net core中由于页面编码导致的中文乱码
- 在-for 循环里面如何利用ref 操作dom
- ecliplse java log4j 配置
- Castle ActiveRecord学习（二）配置、引用、程序启动