å端BOMåDOM
å端åºç¡ä¹BOMåDOM
åæ
ããå°ç®å为æ¢ï¼æ们已ç»å¦è¿äºJavaScriptçä¸äºç®åçè¯æ³ãä½æ¯è¿äºç®åçè¯æ³ï¼å¹¶æ²¡æåæµè§å¨æä»»ä½äº¤äºã
ããä¹å°±æ¯æ们è¿ä¸è½å¶ä½ä¸äºæ们ç»å¸¸çå°çç½é¡µçä¸äºäº¤äºï¼æ们éè¦ç»§ç»å¦ä¹ BOMåDOMç¸å ³ç¥è¯ã
ããJavaScriptå为 ECMAScriptï¼DOMï¼BOMã
ããBOMï¼Browser Object Modelï¼æ¯ææµè§å¨å¯¹è±¡æ¨¡åï¼å®ä½¿ JavaScript æè½åä¸æµè§å¨è¿è¡â对è¯âã
ããDOM ï¼Document Object Modelï¼æ¯ææ档对象模åï¼éè¿å®ï¼å¯ä»¥è®¿é®HTMLææ¡£çææå ç´ ã
ããWindow对象æ¯å®¢æ·ç«¯JavaScriptæé«å±å¯¹è±¡ä¹ä¸ï¼ç±äºwindow对象æ¯å ¶å®å¤§é¨å对象çå ±åç¥å ï¼å¨è°ç¨window对象çæ¹æ³åå±æ§æ¶ï¼å¯ä»¥çç¥window对象çå¼ç¨ãä¾å¦ï¼window.document.write()å¯ä»¥ç®åæï¼document.write()ã
BOM
window对象
ãã
ããçä¸é¢çä¾åä½ ä¼åç°ï¼nameç´æ¥å°è£ å°äºwindow对象ä¸ï¼äºè§£ä¸ä¸å°±å¯ä»¥äºã
ããæææµè§å¨é½æ¯æ window 对象ãå®è¡¨ç¤ºæµè§å¨çªå£ã
ãã*å¦æææ¡£å å«æ¡æ¶ï¼frame æ iframe æ ç¾ï¼ï¼æµè§å¨ä¼ä¸º HTML ææ¡£å建ä¸ä¸ª window 对象ï¼å¹¶ä¸ºæ¯ä¸ªæ¡æ¶å建ä¸ä¸ªé¢å¤ç window 对象ï¼äºè§£ï¼ã
ãã*没æåºç¨äº window 对象çå ¬å¼æ åï¼ä¸è¿æææµè§å¨é½æ¯æ该对象ï¼äºè§£ï¼ã
ããææ JavaScript å ¨å±å¯¹è±¡ãå½æ°ä»¥ååéåèªå¨æ为 window 对象çæåã
ããå ¨å±åéæ¯ window 对象çå±æ§ãå ¨å±å½æ°æ¯ window 对象çæ¹æ³ã
ããæ¥ä¸æ¥è¦è®²çHTML DOM ç document ä¹æ¯ window 对象çå±æ§ä¹ä¸ã
ããä¸äºå¸¸ç¨çWindowæ¹æ³ï¼ï¼å¨æµè§å¨è°è¯å¨çconsoleéé¢è¾å ¥ä¸é¢è¿äºå±æ§æè æ¹æ³ï¼å°±è½çå°å¯¹åºçææï¼
- window.innerHeight - æµè§å¨çªå£çå é¨é«åº¦
- window.innerWidth - æµè§å¨çªå£çå é¨å®½åº¦
- window.open() - æå¼æ°çªå£
- window.close() - å ³éå½åçªå£ (åªè½å ³éç¨jsçwindow.open()æå¼ç页é¢ï¼äºè§£ä¸ä¸å°±è¡äº)
windowçå对象
ããnavigator对象ï¼äºè§£å³å¯ï¼
ããããæµè§å¨å¯¹è±¡ï¼éè¿è¿ä¸ªå¯¹è±¡å¯ä»¥å¤å®ç¨æ·æ使ç¨çæµè§å¨ï¼å å«äºæµè§å¨ç¸å ³ä¿¡æ¯ã
navigator.appNameãã// Webæµè§å¨å ¨ç§° navigator.appVersionãã// Webæµè§å¨åååçæ¬ç详ç»å符串 navigator.userAgentãã// 客æ·ç«¯ç»å¤§é¨åä¿¡æ¯ navigator.platformããã// æµè§å¨è¿è¡æå¨çæä½ç³»ç»
ããããç示ä¾ï¼
ãããã
ããscreen对象ï¼äºè§£å³å¯ï¼
ããããå±å¹å¯¹è±¡ï¼ä¸å¸¸ç¨ã
ããããä¸äºå±æ§ï¼
- screen.availWidth - å¯ç¨çå±å¹å®½åº¦
- screen.availHeight - å¯ç¨çå±å¹é«åº¦
ããhistory对象ï¼äºè§£å³å¯ï¼
ããããwindow.history 对象å å«æµè§å¨çåå²ã
ããããæµè§åå²å¯¹è±¡ï¼å å«äºç¨æ·å¯¹å½å页é¢çæµè§åå²ï¼ä½æ们æ æ³æ¥çå ·ä½çå°åï¼å¯ä»¥ç®åçç¨æ¥åè¿æåéä¸ä¸ªé¡µé¢ã
history.forward() // åè¿ä¸é¡µï¼å ¶å®ä¹æ¯windowçå±æ§ï¼window.history.forward() history.back() // åéä¸é¡µ
ãããã
ããlocation对象
ããããwindow.location 对象ç¨äºè·å¾å½å页é¢çå°å (URL)ï¼å¹¶ææµè§å¨éå®åå°æ°ç页é¢ã
ãããã常ç¨å±æ§åæ¹æ³ï¼
location.href è·åURL location.href="URL" // 跳转å°æå®é¡µé¢ location.reload() éæ°å 载页é¢,å°±æ¯å·æ°ä¸ä¸é¡µé¢
ãããã
ãã
ããä¸é¢çå 容éè¦å¤§å®¶è®°ä½çæ¯ï¼
ãããã1.window对象
ãããã2.windowçå对象ï¼locationçé£å 个å±æ§åæ¹æ³
ãããã3.å ¶ä»çä½ä¸ºäºè§£
ããæ们ä¸é¢æ¥å¦äºæ¯è¾ææææç¨çå 容ï¼
ããå¼¹åºæ¡
ããããå¯ä»¥å¨ JavaScript ä¸å建ä¸ç§æ¶æ¯æ¡ï¼è¦åæ¡ã确认æ¡ãæ示æ¡ã
ããè¦åæ¡
ããããè¦åæ¡ç»å¸¸ç¨äºç¡®ä¿ç¨æ·å¯ä»¥å¾å°æäºä¿¡æ¯ã
ããããå½è¦åæ¡åºç°åï¼ç¨æ·éè¦ç¹å»ç¡®å®æé®æè½ç»§ç»è¿è¡æä½ã
ããããè¯æ³ï¼
alert("ä½ çå°äºåï¼");
ãããã
ãã确认æ¡ï¼äºè§£å³å¯ï¼
ãããã确认æ¡ç¨äºä½¿ç¨æ·å¯ä»¥éªè¯æè æ¥åæäºä¿¡æ¯ã
ããããå½ç¡®è®¤æ¡åºç°åï¼ç¨æ·éè¦ç¹å»ç¡®å®æè åæ¶æé®æè½ç»§ç»è¿è¡æä½ã
ããããå¦æç¨æ·ç¹å»ç¡®è®¤ï¼é£ä¹è¿åå¼ä¸º trueãå¦æç¨æ·ç¹å»åæ¶ï¼é£ä¹è¿åå¼ä¸º falseã
ããããè¯æ³ï¼
confirm("ä½ ç¡®å®åï¼")
ãããã
ãããããããããã
ããããæ们å¯ä»¥æ ¹æ®è¿åçtrueåfalseæ¥å¤æä¸ä¸ï¼ç¶åæ ¹æ®è¿ä¸ªå¼æ¥ä½¿ç¨locationå»è·³è½¬å¯¹åºçç½ç«ã
ããæ示æ¡ï¼äºè§£å³å¯ï¼
ããããæ示æ¡ç»å¸¸ç¨äºæ示ç¨æ·å¨è¿å ¥é¡µé¢åè¾å ¥æ个å¼ã
ããããå½æ示æ¡åºç°åï¼ç¨æ·éè¦è¾å ¥æ个å¼ï¼ç¶åç¹å»ç¡®è®¤æåæ¶æé®æè½ç»§ç»æ纵ã
ããããå¦æç¨æ·ç¹å»ç¡®è®¤ï¼é£ä¹è¿åå¼ä¸ºè¾å ¥çå¼ãå¦æç¨æ·ç¹å»åæ¶ï¼é£ä¹è¿åå¼ä¸ºé»è®¤å¼ï¼å°±æ¯ç¬¬äºä¸ªåæ°ï¼å¦æ没æé»è®¤å¼é£ä¹è¿ånullã
ããããè¯æ³ï¼
prompt("请å¨ä¸æ¹è¾å ¥","ä½ ççæ¡")
ãããã
ããããå¯ä»¥éè¿ç¨æ·è¾å ¥çå 容æ¥å¤ææ们æä¹å»è¿è¡åé¢çæä½
ããé¤äºé£ä¸ªè¦åæ¡ï¼ç¨çä¹ä¸é½ï¼ï¼å ¶ä»çé½å¾å°ç¨ï¼æ¯è¾ä¸éï¼äºè§£ä¸ä¸å°±è¡
ãã计æ¶ç¸å ³ï¼æ¯è¾éè¦ï¼
ããããéè¿ä½¿ç¨ JavaScriptï¼æ们å¯ä»¥å¨ä¸å®æ¶é´é´éä¹åæ¥æ§è¡ä»£ç ï¼èä¸æ¯å¨å½æ°è¢«è°ç¨åç«å³æ§è¡ãæ们称ä¹ä¸ºè®¡æ¶äºä»¶ã
ããããsetTimeout() ä¸æ®µæ¶é´ååä¸äºäºæ
ããããããè¯æ³ï¼
var t=setTimeout("JSè¯å¥",毫ç§) 第ä¸ä¸ªåæ°jsè¯å¥å¤æ°æ¯åä¸ä¸ªå½æ°ï¼ä¸ç¶ä¸è¬çjsè¯å¥å°è¿éå°±ç´æ¥æ§è¡äºï¼å
ç¨å½æ°å°è£
ä¸ä¸ï¼è¿åå¼tå
¶å®å°±æ¯ä¸ä¸ªidå¼ï¼æµè§å¨ç»ä½ èªå¨åé
çï¼
ããããããsetTimeout() æ¹æ³ä¼è¿åæ个å¼ãå¨ä¸é¢çè¯å¥ä¸ï¼å¼è¢«å¨åå¨å为 t çåéä¸ãåå¦ä½ å¸æåæ¶è¿ä¸ª setTimeout()ï¼ä½ å¯ä»¥ä½¿ç¨è¿ä¸ªåéåæ¥æå®å®ã
ããããããsetTimeout() ç第ä¸ä¸ªåæ°æ¯å«æ JavaScript è¯å¥çå符串ãè¿ä¸ªè¯å¥å¯è½è¯¸å¦ "alert('5 seconds!')"ï¼æè 对å½æ°çè°ç¨ï¼è¯¸å¦ alertMsg()"ã
ãããããã第äºä¸ªåæ°æ示ä»å½åèµ·å¤å°æ¯«ç§åæ§è¡ç¬¬ä¸ä¸ªåæ°ï¼1000 毫ç§çäºä¸ç§ï¼ã
ãããããã
ããããclearTimeout()
ããããããè¯æ³ï¼
clearTimeout(setTimeout_variable)
ãããã举个ä¾åï¼
// å¨æå®æ¶é´ä¹åæ§è¡ä¸æ¬¡ç¸åºå½æ° var timer = setTimeout(function(){alert(123);}, 3000) // åæ¶setTimeout设置 clearTimeout(timer);
ããããsetInterval() æ¯éä¸æ®µæ¶é´åä¸äºäºæ
ããããããsetInterval() æ¹æ³å¯æç §æå®çå¨æï¼ä»¥æ¯«ç§è®¡ï¼æ¥è°ç¨å½æ°æ计ç®è¡¨è¾¾å¼ã
ããããããsetInterval() æ¹æ³ä¼ä¸åå°è°ç¨å½æ°ï¼ç´å° clearInterval() 被è°ç¨æçªå£è¢«å ³éãç± setInterval() è¿åç ID å¼å¯ç¨ä½ clearInterval() æ¹æ³çåæ°ã
ããããããè¯æ³ï¼
setInterval("JSè¯å¥",æ¶é´é´é)
ããããããè¿åå¼
ããããããä¸ä¸ªå¯ä»¥ä¼ éç» Window.clearInterval() ä»èåæ¶å¯¹ code çå¨ææ§æ§è¡çå¼ã
ããããclearInterval()
ããããããclearInterval() æ¹æ³å¯åæ¶ç± setInterval() 设置ç timeoutã
ããããããclearInterval() æ¹æ³çåæ°å¿ é¡»æ¯ç± setInterval() è¿åç ID å¼ã
ããããããè¯æ³ï¼
clearInterval(setintervalè¿åçIDå¼)
ãããããã举个ä¾åï¼
// æ¯éä¸æ®µæ¶é´å°±æ§è¡ä¸æ¬¡ç¸åºå½æ° var timer = setInterval(function(){console.log(123);}, 3000) // åæ¶setInterval设置 clearInterval(timer);
ãããããã
DOM
ããDOMï¼Document Object Modelï¼æ¯ä¸å¥å¯¹ææ¡£çå 容è¿è¡æ½è±¡åæ¦å¿µåçæ¹æ³ã
ããå½ç½é¡µè¢«å è½½æ¶ï¼æµè§å¨ä¼å建页é¢çæ档对象模åï¼Document Object Modelï¼ã
ããHTML DOM 模å被æé 为对象çæ ã
ããHTML DOM æ
ãããã
ããDOMæ åè§å®HTMLææ¡£ä¸çæ¯ä¸ªæåé½æ¯ä¸ä¸ªèç¹(node)ï¼
- ææ¡£èç¹(document对象)ï¼ä»£è¡¨æ´ä¸ªææ¡£
- å ç´ èç¹(element 对象)ï¼ä»£è¡¨ä¸ä¸ªå ç´ ï¼æ ç¾ï¼
- ææ¬èç¹(text对象)ï¼ä»£è¡¨å ç´ ï¼æ ç¾ï¼ä¸çææ¬
- å±æ§èç¹(attribute对象)ï¼ä»£è¡¨ä¸ä¸ªå±æ§ï¼å ç´ ï¼æ ç¾ï¼ææå±æ§
- 注éæ¯æ³¨éèç¹(comment对象)ã
ããJavaScript å¯ä»¥éè¿DOMå建å¨æç HTMLï¼
- JavaScript è½å¤æ¹å页é¢ä¸çææ HTML å ç´
- JavaScript è½å¤æ¹å页é¢ä¸çææ HTML å±æ§
- JavaScript è½å¤æ¹å页é¢ä¸çææ CSS æ ·å¼
- JavaScript è½å¤å¯¹é¡µé¢ä¸çææäºä»¶ååºååºï¼é¼ æ ç¹å»äºä»¶ï¼é¼ æ 移å¨äºä»¶çï¼
ããæ¥æ¾æ ç¾ï¼åcssä¸æ ·ï¼ä½ æ³æä½æ个æ ç¾éè¦å æ¾å°å®ï¼
ããããç´æ¥æ¥æ¾
document.getElementById æ ¹æ®IDè·åä¸ä¸ªæ ç¾
document.getElementsByClassName æ ¹æ®classå±æ§è·åï¼å¯ä»¥è·åå¤ä¸ªå
ç´ ï¼æ以è¿åçæ¯ä¸ä¸ªæ°ç»ï¼
document.getElementsByTagName æ ¹æ®æ ç¾åè·åæ ç¾åé
ããããä¾åï¼ã
ããããã
ããããé´æ¥æ¥æ¾
parentElement ç¶èç¹æ ç¾å
ç´
children ææåæ ç¾
firstElementChild 第ä¸ä¸ªåæ ç¾å
ç´
lastElementChild æåä¸ä¸ªåæ ç¾å
ç´
nextElementSibling ä¸ä¸ä¸ªå
å¼æ ç¾å
ç´
previousElementSibling ä¸ä¸ä¸ªå
å¼æ ç¾å
ç´
ãããã
ãããå¦ææ¥æ¾åºæ¥çå 容æ¯ä¸ªæ°ç»ï¼é£ä¹å°±å¯ä»¥éè¿ç´¢å¼æ¥å对åºçæ ç¾å¯¹è±¡
ãããã
ããä¸é¢è¯´çè¿äºæ¥æ¾æ ç¾çæ¹æ³ï¼ä»¥åæ们å¾å°ç¨ï¼çå¦äºJQueryï¼ä¼æå¾å¥½ç¨ãæ´å ¨çæ¥æ¾æ ç¾çåè½ï¼ä¸é¢è¿äºå¤§å®¶ç®åç»ä¹ ä¸ä¸ï¼æ个äºè§£å°±è¡äºã
ããèç¹æä½
ããããå建èç¹ï¼å°±æ¯å建æ ç¾ï¼
ããããããè¯æ³ï¼
ããããããcreateElement(æ ç¾å)
ãããããã示ä¾ï¼
var divEle = document.createElement("div");
ããããã
ããããã
ãããæ·»å èç¹
ããããããè¯æ³ï¼
ãããããã追å ä¸ä¸ªåèç¹ï¼ä½ä¸ºæåçåèç¹ï¼
ããããããsomenode.appendChild(newnode)ï¼
ããããããæå¢å çèç¹æ¾å°æ个èç¹çåè¾¹ã
ããããããsomenode.insertBefore(newnode,æ个èç¹);
ãããããã示ä¾ï¼
var imgEle=document.createElement("img"); imgEle.setAttribute("src", "http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg"); var d1Ele = document.getElementById("d1"); d1Ele.appendChild(imgEle);
ãããã
ããã å é¤èç¹ï¼
ããããããè¯æ³ï¼
ããããããè·å¾è¦å é¤çå ç´ ï¼éè¿ç¶å ç´ è°ç¨è¯¥æ¹æ³å é¤ã
ããããããsomenode.removeChild(è¦å é¤çèç¹)
ããããæ¿æ¢èç¹ï¼
ããããããè¯æ³ï¼
ããããããsomenode.replaceChild(newnode, æ个èç¹);
ããããããsomenodeæ¯ç¶çº§æ ç¾ï¼ç¶åæ¾å°è¿ä¸ªç¶æ ç¾éé¢çè¦è¢«æ¿æ¢çåæ ç¾ï¼ç¶åç¨æ°çæ ç¾å°è¯¥åæ ç¾æ¿æ¢æ
ããããå±æ§èç¹
ããããããè·åææ¬èç¹çå¼ï¼
var divEle = document.getElementById("d1") divEle.innerText #è¾å ¥è¿ä¸ªæ令ï¼ä¸æ§è¡å°±è½è·å该æ ç¾åå é¨æææ ç¾çææ¬å 容 divEle.innerHTML #è·åçæ¯è¯¥æ ç¾å çææå 容ï¼å æ¬ææ¬åæ ç¾
ãããããã
ãããããã
ãããããã设置ææ¬èç¹çå¼ï¼
var divEle = document.getElementById("d1") divEle.innerText="1" divEle.innerHTML="<p>2</p>" #è½è¯å«æä¸ä¸ªpæ ç¾
ããããããattributeæä½
var divEle = document.getElementById("d1"); divEle.setAttribute("age","18") #æ¯è¾è§èçåæ³ divEle.getAttribute("age") divEle.removeAttribute("age") // èªå¸¦çå±æ§è¿å¯ä»¥ç´æ¥.å±æ§åæ¥è·åå设置ï¼å¦ææ¯ä½ èªå®ä¹çå±æ§ï¼æ¯ä¸è½éè¿.æ¥è·åå±æ§å¼ç imgEle.src imgEle.src="..."
ããããè·åå¼æä½
ããããããè¯æ³ï¼
ããããããelementNode.value
ããããããéç¨äºä»¥ä¸æ ç¾ï¼ç¨æ·è¾å ¥æè éæ©ç±»åçæ ç¾ï¼
ãããããã1.input
ãããããã2.select
ãããããã3.textarea
var iEle = document.getElementById("i1"); console.log(iEle.value); var sEle = document.getElementById("s1"); console.log(sEle.value); var tEle = document.getElementById("t1"); console.log(tEle.value);
ãããããããä¾å¦ï¼é¡µé¢ä¸æä¸é¢ä¸ä¸ªæ ç¾
ããããããã
ãããããã
ãããããã
ãããããã
ããããclassçæä½
className è·åæææ ·å¼ç±»å(å符串)
é¦å
è·åæ ç¾å¯¹è±¡
æ ç¾å¯¹è±¡.classList.remove(cls) å é¤æå®ç±»
classList.add(cls) æ·»å ç±»
classList.contains(cls) åå¨è¿åtrueï¼å¦åè¿åfalse
classList.toggle(cls) åå¨å°±å é¤ï¼å¦åæ·»å ï¼toggleçæææ¯åæ¢ï¼æäºå°±ç»ä½ å é¤ï¼å¦æ没æå°±ç»ä½ å ä¸ä¸ª
ããããããä¾å¦ï¼ææ³å°c2çç±»å å°classéé¢å»
ãããããããã
ãããããããã
ãããããã
ããããæå®CSSæä½
obj.style.backgroundColor="red"
ããããããJSæä½CSSå±æ§çè§å¾ï¼
ãããããã1.对äºæ²¡æä¸æ¨ªçº¿çCSSå±æ§ä¸è¬ç´æ¥ä½¿ç¨style.å±æ§åå³å¯ãå¦ï¼
obj.style.margin
obj.style.width
obj.style.left
obj.style.position
ãããããããã
ãããããã2.对å«æä¸æ¨ªçº¿çCSSå±æ§ï¼å°ä¸æ¨ªçº¿åé¢ç第ä¸ä¸ªåæ¯æ¢æ大åå³å¯ãå¦ï¼
obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily
ãããããããã
ããæ们ä¸é¢æ说çè¿äºä¿®æ¹æ ·å¼çæ¹æ³ï¼æ¯ä¸æ¯åºè¯¥åºç¨å¨ç¨æ·çæäºæä½ä¸åï¼å¦æä½ ç¨æ·ç¹å»äºæ个å 容ï¼è®©å®ååé¢è²ä¹ç±»çï¼ç»ç¨æ·ä¸äºå¥½ççæææè æ示çææåï¼æ以è¿å°±è¦åæ们ä¸é¢è¦å¦çäºä»¶ç»åèµ·æ¥è¦åçäºæ ï¼éè¿äºä»¶+ä¸é¢çæ ·å¼ä¿®æ¹æ¥å®ç°ã
äºä»¶
ããHTML 4.0 çæ°ç¹æ§ä¹ä¸æ¯æè½å使 HTML äºä»¶è§¦åæµè§å¨ä¸çå¨ä½ï¼actionï¼ï¼æ¯å¦å½ç¨æ·ç¹å»æ个 HTML å ç´ æ¶å¯å¨ä¸æ®µ JavaScriptãä¸é¢æ¯ä¸ä¸ªå±æ§å表ï¼è¿äºå±æ§å¯æå ¥ HTML æ ç¾æ¥å®ä¹äºä»¶å¨ä½ã
ãã常ç¨äºä»¶(å°±å 讲ä¸ä¸onfocusï¼onblurï¼onclickï¼onchangeå§ï¼å ¶ä»çå头å说~~)
onclick å½ç¨æ·ç¹å»æ个对象æ¶è°ç¨çäºä»¶å¥æã ondblclick å½ç¨æ·åå»æ个对象æ¶è°ç¨çäºä»¶å¥æã onfocus å ç´ è·å¾ç¦ç¹ã // ç»ä¹ ï¼è¾å ¥æ¡ onblur å ç´ å¤±å»ç¦ç¹ã åºç¨åºæ¯ï¼ç¨äºè¡¨åéªè¯,ç¨æ·ç¦»å¼æ个è¾å ¥æ¡æ¶,代表已ç»è¾å ¥å®äº,æ们å¯ä»¥å¯¹å®è¿è¡éªè¯. onchange åçå 容被æ¹åã åºç¨åºæ¯ï¼é常ç¨äºè¡¨åå ç´ ,å½å ç´ å 容被æ¹åæ¶è§¦å.ï¼selectèå¨ï¼ onkeydown æ个é®çæé®è¢«æä¸ã åºç¨åºæ¯: å½ç¨æ·å¨æåä¸ä¸ªè¾å ¥æ¡æä¸å车æé®æ¶,表åæ交. onkeypress æ个é®çæé®è¢«æä¸å¹¶æ¾å¼ã onkeyup æ个é®çæé®è¢«æ¾å¼ã onload ä¸å¼ 页é¢æä¸å¹ å¾åå®æå è½½ã onmousedown é¼ æ æé®è¢«æä¸ã onmousemove é¼ æ 被移å¨ã onmouseout é¼ æ ä»æå ç´ ç§»å¼ã onmouseover é¼ æ 移å°æå ç´ ä¹ä¸ã onselect å¨ææ¬æ¡ä¸çææ¬è¢«éä¸æ¶åçã onsubmit 确认æé®è¢«ç¹å»ï¼ä½¿ç¨ç对象æ¯formã
ããç»å®æ¹å¼ï¼
ããããæ¹å¼ä¸ï¼ï¼å·²ç»ä¸å¸¸ç¨äºï¼å¤æ°ç¨æ¹å¼äºäºï¼
<div id="d1" οnclick="changeColor(this);">ç¹æ</div> <script> function changeColor(ths) { ths.style.backgroundColor="green"; } </script>
ãããã注æï¼
ããããããthisæ¯å®åï¼è¡¨ç¤ºè§¦åäºä»¶çå½åå ç´ ã
ããããããå½æ°å®ä¹è¿ç¨ä¸çths为形åã
ããããæ¹å¼äºï¼
<div id="d2">ç¹æ</div> <script> var divEle2 = document.getElementById("d2"); divEle2.onclick=function () {
ãã //console.log(this) this.innerText="åµåµ"; #åªä¸ªæ ç¾è§¦åçè¿ä¸ªäºä»¶ï¼thiså°±æåè° } </script>
ãããã
ãããã注æä¸ä¸ªé®é¢ï¼
ãããããã
ãããããã
ãããããã
ããããããè¿æä¸ç§è§£å³åæ³å°±æ¯å°scriptæ ç¾åå°bodyæ ç¾æä¸é¢
ãããããã
ãããããã
ããããç»å计æ¶å¨çäºä»¶ç¤ºä¾ï¼inputæ¡éé¢å¨ææ¾ç¤ºæ¶é´:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>å®æ¶å¨</title> <script> //å½js代ç ä¸ææ¾æ ç¾çæä½çæ¶åï¼å«å¿äºé¡µé¢å è½½çæ¶åç顺åºï¼ä»¥é²åºç°æ¾ä¸å°æ ç¾çæ åµåºç°ï¼æ们å¯ä»¥å°è¿ä¸ªscriptæ ç¾æ¾å°bodyæ ç¾æä¸é¢ï¼æè ç¨window.onloadï¼è¿éæ没ææ¾ï¼ä½ 们ç»ä¹ çæ¶åæ¾å°ä¸é¢å» var intervalId; //ç¨æ¥ä¿åå®æ¶å¨å¯¹è±¡ï¼å 为å¼å§å®æ¶å¨æ¯ä¸ä¸ªå½æ°ï¼ç»æå®æ¶å¨æ¯ä¸ä¸ªå½æ°ï¼ä¸¤ä¸ªå½æ°é½æ¯æä½çä¸ä¸ªå®æ¶å¨ï¼è®©ä»ä»¬äºç¸è½å¤æä½è¿ä¸ªå®æ¶å¨ï¼å°±éè¦ä¸ä¸ªå ¨å±åéæ¥æ¥åä¸ä¸è¿ä¸ªå¯¹è±¡ ãã
ãã
ãã//æå½åäºä»¶æ¾å°id为i1çinputæ ç¾éé¢ function f() { var timeStr = (new Date()).toLocaleString(); // 1.æ¿å°å½åäºä»¶ var inputEle = document.getElementById("i1");// 2.è·åinputæ ç¾å¯¹è±¡ inputEle.value = timeStr; //3.å°äºä»¶èµå¼ç»inputæ ç¾çvalueå±æ§ } ãã//å¼å§å®æ¶ä»»å¡ function start() { f(); if (intervalId === undefined) { //å¦æä¸å è¿ä¸ªå¤ææ¡ä»¶ï¼ä½ æ¯æ¬¡ç¹å»å¼å§æé®ï¼å°±å建ä¸ä¸ªå®æ¶å¨ï¼æ¯ç¹ä¸æ¬¡å°±å建ä¸ä¸ªå®æ¶å¨ï¼ç¹ç次æ°å¤äºå°±ä¼å¨é¡µé¢ä¸çæ好å¤ä¸ªå®æ¶å¨ï¼å¹¶ä¸ç¹å»åæ¢æé®çæ¶åï¼åªè½åæ¢æåä¸ä¸ªå®æ¶å¨ï¼è¿æ ·ä¸å¥½ï¼ä¹ä¸å¯¹ï¼æ以å ä¸ä¸ªå¤æ intervalId = setInterval(f, 1000); } }
//ç»æå®æ¶ä»»å¡ function end() { clearInterval(intervalId); //ãæ¸ é¤å¯¹åºçé£ä¸ªå®æ¶å¨ intervalId = undefined; } </script> </head> <body> <input type="text" id="i1"> <input type="button" value="å¼å§" id="start" onclick="start();"> <input type="button" value="ç»æ" id="end" onclick="end();"> </body> </html>
ããããäºä»¶ç¤ºä¾ï¼
ããããããæç´¢æ¡ç¤ºä¾ï¼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>æç´¢æ¡ç¤ºä¾</title> </head> <body> <input id="d1" type="text" value="请è¾å ¥å ³é®å" οnblur="blur()" οnfοcus="focus()"> <script> function focus(){ //å¦æå¨æ ç¾ä¸åçblur()çæ¹æ³ï¼æ²¡æä¼ å ¥thisåæ°ï¼é£ä¹æ们就éè¦èªå·±æ¥è·åä¸ä¸è¿ä¸ªæ ç¾ï¼ä¾å¦ä¸é¢çgetElementById('d1') var inputEle=document.getElementById("d1"); if (inputEle.value==="请è¾å ¥å ³é®å"){ inputEle.value="";
ãããã //inputEle.setAttribute('value','') } } function blur(){ var inputEle=document.getElementById("d1"); var val=inputEle.value; if(!val.trim()){ inputEle.value="请è¾å ¥å ³é®å"; } } </script> </body> </html>
ããããããselectèå¨ï¼éæ©ç份ï¼èªå¨ååºææçåå¸ï¼ä¾å¦ï¼éæ©æ²³åçå°±æ¾ç¤ºæ²³åçææçå¸
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>selectèå¨</title> </head> <body> <select id="province"> <option>请éæ©ç:</option> </select> <select id="city"> <option>请éæ©å¸:</option> </select> <script> data = {"æ²³åç": ["å»å", "é¯é¸"], "å京": ["æé³åº", "æµ·æ·åº"], "å±±ä¸": ["å¨æµ·å¸", "çå°å¸"]}; var p = document.getElementById("province"); var c = document.getElementById("city"); //页é¢ä¸å·æ°å°±å°ææçç份é½æ·»å å°selectæ ç¾ä¸ for (var i in data) { var optionP = document.createElement("option"); //å建optionæ ç¾ optionP.innerHTML = i; //å°ç份çæ°æ®æ·»å å°optionæ ç¾ä¸ p.appendChild(optionP);//å°optionæ ç¾æ·»å å°selectæ ç¾ä¸ }
//åªè¦selectä¸éæ©çå¼åçååçæ¶åï¼å°±å¯ä»¥è§¦åä¸ä¸ªonchangeäºä»¶ï¼é£ä¹æ们就å¯ä»¥éè¿è¿ä¸ªäºä»¶æ¥å®æselectæ ç¾èå¨ p.onchange = function () {
//1.è·åççå¼ var pro = (this.options[this.selectedIndex]).innerHTML;//this.selectedIndexæ¯å½åéæ©çoptionæ ç¾çç´¢å¼ä½ç½®ï¼this.optionsæ¯è·åææçoptionæ ç¾ï¼éè¿ç´¢å¼æ¿å°å½åéæ©çoptionæ ç¾å¯¹è±¡ï¼ç¶å.innerHTMLè·å对象ä¸çå 容ï¼ä¹å°±æ¯ç份 //è¿å¯ä»¥è¿æ ·è·åçï¼var pro = this.value;
var citys = data[pro]; //2. éè¿ä¸é¢è·å¾çç份å»dataéé¢ååºè¯¥ç对åºçææçå¸ // 3. æ¸ ç©ºoption c.innerHTML = ""; //æ¸ ç©ºæ¾ç¤ºå¸çé£ä¸ªselectæ ç¾éé¢çå 容 ãã
//4.循ç¯ææçå¸ï¼ç¶åæ·»å å°æ¾ç¤ºå¸çé£ä¸ªselectæ ç¾ä¸ for (var i=0;i<citys.length;i++) { var option_city = document.createElement("option"); option_city.innerHTML = citys[i]; c.appendChild(option_city); } } </script> </body> </html>
ããwindow.onload
ããããå½æ们ç»é¡µé¢ä¸çå ç´ ç»å®äºä»¶çæ¶åï¼å¿ é¡»çå°ææ¡£å è½½å®æ¯ãå 为æ们æ æ³ç»ä¸ä¸ªä¸åå¨çå ç´ ç»å®äºä»¶ã
ããããwindow.onloadäºä»¶å¨æ件å è½½è¿ç¨ç»æçæ¶å触åãæ¤æ¶ï¼ææ¡£ä¸çææ对象é½ä½äºDOMä¸ï¼å¹¶ä¸ææå¾åï¼èæ¬ï¼é¾æ¥ååæ¡æ¶é½å·²å®æå è½½ã
ãããã注æï¼.onload()å½æ°åå¨è¦çç°è±¡ã