您好,登錄后才能下訂單哦!
這篇文章主要介紹了js中script上下放置的區(qū)別是什么,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
具體如下:
回顧
javascript分為三部分:
1、ECMAScript5.0 es6(阮一峰) es7 es8 es6中有類的概念
聲明變量 var let(es6中語法)
內(nèi)置函數(shù) Date Math.random
if else switch while do-while for
2、DOM Document Object Model
獲取DOM事件的三種方式
getElementById()
getElementsByTagName()
getElementsByClassName()
DOM的三步走
①、事件對象
②、事件、
③、事件驅(qū)動
值操作: <div></div> too liangoDiv.innerText='too liang';
僅僅設(shè)置文本oDiv.innerHTML='<h3>too liang</h3>';
文本和標(biāo)簽一起渲染oInput.value='alex';
僅僅是對表單控件有效
標(biāo)簽屬性操作;
設(shè)置類名:oDiv.className+=' active';
追加類名、
設(shè)置id:oDiv.id='box';
樣式操作:
oDiv.style.(css中所有的樣式屬性)
注意駝峰體:如果margin-left 使用js的時(shí)候marginLeft
3、BOM
<script></script>在head和body中放置的區(qū)別
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> //加載順序:1DOM元素加載 2圖片加載 //1等待DOM和圖片資源加載完成之后才調(diào)用window.onload后面的方法 //2事件覆蓋事件,也即同時(shí)存在多個(gè)window.noload時(shí),后面的覆蓋前面的 window.onload=function () { // var oBtn=document.getElementById('btn'); // console.log(oBtn); function $(idName){ return document.getElementById(idName); } $('btn').onclick=function(){ 。。。。。。 }; } </script> <!--沒有操作DOM時(shí)可以將script放在這里面,如果要使用DOM的相關(guān)操作,使用window.onload,建議最好寫在body里面--> </head>
DOM的增刪改查
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button id="btn">追加</button> <button id="del">刪除</button> <div id="box"> <p>測試段落</p> </div> <script> //加載順序:1DOM元素加載 2圖片加載 //1等待DOM和圖片資源加載完成之后才調(diào)用window.onload后面的方法 //2事件覆蓋現(xiàn)在,同時(shí)存在多個(gè)window.noload時(shí),后面的覆蓋前面的 window.onload=function () { // var oBtn=document.getElementById('btn'); // console.log(oBtn); function $(idName){ return document.getElementById(idName); } $('btn').onclick=function(){ //1DOM的創(chuàng)建 var oP=document.createElement('p'); //2 DOM的追加 $('box').appendChild(oP); //3 DOM的修改 oP.innerText='alex'; oP.id='p1';//設(shè)置id var oA=document.createElement('abc');//自定義創(chuàng)建 oA.innerText='321'; oA.id='abc'; $('box').insertBefore(oA,oP);//在oA之前插入 }; //4 DOM的刪除操作 $('del').onclick=function(){ $('box').removeChild($('p1')); $('box').removeChild($('abc')); } } </script> </body> </html>
應(yīng)用場景分析
如果是一開始頁面有初始化渲染開銷;應(yīng)用:頻繁的切換:display:none|block 或者 追加className 刪除className
如果是DOM的創(chuàng)建和刪除 如果你是頻繁的切換,對DOM的性能消耗很大,所以最好應(yīng)用在少量的切換上面
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測試上述代碼運(yùn)行效果。
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“js中script上下放置的區(qū)別是什么”這篇文章對大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。