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 ...
随机推荐
- magento: Your web server is configured incorrectly. As a result, configuration files with sensitive information are accessible from the outside 解决方案
在linux(以UBUNTU, CENTOS为例)下安装完成magento时,在进入后台时, 有些童鞋可能会发现有如下的提示: Your web server is configured incorr ...
- day6-面向对象补充篇--类的特殊成员
先说明一下,今天的内容主要转自师兄张其高的博客http://www.cnblogs.com/zhangqigao/articles/6935221.html 前面我们讲了类的方法,有普通方法,就是我们 ...
- 【zznu-2093】毁掉这颗二叉树
题目描述 广寒宫下有株二叉树,树上共有n个节点,通过n-1条树枝连接,树下有一只玉兔,吴刚提着斧子站在一旁. 他恼恨一切同他争夺嫦娥的事物,所以他决定通过砍二叉树上的n-1条树枝来毁掉这颗二叉树. 妙 ...
- Prism 4 文档 ---第6章 高级MVVM场景
在上一章中描述了如何通过将UI,表现逻辑,业务逻辑分别放到三个单独的类中(View,View Model,Model),实现这些类之间的交互(通过数据绑定,命令以及数据验证接口)以及实现一个策 ...
- CF 916
题解: 首先看题目 A题看不懂... 花了5分钟才做出来 还wa了 B题 一看好像是堆+位运算? 然后A了样例 C题 wa了好激发 似乎加边加错了 然后看D,似乎是可持久化平衡树? 我又不会... E ...
- 关于python中urllib.urlencode的时候出错：UnicodeEncodeError: ‘ascii’的记录
原文我参见了:http://hi.baidu.com/setcookie/item/ddc6b694b1f13435336eeb3c 为毛我要费事的写下了,就是为了让自己记录一下,下面的也是直接摘录过 ...
- 浅析C#中ASP.NET页面的生存周期
一般来说,页要经历下表概述的各个阶段.除了页生命周期阶段以外,在请求前后还存在应用程序阶段,但是这些阶段并不特定于页. 阶段 说明 页请求 页请求发生在页生命周期开始之前.用户请求页时,ASP.NET ...
- 激活函数之softmax介绍及C++实现
下溢(underflow):当接近零的数被四舍五入为零时发生下溢.许多函数在其参数为零而不是一个很小的正数时才会表现出质的不同.例如,我们通常要避免被零除或避免取零的对数. 上溢(overflow): ...
- Leetcode 814. Binary Tree Pruning
dfs 要点是这一句: return node.val==1 or node.left or node.right 完整代码: # Definition for a binary tree node. ...
- [Linux] jq：命令行JSON处理工具
jq命令帮助我们很方便地在终端查看和处理json文件 jq命令的帮助信息: abby@abby:bgs$ jq -h jq - commandline JSON processor [version ...