01-选择水果（简单版）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
select {
width: 170px;
height: 200px;
font-size: 16px;
background-color: #a4ff43;
}
</style>
</head>
<body>
<select name="" id="sel1" size="10" multiple>
<option value="0">香蕉</option>
<option value="1">苹果</option>
<option value="2">鸭梨</option>
<option value="3">葡萄</option>
</select>
<input type="button" value=">>>"/>
<input type="button" value="<<<"/>
<input type="button" value=">"/>
<input type="button" value="<"/>
<select name="" id="sel2" size="10" multiple>
</select>
<script>
//需求1：点击>>>和<<<两个按钮，所有的子元素都跑到对方的标签中。
//步骤：
//1.获取相关元素，并绑定事件
//2.获取子元素，整体的添加到另外一边的标签中
//1.获取相关元素，并绑定事件
var sel1 = document.getElementById("sel1");
var sel2 = document.getElementById("sel2");
var inpArr = document.getElementsByTagName("input");
inpArr[0].onclick = function () {
//2.获取子元素，整体的添加到另外一边的标签中
var arr = sel1.children;
//循环遍历放入另一侧的select标签中
for(var i=arr.length-1;i>=0;i--){
//放入sel2中，不能用push，要用appendChild;
sel2.appendChild(arr[0]);
}
}
//同理
inpArr[1].onclick = function () {
//2.获取子元素，整体的添加到另外一边的标签中
var arr = sel2.children;
//循环遍历放入另一侧的select标签中
for(var i=arr.length-1;i>=0;i--){
//放入sel2中，不能用push，要用appendChild;
sel1.appendChild(arr[0]);
}
}
//需求2：点击>和<两个按钮，所有被选定的子元素都跑到对方的标签中。
//思路：获取所有子节点，然后循环判断，只有selected属性值为true的选项才能被添加到右侧的select标签中
inpArr[2].onclick = function () {
//获取所有子节点
var arr = sel1.children;
//遍历判断数组中的元素selected属性为true的，添加到相反的select标签中
for(var i=arr.length-1;i>=0;i--){
if(arr[i].selected === true){
// arr[i].selected = false;
sel2.appendChild(arr[i]);
}
}
}
//同理
inpArr[3].onclick = function () {
//获取所有子节点
var arr = sel2.children;
//遍历判断数组中的元素selected属性为true的，添加到相反的select标签中
for(var i=arr.length-1;i>=0;i--){
if(arr[i].selected === true){
// arr[i].selected = false;
sel1.appendChild(arr[i]);
}
}
}
</script>
</body>
</html>
02-选择水果（封装版）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
select {
width: 170px;
height: 200px;
font-size: 16px;
background-color: #a4ff43;
}
</style>
</head>
<body>
<select name="" id="sel1" size="10" multiple>
<option value="0">香蕉</option>
<option value="1">苹果</option>
<option value="2">鸭梨</option>
<option value="3">葡萄</option>
</select>
<input type="button" value=">>>"/>
<input type="button" value="<<<"/>
<input type="button" value=">"/>
<input type="button" value="<"/>
<select name="" id="sel2" size="10" multiple>
</select>
<script>
//需求1：点击>>>和<<<两个按钮，所有的子元素都跑到对方的标签中。
var sel1 = document.getElementById("sel1");
var sel2 = document.getElementById("sel2");
var inpArr = document.getElementsByTagName("input");
//如果不带参数，我们可以直接绑定一个函数名。但是因为带有参数，所以我们需要匿名函数去调用这个函数。
inpArr[0].onclick = function () {
fn1(sel1,sel2);
}
inpArr[1].onclick = function () {
fn1(sel2,sel1);
}
inpArr[2].onclick = function () {
fn2(sel1,sel2);
}
inpArr[3].onclick = function () {
fn2(sel2,sel1);
}
//封装的时候要注意，第一个按钮先获取的是sel1，第二个按钮先获取的是sel2;
function fn1(ele1,ele2) {
var arr = ele1.children;
for(var i=arr.length-1;i>=0;i--){
ele2.appendChild(arr[0]);
}
}
//把sel1和sel2设置成两个形参，通过调用的时候先后传递达成不一样的需求
function fn2(ele1,ele2) {
var arr = ele1.children;
for(var i=arr.length-1;i>=0;i--){
if(arr[i].selected === true){
arr[i].selected = false;
ele2.appendChild(arr[i]);
}
}
}
</script>
</body>
</html>
03-水果排序（终极版）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
select {
width: 150px;
height: 200px;
background-color: #7bff68;
}
</style>
</head>
<body>
<select size="10" name="aaa" id="sel1" multiple="multiple">
<option value="0">1香蕉</option>
<option value="1">2苹果</option>
<option value="2">3大鸭梨</option>
<option value="3">4草莓</option>
</select>
<input type="button" value=">>>"/>
<input type="button" value="<<<"/>
<input type="button" value=">"/>
<input type="button" value="<"/>
<select size="10" name="bbb" id="sel2" multiple="multiple">
</select>
<script>
//需求：点击按钮把对应的选中项移动到另一侧。
//技术点：如果移动单一的选项，那么看看哪个选项是有selected的。
//如果移动所有的选项，那么直接把sel1中的所有选项放入sel2中。
//步骤：
//1.获取事件源和相关元素
//2.绑定事件
//3.书写事件驱动程序
//步骤：
//1.获取事件源和相关元素
var sel1 = document.getElementById("sel1");
var sel2 = document.getElementById("sel2");
var inpArr = document.getElementsByTagName("input");
//2.绑定事件(push和appendChild用法相似：但是一个是控制数组，一个是控制元素节点)
inpArr[0].onclick = function () {
var optArr = sel1.children;
for(var i=0;i<optArr.length;){
sel2.appendChild(optArr[i]);
}
}
//为第二个按钮绑定事件
inpArr[1].onclick = function () {
var optArr = sel2.children;
for(var i=0;i<optArr.length;){
sel1.appendChild(optArr[i]);
}
}
inpArr[2].onclick = function () {
var optArr = sel1.children;
for(var i=optArr.length-1;i>=0;i--){
if(optArr[i].selected==true){
optArr[i].selected=false;
sel2.appendChild(optArr[i]);
}
}
//获取sel2中的子元素变成真数组，然后排序
var aaa = Array.from(sel2.children).sort(function (a,b) {
return a.value-b.value;
});
//删除素有子元素
for(var i=0;i<sel2.children.length;i++){
sel2.removeChild(sel2.children[i]);
}
//把排好序的数组添加到sel2中
for(var i=0;i<aaa.length;i++){
sel2.appendChild(aaa[i]);
}
}
inpArr[3].onclick = function () {
var optArr = sel2.children;
for(var i=optArr.length-1;i>=0;i--){
if(optArr[i].selected==true){
optArr[i].selected=false;
sel1.appendChild(optArr[i]);
}
}
var aaa = Array.from(sel1.children).sort(function (a,b) {
return a.value-b.value;
});
for(var i=0;i<sel1.children.length;i++){
sel1.removeChild(sel1.children[i]);
}
for(var i=0;i<aaa.length;i++){
sel1.appendChild(aaa[i]);
}
}
</script>
</body>
</html>
04-在线用户
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
word-wrap: break-word;
}
.wp {
width: 730px;
margin: 0px auto;
}
.mtn {
margin-top: 5px!important;
}
#ct .frame {
margin: 0;
border: none;
}
.xfs_2 .frame-title, .xfs_2 .frametitle, .xfs_2 .tab-title {
background-color: #A90000;
background-position: 0 -99px;
}
.xfs .frame-title, .xfs .frametitle, .xfs .tab-title, .xfs .frame-title a, .xfs .frametitle a, .xfs .tab-title a {
color: #FFF!important;
}
.xfs .frame-title, .xfs .frametitle, .xfs .tab-title {
border: none;
background: transparent url(images/mu.png) repeat-x 0 95;
}
.title {
padding: 0 10px;
height: 32px;
font-size: 14px;
font-weight: 700;
line-height: 32px;
overflow: hidden;
}
.block {
margin: 10px 10px 0;
}
ul, menu, dir {
display: block;
list-style: none;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 25px;
}
.mls li {
padding: 0 0 5px;
width: 66px;
height: 85px;
}
.ml li {
float: left;
text-align: center;
overflow: hidden;
}
a {
color: #333;
text-decoration: none;
font: 12px/1.5 Tahoma,'Microsoft Yahei','Simsun';
}
.mls p {
margin-top: 5px;
}
.ml p, .ml span {
display: block;
width: 100%;
height: 20px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.mls img {
width: 48px;
height: 48px;
}
.ml img {
display: block;
margin: 0 auto;
}
a img {
border: none;
}
</style>
</head>
<body>
<div class="wp mtn">
<div id="diy3" class="area"><div id="frameipq7f2" class="xfs xfs_2 frame move-span cl frame-1"><div
class="title frame-title"><span class="titletext">当前在线用户</span></div><div id="frameipq7f2_left"
class="column frame-1-c"><div
id="frameipq7f2_left_temp" class="move-span temp"></div><div id="portal_block_695"
class="block move-span"><div
id="portal_block_695_content" class="dxb_bc">
<div class="module cl ml mls" id="users">
<ul>
<!--<li>-->
<!--<a href="#" target="_blank"><img src="images/noavatar_small.gif" width="48" height="48" alt="沉眠楚人"></a>-->
<!--<p><a href="#" title="沉眠楚人" target="_blank">沉眠楚人</a></p>-->
<!--</li>-->
</ul>
</div>
</div></div></div></div></div>
</div>
<script>
//模拟从服务器获取数据
var users = [
{"name": "tdxy01","icon":"images/noavatar_small.gif"},
{"name": "沉眠楚人","icon":"images/noavatar_small.gif"},
{"name": "爱上karina","icon":"images/75_avatar_small.jpg"},
{"name": "tdxy01","icon":"images/89_avatar_small.jpg"},
{"name": "today","icon":"images/noavatar_small.gif"},
{"name": "hlg","icon":"images/noavatar_small.gif"},
{"name": "itcast","icon":"images/noavatar_small.gif"},
{"name": "heima","icon":"images/noavatar_small.gif"},
{"name": "nima","icon":"images/noavatar_small.gif"},
{"name": "gege","icon":"images/noavatar_small.gif"},
{"name": "nimei","icon":"images/noavatar_small.gif"},
{"name": "goodman","icon":"images/noavatar_small.gif"},
{"name": "haoren","icon":"images/noavatar_small.gif"},
{"name": "yuanxiaojie","icon":"images/noavatar_small.gif"},
{"name": "zhengyue","icon":"images/noavatar_small.gif"},
{"name": "qishi","icon":"images/noavatar_small.gif"},
{"name": "qqtang","icon":"images/noavatar_small.gif"},
{"name": "wawawa","icon":"images/noavatar_small.gif"},
{"name": "haha","icon":"images/noavatar_small.gif"},
{"name": "robot","icon":"images/noavatar_small.gif"},
{"name": "XFlute","icon":"images/noavatar_small.gif"},
{"name": "lovmilan","icon":"images/noavatar_small.gif"},
{"name": "johnny670","icon":"images/noavatar_small.gif"},
{"name": "xiaobinbin02","icon":"images/noavatar_small.gif"},
{"name": "axxxxx","icon":"images/noavatar_small.gif"}
];
//需求：页面显示所有的在线用户。
//思路：模拟服务器获取数据（数组中装着json）.获取ul，把ul的innerHTML属性获取到，然后不间断的往innerHTML属性中赋值。
//赋值要求：li标签的内容。
//步骤：(获取元素)
var div = document.getElementById("users");
var ul = div.firstElementChild || div.firstChild;
// var ul = div.children[0];
//1.模拟服务器获取数据（定义数组），通过循环添加元素（定义for）
//数组中有多少元素，我们就创建多少个li标签
for(var i=0;i<users.length;i++){
//2.模拟实验的操作方式。
ul.innerHTML += '<li>'+
'<a href="#" target="blank"><img src="'+users[i].icon+'" width="48" height="48" alt="'+users[i].name+'"></a>'+
'<p><a href="#" title="'+users[i].name+'" target="_blank">'+users[i].name+'</a></p>'+
'</li>';
}
// var str = "b";
// var str2 = "a"+str+"c";
//实验；
//获取ul
// var div = document.getElementById("users");
// var ul = div.firstElementChild || div.firstChild;
// var ul = div.children[0];
//往ul中添加li元素以及li元素中的内容
// ul.innerHTML += '<li>'+
// '<a href="#" target="_blank"><img src="images/noavatar_small.gif" width="48" height="48" alt="沉眠楚人"></a>'+
// '<p><a href="#" title="沉眠楚人" target="_blank">沉眠楚人</a></p>'+
// '</li>';
// ul.innerHTML += '<li>'+
// '<a href="#" target="_blank"><img src="images/noavatar_small.gif" width="48" height="48" alt="沉眠楚人"></a>'+
// '<p><a href="#" title="沉眠楚人" target="_blank">沉眠楚人</a></p>'+
// '</li>';
// ul.innerHTML += '<li>'+
// '<a href="#" target="_blank"><img src="images/noavatar_small.gif" width="48" height="48" alt="沉眠楚人"></a>'+
// '<p><a href="#" title="沉眠楚人" target="_blank">沉眠楚人</a></p>'+
// '</li>';
// str = 'a'+
// 'b'+
// 'c'+
// 'd';
</script>
</body>
</html>
05-祝愿墙
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
margin: 0 auto;
padding: 0px;
font-size: 12px;
background: url(images/bg.gif) repeat center 36px;
text-align: center;
background-color: #c30230;
}
#content {
margin: 0 auto;
width: 960px;
background: url(images/content_bg.jpg) no-repeat left top;
height: 627px;
position: relative;
}
#content .tip1, #content .tip2, #content .tip3, #content .tip4, #content .tip5, #content .tip6, #content .tip7, #content .tip8 {
position: absolute;
width: 227px;
left: 200px;
top: 100px;
}
#content .tip1 .tip_h {
background: url(images/tip1_h.gif) no-repeat left top;
}
#content .tip1 .tip_h, #content .tip2 .tip_h, #content .tip3 .tip_h, #content .tip4 .tip_h, #content .tip5 .tip_h, #content .tip6 .tip_h, #content .tip7 .tip_h, #content .tip8 .tip_h {
width: 227px;
padding-top: 45px;
height: 23px;
text-align: left;
cursor: move;
}
#content .tip1 .tip_c {
background: url(images/tip1_c.gif) repeat-y;
}
#content .tip1 .tip_c, #content .tip2 .tip_c, #content .tip3 .tip_c, #content .tip4 .tip_c, #content .tip5 .tip_c, #content .tip6 .tip_c, #content .tip7 .tip_c, #content .tip8 .tip_c {
width: 200px;
padding-left: 12px;
padding-right: 15px;
min-height: 40px;
text-align: left;
line-height: 20px;
max-height: 160px;
word-wrap: break-word;
word-break: break-all;
overflow: hidden;
}
#content .tip1 .tip_f {
background: url(images/tip1_f.gif) no-repeat left top;
}
#content .tip1 .tip_f, #content .tip2 .tip_f, #content .tip3 .tip_f, #content .tip4 .tip_f, #content .tip5 .tip_f, #content .tip6 .tip_f, #content .tip7 .tip_f, #content .tip8 .tip_f {
width: 227px;
height: 53px;
padding-top: 20px;
}
#content .close, #content .close2 {
float: left;
font-size: 12px;
cursor: pointer;
color: #000000;
}
.clr {
clear: both;
overflow: auto;
display: block;
height: 0px;
}
#content .icon {
float: left;
width: 35px;
padding-left: 15px;
height: 35px;
text-align: center;
}
#content .name {
float: right;
padding-right: 15px;
text-align: right;
font-size: 14px;
line-height: 35px;
color: #C0F;
}
#content .num {
float: left;
padding-left: 7px;
width: 195px;
}
</style>
</head>
<body>
<!--纸条墙-->
<div id="content">
<!--纸条-->
<!--<div class="tip1" id="tip" >-->
<!--<div class="tip_h" title="双击关闭纸条">-->
<!--<div class="num">第[49568]条 2016-07-7 22:51:52</div>-->
<!--<div class="close" title="关闭纸条" >×</div>-->
<!--<div class="clr"></div>-->
<!--</div>-->
<!--<div class="tip_c">-->
<!--普天同庆，天下大同！-->
<!--</div>-->
<!--<div class="tip_f">-->
<!--<div class="icon">-->
<!--<img src="images/bpic_1.gif" alt="" title="">-->
<!--</div>-->
<!--<div class="name">不愿意透露姓名的吕先生</div>-->
<!--<div class="clr"></div>-->
<!--</div>-->
<!--</div>-->
</div>
<script>
//模拟数据库，获取信息
var messages = [
{"id":1,"name":"mahu","content":"今天你拿苹果支付了么","time":"2016-02-17 00:00:00"},
{"id":2,"name":"haha","content":"今天天气不错，风和日丽的","time":"2016-02-18 12:40:00"},
{"id":3,"name":"jjjj","content":"常要说的事儿是乐生于苦","time":"2016-03-18 12:40:00"},
{"id":4,"name":"9.8的妹纸","content":"把朋友家厕所拉堵了 不敢出去 掏了半小时了都","time":"2016-03-18 12:40:00"},
{"id":5,"name":"雷锋ii.","content":"元宵节快乐","time":"2016-02-22 12:40:00"},
{"id":6,"name":"哎呦哥哥.","content":"据说今晚央视的元宵晚会导演和春晚导演是同一个人，真是躲得过初一，躲不过十五。","time":"2016-02-22 01:30:00"},
{"id":7,"name":"没猴哥，不春晚","content":"班主任:“小明，你都十二岁了，还是三年级，不觉得羞愧吗”？。小明:“一点也不觉得，老师你都四十多岁了，不也是年年在三年级混日子吗？羞愧的应该是你”。老师:……","time":"2016-02-22 01:30:00"},
{"id":8,"name":"哎呦杰杰.","content":"真搞不懂你们地球人，月亮有什么好看的，全是坑，还是对面那哥们好看，","time":"2016-02-22 01:30:00"},
{"id":9,"name":"哎呦哎呦","content":"今天哪里的烟花最好看！！？答：朋友圈。。。","time":"2016-02-22 02:30:00"}
];
//需求1：模拟数据库获取信息，然后在页面上生成数组的长度个tip,然后分别问起内容进行修改。
//需求2：点击内容，提高层级；点击关闭按钮，删除tip标签；双击顶部，删除标签.....
//需求1：模拟数据库获取信息，然后在页面上生成数组的长度个tip,然后分别问起内容进行修改。
//步骤：
//获取相关元素
var content = document.getElementById("content");
//循环生成div标签，然后为innerHTML属性添加内容
for(var i=0;i<messages.length;i++){
//生成新标签
var newDiv = document.createElement("div");
//绑定类名和ID
newDiv.className = "tip1";
newDiv.id = "tip"+messages[i].id;
//改变位置
var topValue = parseInt(Math.random()*400);
var leftValue = parseInt(Math.random()*700);
newDiv.style.top = topValue+"px";
newDiv.style.left = leftValue+"px";
//赋值内容
newDiv.innerHTML = '<div class="tip_h" title="双击关闭纸条">'+
'<div class="num">第[49568]条 '+messages[i].time+'</div>'+
'<div class="close" title="关闭纸条" >×</div>'+
'<div class="clr"></div>'+
'</div>'+
'<div class="tip_c">'+
messages[i].content+
'</div>'+
'<div class="tip_f">'+
'<div class="icon">'+
'<img src="images/bpic_1.gif" alt="" title="">'+
'</div>'+
'<div class="name">'+messages[i].name+'</div>'+
'<div class="clr"></div>'+
'</div>';
//把新创建的元素放入content里面
content.appendChild(newDiv);
//绑定事件，提高层级
newDiv.onclick = fn;
//点击关闭按钮的时候关闭父盒子。
var closeDiv = newDiv.getElementsByClassName("close")[0];
closeDiv.onclick = function () {
//不能用newDiv，因为在页面加载的时候newDiv，已经变成最后一个了，当你点击的时候，用远关闭的是最后的那个div。
// content.removeChild(newDiv);
content.removeChild(this.parentNode.parentNode);
}
//双击关闭按钮类名叫做tip_h
var dbDiv = newDiv.getElementsByClassName("tip_h")[0];
dbDiv.ondblclick = function () {
//不能用newDiv，因为在页面加载的时候newDiv，已经变成最后一个了，当你点击的时候，用远关闭的是最后的那个div。
// content.removeChild(newDiv);
content.removeChild(this.parentNode);
}
}
var index = 1;
function fn(){
this.style.zIndex = index;
index++;
}
</script>
</body>
</html>
06-模拟百度搜索
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 500px;
margin: 200px auto;
}
ul {
width: 392px;
padding: 5px;
list-style: none;
border: 1px solid red;
}
li:hover {
background-color: red;
}
input {
width: 400px;
}
button {
width: 70px;
}
</style>
</head>
<body>
<div class="box">
<input type="text"/>
<button>索搜</button>
<!--<ul>-->
<!--<li>aaaa</li>-->
<!--<li>bbb</li>-->
<!--<li>ccc</li>-->
<!--</ul>-->
</div>
<script>
//需求：输入内容(输入事件，键盘弹起事件)，模拟服务器获取内容，创建ul，并在其中显示。
//步骤：
//1.获取事件源
//2.绑定事件
//3.书写事件驱动程序
//1.获取事件源
//模拟服务器获取内容
var arr = ["a","ab","abc","abcd","aa","aaa"];
var box = document.getElementsByTagName("div")[0];
var inp = box.children[0];
// var inp = document.getElementsByTagName("input")[0];
//2.绑定事件(输入内容(输入事件，键盘弹起事件))
inp.onkeyup = function () {
//创建一个字符串，里面添加满了li和对应的内容。
var newArr = [];
//我要从数组中查询以input中输入内容为开头的信息，然后添加到li中，转换成字符串。
//遍历老数组，然后判断每一项，哪项是以input内容为开头的穿件一个li，塞进去。
for(var i=0;i<arr.length;i++){
//判断当前项，是否已input内容为开头
//获取输入内容input标签的value属性值。
var val = this.value;
if(arr[i].indexOf(val)===0){
newArr.push("<li>"+arr[i]+"</li>");
}
}
var str = newArr.join("");
//Bug1.每次创建新的ul之前，先删除旧的ul
//只有ul存在我们才能删除ul
// var aaa = box.getElementsByTagName("ul")[0];
if(box.children[2]){
//只要存在，那么就是object，object类型的数据，只要不是null,对应的boolean值都是true；
box.removeChild(box.children[2]);
}
//Bug2.如果input中内容为空，那么久不能在生成ul了。
//如果input为空，那么切断函数
//Bug3.如果arr数组中没有以input为开头的元素。那么切断函数
//newArr的长度为0，就能证明以input内容为开头的元素，在arr中不存在
if(this.value.length === 0 || newArr.length === 0){
//切断函数(不在产生新的ul)
return;
}
//3.书写事件驱动程序
var ul = document.createElement("ul");
//把创建好的内容添加到ul中。
ul.innerHTML = str;
box.appendChild(ul);
}
</script>
</body>
</html>
07-判断字符串以某个字符串为开头
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
var str = "abcdefg";
//判断str是否以a为开头？（给定字符串然后他的索引值为0）
var num = str.indexOf("ab");
//只有返回值为0，那么字符串才是以参数为开头
//如果查询不到，返回值为-1；
alert(num);
</script>
</body>
</html>
08-表格操作
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
<script>
// rows:返回值是数组 (只读，table和textarea能用)
var tab = document.getElementsByTagName("table")[0];
//// insertRow() (只有table能调用)
//// var tr = document.createElement("tr");
// var aaa = tab.insertRow(2);//指定索引值之前插入
//// deleteRow() (只有table能调用)
// tab.deleteRow(2);
//
//// console.log(aaa == tr);
// console.log(aaa);
// console.log(tab.rows);
//// cells (只读，tr和textarea能用)
// var ce = tab.children[0];
// console.log(ce.children[0].cells);
//// insertCell() (只有tr能调用)
// ce.children[0].insertCell(0);
//
//// deleteCell() (只有tr能调用)
// ce.children[0].deleteCell(0);
</script>
</body>
</html>
09-window对象
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
//window是bom的顶级对象。通常情况下，可以省略
// window.alert(1);
// alert(2);
// prompt();
// confirm();
// //成员变量也是window的一个属性而已
// var aaa = 1;
// alert(aaa);
// alert(window.aaa);
// alert(aaa === window.aaa);
//自定义函数也是window的一个方法
function fn(){
console.log(1);
console.log(1);
console.log(1);
console.log(1);
}
console.log(window.fn);
</script>
</body>
</html>
10-BOM的内置方法内置对象体验
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="javascript:;">点击我可以穿件一个新的页面</a>
<a href="javascript:;">点击我可以关闭本页面</a>
<div>点击我跳转到百度</div>
<script>
//新窗口 = window.open(地址,是否开新窗口,新窗口的参数);
var a1 = document.getElementsByTagName("a")[0];
// var a2 = document.getElementsByTagName("a")[1];
a1.onclick = function () {
// window.open("http://www.jd.com","_blank");
var json = {"name":"helloworld","fullscreen":"no","location":"no","width":"100px","height":"100px","top":"100px","left":"100px"};
// var newWin = window.open("demo.html","_self",json);
var newWin = window.open("demo.html","_blank",json);
newWin.moveTo(500,500);
// name：新窗口的名称，可以为空
// featurse：属性控制字符串，在此控制窗口的各种属性，属性之间以逗号隔开。
// fullscreen= { yes/no/1/0 } 是否全屏，默认no
// channelmode= { yes/no/1/0 } 是否显示频道栏，默认no
// toolbar= { yes/no/1/0 } 是否显示工具条，默认no
// location= { yes/no/1/0 } 是否显示地址栏，默认no
// directories = { yes/no/1/0 } 是否显示转向按钮，默认no
// status= { yes/no/1/0 } 是否显示窗口状态条，默认no
// menubar= { yes/no/1/0 } 是否显示菜单，默认no
// scrollbars= { yes/no/1/0 } 是否显示滚动条，默认yes
// resizable= { yes/no/1/0 } 是否窗口可调整大小，默认no
// width=number 窗口宽度（像素单位）
// height=number 窗口高度（像素单位）
// top=number 窗口离屏幕顶部距离（像素单位）
// left=number 窗口离屏幕左边距离（像素单位）
}
//
// //关闭本页面
// a2.onclick = function () {
// window.close();
// }
var div = document.getElementsByTagName("div")[0];
div.onclick = function () {
location.href = "http://www.baidu.com";
// window.open("http://www.baidu.com","_blank");
}
// console.log(location.href ) //
// console.log(location.hash ) // 返回url中#后面的内容，包含#
// console.log(location.host ) // 主机名，包括端口
// console.log(location.hostname) // 主机名
// console.log(location.pathname) // url中的路径部分
// console.log(location.protocol) // 协议 一般是http、https
// console.log(location.search ) // 查询字符串
//navigator
// console.log(navigator.userAgent);
// console.log(navigator.platform);
//回退
//history.go(-1);
// history.back();
</script>
</body>
</html>
11-体验定时器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
//setInterval(); setTimeout();
// var num = 0;
// setInterval(function () {
// console.log(num);
// num++;
// },1000);
//用途：setInterval()循环定时器；周而复始的执行（循环执行）
//用途：setTimeout() 炸弹定时器；用完以后立刻报废（只执行一次）
//定义方法1(匿名函数)
// setInterval(function () {
// console.log(1);
// },1000);
// //定义方法2
// setInterval(fn,1000);
// function fn(){
// console.log(2);
// }
//定义方法3
// setInterval("fn(3)",1000);
// function fn(aaa){
// console.log(aaa);
// }
</script>
</body>
</html>
12-定时器的高级
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
//返回值，清除定时器。
var num = 1;
//setInterval他的返回值就是定时器的名字
var timer = setInterval(function () {
console.log(num);
num++
if(num===10){
//如何停止定时器呢？？？
clearInterval(timer);
}
},500);
</script>
</body>
</html>
13-5秒钟后关闭广告
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
height: 5000px;
}
img {
position: fixed;
top: 50%;
margin-top: -220px;
}
.img1 {
left: 10px;
}
.img2 {
right: 10px;
}
div {
width: 800px;
margin: 150px auto;
color: red;
text-align: center;
font: 700 40px/50px "simsun";
}
</style>
<script>
window.onload = function () {
//获取相关元素
var imgArr = document.getElementsByTagName("img");
//设置定时器
setTimeout(fn,5000);
function fn(){
imgArr[0].style.display = "none";
imgArr[1].style.display = "none";
}
}
</script>
</head>
<body>
<img class="img1" src="images/1.gif" alt=""/>
<img class="img2" src="images/2.gif" alt=""/>
<div>
我为党国流过血，我为抗战立过功，我要见委座，我要见委座，我要见委座!!!啪...<br>
我为党国流过血，我为抗战立过功，我要见委座，我要见委座，我要见委座!!!啪...<br>
我为党国流过血，我为抗战立过功，我要见委座，我要见委座，我要见委座!!!啪...<br>
我为党国流过血，我为抗战立过功，我要见委座，我要见委座，我要见委座!!!啪...<br>
我为党国流过血，我为抗战立过功，我要见委座，我要见委座，我要见委座!!!啪...<br>
我为党国流过血，我为抗战立过功，我要见委座，我要见委座，我要见委座!!!啪...<br>
我为党国流过血，我为抗战立过功，我要见委座，我要见委座，我要见委座!!!啪...<br>
我为党国流过血，我为抗战立过功，我要见委座，我要见委座，我要见委座!!!啪...<br>
</div>
</body>
</html>
14-模拟京东关闭广告栏
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.site-nav {
height: 30px;
background-color: #ccc;
}
.top-banner {
background-color: blue;
}
.w {
width: 1210px;
height: 80px;
background-color: pink;
margin: 0 auto;
position: relative;
}
.search {
width: 1210px;
height: 80px;
background-color: red;
margin: 0 auto;
}
a {
position: absolute;
top: 10px;
right: 10px;
width: 25px;
height: 25px;
text-align: center;
line-height: 25px;
background-color: #000;
color: #fff;
text-decoration: none
}
</style>
</head>
<body>
<div class="site-nav"></div>
<div class="top-banner" style="opacity: 1">
<div class="w">
<a href="#">×</a>
</div>
</div>
<div class="search">
<script>
//需求：点击关闭按钮，先让top-banner这个盒子透明度变为0，紧接着display：none;
//步骤：
//1.获取事件源
//2.绑定事件
//3.书写事件驱动程序（定时器，透明度变为0，清除定时器，并隐藏盒子）
//1.获取事件源
var topBaner = document.getElementsByClassName("top-banner")[0];
var a = topBaner.children[0].firstElementChild || topBaner.children[0].firstChild ;
//定义定时器
var timer = null;
//2.绑定事件
a.onclick = function () {
//3.书写事件驱动程序（定时器，透明度变为0，清除定时器，并隐藏盒子）
timer = setInterval(function () {
topBaner.style.opacity -= 0.1;
if(topBaner.style.opacity<0){
topBaner.style.display = "none";
clearInterval(timer);
}
},50);
}
</script>
</div>
</body>
</html>
