01appendChild的细节
<!--
appendChild:给某个元素添加一个子元素，添加到最后
我们昨天搭配 document.createElement使用的
细节：
如果用appendChild添加的是一个已经存在的子元素，那么都相当于是移动到这个父元素的最后
-->
</head>
<body>
<input type="button" value="创建新的li添加到第一个ul" id="btn1">
<input type="button" value="找到li3再重新加到ul1" id="btn2">
<input type="button" value="找到li3再添加到ul2" id="btn3">
<input type="button" value="创建新的li添加到两个ul里" id="btn4">
<ul id="ul1">
<li>隔壁老王1</li>
<li>隔壁老王2</li>
<li id="li3">隔壁老王3</li>
<li>隔壁老王4</li>
<li>隔壁老王5</li>
</ul>
<ul id="ul2">
<li>隔壁老周1</li>
<li>隔壁老周2</li>
<li>隔壁老周3</li>
<li>隔壁老周4</li>
<li>隔壁老周5</li>
</ul>
<script>
// 找到ul1
var ul1 = document.getElementById('ul1');
// 找到li3
var li3 = document.getElementById('li3');
// 找到ul2
var ul2 = document.getElementById('ul2');
// 第一个按钮的点击事件
document.getElementById('btn1').onclick = function(){
// 新的空li标签
var li = document.createElement('li');
li.innerHTML = "我是新的li";
ul1.appendChild(li);
}
// 第二个按钮的点击事件
document.getElementById('btn2').onclick = function(){
ul1.appendChild(li3);
}
// 第三个按钮的点击事件
document.getElementById('btn3').onclick = function(){
ul2.appendChild(li3);
};
// 第四个按钮的点击事件
document.getElementById('btn4').onclick = function(){
var li = document.createElement('li');
li.innerHTML = "这是一个寂寞的天，下着有些猥琐的雨";
// 这是第一次添加，确实添加过去了
ul1.appendChild(li);
// 但是第二次添加时，相当于已经存在了，那么只是移动到第二个ul身上
ul2.appendChild(li);
}
</script>
02水果选择案例
<!-- multiple：多选
因为下拉框默认为单选，所以给一个multiple就能变成多选的形式
-->
<select id="selLeft" multiple>
<option>苹果</option>
<option>香蕉</option>
<option>鸭梨</option>
<option>荔枝</option>
<option>水蜜桃</option>
<option>菠萝</option>
<option>黑凤梨</option>
<option>西瓜</option>
</select>
<!-- g:greater t:than 加在一起就是大于的意思 -->
<button id="btn1"> >> </button>
<button id="btn2"> << </button>
<button id="btn3"> > </button>
<button id="btn4"> < </button>
<select id="selRight" multiple>
</select>
<script>
// 找到左边下拉框
var selLeft = document.getElementById('selLeft');
// 找到右边下拉框
var selRight = document.getElementById('selRight');
// 给第一个按钮加点击事件
// 把左边的所有内容全部移动到右边去
document.getElementById('btn1').onclick = function(){
// 把左边的所有内容赋值给右边 ,如果用=会把右边原来的部分都覆盖掉
// 所以记得要用+=，在原来有值的基础上再加一些值
selRight.innerHTML += selLeft.innerHTML;
// 把左边内容清空
selLeft.innerHTML = "";
}
// 第二个按钮点击事件，把右边的内容全部移动到左边去
document.getElementById('btn2').onclick = function(){
selLeft.innerHTML += selRight.innerHTML;
selRight.innerHTML = "";
}
// 把左边选择的部分移动到右边去
document.getElementById('btn3').onclick = function(){
for(var i = 0; i < selLeft.children.length;){
// == true可以省略，因为selected本身就是返回bool值
// selLeft.children[i]这个是每个option标签
if( selLeft.children[i].selected == true ){
// 如果选中了，就不要i++
// 代表下标不要变，因为选中了会移动过去，后面的会变成当前的下标
selRight.appendChild( selLeft.children[i] );
}else{
// 代表没选中，没选中，就要i++，然后进入到下一个元素
i++;
}
}
}
// 把右边选择的部分移动到左边去
document.getElementById('btn4').onclick = function(){
// 遍历右边的子元素
for(var i = 0; i < selRight.children.length; ){
if( selRight.children[i].selected == true ){
selLeft.appendChild( selRight.children[i] );
}else{
i++;
}
}
}
</script>
03 createElement创建元素效率高而且不会覆盖事件
<script>
// 找到div
var box = document.getElementById('box');
var sp = document.getElementById('sp');
sp.onclick = function(){
alert('sp');
}
// 按钮的点击事件
document.getElementById('btn').onclick = function(){
for(var i = 0; i < 10000; i++){
var p = document.createElement('p');
p.innerHTML = "我是p标签";
// 添加到box里
box.appendChild(p);
}
}
</script>
04获取下一个兄弟节点和下一个兄弟元素
<!--
nextSibling：
找到下一个兄弟节点：文本、注释、标签
nextElementSibling：
找到下一个兄弟元素：只找到标签
但是如果后面没有兄弟标签得到null
IE8和之前的浏览器不支持
-->
</head>
<body>
<ul>
<li>隔壁老王1</li>
<li>隔壁老王2</li>
<li id="li3">隔壁老王3</li>
<li>隔壁老王4</li>
<li id="li5">隔壁老王5</li>
</ul>
<script>
// 找到li3
var li3 = document.getElementById('li3');
// 找到下一个兄弟节点：包括文本、注释、标签
// console.log(li3.nextSibling);
// 找到下一个兄弟元素，只会找到标签
// console.log(li3.nextElementSibling);
// 隔壁老王5
// console.log(li3.nextElementSibling.nextElementSibling);
// null
// console.log(li3.nextElementSibling.nextElementSibling.nextElementSibling);
// 就是要你找到下一个兄弟元素，而且要兼容所有浏览器
// 思想：nextSibling没有兼容问题，那我们用它就行了
// 但是如果用它可能找到的不一定是标签
// 找到一个先判断一下是不是标签，如果是就找到了，如果不是，继续往下找
// console.log( li3.nextSibling);
// 找li3的下一个兄弟节点
// var node = li3.nextSibling;
// // 只要不等于1，代表不是标签，就会继续找下一个
// while(node.nodeType != 1){
// // 继续找它下一个
// node = node.nextSibling;
// }
// // 能出循环，就代表==1了，也就是找到标签了
// console.log(node);
// var li5 = document.getElementById('li5');
// var node = li3.nextSibling;
// // 节点不为null，并且节点不为1，都要继续找下一个
// while (node != null && node.nodeType != 1) {
// node = node.nextSibling;
// }
// // 要么找到null，要么找到标签
// console.log(node);
/*
一段代码好多地方要用，封装成函数
步骤：声明一个函数。直接把代码复制进来作为函数体
把不能写死的数据当形参传入
*/
function getNextElement(ele) {
var node = ele.nextSibling;
// 节点不为null，并且节点不为1，都要继续找下一个
while (node != null && node.nodeType != 1) {
node = node.nextSibling;
}
// 要么找到null，要么找到标签
// console.log(node);
return node;
}
var res1 = getNextElement(li5);
var res2 = getNextElement(li3);
console.log(res1);
console.log(res2);
05获取上一个兄弟节点和上一个兄弟元素
<!--
previousSibling
找到上一个兄弟节点
所有浏览器都支持
previousElementSibling
找到上一个兄弟元素
这个IE8和之前浏览器不支持
-->
</head>
<body>
<ul>
<li id="li1">隔壁老王1</li>
<li>隔壁老王2</li>
<li id="li3">隔壁老王3</li>
<li>隔壁老王4</li>
<li>隔壁老王5</li>
</ul>
<script>
var li3 = document.getElementById('li3');
// // 找到上一个兄弟节点：包括文本、注释、标签
// console.log(li3.previousSibling);
// // 找到上一个兄弟元素：只找到标签
// console.log(li3.previousElementSibling);
// // 隔壁老王1
// console.log(li3.previousElementSibling.previousElementSibling);
// // null
// console.log(li3.previousElementSibling.previousElementSibling.previousElementSibling);
// var li1 = document.getElementById('li1');
// var node = li1.previousSibling;
// while( node != null && node.nodeType != 1){
// node = node.previousSibling;
// }
// console.log(node);
function getPrevElement(ele) {
var node = ele.previousSibling;
while (node != null && node.nodeType != 1) {
node = node.previousSibling;
}
return node;
}
var res1 = getPrevElement(li1);
var res2 = getPrevElement(li3);
console.log(res1);
console.log(res2);
06祝福墙案例
<!--
ondblclick
双击事件
-->
<style>
* {
margin: 0;
padding: 0;
}
body {
background: url("images/bg.gif");
font: 12px "simsun";
}
.content {
width: 960px;
height: 627px;
margin: 0 auto;
background: url("images/content_bg.jpg");
/* 为了让子元素相对于它来定位 */
position: relative;
}
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
content: '';
display: table;
}
.clearfix:after {
clear: both;
}
.tip {
width: 227px;
position: absolute;
top: 100px;
left: 200px;
}
.tip-h {
padding-top: 50px;
background: url("images/tip1_h.gif") no-repeat;
}
.text {
float: left;
padding-left: 10px;
}
.close {
float: right;
margin-right: 10px;
}
.tip-m {
/* 最小高度是40，实际是上让内容撑开，但是内容可能特别小，她保证高度也最低有40 */
min-height: 40px;
padding: 0 10px;
padding-top: 10px;
background: url("images/tip1_c.gif");
}
.tip-f {
height: 53px;
background: url("images/tip1_f.gif");
padding-top: 20px;
}
.icon {
float: left;
padding-left: 10px;
}
.name {
float: right;
padding-right: 10px;
}
</style>
</head>
<body>
<div class="content" id="content">
<!-- <div class="tip" id="tip">
<div class="tip-h clearfix" title="双击关闭纸条">
<div class="text">第[49568]条 2019-04-16 22:51:52</div>
<div class="close" title="关闭纸条">x</div>
</div>
<div class="tip-m">这是一个寂寞的天，下着有些猥琐的雨</div>
<div class="tip-f clearfix">
<div class="icon">
<img src="images/bpic_1.gif" alt="" />
</div>
<div class="name">群姐</div>
</div>
</div> -->
</div>
</body>
</html>
<!--
步骤：
1. 数组有多少个元素创建多少个便利贴
1.1 遍历数组
1.2 在循环里创建div，给它一个类叫tip
1.3 去复制内容，再赋值给div的innerHTML
1.4 在循环外面找到content
1.5 把创建出来的div添加到content里面
2. 给每个div设置随机位置
2.1 先算出最大能到的x和最大能到的y
2.2 生成2个随机数x,y
2.3 把x,y添加到这个div的left和top里
3. 让数组中的数据，显示到界面
3.1 先获取到每个元素
3.2 拼接字符串的时候把对应的属性放到对应的内容位置
4. 完成双击关闭便利贴
4.1 找到tip-h,也就是tip的下标0子元素，给他加双击事件（ondblclick）
4.2 点击事件里，谁双击，就把谁的父元素隐藏
5. 完成x的点击事件
4.1 找到x，也就是tip的下标0子元素的下标1子元素，给它加点击事件（onclick）
4.2 点击事件里,谁被点，就把谁父元素的父元素隐藏
6. 完成点谁谁在最上面
6.1 声明一个变量zIndex从0开始
6.2 点一下让zIndex++
6.3 谁被点，就把zIndex给谁
-->
<script>
// 假设这个数组就是从服务器返回来的
// 就意味着数组有多少个元素，我就要创建多少个便利贴显示在界面上
// 这个数组每个元素都是一个，每个对象都是一个便利贴的数据
var messages = [
{ "id": 1, "name": "张学友", "content": "刘德华说的对", "time": "2017-12-26 00:00:00" },
{ "id": 2, "name": "刘德华", "content": "周林林比林利群帅", "time": "2017-12-25 12:40:00" },
{ "id": 3, "name": "郭富城", "content": "我认同张学友说的", "time": "2017-12-25 12:45:00" },
{ "id": 4, "name": "林利群", "content": "把朋友家厕所拉堵了 不敢出去 掏了半小时了都", "time": "2017-12-24 12:40:00" },
{ "id": 5, "name": "周林林", "content": "师者，所以传道受业解惑也。", "time": "2016-02-22 12:40:00" },
{ "id": 6, "name": "紫霞", "content": "至尊宝，等我", "time": "2017-12-23 09:30:00" },
{ "id": 7, "name": "孙悟空", "content": "吃俺老孙一棒！", "time": "2017-12-23 09:30:00" },
{ "id": 8, "name": "某某", "content": "旋转，跳跃，我不停歇…………舞娘的喜悲没人看见", "time": "2017-12-26 01:30:00" },
{ "id": 9, "name": "哎呦哎呦", "content": "今天谁的礼物最好看！！？答：朋友圈。。。", "time": "2017-12-25 20:30:00" }
];
// 找到content
var content = document.getElementById('content');
// 数组有多少个元素就有多少个便利贴，所以遍历数组
for (var i = 0; i < messages.length; i++) {
// 取出每个元素
var obj = messages[i];
// 创建多少个便利贴
var tip = document.createElement('div');
tip.className = "tip";
tip.innerHTML = '<div class="tip-h clearfix" title="双击关闭纸条">' +
'<div class="text">第[' + obj.id + ']条 ' + obj.time + '</div>' +
'<div class="close" title="关闭纸条">x</div>' +
'</div>' +
' <div class="tip-m">' + obj.content + '</div>' +
' <div class="tip-f clearfix">' +
' <div class="icon">' +
' <img src="images/bpic_1.gif" alt="" />' +
'</div>' +
'<div class="name">' + obj.name + '</div>' +
'</div>';
// 把这个便利贴加到content里面
content.appendChild(tip);
// 随机位置：
// x范围是0 到 content宽度 - div宽度
var maxX = 960 - 227;
// y范围是0 到 content高度 - div高度
var maxY = 627 - 187;
// 生成随机的x和y
var x = parseInt(Math.random() * (maxX + 1));
var y = parseInt(Math.random() * (maxY + 1));
// 把随机x和y给便利贴的left和top
tip.style.left = x + "px";
tip.style.top = y + "px";
// 第一个子元素就是tip-h头部部分，给他添加双击事件
tip.children[0].ondblclick = function () {
// 谁被点，就隐藏谁的父元素（就整体隐藏了）
this.parentNode.style.display = "none";
}
// 找到这个x,给它加点击事件
tip.children[0].children[1].onclick = function(){
this.parentNode.parentNode.style.display = "none";
}
// 从0开始
var zIndex = 0;
// 给整个tip加点击事件，点谁谁就在最上面
tip.onclick = function(){
// 点一次让层级+1
zIndex++;
// 谁被点谁就用最新的层级
this.style.zIndex = zIndex;
}
// console.log(tip);
}
</script>
07京东tab栏切换
<style>
* {
margin: 0;
padding: 0;
}
ul {
/* 去掉li前面的小点点 */
list-style: none;
}
.box {
width: 400px;
height: 300px;
border: 1px solid #ccc;
margin: 100px auto;
}
.hd {
height: 45px;
}
.hd span {
/* 转成行内块元素 */
display: inline-block;
/*将行内元素转换成行内块元素，宽高才起作用*/
width: 90px;
height:45px;
background-color: pink;
/* 设置行高的时候，如果没有给高度，会把高度设置跟行高一样高 */
line-height: 45px;
text-align: center;
cursor: pointer;
}
.hd span.current {
/*交集选择器，标签指定式选择器*/
background-color: purple;
/*紫色*/
}
.bd li {
height: 255px;
background-color: purple;
display: none;
/*设置隐藏*/
}
.bd li.current {
display: block;
/*显示*/
}
</style>
</head>
<body>
<div class="box" id="box">
<!-- 栏目模块 -->
<div class="hd">
<span class="current">体育</span>
<span>娱乐</span>
<span>新闻</span>
<span>综合</span>
</div>
<!-- 内容模块 -->
<div class="bd">
<ul id="list">
<li class="current">我是体育模块</li>
<li>我的娱乐模块</li>
<li id="li3">我是新闻模块</li>
<li>我是综合模块</li>
</ul>
</div>
</div>
<script>
// 找到所有span
var spList = document.getElementsByTagName('span');
// 找到所有li
var liList = document.getElementsByTagName('li');
// 遍历所有的span，给它们加鼠标移入事件
for(var i = 0; i < spList.length; i++){
// span的下标存到每个span自己身上
spList[i].setAttribute('index',i);
// 给每个span加鼠标移入事件
spList[i].onmouseover = function(){
// 排他
// 谁移入了，就让所有的span先恢复成默认，也让li恢复成默认
for(var j = 0; j < spList.length; j++){
spList[j].className = "";
liList[j].className = "";
}
// 谁移入谁变紫，变紫就是类名加current
this.className = " current";
// 谁移入取出谁的下标
var idx = this.getAttribute('index');
// 根据下标找到对应的li标签
liList[idx].className = "current";
}
}
</script>
08京东商品展示
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
padding-top: 15px;
}
.box {
width: 350px;
height: 420px;
border: 1px solid #000;
margin: 100px auto;
}
li {
float: left;
width: 20%;
text-align: center;
}
img:hover {
outline: 3px solid #0094ff;
}
</style>
</head>
<body>
<div class="box">
<div>
<!-- 放大图的 -->
<img src="images1/b1.jpg" id="big" alt="" />
</div>
<div>
<ul id="ul">
<!-- 放小图的，data-src是我们自己写的自定义属性，保存了这张小图对应的大图 -->
<li><img src="images1/s1.jpg" data-src="images1/b1.jpg" alt="" /></li>
<li><img src="images1/s2.jpg" data-src="images1/b2.jpg" alt="" /></li>
<li><img src="images1/s3.jpg" data-src="images1/b3.jpg" alt="" /></li>
<li><img src="images1/s4.jpg" data-src="images1/b4.jpg" alt="" /></li>
<li><img src="images1/s5.jpg" data-src="images1/b5.jpg" alt="" /></li>
</ul>
</div>
</div>
<script>
// 找到大图
var big = document.getElementById('big');
// 找到ul
var ul = document.getElementById('ul');
// 找到所有的小图
var imgList = ul.getElementsByTagName('img');
// 给小图加鼠标移入事件
for(var i = 0; i < imgList.length; i++){
imgList[i].onmouseover = function(){
// 谁移入就取出谁的data-src,再赋值给大图
big.src = this.getAttribute('data-src');
}
}
