兄弟节点
<div id="box">
<div>这是c1区域</div>
<div>这是c2区域</div>
<div class="current">这是c3区域</div>
<div>这是c4区域</div>
<div>这是c5区域</div>
<div>这是c6区域</div>
</div> <script>
var c3 = document.querySelector('.current');
console.log(c3.nextElementSibling);
console.log(c3.previousElementSibling);
</script>动态创建表格
<style>
#box table {
/* 边线重合时显示一边 */
border-collapse: collapse;
}
</style>
</head>
<body>
<div id="box">
</div><script>
//模拟数据
var datas = [{
names: 'zs',
subject: '语文',
score: 90,
}, {
names: 'ls',
subject: '数学',
score: 98,
}, {
names: 'ww',
subject: '英语',
score: 99,
}, {
names: 'xs',
subject: '数学',
score: 88,
}, {
names: 'dc',
subject: '语文',
score: 92,
}];
//1 创建table
var table = document.createElement('table');
table.border = '1px';
table.width = '400px';
var box = document.getElementById('box');
box.appendChild(table);
// 2 创建表头
// 表头数据
var tablehead = ['姓名', '科目', '成绩', '操作']
var thead = document.createElement('thead');
table.appendChild(thead);
var tr = document.createElement('tr');
tr.style.height = '40px';
tr.style.backgroundColor = 'lightgray';
thead.appendChild(tr);
//遍历头部数据创建th
for (i = 0; i < tablehead.length; i++) {
var th = document.createElement('th');
tr.appendChild(th);
th.innerHTML = tablehead[i];
}
// 3 创建数据行
var tbody = document.createElement('tbody');
table.appendChild(tbody);
//循环遍历对象
for (i = 0; i < datas.length; i++) {
var data = datas[i];
tr = document.createElement('tr');
tbody.appendChild(tr);
//每个data都是一个对象
for (var key in data) {
var td = document.createElement('td');
tr.appendChild(td);
td.innerHTML = data[key];
}
//生成删除对应的列
td = document.createElement('td');
tr.appendChild(td);
var link = document.createElement('a');
td.appendChild(link);
//设置成超链接来用的，所以
link.href = 'javascript:void(0)';
td.innerHTML = '删除';
}
</script>元素操作方法
<ul class="first">
<li>1</li>
<li>2</li>
<li class="three">3</li>
</ul>
<script>
// //元素操作的方法
// createElement()
// appdendChild()
// removeChild()
// 把元素插入到指定的位置
// insertBefore()
// 吧当前元素的标签进行替换
// replaceChild()
// //重点掌握前三个
//获取元素
var firstul = document.querySelector('.first');
var li = document.createElement('li');
firstul.appendChild(li);
li.innerText = '这是后来增加的';
var threeli = document.querySelector('.three');
firstul.removeChild(threeli);
//把元素插到指定位置
var li1 = document.createElement('li');
//将新创建的元素添加到ul里面
firstul.appendChild(li1);
firstul.insertBefore(li1, threeli);
</script>选择水果
<style>
select {
width: 200px;
height: 200px;
background-color: #33cccc;
font-size: 20px;
}
</style>
</head>
<body>
<select name="" id="all" multiple="multiple">
<option value="">苹果</option>
<option value="">香蕉</option>
<option value="">橘子</option>
<option value="">西瓜</option>
<option value="">橙子</option>
<option value="">梨</option>
<option value="">水蜜桃</option>
</select>
<input type="button" value=">>" class="btn1">
<input type="button" value="<<" class="btn2">
<input type="button" value=">" class="btn3">
<input type="button" value="<" class="btn4">
<select name="" id="select" multiple="multiple">
</select><script>
// 获取元素
var all = document.querySelector('#all');
var select = document.querySelector('#select');
var btn1 = document.querySelector('.btn1');
var btn2 = document.querySelector('.btn2');
var btn3 = document.querySelector('.btn3');
var btn4 = document.querySelector('.btn4');
//注册事件
btn1.onclick = function() {
// //错误的 因为children中的项被移走之后，索引会重新排序
// console.log('点击了');
// for (var i = 0; i < all.children.length; i++) {
// console.log(i);
// var option = all.children[i];
// select.appendChild(option);
// }
// //水果的顺序发生改变
// for (var i=all.children.length-1;i>=0;i--){
// var option=all.children[i];
// select.appendChild(option);
// }
// 先获取子元素，将来在发生变化就不会受影响
// 现在len 的值始终是当前获取的all.children.length当前的个数
console.log(all.children);
var len = all.children.length;
console.log(len);
for (var i = 0; i < len; i++) {
var option = all.children[0];
select.appendChild(option);
}
}
// 第二个按钮的注册事件
btn2.onclick = function() {
var len = select.children.length;
for (i = 0; i < len; i++) {
var option = select.children[0];
all.appendChild(option);
}
//3 选中的跑道另一边
btn3.onclick = function() {
//存储选中的框
var arr = [];
for (i = 0; i < all.children.length; i++) {
var option = all.children[i];
if (option.selected) { //判断是否是选中状态
arr.push(option);
option.selected = false;
}
}
//把数组中的option移动到第二个select
for (i = 0; i < arr.length; i++) {
var option = arr[i];
select.appendChild(option);
}
}
// 4 选中的select返回到all
btn4.onclick = function() {
//存储选中的框
var arr = [];
for (i = 0; i < select.children.length; i++) {
var option = select.children[i];
if (option.selected) { //判断是否是选中状态
arr.push(option);
option.selected = false;
}
}
//把数组中的option移动到第二个select
for (i = 0; i < arr.length; i++) {
var option = arr[i];
all.appendChild(option);
}
}
}
</script>移除事件
<script>
//获取元素
var btn = document.querySelector('#btn');
//移除元素的第一种方式
btn.onclick = function() {
alert('hello world');
btn.onclick = null; //移除
}
//移除元素的第二种方式
//这种方式的函数不能使用匿名函数
function btnClick() {
alert('hello world');
//移除事件
btn.removeEventListener('click', btnClick);
}
btn.addEventListener('click', btnClick);
// //第三种方式
// add.attackEvent()的移除方式是detach
// 这种方式只有IE支持
</script>监听事件
<script>
//获取元素
var btn1 = document.querySelector('#btn1');
//注册事件的第一种方式
//无法给同一元素注册多个事件
btn1.onclick() = function() {
}
// 注册事件的第二种方法
//浏览器有兼容性问题 IE9以后支持
btn1.addEventListener('click', function() {
alert('hello world');
})
btn1.addEventListener('click', function() {
alert('hello nn');
})
// 注册事件的第三种方式attachment()
//IE6-IE10支持
// 如果是btn.onclick=function() {} 只能显示一个注册事件
//addEventListener 可以显示多个注册事件
</script>事件冒泡
<style>
.box1 {
width: 300px;
height: 300px;
background-color: red;
}
.box2 {
width: 200px;
height: 200px;
background-color: green;
}
.box3 {
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3"></div>
</div>
</div> <script>
var box1 = document.querySelector('.box1');
var box2 = document.querySelector('.box2');
var box3 = document.querySelector('.box3');
var arr = [box1, box2, box3];
for (i = 0; i < arr.length; i++) {
// console.log(arr[i]);
arr[i].addEventListener('click', function() {
console.log(this.className);
});
// 默认是false 发生冒泡
// box3
// 事件冒泡.html:44 box2
// 事件冒泡.html:44 box1
// 事件冒泡.html:54 body
//true发生事件捕获body box和body的事件都要设置成true
// 事件冒泡.html:44 box1
// 事件冒泡.html:44 box2
// 事件冒泡.html:44 box3
}
document.body.addEventListener('click', function() {
console.log('body');
})
//事件的三个阶段
// 1 事件捕获
// 2 事件执行
// 3 事件冒泡
</script>事件冒泡的作用
<ul id="ul">
<li>昭君</li>
<li>西施</li>
<li>杨玉环</li>
<li>芙蓉姐姐</li>
<li>凤姐</li>
<li>李冰冰</li>
</ul> <script>
//事件冒泡的作用：事件委托
var ul = document.querySelector('#ul');
ul.onclick = function(e) {
//e 事件参数
console.log(e.target);
e.target.style.backgroundColor = 'red';
}
</script><style>
.box1 {
width: 300px;
height: 300px;
background-color: red;
}
.box2 {
width: 200px;
height: 200px;
background-color: green;
}
.box3 {
width: 100px;
height: 100px;
background-color: blue;
}
</style><input type="button" value="按钮" id="btn">
<div class="box1">
<div class="box2">
<div class="box3">
</div>
</div>
</div>
<script>
//通过事件对象，可以获取到事件发生的时候和事件相关的一些数据
var box1 = document.querySelector('.box1');
var box2 = document.querySelector('.box2');
var box3 = document.querySelector('.box3');
var arr = [box1, box2, box3];
for (var i = 0; i < arr.length; i++) {
var box = arr[i];
box.onclick = function(e) {
//事件的阶段
// e.target 获取真正触发事件的对象
console.log(e.target);
// console.log(this);
// e.currentTarget 和this一样 获取时间处理函数所属的对象
}
}
</script>
<div class="box1">
</div>
<script>
//通过事件对象，可以获取到事件发生的时候和事件相关的一些数据
var box1 = document.querySelector('.box1');
box1.onclick = fn;
box1.onmouseover = fn;
box1.onmouseout = fn;
function fn(e) {
switch (e.type) {
case 'click': //这里是字符串的click，不加上on
console.log('点击');
break;
case 'mouseover':
console.log('鼠标经过');
break;
case 'mouseout':
console.log('鼠标离开');
break;
}
}
</script><script>
var box = document.querySelector('.box');
box.onclick = function(e) {
//获取的鼠标相对于可视区域的坐标
console.log(e.clientX);
console.log(e.clientY);
//鼠标在当前页面的位置
console.log(e.pageX);
console.log(e.pageY);
}
</script>
// e.clientX/e.clientY 鼠标在可视区域中的位置
// e.pageX/e.pageY 鼠标在页面中的位置
// pageX=e.clientX+页面滚动出去的距离
// 页面滚动出去的距离
// document.body.scrollLeft
// document.body.scrollTop
获取鼠标在盒子上的位置
<div class="box"></div>
<script>
var box = document.querySelector('.box');
//获取盒子的w位置
console.log(box.offsetLeft, box.offsetTop);
box.onclick = function(e) {
var x = e.pageX - box.offsetLeft;
var y = e.pageY - box.offsetTop;
console.log(x);
console.log(y);
}
</script> //取消默认行为 比如不让a链接跳转
// 1 return false
// 2 e.preventDefault()
// 取消冒泡
// e.stopPropagation()
//键盘事件
// keydown 键盘按下的时候
//keyup 键盘弹起的时候
//keydown 和keyup的区别 ------ keydown的时候我们所按下的键还没有落入文本框
// keyup键盘弹起的时候按的键已经落入文本框
<input type="text " id="txt">
<script>
var txt = document.querySelector('#txt');
txt.onkeydown = function(e) {
//判断用户当前数下的键
// 按下后退键 8 删除一个字符
if ((e.keyCode < 48 || e.keyCode > 57) && e.keyCode !== 8) {
//输入的非数字就取消默认行为
// e.preventDefault(); // 或者是return false
return false;
}
}
</script>
417
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
