javascript ybmiaov
DOM
DOM基础
1. DOM简介、DOM标准、DOM节点
2. 获取元素的子节点:childNodes、兼容性问题
3. 节点类型:nodeType、文本节点、元素节点
4. children的使用
5. 获取元素父节点parentNode
6. 获取定位元素的父节点offsetParent
7. 获取首尾子元素:firstChild、firstElementChild、lastChild、lastElementChild
8. 获取兄弟节点:nextSibling、nextElemnetSibling、previousSibling、previousElementSibling
9. 元素属性操作:“.”与“[]”回顾、setAttribute、getAttribute、removeAttribute
10. 通过className获取元素、封装getByClass函数
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!-- DOM节点1 childNodes nodeType 获取子节点 children parentNode 例子:点击链接,隐藏整个li offsetParent 例子:获取元素在页面上的实际位置 --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无标题文档</title> <script type="text/javascript"> window.onload = function() { alert(document.body.childNodes[1].nodeType); } </script> </head> <body> aaafsa <span>fff</span> </body> </html> <!-- childNodes 和 nodeType (1) nodeType: 1.element 2.attr 3.text nodeName nodeValue --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无标题文档</title> <script type="text/javascript"> window.onload = function() { var oUl = document.getElementById('ul1'); var i = 0; for(i; i< oUl.childNodes.length; i++) { if(oUl.childNodes[i].nodeType == 1) { oUl.childNodes[i].style.background='red'; } } } </script> </head> <body> <ul id="ul1"> <li>asd</li> <li>asd</li> <li>asd</li> </ul> </body> </html> <!-- childNodes 和 nodeType(2) --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无标题文档</title> <script type="text/javascript"> window.onload = function() { var aA = document.getElementsByTagName('a'); var i = 0; for(i; i< aA.length; i++) { aA[i].onclick = function() { this.parentNode.style.display = 'none'; } } } </script> </head> <body> <ul> <li>aass<a href="javascript:">隐藏</a></li> <li>5453<a href="javascript:">隐藏</a></li> <li>cvxc<a href="javascript:">隐藏</a></li> <li>ertert<a href="javascript:">隐藏</a></li> </ul> </body> </html> <!-- parentNode --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无标题文档</title> <script type="text/javascript"> </script> </head> <body> <div id="div1" style="width:100px; height:100px; background:red; margin:100px;"> <div id="div2" onclick="alert(this.offsetParent.tagName)" style="width:100px; height:100px; background:yellow; position:absolute; left:100px; top:100px;"></div> </div> </body> </html> <!-- offsetParent -->
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!-- DOM节点(2) 首尾子节点 有兼容性问题 firstChild、firstElementChild lastChild 、lastElementChild 兄弟节点 有兼容性问题 nextSibling、nextElementSibling previousSibling、previousElementSibling 元素属性操作 第一种:oDiv.style.display=“block”; 第二种:oDiv.style[“display”]=“block”; 第三种:Dom方式 DOM方式操作元素属性 获取:getAttribute(名称) 设置:setAttribute(名称, 值) 删除:removeAttribute(名称) 用className选择元素 如何用className选择元素 选出所有元素 通过className条件筛选 封装成函数 --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无标题文档</title> <script type="text/javascript"> window.onload = function() { var oUl = document.getElementById('ul1'); //IE || FF var oFirst = oUl.firstElementChild || oUl.firstChild; oFirst.style.background = 'red'; } </script> </head> <body> <ul id="ul1"> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html> <!-- firstChild/firstElementChild --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无标题文档</title> <script type="text/javascript"> window.onload=function () { var oLi=document.getElementById('li1'); oLi.previousSibling.style.background = 'red'; } </script> </head> <body> <ul id="ul1"> <li></li> <li></li> <li id='li1'>111</li> <li></li> <li></li> </ul> </body> </html> <!-- Uncaught TypeError: Cannot set property 'backgroundColor' of undefined --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无标题文档</title> <script type="text/javascript"> window.onload=function () { var oUl=document.getElementById('ul1'); var aLi=oUl.getElementsByTagName('li'); var i=0; for(i; i<aLi.length; i++) { if(aLi[i].className=='box') { aLi[i].style.background='red'; } } } </script> </head> <body> <ul id="ul1"> <li></li> <li></li> <li></li> <li class='box'></li> <li></li> <li class='box'></li> <li class='box'></li> <li></li> <li></li> <li></li> </ul> </body> </html> <!-- className --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无标题文档</title> <script type="text/javascript"> function getByClass(oParent, sClass) { var aEle=oParent.getElementsByTagName('*'); var aResult=[]; for(var i=0;i<aEle.length;i++) { if(aEle[i].className==sClass) { aResult.push(aEle[i]); } } return aResult; } window.onload=function () { var oUl=document.getElementById('ul1'); var aBox=getByClass(oUl, 'box'); var i=0; for(i; i<aLi.length; i++) { } } </script> </head> <body> <ul id="ul1"> <li></li> <li></li> <li></li> <li class='box'></li> <li></li> <li class='box'></li> <li class='box'></li> <li></li> <li></li> <li></li> </ul> </body> </html> <!-- className提取元素 -->
创建DOM元素
createElement(标签名) 创建一个节点
appendChild(节点) 追加一个节点
例子:为ul插入li
插入元素
insertBefore(节点, 原有节点) 在已有元素前插入
例子:倒序插入li
删除DOM元素
removeChild(节点) 删除一个节点
例子:删除li
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload=function () { var oBtn=document.getElementById('btn1'); var oUl=document.getElementById('ul1'); oBtn.onclick=function () { var oLi=document.createElement('li'); oUl.appendChild(oLi); } } </script> </head> <body> <input type="button" id="btn1" value="创建Li"> <ul id="ul1"> <li>aaa</li> </ul> </body> </html> <!-- appendChild --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload=function () { var oBtn=document.getElementById('btn1'); var oTxt=document.getElementById('txt1'); var oUl=document.getElementById('ul1'); oBtn.onclick=function () { var oLi=document.createElement('li'); oLi.innerHTML = oTxt.value; oUl.appendChild(oLi); } } </script> </head> <body> <input type="text" id="txt1"> <input type="button" id="btn1" value="创建Li"> <ul id="ul1"> <li>aaa</li> </ul> </body> </html> <!-- appendChild,get txt from input --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload=function () { var oTxt=document.getElementById('txt1'); var oBtn=document.getElementById('btn1'); var oUl=document.getElementById('ul1'); oBtn.onclick=function () { var oLi=document.createElement('li'); var aLi=document.getElementsByTagName('li'); oLi.innerHTML=oTxt.value; oUl.insertBefore(oLi, aLi[0]); } } </script> </head> <body> <input id="txt1" type="text"/> <input id="btn1" type="text" value="创建Li"/> <ul id="ul1"> <li>aaa</li> </ul> </body> </html> <!-- insertBefore this type should be button:<input id="btn1" type="text" value="创建Li"/> --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload=function () { var oTxt=document.getElementById('txt1'); var oBtn=document.getElementById('btn1'); var oUl=document.getElementById('ul1'); oBtn.onclick=function () { var oLi=document.createElement('li'); var aLi=document.getElementsByTagName('li'); oLi.innerHTML=oTxt.value; if(aLi.length==0) { oUl.appendChild(oLi); } else { oUl.insertBefore(oLi,aLi[0]); } } } </script> </head> <body> <input id="txt1" type="text"/> <input id="btn1" type="button" value="创建Li"/> <ul id="ul1"> </ul> </body> </html> <!-- if exists appendChild else insertBefore innerHTMl is got for value --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript"> window.onload=function () { var aA=document.getElmentByTag('a'); var oUl=document.getElementById('ul1'); var i=0; for(i=0;i<aA.length;i++) { aA[i].onclick=function() { oUl.removeChild(this.parentNode); } } } </script> </head> <body> <ul id="ul1"> <li>sdfsdf <a href="javascript:;">删除</a></li> <li>3432 <a href="javascript:;">删除</a></li> <li>tttt <a href="javascript:;">删除</a></li> <li>ww <a href="javascript:;">删除</a></li> </ul> </body> </html> <!-- ancestor.removeChild(parent) -->
文档碎片
文档碎片可以提高DOM操作性能(理论上)
文档碎片原理
document.createDocumentFragment()
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> window.onload=function () { var oBtn=document.getElementById('btn1'); var oUl=document.getElementById('ul1'); oBtn.onclick=function () { var iStart=new Date().getTime(); var i=0; for(i=0;i<100000;i++) { var oLi=document.createElement('li'); oUl.appendChild(oLi); } alert(new Date().getTime()-iStart); } } </script> </head> <body> <input type="button" id="btn1" value='普通'/> <ul id="ul1"></ul> </body> </html> <!-- getIntervalTime --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> window.onload=function () { var oBtn=document.getElementById('btn1'); var oUl=document.getElementById('ul1'); oBtn.onclick=function () { var iStart=new Date().getTime(); var oFrag=document.createDocumentFragment(); var i=0; for(i=0;i<100000;i++) { var oLi=document.createElement('li'); oFrag.appendChild(oLi); } oUl.appendChild(oFrag); alert(new Date().getTime()-iStart); } } </script> </head> <body> <input type="button" id="btn1" value='普通'/> <ul id="ul1"></ul> </body> </html> <!-- createDocumentFragment -->
BOM
1. window.open() 方法及相关参数
2. 运行代码框实例
3. document.write() 方法
4. about:blank 打开新窗口及返回值
5. close()关闭当前窗口及新开窗口特性
6. window.navigator.userAgent 检测浏览器版本
7. window.location 读写地址栏
8. 可社区尺寸、滚动距离
9. 系统对话框及返回值
10. 侧边栏广告实例
11. window.onscroll 事件及处理窗口变化等细节
12. 解决滚动条闪烁问题:固定定位与滑动效果
13. 返回顶部效果实例
14. 解决定时器与事件冲突的问题
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!-- 1. window.open() 方法及相关参数 window.open in BOM window.onload is needed http://www... not www... input label not button label _self presentPage _blank newPage --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> window.onload=function() { var oBtn=document.getElementById('id1'); oBtn.onclick=function() { window.open('http://www.miaov.com','_self'); } } </script> </head> <body> <input type="button" id="id1" value="open_window"> </body> </html> <!-- 2. 运行代码框实例 --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> window.onload=function() { var oTxt=document.getElementById('txt1'); var oBtn=document.getElementById('btn1'); oBtn.onclick=function() { var oNewWin=window.open('about:blank'); document.write(oTxt.value); } } </script> </head> <body> <textarea name="" id="txt1" cols="40" rows="10"></textarea><br /> <input type="button" id="btn1" value='运行'> </body> </html> <!-- 6. window.navigator.userAgent 检测浏览器版本 7. window.location 读写地址栏 window.location window.navigator.userAgent --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> alert(window.navigator.userAgent); alert(window.location); window.location='http://www.miaov.com/'; </script> </head> <body> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!-- 侧边栏布局 --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #div1 {width: 100px;height: 100px;background: red;position: fixed;right: 0;top: 50%;margin-top: -50px;} </style> </head> <body style='2000px'> <div id="div1"></div> </body> </html> <!-- 侧边栏从顶端滚下来 --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title id='title'>Document</title> <style> #div1 {width:100px;height: 100px;background: red;position: absolute;right: 0;top: 0;} </style> <script src='move.js'></script> <script> window.onresize=window.onload=window.onscroll=function() { var oDiv=document.getElementById('div1'); var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; document.getElementById('title').innerHTML=scrollTop+' cl'+document.documentElement.clientHeight+' of'+oDiv.offsetHeight; var t=(document.documentElement.clientHeight-oDiv.offsetHeight)/2 //oDiv.style.top=scroll+t+'px'; startMove(oDiv, {top:scrollTop+t}); var b=confirm('Is it rainning today?'); var str=prompt('Please enter your name', 'blue'); } </script> </head> <body style='height:2000px;'> <div id="div1"></div> </body> </html>
js
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/**
* @author miaov
*/
function getStyle(obj, attr)
{
if(obj.currentStyle)
{
return obj.currentStyle[attr];
}
else
{
return getComputedStyle(obj, false)[attr];
}
}
function startMove(obj, json, fn)
{
clearInterval(obj.timer);
obj.timer=setInterval(function (){
var bStop=true; //这一次运动就结束了——所有的值都到达了
for(var attr in json)
{
//1.取当前的值
var iCur=0;
if(attr=='opacity')
{
iCur=parseInt(parseFloat(getStyle(obj, attr))*100);
}
else
{
iCur=parseInt(getStyle(obj, attr));
}
//2.算速度
var iSpeed=(json[attr]-iCur)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
//3.检测停止
if(iCur!=json[attr])
{
bStop=false;
}
if(attr=='opacity')
{
obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
obj.style.opacity=(iCur+iSpeed)/100;
}
else
{
obj.style[attr]=iCur+iSpeed+'px';
}
}
if(bStop)
{
clearInterval(obj.timer);
if(fn)
{
fn();
}
}
}, 30)
}
功能:回到顶部按钮
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #btn1 {position: fixed;bottom: 0;right: 0;} </style> <script> window.onload=function() { var oBtn=document.getElementById('btn1'); var timer=null; var bSys=true; //用户拖动了滚动条? //移动的时候发生了滚动,用户在滚动就是第二次滚动 window.onscroll=function() { if(!bSys){ clearInterval(timer); } bSys=false; } //点击回到顶部,回到顶部之后关闭定时器 oBtn.onclick=function() { timer=setInterval(function() { var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; var iSpeed=Math.floor(-scrollTop/8); if(scrollTop==0) { clearInterval(timer); } bSys=true; document.documentElement.scrollTop=document.body.scrollTop=scrollTop+iSpeed; }, 30) } } </script> </head> <body style='height:2000px;'> 1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br />24<br />25<br />26<br />27<br />28<br />29<br />30<br />31<br />32<br />33<br />34<br />35<br />36<br />37<br />38<br />39<br />40<br />41<br />42<br />43<br />44<br />45<br />46<br />47<br />48<br />49<br />50<br />51<br />52<br />53<br />54<br />55<br />56<br />57<br />58<br />59<br />60<br />61<br />62<br />63<br />64<br />65<br />66<br />67<br />68<br />69<br />70<br />71<br />72<br />73<br />74<br />75<br />76<br />77<br />78<br />79<br />80<br />81<br />82<br />83<br />84<br />85<br />86<br />87<br />88<br />89<br />90<br />91<br />92<br />93<br />94<br />95<br />96<br />97<br />98<br />99<br />100<br />101<br />102<br />103<br />104<br />105<br />106<br />107<br />108<br />109<br />110<br />111<br />112<br />113<br />114<br />115<br />116<br />117<br />118<br />119<br />120<br />121<br />122<br />123<br />124<br />125<br />126<br />127<br />128<br />129<br />130<br />131<br />132<br />133<br />134<br />135<br />136<br />137<br />138<br />139<br />140<br />141<br />142<br />143<br />144<br />145<br />146<br />147<br />148<br />149<br />150<br />151<br />152<br />153<br />154<br />155<br />156<br />157<br />158<br />159<br />160<br />161<br />162<br />163<br />164<br />165<br />166<br />167<br />168<br />169<br />170<br />171<br />172<br />173<br />174<br />175<br />176<br />177<br />178<br />179<br />180<br />181<br />182<br />183<br />184<br />185<br />186<br />187<br />188<br />189<br />190<br />191<br />192<br />193<br />194<br />195<br />196<br />197<br />198<br />199<br />200<br />201<br />202<br />203<br />204<br />205<br />206<br />207<br />208<br />209<br />210<br />211<br />212<br />213<br />214<br />215<br />216<br />217<br />218<br />219<br />220<br />221<br />222<br />223<br />224<br />225<br />226<br />227<br />228<br />229<br />230<br />231<br />232<br />233<br />234<br />235<br />236<br />237<br />238<br />239<br />240<br />241<br />242<br />243<br />244<br />245<br />246<br />247<br />248<br /> <input type="button" id="btn1" value="back_to_top"> </body> </html>
事件基础
事件基础(一) 1. 什么是事件对象 2. document对象范围 3. event事件对象、clientX、clientY 4. 事件对象的兼容性问题及解决方案 5. 事件冒泡原理 6. 取消事件冒泡:cancelBubble、弹出层实例 7. 跟随鼠标的DIV实例 事件基础(二) 1. 可视区坐标 2. 滚动条所滚动的距离:scrollTop 3. 滚动条所滚动的距离——解决谷歌浏览器兼容性问题 4. 跟随鼠标的DIV实例——消除滚动条的影响 5. 一串跟随鼠标的DIV实例 ——思考题:在鼠标不移动时,也能实现鼠标跟随 6. 键盘事件:onkeydown、keyCode 7. 用键盘来控制DIV移动实例 ——思考题:如何消除不卡顿的DIV移动 8. 提交留言实例——ctrl+回车的提交方式
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!-- 1. 什么是事件对象 用来获取事件的详细信息:鼠标位置、键盘按键 例子:获取鼠标位置:clientX document的本质:document.childNodes[0].tagName怎么理解? FF:ev IE:event 获取鼠标位置:clientX arguments.callee 在哪一个函数中运行,它就代表哪个函数 (function(n){ if(n > 1) return n* arguments.calle(n-1); return n; })(10); --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <script> document.onclick=function(ev) { var oEvent=ev||event; alert(oEvent.clientX+', '+oEvent.clientY); } </script> <body> </body> </html> <!-- 事件冒泡 事件捕获 --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div style='width:300px;height:300px;background:red;' onclick='alert(this.style.background)'> <div style='width:200px;height:200px;background:green;' onclick='alert(this.style.background)'> <div style='width:100px;height:100px;background:#ccc;' onclick='alert(this.style.background)'></div> </div> </div> </body> </html> <!-- offset --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #div1 {width: 100px;height: 100px;background: red;border: 1px solid black;padding: 10px;margin: 20px;position: absolute;left: 100px;top: 100px;} </style> <script> window.onload=function() { var oDiv=document.getElementById('div1'); alert(oDiv.offsetLeft);//m20+l100=120 } </script> </head> <body> <div id="div1"></div> </body> </html> <!-- keycode --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> document.onkeydown=function(ev) { var oEvent=ev||event; alert(oEvent.keyCode); } </script> </head> <body> </body> </html> <!-- 可视区距离scrollTop --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> document.onclick=function() { /*alert(document.documentElement.scrollTop);//非chrome alert(document.body.scrollTop);//chrome*/ var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; } </script> </head> <body> </body> </html>
鼠标事件 键盘事件
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!-- 6. 取消事件冒泡:cancelBubble、弹出层实例 oEvent.cancelBubble not cancelBuble --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #div1 {width: 100px;height: 150px;background: #ccc;display: none;} </style> <script> window.onload=function() { var oBtn=document.getElementById('btn1'); var oDiv=document.getElementById('div1'); oBtn.onclick=function(ev) { var oEvent=ev||event; oDiv.style.display='block'; alert('btn doing') oEvent.cancelBubble=true; } document.onclick=function() { oDiv.style.display='none'; alert('page doing'); } } </script> </head> <body> <input type="button" id="btn1" value="show"> <div id="div1"></div> </body> </html> <!-- 7. 用键盘来控制DIV移动实例 left只读,字符串‘8px’ offsetLeft读写,数字28 ,js中通过style只能来操控行间元素。你要引用外部样式表中的属性,就不能通过style来取值 要想获取非行内样式可以试试下面的方法 function getStyle(obj, name) { if(obj.currentStyle) { return obj.currentStyle[name];//兼容ie版本 } else { return getComputedStyle(obj, false)[name];//兼容FF和谷歌版本 } } window.onload=function () { var oDiv=document.getElementById('div1'); alert(getStyle(oDiv, 'offsetLeft')); }; <div id="div1"> </div> --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #div1 {width: 100px;height: 100px;background: #ccc;position: absolute;} </style> <script> document.onkeydown=function(ev) { var oEvent=ev||event; var oDiv=document.getElementById('div1'); // alert(oEvent.keyCode);//←37 →39 if(oEvent.keyCode==37) { oDiv.style.left=oDiv.offsetLeft-10+'px'; } else if(oEvent.keyCode==39) { oDiv.style.left=oDiv.offsetLeft+10+'px'; } } </script> </head> <body> <div id="div1"></div> </body> </html>
跟随鼠标移动的div
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!--跟随鼠标移动的div oEvent.clientX --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #div1 {width: 100px;height: 100px;background: red;position: absolute;} </style> <script> document.onmousemove=function (ev) { var oEvent=ev||event; var oDiv=document.getElementById('div1'); oDiv.style.left=oEvent.clientX+'px'; oDiv.style.top=oEvent.clientY+'px'; } </script> </head> <body> <div id="div1"></div> </body> </html> <!--跟随鼠标移动的div2 --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #div1 {width: 100px;height: 100px;background: red;position: absolute;} </style> <script> document.onmousemove=function (ev) { var oEvent=ev||event; var oDiv=document.getElementById('div1'); var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft; oDiv.style.left=oEvent.clientX+scrollLeft+'px'; oDiv.style.top=oEvent.clientY+scrollTop+'px'; } </script> </head> <body> <div id="div1"></div> </body> </html> <!-- 一串 --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div {width: 100px;height: 100px;background: red;position: absolute;} </style> <script> window.onload=function () { var aDiv=document.getElementsByTagName('div'); var i=0; document.onmousemove=function (ev) { var oEvent=ev||event; for(i=aDiv.length-1;i>0;i--) { aDiv[i].style.left=aDiv[i-1].style.left; aDiv[i].style.top=aDiv[i-1].style.top; } aDiv[0].style.left=oEvent.clientX+'px'; aDiv[0].style.top=oEvent.clientY+'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> </body> </html>
ctrl+enter提交
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!-- 8. 提交留言实例——ctrl+回车的提交方式 --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> window.onload=function() { var oBtn=document.getElementById('btn1'); var oTxt1=document.getElementById('txt1'); var oTxt2=document.getElementById('txt2'); oBtn.onclick=function() { oTxt1.value+=oTxt2.value+'\n'; oTxt2.value=''; }; oTxt2.onkeydown=function (ev) { var oEvent=ev||event; if(oEvent.ctrlKey&&oEvent.keyCode==13) { oTxt1.value+=oTxt2.value+'\n'; oTxt2.value=''; } } } </script> </head> <body> <textarea name="" id="txt1" cols="40" rows="10"></textarea> <input type="text" id="txt2"> <input type="button" id="btn1" value="message"> </body> </html>
事件中级 1. 什么是事件的默认行为 2. 上下文菜单:oncontextmenu 3. 文本框内禁止输入内容实例 4. 自定义右键菜单实例 5. 只能输入数字的输入框实例:onkeydown、onkeyup 6. 拖拽实例:拖拽原理、三个事件、document范围、解决FF的bug 7. 限制拖拽范围的条件:document.documentElement.clientWidth
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!-- 2. 上下文菜单:oncontextmenu 取消右键,not ontextmenu --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> document.oncontextmenu=function () { return true; }; </script> </head> <body> </body> </html> <!-- 组织表单提交 --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> window.onload=function () { var oForm=document.getElementById('form1'); oForm.onsubmit=function () { return false; }; } </script> </head> <body> <form action="http://www.miaov.com/" id="form1"> <input type="submit"> </form> </body> </html> <!-- clientWidth --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> document.onclick=function () { alert(document.documentElement.clientWidth); }; </script> </head> <body> </body> </html> <!-- 5. 只能输入数字的输入框实例:onkeydown、onkeyup --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> window.onload=function () { var oTxt=document.getElementById('txt1'); oTxt.onkeydown=function (ev) { var oEvent=ev||event; //0 48 //9 57 //退格 8 if(oEvent.keyCode!=8 && (oEvent.keyCode<48 || oEvent.keyCode>57)) { return false; } } } </script> </head> <body> <input type="text" id="txt1"> </body> </html> <!-- 5. 只能输入数字的输入框实例:onkeydown、onkeyup --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> document.oncontextmenu=function (ev) { var oEvent=ev||event; var oUl=document.getElementById('ul1'); oUl.style.display='block'; oUl.style.left=oEvent.clientX+'px'; oUl.style.top=oEvent.clientY+'px'; return false; } document.onclick=function () { var oUl=document.getElementById('ul1'); oUl.style.display='none'; } </script> </head> <body> <ul id="ul1" style='position: absolute;'> <li>登陆</li> <li>回到首页</li> <li>注销</li> <li>加入VIP</li> </ul> </body> </html>
拖拽
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #div1 {width: 100px;height: 100px;background: red;position: absolute;} </style> <script> window.onload=function () { var oDiv=document.getElementById('div1'); var disX=0; var disY=0; oDiv.onmousedown=function (ev) { var oEvent=ev||event; disX=oEvent.clientX-oDiv.offsetLeft; disY=oEvent.clientY-oDiv.offsetTop; oDiv.onmousemove=function (ev) { var oEvent=ev||event; var l=oEvent.clientX-disX; var t=oEvent.clientY-disY; if(l<0) { l=0; } else if(l>document.documentElement.clientWidth-oDiv.offsetWidth) { l=document.documentElement.clientWidth-oDiv.offsetWidth; } if(t<0) { t=0; } else if(t>document.documentElement.clientHeight-oDiv.offsetHeight) { t=document.documentElement.clientHeight-oDiv.offsetHeight; } oDiv.style.left=l+'px'; oDiv.style.top=t+'px'; } oDiv.onmouseup=function () { oDiv.onmousemove=null; oDiv.onmouseup=null; } return false; } } </script> </head> <body> <input id='div1'> </body> </html>
cookie
1. 什么是 cookie、cookie 特性 2. js 中的 cookie:设置 document.cookie 3. cookie 不会覆盖 4. cookie 过期时间:expires、setDate 5. 封装设置 cookie 函数 6. 封装获取 cookie 函数 7. 封装删除 cookie 函数 8. cookie 接合拖拽实例 9. cookie 记录用户名实例
记录用户名
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!-- 4. cookie 过期时间:expires、setDate cookie是用'; '不是';'隔开的 setCookie、getCookie、removeCookie cookie一个一个添加,每个单独添加期限 --> <!doctype html> <html> <head> <title>无标题文档</title> <script> function setCookie(name, value, iDay) { var oDate=new Date(); oDate.setDate(oDate.getDate()+iDay); document.cookie=name+'='+value+';expires='+oDate; } function getCookie(name) { //'username=abc; password=123456;' alert(document.cookie) var arr=document.cookie.split('; '); //match for(var i=0;i<arr.length;i++) { var arr2=arr[i].split('='); if(arr2[0]==name) { return arr2[1]; } } //no match return ''; } function removeCookie(name) { setCookie(name,'1',-1); } setCookie('username', 'abc', 30); setCookie('password', '123456', 300); setCookie('aaa', '123', 300); alert(getCookie('username')); removeCookie('username'); alert(getCookie('username')); /* var oDate=new Date(); oDate.setDate(oDate.getDate()+30); document.cookie='user=tab;expires='+oDate; document.cookie='pass=123'; alert(document.cookie);*/ </script> </head> <body> </body> </html>
结合拖拽
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!-- cookie結合拖拽 --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> function setCookie(name, value, iDay) { var oDate=new Date(); oDate.setDate(oDate.getDate()+iDay); document.cookie=name+'='+value+';expires='+oDate; } function getCookie(name) { var arr=document.cookie.split('; '); //found for(var i=0;i<arr.length;i++) { var arr2=arr[i].split('='); if(arr2[0]==name) { return arr2[1]; } } //not found return ''; } function removeCookie(name) { setCookie(name, '1', -1); } window.onload=function() { var oDiv=document.getElementById('div1'); oDiv.onmousedown=function(ev) { var oEvent=ev||event; var disX=oEvent.clientX-oDiv.offsetLeft; var disY=oEvent.clientY-oDiv.offsetTop; document.onmousemove=function(ev) { oDiv.style.left=oEvent.clientX-disX+'px'; oDiv.style.top=oEvent.clientY-disY+'px'; } document.onmouseup=function() { document.onmousemove=null; document.onmouseup=null; setCookie('x', oDiv.offsetLeft, 5); setCookie('y', oDiv.offsetTop, 5); } return false; } } </script> </head> <body> <div id="div1"></div> </body> </html>