javascript ybmiaov
2024-05-07 23:37:12
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函数
<!-- 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 -->View Code
<!-- 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 || FFvar 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提取元素 -->View Code
创建DOM元素 createElement(标签名) 创建一个节点 appendChild(节点) 追加一个节点 例子：为ul插入li 插入元素 insertBefore(节点, 原有节点) 在已有元素前插入 例子：倒序插入li 删除DOM元素 removeChild(节点) 删除一个节点 例子：删除li
<!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) -->View Code
文档碎片 文档碎片可以提高DOM操作性能(理论上) 文档碎片原理 document.createDocumentFragment()
<!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 -->View Code
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. 解决定时器与事件冲突的问题
<!-- 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>View Code
<!-- 侧边栏布局 -->
<!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>View Code
js
/*** @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)
}View Code
功能：回到顶部按钮
<!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>View Code
事件基础
事件基础（一） 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+回车的提交方式
<!-- 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;' οnclick='alert(this.style.background)'><div style='width:200px;height:200px;background:green;' οnclick='alert(this.style.background)'><div style='width:100px;height:100px;background:#ccc;' οnclick='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);//非chromealert(document.body.scrollTop);//chrome*/var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;}</script>
</head>
<body>
</body>
</html>View Code
鼠标事件 键盘事件
<!-- 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 →39if(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>View Code
跟随鼠标移动的div
<!--跟随鼠标移动的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>View Code
ctrl+enter提交
<!-- 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>View Code
事件中级 1. 什么是事件的默认行为 2. 上下文菜单：oncontextmenu 3. 文本框内禁止输入内容实例 4. 自定义右键菜单实例 5. 只能输入数字的输入框实例：onkeydown、onkeyup 6. 拖拽实例：拖拽原理、三个事件、document范围、解决FF的bug 7. 限制拖拽范围的条件：document.documentElement.clientWidth
<!-- 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//退格 8if(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>View Code
拖拽
<!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>View Code
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 记录用户名实例
记录用户名
<!-- 4. cookie 过期时间：expires、setDate
cookie是用'; '不是';'隔开的setCookie、getCookie、removeCookiecookie一个一个添加，每个单独添加期限 -->
<!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('; ');//matchfor(var i=0;i<arr.length;i++){var arr2=arr[i].split('=');if(arr2[0]==name){return arr2[1];}}//no matchreturn '';}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>View Code
结合拖拽
<!-- 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('; ');//foundfor(var i=0;i<arr.length;i++){var arr2=arr[i].split('=');if(arr2[0]==name){return arr2[1];}}//not foundreturn '';}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>View Code
转载于:https://www.cnblogs.com/tabCtrlShift/p/5625454.html
javascript ybmiaov相关推荐
- 【AJAX】JavaScript的面向对象
Ajax中后端数据返回后需要前端通过JavaScript来实现动态数据更新的问题.所以,在Ajax中加深了一遍JavaScript面向对象的印象. 基础部分: JavaScript中创建对象并简单对象 ...
- 【JavaScript总结】JavaScript语法基础：JS高级语法
作用域链: 1.JS中只有函数能够限定作用域的范围: 2.变量处理在制定的函数范围内,还有一个特殊的作用域,就是没有用var 声明的全局作用域 3.js中的作用域链是为了清晰的表示出所有变量的作用范围 ...
- 【JavaScript总结】JavaScript语法基础：DOM
->DOM的理解:文档对应dom树 ->有了DOM能做什么:DOM的操作 html文档做为DOM树模型,DOM树的节点就是对象.对象会触发事件来执行一些事件代码. C#中的事件是一个委托变 ...
- 【JavaScript总结】JavaScript语法基础：JS编码
运算符 数学:+. -. *. / 逻辑:>. < .>= .<=. == . !=.&&.|| . === .!==(完全等于) 对象相关 new delet ...
- 【JavaScript总结】JavaScript语法基础：数据类型
------>数据类型有哪些? ->基本类型:数字类型,布尔类型,字符串类型 ->引用类型:对象类型,函数类型 ->空类型:null 和 undefined ->运算符: ...
- 【JavaScript总结】JavaScript发展与学习内容
发展: 最初浏览器是为大学里浏览文档用,从地址栏输入文档地址,找到文档显示. 后来各种需求(购物网站,个人博客)出现,已有功能不能满足需求. 可人们依旧在努力满足这种需求,但实现后的效果很不尽人意. ...
- Python：模拟登录、点击和执行 JavaScript 语句案例
案例一:网站模拟登录 # douban.pyfrom selenium import webdriver from selenium.webdriver.common.keys import Keys ...
- [JavaScript] JavaScript数组挖掘，不只是讲数组哟(2)
课程来源:后盾人 上一篇的内容:[JavaScript] JavaScript数组挖掘,不只是讲数组哟 数组引用类型分析,多维数组,用Array.of为数组创建细节,类型检测与转换,在一个数组后面加一 ...
- [JavaScript] JavaScript 数组挖掘，不只是讲数组哟
课程来源:后盾人 数组引用类型分析 数组的定义 const array = new Array('hello', 'dust', 1, 2, 3, 4, 5) console.log(array) l ...
最新文章
- 【opencv】(4) 形态学处理：腐蚀膨胀、梯度运算、礼帽黑帽
- 组件kdsvrmgr无法正常工作_汽轮机润滑油冷油器六通阀的工作原理及现阶段存在的问题...
- Airbnb React/JSX 编码规范
- java中连接mysql数据库_java中怎么连接mysql数据库
- 2019 秋招提前批蘑菇街一面面经(带答案)
- GitHub开源项目之“线程池”
- java table 内容居中_JTable内容居中显示 | 学步园
- [Python Study Notes]pandas.DataFrame.plot()函数绘图
- pandas基本操作
- 68.vivado与modelsim的关联以及器件库编译
- 2022新版千月影视双端APP带H5功能开源程序支持当面付和易支付
- Vue 动态组件component
- linux内存使用率如何查看,linux内存使用率 linux查看内存
- input隐藏边框、设置透明背景色
- PipeCAD 简介
- octobercms mysql_在Ubuntu 18.04/Debian 9上安装October CMS
- android 4.1.2大小,4.1.2 Activity初窥门径
- Cesium雷达追踪圆锥体
- 了解软件测试职业以及发展定位
- 跟着java学瑜伽_为什么不建议网上跟着视频练习瑜伽？