今天清理电脑,把以前的本地学习笔记移到博客里面来
目录:
1,DOM 基础
2,DOM操作表格
3,js事件应用
4,键盘按键控制div移动
5,键盘提交留言
6,拖拽div
7,一串跟着鼠标走的div
8,右键菜单
1,DOM 基础
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dom基础</title>
<script>
//从parent元素中选取css类名为className的元素
function getByClass(parent,className){
var result = [];//结果数组
var elem = parent.getElementsByTagName('*');//找到parent中的所有元素
for(var i = 0;i<elem.length;i++){
if(elem[i].className == className){//筛选
result.push(elem[i]);//满足条件,存入结果数组
}
}
return result;//返回结果数组
}
window.onload = function(){
var o1 = document.getElementById("ul");
// alert(o1.childNodes.length);
console.log(o1.children.length);
//以下是常用的选择子节点的操作
// for(var i = 0;i<o1.childNodes.length;i++){
// if(o1.childNodes[i].nodeType == 1){
// alert(i);
// }
// }
var a1 = document.getElementsByClassName("a1");
for(var i=0;i< a1.length;i++) {
a1[i].onclick = function () {
this.parentNode.style.display = 'none';
}
}
//测试函数:getByClass
var box = getByClass(o1,'a1');
for(var i = 0;i<box.length;i++){
box[i].style.backgroundColor = 'red';
}
//DOM创建元素
var txt = document.getElementById('txt');
var btn1 = document.getElementById("btn1");
var aLi = o1.getElementsByTagName('li');//获得ul中的li
btn1.onclick = function(){
var li1 = document.createElement('li');
li1.innerHTML = txt.value;
// o1.appendChild(li1);
o1.insertBefore(li1,aLi[0]);//在第0个前面插入元素
}
}
</script>
</head>
<body>
DOM节点:
childNodes:子节点数组(包含文本节点和元素节点,不同浏览器下不一样)
nodeType:节点类型
取值如下:
3: 文本节点
1:元素节点
获取子节点
children :只包括元素的个数,不包括文本节点
parentNode :父节点
例子:点击链接,隐藏整个li
offsetParent :获取一个元素定位的父级节点
例子:获取元素在页面上的实际位置
首尾子节点:
有兼容性问题
(IE 6-8 )firstChild、lastChild:
(高级浏览器)firstElementChild、lastElementChild
兄弟节点:
有兼容性问题
(IE 6-8 )nextSibling、nextElementSibling
(高级浏览器)previousSibling、previousElementSibling
元素属性操作:
第一种:oDiv.style.display = "block";
第二种:oDiv.style["display"] = "block";
第三种:DOM方式
获取:getAttribute(名称)
设置:setAttribute(名称,值)
删除:removeAttribute(名称)
创建、插入和删除DOM元素
创建DOM元素:
createElement(标签名): 创建一个节点
appendChild(节点): 追加一个节点(如果该元素原来有父级的话,就会先把元素从原有的父级上删掉,再添加到新的父级上面)
例子:为ul插入li
插入元素:
insertBefore(节点,在谁之前): 在已有的元素前插入
例子:倒叙插入li
删除元素:
removeChild(节点): 删除一个节点
例子:删除Li
文档碎片:
可以理论上提高DOM操作性能
原理
document.createDocumentFragment()
<ul id="ul">
<input type="text" id="txt">
<input type="button" value="创建li" id="btn1">
<li>1 <a href="javascript:" class="a1">隐藏</a>
<li>1vdf <a href="javascript:" class="a1">隐藏</a>
<li>1s <a href="javascript:" class="a2">隐藏</a>
<li>1sef <a href="javascript:" class="a1">删除</a>
</ul>
</body>
</html>
2,DOM操作表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM操作表格</title>
<script>
window.onload = function(){
var oTab = document.getElementById("tab1");
//表格的简便操作
console.log(oTab.tBodies[0].rows[1].cells[1].innerHTML);
//隔行变色
var oldColor = '';//记录原来的颜色
for(var i = 0;i<oTab.tBodies[0].rows.length;i++){
oTab.tBodies[0].rows[i].onmouseover = function(){
oldColor = this.style.backgroundColor;
this.style.backgroundColor = 'blue';
};
oTab.tBodies[0].rows[i].onmouseout = function(){
this.style.backgroundColor = oldColor;
};
if(i%2){
oTab.tBodies[0].rows[i].style.backgroundColor = '';
}
else{
oTab.tBodies[0].rows[i].style.backgroundColor = '#ccc';
}
}
//表格的添加和删除;
var oName = document.getElementById("name");
var oAge = document.getElementById("age");
var oBtn1 = document.getElementById("btn1");
oBtn1.onclick = function(){
//第一列
var oTr = document.createElement("tr");
var oTd = document.createElement("td");
var id = oTab.tBodies[0].rows.length+1;
oTd.innerHTML = id++;//避免id重复
oTr.appendChild(oTd);
//第二列
oTd = document.createElement("td");
oTd.innerHTML = oName.value;
oTr.appendChild(oTd);
//第三列
oTd = document.createElement("td");
oTd.innerHTML = oAge.value;
oTr.appendChild(oTd);
//第四列
oTd = document.createElement('td');
oTd.innerHTML = "<a href='#'>删除</a>";
oTr.appendChild(oTd);
oTd.getElementsByTagName('a')[0].onclick = function(){
oTab.tBodies[0].removeChild(this.parentNode.parentNode);
};
//插入整行
oTab.tBodies[0].appendChild(oTr);
};
//表格的搜索
var oBtn2 = document.getElementById('btn2');
var oTxt = document.getElementById("name");
oBtn2.onclick = function(){
for(var i = 0;i<oTab.tBodies[0].rows.length;i++){
var sTab = oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
var sTxt = oTxt.value.toLowerCase();//忽略大小写来搜索东西
var arr = sTxt.split(' ');//用空格切开字符串,实现多关键字搜索
oTab.tBodies[0].rows[i].style.backgroundColor = '';
for(var j = 0;j<arr.length;j++){
if(sTab.search(arr[j]) != -1){//多关键字搜索并且模糊搜索
oTab.tBodies[0].rows[i].style.backgroundColor = 'red';
}
}
//纯模糊搜索并且忽略大小写
// if(sTab.search(sTxt) != -1){
// oTab.tBodies[0].rows[i].style.backgroundColor = 'red';
// }
// else{
// oTab.tBodies[0].rows[i].style.backgroundColor = '';
// }
}
};
//表格的【排序】
var oBtn3 = document.getElementById('btn3');
oBtn3.onclick = function(){
var arr = [];//声明一个数组,只有Array类型的数组才有sort方法。
for(var i = 0;i<oTab.tBodies[0].rows.length;i++){
arr[i] = oTab.tBodies[0].rows[i];//将表格的每一行移入数组
}
arr.sort(function(tr1,tr2){//比较函数
var n1 = parseInt(tr1.cells[0].innerHTML);
var n2 = parseInt(tr2.cells[0].innerHTML);
return n1 - n2;
});
for(var i = 0;i<arr.length;i++){
oTab.tBodies[0].appendChild(arr[i]);
}
};
}
</script>
</head>
<body>
输入姓名:<input id="name" type="text"> <br>
输入年龄:<input id='age' type="text"> <br>
<input id="btn1" type="button" value="添加"> <br>
<input id="btn2" type="button" value="搜索"> <br>
<input id="btn3" type="button" value="排序">
<table border="1" width="500px" id="tab1">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<!--一个表格可以有很多tbody,但只有一个thead和一个tfoot-->
<tbody>
<tr>
<td>11</td>
<td>blue</td>
<td>23</td>
<td>删除</td>
</tr>
<tr>
<td>2</td>
<td>张三</td>
<td>23</td>
<td>删除</td>
</tr>
<tr>
<td>33</td>
<td>李四</td>
<td>28</td>
<td>删除</td>
</tr>
<tr>
<td>4</td>
<td>王五</td>
<td>16</td>
<td>删除</td>
</tr>
<tr>
<td>15</td>
<td>张伟</td>
<td>24</td>
<td>删除</td>
</tr>
</tbody>
</table>
</body>
</html>
3,js事件应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1{
width: 200px;
height: 200px;
background-color: purple;
position: absolute;;
}
</style>
<script>
//封装返回鼠标位置的函数
function getPos(ev){
var scrollTop = document.body.scrollTop;
var scrollLeft = document.body.scrollLeft;
return { x: ev.clientX+scrollLeft,
y: ev.clientY+scrollTop };
}
window.onload = function(){
document.onclick = function(){
console.log("要想给整个页面加事件,直接用document,因为body相当于是document的子节点,body可能撑不开");
console.log('横坐标 ' + event.clientX + ',' + '纵坐标 ' + event.clientY);//不兼容
}
//让DIV跟随鼠标移动
document.onmousemove = function(ev){
var oEvent = ev||event;//浏览器兼容处理
var oDiv = document.getElementById('div1');
var pos = getPos(oEvent);
oDiv.style.left = pos.x + 'px';
oDiv.style.top = pos.y + 'px';//为了使长页面也能精确跟着鼠标走。
}
}
</script>
</head>
<body>
<div id="div1"></div>
<!--event对象和事件冒泡
什么是event对象:
用来获取事件的详细信息:鼠标位置、键盘按钮
例子:获取鼠标位置:clientX
document的本质:document.childNodes[0].tagName
获取event对象(兼容性写法):
var oEvent = ev||event (ev是可以传到function中的参数)
事件流:
事件冒泡:(会沿着父级一直往上传递)
取消冒泡:oEvent.cancelBubble = true
例子:仿select控件
DOM事件流
鼠标事件:
鼠标位置
可视区位置:clientX、clientY
例子:跟随鼠标的DIV
消除滚动条的影响
var scrollTop = documentElement.scrollTop || document.body.scrollTop
滚动条的意义--可视区与页面顶部的距离
获取鼠标在页面的绝对位置
封装函数
例子2:一串跟随鼠标的DIV
键盘事件:
keyCode
获取用户按下键盘的哪个键
例子:键盘控制DIV移动
其他属性
ctrlKey、shiftKey、altKey
例子:提交留言
回车提交
ctrl+回车提交
默认行为
也称默认事件,浏览器自带的,如右键菜单
阻止默认行为
普通写法:return false;
例子1:屏蔽右键菜单
弹出自定义右键菜单
例子2:只能输入数字的输入框
keydown、keyup事件的区别
拖拽:拖着div移动
简易拖拽
拖拽原理
距离不变
三个事件
靠谱拖拽
原有拖拽的问题
直接给document加事件
FF下,空div拖拽bug
阻止默认事件
防止拖出页面
修正位置
事件绑定
IE方式
attachEvent(事件名称,函数),绑定事件处理函数
detachEvent(事件名称,函数),解除绑定
DOM方式
addEventListener(事件名称,函数,捕获)
removeEventListener(事件名称,函数,捕获)
何时使用事件绑定
绑定事件和this
绑定匿名函数,会无法删除
高级拖拽
拖拽原理
距离不变
三个事件:down、move、up
限制范围
对位置进行判断
例子1:不能拖出窗口的div
例子2:不能拖出指定对象的div
磁性吸附
图片拖拽
阻止默认事件
文字选中
阻止默认事件
IE下拖动有问题
事件捕获
与DOM配合
带框的拖拽
保留原有位置的拖拽
自定义滚动条
拖拽
只有横向拖拽
限制范围——范围的大小
计算比例——当前值/最大值
控制其他对象
例子1:控制物体的大小
例子2:控制物体的透明度
例子3:控制文字滚动
-->
</body>
</html>
4,键盘按键控制div移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1{
width: 100px;
height: 100px;
background-color: #ccc;
position: absolute;
}
</style>
<script>
window.onload = function(){
document.onkeydown = function(ev){//键盘按下事件
var oEvent = ev||event;//获取事件对象
var oDiv = document.getElementById('div1');
//键盘上面的每一个键都有一个对应的keyCode
if(oEvent.keyCode == 37){//如果按下是键盘左键
oDiv.style.left = oDiv.offsetLeft - 10 + 'px';
}
else if(oEvent.keyCode == 39){//按下键盘右键
oDiv.style.left = oDiv.offsetLeft + 10 + 'px';
}
else if(oEvent.keyCode == 38){//按下键盘上键
oDiv.style.top = oDiv.offsetTop - 10 + 'px';
}
else if(oEvent.keyCode == 40){//按下键盘下键
oDiv.style.top = oDiv.offsetTop + 10 + 'px';
}
};
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
5,键盘提交留言
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>键盘提交留言</title>
<script>
window.onload = function(){
var oTxt1 = document.getElementById('txt1');
var oTxt2 = document.getElementById('txt2');
oTxt1.onkeydown = function(ev){
var oEvent = ev||event;
//如果按下的是回车或者按下ctrl+回车则提交留言
if((oEvent.keyCode == 13)||(oEvent.keyCode == 13 && oEvent.ctrlKey)){
oTxt2.value += oTxt1.value + '\n';//将留言放进文本域
oTxt1.value = '';//清空输入文本框
}
}
}
</script>
</head>
<body>
<input type="text" id="txt1"> <br>
<textarea id="txt2" rows="10" cols="40"></textarea>>
</body>
</html>
6,拖拽div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽div</title>
<style>
#div1{
height: 100px;
width: 100px;
background-color: #00ffff;
position: absolute;
}
</style>
<script>
window.onload = function(){
var oDiv = document.getElementById('div1');
var disX = 0;//鼠标离div的横向距离
var disY = 0;//鼠标离div的纵向距离
//当鼠标按下,计算出鼠标和物体的距离
oDiv.onmousedown = function(ev){
var oEvent = ev||event;
//鼠标离div的横向距离为 鼠标的位置减去div的横向位置
disX = oEvent.clientX - oDiv.offsetLeft;
//鼠标离div的纵向距离为 鼠标的位置减去div的纵向位置
disY = oEvent.clientY - oDiv.offsetTop;
document.onmousemove = function(ev){//让div跟着鼠标移动
var oEvent = ev||event;
//l和t记录当前div的位置
var l = oEvent.clientX - disX;
var t = oEvent.clientY - disY;
//若拖拽出了浏览器的可视区,就禁止拖出.
if(l<0) {//左面出不去
l = 0;
}
//右面 == 可视区的宽度位置减去div的宽度
else if(l>document.documentElement.clientWidth-oDiv.offsetWidth){
l = document.documentElement.clientWidth-oDiv.offsetWidth;
} //右面出不去
if(t<0){//上面出不去
t = 0;
}
//下面 == 可视区的高度位置减去div的高度
else if(t>document.documentElement.clientHeight-oDiv.offsetHeight){
t = document.documentElement.clientHeight-oDiv.offsetHeight;
}//下面出不去
oDiv.style.left = l + 'px';
oDiv.style.top = t + 'px';
};
document.onmouseup = function(){//鼠标抬起时,就去掉拖拽
document.onmousemove = null;
document.onmouseup = null;
};
return false;
};
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
7,一串跟着鼠标走的div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height: 50px;
width: 50px;
background-color: palevioletred;
position: absolute;;
}
</style>
<script>
//封装返回鼠标位置的函数
function getPos(ev){
var scrollTop = document.body.scrollTop;
var scrollLeft = document.body.scrollLeft;
return { x: ev.clientX+scrollLeft,
y: ev.clientY+scrollTop };
}
window.onload = function(){
document.onmousemove = function(ev){
var oEvent = ev||event;//浏览器兼容处理
var pos = getPos(oEvent);
var oDiv = document.getElementsByTagName('div');
//后一个div跟着前一个div走
for(var i = oDiv.length-1;i>0;i--){
oDiv[i].style.left = oDiv[i-1].offsetLeft + 'px';
oDiv[i].style.top = oDiv[i-1].offsetTop + 'px';
}
//第一个div跟着鼠标走
oDiv[0].style.left = pos.x + 'px';
oDiv[0].style.top = pos.y + 'px';
}
}
</script>
</head>
<body>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></body></html>
8,右键菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>右键菜单</title>
<style>
*{
margin: 0;
padding: 0;
}
#div1{
width: 80px;
height: 100px;
background-color: #ccc;
position: absolute;
border: 1px;
display: none;
}
ul{
list-style: none;
}
</style>
<script>
window.onload = function(){
//点击右键菜单事件
document.oncontextmenu = function(ev){
var oEvent = ev||event;//获取事件对象
var oDiv = document.getElementById('div1');
oDiv.style.display = 'block';//点击右键显示右键菜单
oDiv.style.left = oEvent.clientX + 'px';
oDiv.style.top = oEvent.clientY + 'px';
return false;//消除默认事件,即取消原来浏览器的默认菜单
}
document.onclick = function(){//点击页面其他地方菜单收起来
var oDiv = document.getElementById('div1');
oDiv.style.display = 'none';
}
}
</script>
</head>
<body>
<div id="div1">
<ul>
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
</ul>
</div>
</body>
</html>