Unit07： document 对象 、 自定义对象 、 事件
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>
Unit07： document 对象 、 自定义对象 、 事件的更多相关文章
- JS内置对象-自定义对象
1.基本概念: ①对象:对象是拥有一系列无序属性和方法的集合. ②键值对:对象中的数据是以键值对的形式存在,对象的每个属性和方法,都对应值一个键名,以键取值. ③属性:描述对象特征的一系列变量称为属性 ...
- Node.js自定义对象事件监听与发射
一.Node.js是以事件驱动的,那我们自定义的一些js对象就需要能监听事件以及发射事件.在Node.js中事件使用一个EventEmitter对象发出,该对象在events模块中.它应该是使用观察者 ...
- 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 ...
- javascript的自定义对象/取消事件/事件兼容性/取消冒泡
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- javascript . 04 匿名函数、递归、回调函数、对象、基于对象的javascript、状态和行为、New、This、构造函数／自定义对象、属性绑定、进制转换
匿名函数: 没有名字的函数,函数整体加小括号不报错, 函数调用 : a:直接调用 (function (){函数体}) ( ) ; b:事件绑定 document.onlick = functio ...
- JS自定义对象，正则表达式，JQuery中的一些知识点
一:自定义对象 1.基本概念:①对象:包含一系列无序属性和方法的集合.②键值对:对象中的数据是以键值对的形式存在的,以键取值.③属性:描述对象特征的一系列变量.[对象中的变量]④方法:描述对象行为的一 ...
- python 全栈开发，Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))
一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...
- onblur 对象失去焦点事件
onblur 对象失去焦点事件 一.总结 1.几乎所有的控件都支持onblur事件 二.简介 onblur 事件 Event 对象 定义和用法 onblur 事件会在对象失去焦点时发生. 语法 onb ...
- SSRS用自定义对象绑定报表
有一个报表的数据源是一个对象的List, 这个对象List中还有层级,其中还有其他的对象List,这样的层级有三层.其数据是从数据库中取出来的.其LINQ的操作太多了而且复杂,所以不太可 能从LINQ ...
随机推荐
- Java复习4.数组初始化.
Java复习4.Java中的数组声明方式 20131004 1.数组声明和初始化, 数组元素和变量一样,可以在定义的时候i进行初始化.数组元素的初始化工作实在编译阶段完成的,可以减少运行时间. 在初 ...
- Visual Studio 2017再现C语言经典例题（一）
1.编写一个程序,输入a.b.c这3个值,输出其中最大者. 2.将“China”译成密码.密码规律:用原来的字母后面第4个字母代替原来的字母.例如,字母A后面第4个字母是E,用E代替A,因此,Chin ...
- yum 认知及使用
https://www.cnblogs.com/zhichaoma/p/7533247.html
- igmpproxy源代码学习——配置信息加载 loadConfig
在igmpproxy主程序运行之前需要先读取配置文件,igmpproxy的配置文件通常为/etc/igmpproxy.conf或者/var/igmpproxy.conf 其内容如下: ...
- js 预处理 与 执行 的顺序
链接 浏览器渲染 js先编译, 后执行, 而且先在第一块代码段编译执行, 再到第二个代码段, 代码段之间是可以共享变量的 DOMContentLoaded
- kafka--linux环境搭建
1.JDK 1.8 2.zookeeper 3.4.8 解压 3.kafka 配置 在kafka解压目录下下有一个config的文件夹,里面放置的是我们的配置文件 consumer.properite ...
- 脚本操作zk
使用[root@localhost bin]# ./zkCli.sh连接本地zk 创建 create [-s] [-e] path data acl 其中,-s是创建顺序或临时结点.默认情况下,不添加 ...
- Android深入理解JNI（二）类型转换、方法签名和JNIEnv
相关文章 Android深入理解JNI系列 前言 上一篇文章介绍了JNI的基本原理和注册,这一篇接着带领大家来学习JNI的数据类型转换.方法签名和JNIEnv. 1.数据类型的转换 首先给出上一篇文章 ...
- CSDN博客积分规则
1.博客积分规则 博客积分是CSDN对用户努力的认可和奖励,也是衡量博客水平的重要标准.博客等级也将由博客积分唯一决定.积分规则具体如下: 每发布一篇原创或者翻译文章:可获得10分: 每发布一篇转载文 ...
- js 要写严格模式
js 为了能在移动端通用,要写严格模式: 这里多了个逗号,在pc上浏览器可以通过,但是在手机端就不能.