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 ...
随机推荐
- ssh原理与应用
一.什么是SSH? 简单说,SSH是一种网络协议,用于计算机之间的加密登录. 如果一个用户从本地计算机,使用SSH协议登录另一台远程计算机,我们就可以认为,这种登录是安全的,即使被中途截获,密码也不会 ...
- 轮播图插件 SuperSlide2.1滑动门jQuery插件
http://down.admin5.com/demo/code_pop/18/562/ SuperSlide2.1滑动门jQuery插件
- jquery动态创建元素 div元素随垂直滚动条位置变化置顶显示
刚打开页面效果 拖动滑动条之后效果 页面代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...
- 《Effective C++》第2章 构造/析构/赋值运算（1）-读书笔记
章节回顾: <Effective C++>第1章 让自己习惯C++-读书笔记 <Effective C++>第2章 构造/析构/赋值运算(1)-读书笔记 <Effecti ...
- New Concept English three（17）
27W/m 65 Verrazano, an Italian about whom little is known, sailed into New York Harbour in 1524 and ...
- Hibernate报错：Caused by: java.sql.SQLException: Field 'ID' doesn't have a default value
问题一: 报错如下: org.hibernate.id.IdentifierGenerationException: ids for this class must be manually assig ...
- DR模式下的高可用的LVS（LVS+keepalived）
一.keepalived 在DR模式下,使用Keepalived实现LVS的高可用.Keepalived的作用是检测服务器的状态,如果有一台web服务器 宕机,或工作出现故障,Keepalived将检 ...
- restify构建REST服务(转)
restify构建REST服务 从零开始nodejs系列文章,将介绍如何利Javascript做为服务端脚本,通过Nodejs框架web开发.Nodejs框架是基于V8的引擎,是目前速度最快的Java ...
- d3.js（v5.7）的node与数据匹配（自动匹配扩展函数）
在d3操作时,当然少不了对已有节点绑定数据,那么问题就来了,节点个数和数据长度不一样的,怎么办. d3在节点少于数据长度的时候,有enter().appen()方法实现node的增加: 在节点大于数据 ...
- CUDA Samples: Long Vector Add
以下CUDA sample是分别用C++和CUDA实现的两个非常大的向量相加操作,并对其中使用到的CUDA函数进行了解说,各个文件内容如下: common.hpp: #ifndef FBC_CUDA_ ...