After following, you can keep track of his dynamic information in a timely manner
Courses in the relevant section:Javascript gets child nodes
children只返回HTML節(jié)點(diǎn),甚至不返回文本節(jié)點(diǎn),雖然不是標(biāo)準(zhǔn)的DOM屬性,但是得到了幾乎所有瀏覽器的支持 語(yǔ)法:nodeObject.children
2016-12-050個(gè)贊
Courses in the relevant section:JavaScript cancels browser default action
<script type="text/javascript"> document.getElementById("demo").onclick=function(e){ var eve = e || window.event; try{ // 使用 try...catch 語(yǔ)句避免瀏覽器出現(xiàn)錯(cuò)誤提示 eve.preventDefault(); // 非 IE 瀏覽器 }catch(e){ eve.returnValue = false; // IE8.0 及其以下版本 } } </script>
2016-12-050個(gè)贊
Courses in the relevant section:JavaScript event source
<script type="text/javascript"> document.getElementById("demo").onclick=function(e){ var eve = e || window.event; var srcNode = eve.target || eve.srcElement; // 兼容所有瀏覽器 alert(srcNode); } </script>
2016-12-050個(gè)贊
Courses in the relevant section:JavaScript gets mouse coordinates
<script type="text/javascript"> document.getElementById("demo").onclick=function(e){ var eve = e || window.event; var x = eve.clientX, // 相對(duì)于客戶端的X坐標(biāo) y = eve.clientY, // 相對(duì)于客戶端的Y坐標(biāo) x1 = eve.screenX, // 相對(duì)于計(jì)算機(jī)屏幕的X坐標(biāo) y1 = eve.screenY; // 相對(duì)于計(jì)算機(jī)屏幕的Y坐標(biāo) alert( "相對(duì)客戶端的坐標(biāo):\n"+ "x = "+x+"\n"+ "y = "+y+"\n\n"+ "相對(duì)屏幕的坐標(biāo):\n"+ "x = "+x1+"\n"+ "y = "+y1 ); } </script>
2016-12-050個(gè)贊
Courses in the relevant section:JavaScript event object: current event
<div id="demo">在這里單擊</div> <script type="text/javascript"> document.getElementById("demo").onclick=function(e){ var eve=e; var x=eve.x; // X坐標(biāo) var y=eve.y; // Y坐標(biāo) alert("X坐標(biāo):"+x+"\nY坐標(biāo):"+y); } </script><div id="demo">在這里單擊</div> <script type="text/javascript"> document.getElementById("demo").onclick=function(e){ var eve=e; var x=eve.x; // X坐標(biāo) var y=eve.y; // Y坐標(biāo) alert("X坐標(biāo):"+x+"\nY坐標(biāo):"+y); } </script>
2016-12-050個(gè)贊
Courses in the relevant section:How to bind events in JavaScript [3 ways]
<input onclick="myAlert()" type="button" value="點(diǎn)擊我,彈出警告框" /> <script type="text/javascript"> function myAlert(){ alert("謝謝支持"); } </script>
2016-12-050個(gè)贊
Courses in the relevant section:The concept of JavaScript events
所謂事件,是指 JavaScript 捕獲到用戶的操作,并做出正確的響應(yīng) JavaScript 事件一般與DOM元素綁定
2016-12-050個(gè)贊
Courses in the relevant section:JavaScript common events
事件 onclick 單擊 ondblclick 雙擊 onfocus 元素獲得焦點(diǎn) onblur 元素失去焦點(diǎn) onmouseover 鼠標(biāo)移到某元素之上 onmouseout 鼠標(biāo)從某元素移開(kāi) onmousedown 鼠標(biāo)按鈕被按下 onmouseup 鼠標(biāo)按鍵被松開(kāi) onkeydown 某個(gè)鍵盤(pán)按鍵被按下 onkeyup 某個(gè)鍵盤(pán)按鍵被松開(kāi) onkeypress 某個(gè)鍵盤(pán)按鍵被按下并松開(kāi)
2016-12-050個(gè)贊
Courses in the relevant section:Javascript gets sibling nodes
與 previousSibling 相同,在IE下,nextSibling 同樣會(huì)忽略節(jié)點(diǎn)間的空白節(jié)點(diǎn)(空格、回車(chē)和Tab鍵);在遵循W3C規(guī)范的瀏覽器(Chrome、FireFox、Safari等)下則不會(huì)
2016-12-050個(gè)贊
Courses in the relevant section:Javascript creates node
createElement()用來(lái)創(chuàng)建一個(gè)元素節(jié)點(diǎn) 語(yǔ)法:document.createElement(tagName) createTextNode()用來(lái)創(chuàng)建一個(gè)文本節(jié)點(diǎn) 語(yǔ)法:document.createTextNode(text) createComment()用來(lái)創(chuàng)建一個(gè)注釋節(jié)點(diǎn) 語(yǔ)法:document.createComment(comment)
2016-12-050個(gè)贊
Courses in the relevant section:Javascript add node
insertBefore() 是當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)的一個(gè)方法,添加節(jié)點(diǎn)時(shí),不但要知道當(dāng)前節(jié)點(diǎn),還要知道當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)。一般情況下,可以通過(guò) thisNode.parentNode 來(lái)獲取父節(jié)點(diǎn)
2016-12-050個(gè)贊
Courses in the relevant section:Javascript removeChild(): delete node
<script type="text/javascript"> document.getElementById("thisNode").onclick=function(){ this.parentNode.removeChild(this); } </script>
2016-12-050個(gè)贊
Courses in the relevant section:JavaScript cloneNode(): clone node
克隆節(jié)點(diǎn) cloneNode() 語(yǔ)法: nodeObject.cloneNode(boolean)
2016-12-050個(gè)贊
Courses in the relevant section:JavaScript gets CSS styles
獲取CSS樣式 語(yǔ)法: nodeObject.style.cssProperty nodeObject 為節(jié)點(diǎn)對(duì)象,cssProperty 為CSS屬性
2016-12-050個(gè)贊
Courses in the relevant section:JavaScript sets and modifies CSS styles
設(shè)置和修改CSS樣式 語(yǔ)法: nodeObject.style.cssProperty=newStyle nodeObject 為節(jié)點(diǎn)對(duì)象,cssProperty 為CSS屬性,newStyle 為CSS屬性的值
2016-12-050個(gè)贊