Web前端核心重點JavaScript函數BOM、D

Web前端核心重點JavaScript函數BOM、DOM必會知識總結

S高級核心知識點和常用方法總結，應同學需求，整理了前端實際開發中必會的最最核心的 JS函數，BOM，DOM，定時器，延時器等常用方法和屬性值，這些內容都是必學內容，已經全部整理出來了，方便我們查缺補漏，建立好知識庫。

總結：JS函數的定義調用，參數，返回值，閉包，立即執行函數，BOM，DOM，定時器，延時器等常用方法，必學版；

函數的定義與調用

單詞：function

注釋：定義函數。有如下兩種方式；

1、function 函數名() {}; 這種聲明方式，預解析階段函數會提升；

2、var 函數名=function() {}; 這種聲明方式，預解析階段只會提升函數名，后面的函數體function() {}不會提升；

3、函數調用是在函數名后面添加括號；示例： fn()表示調用函數fn；

函數的參數

單詞：arguments

注釋：接收傳入函數的實參列表，是一個類數組對象（與數組類似，擁有length屬性，可以通過下標訪問某個值，但是不可以使用數組的方法）

1、形參：定義函數時設置的參數；

2、實參：調用函數時傳入的參數；

函數的返回值

單詞：return

注釋：設置函數的返回值，調用函數時，遇到return語句會立即退出函數，并設置函數的返回值；

閉包

單詞：closure

注釋：函數本身和該函數聲明時所處的環境狀態的組合，簡單理解就是閉包可以在一個內層函數中訪問到其外層函數的作用域。

示例：下面這段代碼中的f2函數，就是閉包，可以訪問到外層函數f1作用域的中變量n的值

function f1(){

var n=999;

function f2(){

alert(n);

}

return f2;

}

var result=f1();

result(); // 999

立即執行函數

單詞：IIFE

注釋：Immediately Invoked Function Expression的首字母縮寫，立即調用函數表達式，是一種特殊的JavaScript函數寫法，一旦被定義，就立即被調用。示例：

(function(){

//函數體

})()

DOM的基本概念

1).單詞：DOM

注釋：文檔對象模型(Document Object Model)，是JavaScript操作HTML文檔的接口，它最大的特點就是將文檔表示為節點樹。

2).單詞：document

注釋：document對象表示整個HTML文檔，它是DOM節點樹的根

節點類型

單詞：nodeType

注釋：返回節點的類型（不常用，了解即可）

常見的返回值如下：

1、nodeType 屬性返回 1，表示節點是一個元素節點

2、nodeType 屬性返回 3，表示節點是一個文本節點

3、nodeType 屬性返回 8，表示節點是一個注釋節點

4、nodeType 屬性返回 9，表示節點是document節點

5、nodeType 屬性返回 10，表示節點是DTD節點

節點的關系

1）. 單詞：firstChild

注釋：返回第一個子節點，包括文本節點、注釋節點和元素節點等所有類型的節點

2）. 單詞：firstElementChild

注釋：返回第一個子元素節點

3) . 單詞：lastChild

注釋：返回最后一個子節點，包括文本節點、注釋節點和元素節點等所有類型的節點

4) . 單詞：lastElementChild

注釋：返回最后一個子元素節點

5) . 單詞：lastElementChild

注釋：返回所有的子節點，包括文本節點、注釋節點和元素節點等所有類型的節點（不常用，了解即可）

6) . 單詞：children

注釋：返回所有的子元素節點

7) . 單詞：parentNode

注釋：返回父元素節點

8) . 單詞：previousSibling

注釋：返回前一個兄弟節點，包括文本節點、注釋節點和元素節點等所有類型的節點（不常用，了解即可）

9) . 單詞：previousElementSibling

注釋：返回前一個兄弟元素節點（不常用，了解即可）

10) . 單詞：nextSibling

注釋：返回同級的后一個節點，包括文本節點、注釋節點和元素節點等所有類型的節點（不常用，了解即可）

11) . 單詞：nextElementSibling

注釋：返回同級的后一個元素節點（不常用，了解即可）

訪問元素節點常用的方法

1) . 單詞：document.getElementById()

注釋：通過id獲取元素，返回一個dom對象

例如：document.getElementById(""demo"");獲取id屬性值為demo的元素

2) . 單詞：document.getElementsByTagName()

注釋：通過標簽名獲取元素，以集合的形式返回

例如：document.getElementsByTagName(""p""); 獲取所有的p標簽元素

3) . 單詞：document.getElementsByClassName()

注釋：通過類名獲取元素，以集合的形式返回

例如：document.getElementsByClassName(""box"");獲取所有類名為box的元素

4).單詞：document.querySelector()

注釋：通過css選擇器獲取第一個符合條件的元素，返回一個DOM元素

例如：document.querySelector("".item"") 獲取類名為item的第一個元素

5).單詞：document.querySelectorAll()

注釋：通過css選擇器獲取所有的元素，以集合的形式返回

例如：document.querySelectorAll("".item"") 獲取類名為item所有的元素；

節點的創建、添加、移出和克隆

1）單詞：document.createElement()

注釋：創建一個指定標簽名的 HTML 元素

2) 單詞：appendChild()

注釋：將一個節點作為最后一個子節點添加到指定的父節點

3) 單詞：removeChild()

注釋：刪除指定的子節點

4) 單詞：insertBefore()

注釋：在已有的子節點前插入一個新的子節點

5) 單詞：cloneNode()

注釋：克隆節點，如果傳遞給它的參數是 true，則該節點的所有后代節點也都會被克隆。如果為false，則只克隆節點本身。

節點的操作

1）單詞：innerText

注釋：以純文本的形式設置或者獲取元素的文本內容（不常用，了解即可）

2）單詞：className

注釋：元素節點的一個屬性，用來設置或返回元素的class屬性值

示例：oBox.className="active"

3）單詞：style

注釋：元素節點的一個屬性，用來設置元素節點的css樣式

例如：box.style.color=""red"" 改變box元素節點的字體為紅色

3）單詞：src

注釋：元素節點的一個屬性，用來設置元素節點src屬性值

例如： oImg.src="./images/2.jpg"

4）單詞：href

注釋：元素節點的一個屬性，用來設置元素節點href屬性值

例如： oLink.href="http://www.***.com"

5）單詞：setAttribute()

注釋：給元素節點設置指定的屬性，并為其賦指定的值

例如：oBox.setArrtibute('data-n', 10)

6）單詞：getAttribute()

注釋：獲取元素節點指定的屬性值

例如：oBox.getArrtibute('data-n')

7）單詞：dataset

注釋：元素節點的一個屬性，用來設置或返回元素以data-*方式自定義的屬性

常見的鼠標事件

（DOM0級事件監聽方式：on +事件名）

1）單詞：onclick ；注釋：監聽鼠標單擊事件

2）單詞：ondblclick； 注釋：監聽鼠標雙擊事件

3）單詞：onmousedown； 注釋：監聽鼠標按下事件

4）單詞：onmouseup； 注釋：監聽鼠標松開事件

5）單詞：onmousemove； 注釋：監聽鼠標移動事件

6）單詞：onmouseenter； 注釋：監聽鼠標移入事件，不存在事件冒泡

7）單詞：onmouseleave； 注釋：監聽鼠標離開事件，不存在事件冒泡

8）單詞：onmouseover； 注釋：監聽鼠標移入事件，存在事件冒泡

9）單詞：onmouseout； 注釋：監聽鼠標離開事件，存在事件冒泡

10）單詞：onmousewheel； 注釋：監聽鼠標滾輪事件（不常用，了解即可）

鍵盤事件（DOM0級事件監聽方式：on +事件名）

1）單詞：onkeydown ；

注釋：監聽某個鍵盤按鍵被按下，可以監聽上下左右箭頭等系統按鍵；

2）單詞：onkeypress；

注釋： 監聽某個鍵盤按鍵被按下，無法監聽到系統按鍵；

3）單詞：onkeyup；

注釋： 監聽某個鍵盤按鍵被松開，可以監聽上下左右箭頭等系統按鍵；

常見的表單事件（DOM0級事件監聽方式：on +事件名）

1）單詞：onchange ；注釋：當表單元素的內容發生變化所觸發的事件；

2）單詞：onfocus ；注釋：當元素獲得焦點時觸發的事件，例如：tab鍵或者點擊鼠標；

3）單詞：onblur ；注釋：當元素失去焦點時觸發的事件；

4）單詞：onsubmit； 注釋：當提交表單時觸發的事件；

5）單詞：onreset； 注釋：當重置表單時觸發的事件；

常見的頁面監聽事件（DOM0級事件監聽方式：on +事件名

1）單詞：onload ；注釋：監聽頁面或圖像加載完成事件

2）單詞：onunload ；注釋：監聽用戶退出頁面事件（不常用，了解即可）

DOM2級事件監聽

單詞：addEventListener()

注釋：監聽事件并添加到指定的元素

1、方法中接收三個參數如下：

（1）第一個參數是字符串，表示要監聽的事件名，必須傳入

（2）第二個參數是函數，指定事件觸發時要執行的函數，必須傳入

（3）第二個參數是布爾值，指定事件是否在捕獲或冒泡階段執行，可選

2、示例：oBox.addEventListener('click', function() {}, true) 在捕獲階段監聽oBox的點擊事件

事件的傳播

1）單詞：capturing phase

注釋：捕獲階段，由外向內傳播的，也就是當前事件觸發時，先觸發當前元素的最外層的祖先元素的同類型事件，然后再向內傳播給后代元素

2）單詞：Bubbling phase

注釋：冒泡階段，由內向外傳播，也就是當事件觸發時，先觸發當前元素上的事件，然后再向當前元素的祖先元素上傳播，觸發祖先元素的同類型事件

事件對象

單詞：event；注釋： 返回事件的狀態

事件對象常用的屬性

1）單詞：target；注釋： 返回當前觸發事件的元素

2）單詞：current；注釋：Target 返回監聽事件的元素

3）單詞：clientX； 注釋：返回鼠標指針相對于瀏覽器的水平坐標

4）單詞：clientY 注釋：返回鼠標指針相對于瀏覽器的垂直坐標

5）單詞：pageX ；注釋：返回鼠標指針相對于整個網頁的水平坐標

6）單詞：pageY ；注釋：返回鼠標指針相對于整個網頁的垂直坐標

7）單詞：offsetX； 注釋：返回鼠標指針相對于事件源元素的水平坐標

8）單詞：offsetY ；注釋：返回鼠標指針相對于事件源元素的垂直坐標

9）單詞：charCode；注釋：通常用于onkeypress事件，返回用戶按下按鍵對應的碼值，區分大小寫；示例：按下鍵盤a，對應的值是97，按下鍵盤A，對應的值是65

9）單詞：keyCode；注釋：通常用于onkeydown和onkeyup事件，返回用戶按下按鍵的碼值，不區分大小寫。示例：按下鍵盤a或A，對應的值是65

9）單詞：deltaY； 注釋：返回onmousewheel事件觸發時，滾輪滾動的方向，向下滾動時返回正值，向上滾動時，返回負值（不常用，了解即可）

事件對象常用的方法

1）單詞：preventDefault()； 注釋：阻止瀏覽器默認行為；

2）單詞：stopPropagation() ；注釋：阻止事件傳播；

定時器和延時器

1）單詞：setInterval() ；

注釋：定時器，重復調用一個函數，在每次調用之間具有固定的時間間隔

2）單詞：clearInterval()；

注釋：清除定時器

3）單詞：setTimeout() ；

注釋：延時器，當指定時間到了之后，會執行一次函數，不再重復執行

4）單詞：clearTimeout()；

注釋：清除延時器

BOM相關的基本概念

1）單詞：BOM

注釋：瀏覽器對象模型（Browser Object Model），是js與瀏覽器窗口交互的接口

2）單詞：window

注釋：window 對象是瀏覽器中打開的窗口，注意事項：

1、這個窗口中包含DOM結構，window.document屬性就表示document對象

2、全局變量會成為window對象的屬性

3、內置函數普遍是window的方法，如：alert()等方法

3）單詞：navigator navigator

注釋：對象含有關瀏覽器的信息，是指 window 對象的一部分，可以通過 window.history 屬性對其進行訪問

4）單詞：history history

注釋：對象包含用戶（在瀏覽器窗口中）訪問過的 URL，是 window 對象的一部分，可以通過 window.history 屬性對其進行訪問

5）單詞：location location

注釋：對象包含有關當前 URL 的信息，是 Window 對象的一個部分，可以通過 window.location 屬性來訪問

window對象的常用屬性

1）單詞：innerHeight ；注釋：返回瀏覽器窗口的內容區域的高度，包含水平滾動條的高度

2）單詞：innerWidth ；注釋：返回瀏覽器窗口的內容區域的寬度，包含垂直滾動條的寬度

3）單詞：document.documentElement.clientWidth ；注釋：返回瀏覽器窗口的內容區域的寬度，不包含滾動條

4）單詞：outerHeight ；注釋：返回瀏覽器窗口的外部高度，包含水平滾動條的高度和瀏覽器窗口上下邊框的高度（不常用，了解即可）

5）單詞：outerWidth ；注釋：返回瀏覽器窗口的內容高度，包含垂直滾動條的寬度和瀏覽器窗口左右邊框的寬度（不常用，了解即可）

6）單詞：scrollY ；注釋：返回文檔當前垂直滾動的距離

7）單詞：document.documentElement.scrollTop

window對象的常用事件

1）單詞：onresize ；注釋：監聽窗口改變大小事件；

2）單詞：onscroll ；注釋：監聽窗口滾動事件；

navigator對象的常用屬性

1）單詞：appName；注釋： 返回瀏覽器官網名稱；

2）單詞：appVersion；注釋： 返回瀏覽器版本；

3）單詞：userAgent ；注釋：返回瀏覽器的用戶代理信息；

4）單詞：platform；注釋： 返回用戶操作系統；

history對象的常用方法

1）單詞：back() ；注釋：表示回退到瀏覽器歷史記錄里的上一頁，等同于點擊瀏覽器回退按鈕；

2）單詞：go(-1) ；注釋：與history()方法的作用一樣；

location對象的常用屬性和方法

1）單詞：href；注釋： 設置或返回完整的URL地址；

2）單詞：search；注釋： 設置或返回從問號 (?) 開始的 URL（查詢部分）；

3）單詞：reload() ；注釋：重新加載當前頁面；

以上內容也是整個JS學習中的核心重點，可以作為學習路徑，也可作為面試復習的知識清單

有關【HTML/HTML5，CSS/CSS3，JS屬性和常用方法】完整版的總結在往期的筆記中已經發布，可以看往期作品！

趕緊收藏，頭條超詳細Web前端入門到精通必學的標簽及屬性大全
web前端開發中必會JavaScript屬性和常用方法
Web前端入門到精通必會的CSS樣式和屬性大全

下期筆記總結 JS重難點：

面向對象、構造函數與類、原型原型鏈，內置對象，繼承，設計模式部分的內容，一個個來梳理，喜歡記得點贊關注收藏了做我的粉絲我寵你

還需要總結什么？留言我會記錄下來，根據需求來逐一梳理 ^_^

多特效代碼請添加HTML5前端交流群581549454

廢話不多說，上代碼！

網站格式代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

* { margin:0; padding:0; }

body { position:relative; width:100%; height:100%; overflow:hidden; }

button { color:#222; font-size:20px; padding:5px 20px; width:120px; }

#btn1 { position:absolute; top:10px; left:10px; }

#btn2 { position:absolute; top:60px; left:10px; }

#btn3 { position:absolute; top:110px; left:10px; }

#btn4 { position:absolute; top:160px; left:10px; }

#btn5 { position:absolute; top:210px; left:10px; }

#btn6 { position:absolute; top:260px; left:10px; }

#btn7 { position:absolute; top:310px; left:10px; }

#btn8 { position:absolute; top:360px; left:10px; }

#btn9 { position:absolute; top:410px; left:10px; }

#btn0 { position:absolute; top:460px; left:10px; }

</style>

<title>漂亮的Canvas鼠標箭頭跟隨動畫特效</title>

</head>

</div>

$(document).ready(function() {

var canvas=document.getElementById("c");

var ctx=canvas.getContext("2d");

var c=$("#c");

var x,y,w,h,cx,cy,l;

var y=[];

var b={

n:100,

c:false, // 顏色如果是false 則是隨機漸變顏色

bc:'#000', // 背景顏色

r:0.9,

o:0.05,

a:1,

s:20,

}

var bx=0,by=0,vx=0,vy=0;

var td=0;

var p=0;

var hs=0;

re();

var color,color2;

if(b.c){

color2=b.c;

}else{

color=Math.random()*360;

}

$(window).resize(function(){

re();

});

var tp1=true,tp2=false,tp3=false,tp4=false,tp5=false,tp6=false,tp7=false,tp8=false,tp9=false,tp0=false;

function begin(){

if(tp1){

if(!b.c){

color+=.1;

color2='hsl('+color+',100%,80%)';

}

ctx.globalAlpha=1;

ctx.fillStyle=b.bc;

ctx.fillRect(0,0,w,h);

for(var i=0;i<y.length;i++){

ctx.globalAlpha=y[i].o;

ctx.fillStyle=color2;

ctx.beginPath();

ctx.arc(y[i].x,y[i].y,y[i].r,0,Math.PI*2);

ctx.closePath();

ctx.fill();

y[i].r+=b.r;

y[i].o-=b.o;

if(y[i].o<=0){

y.splice(i,1);

i--;

};

}

}else if(tp2){

if(!b.c){

color+=.1;

color2='hsl('+color+',100%,80%)';

}

ctx.globalAlpha=1;

ctx.fillStyle=b.bc;

ctx.fillRect(0,0,w,h);

for(var i=0;i<y.length;i++){

ctx.globalAlpha=y[i].o;

ctx.fillStyle=color2;

ctx.beginPath();

y[i].r=10;

ctx.shadowBlur=20;

ctx.shadowColor=color2;

ctx.arc(y[i].x,y[i].y,y[i].r,0,Math.PI*2);

ctx.closePath();

ctx.fill();

ctx.shadowBlur=0;

y[i].o-=b.o;

y[i].v+=b.a;

y[i].y+=y[i].v;

if(y[i].y>=h+y[i].r || y[i].o<=0){

y.splice(i,1);

i--;

};

}

}else if(tp3){

if(!b.c){

color+=.1;

color2='hsl('+color+',100%,80%)';

}

td+=5;

ctx.globalAlpha=1;

ctx.fillStyle=b.bc;

ctx.fillRect(0,0,w,h);

for(var i=0;i<y.length;i++){

ctx.globalAlpha=y[i].o;

ctx.fillStyle=color2;

ctx.beginPath();

ctx.shadowBlur=20;

ctx.shadowColor=color2;

y[i].r=(1-(y[i].y/h))*20;

ctx.arc(y[i].x,y[i].y,y[i].r,0,Math.PI*2);

ctx.closePath();

ctx.fill();

ctx.shadowBlur=0;

y[i].o=y[i].y/h;

y[i].v+=b.a;

y[i].y-=b.s;

y[i].x+=(Math.cos((y[i].y+td)/100)*10);

if(y[i].y<=0-y[i].r || y[i].o<=0){

y.splice(i,1);

i--;

};

}

}else if(tp4){

if(!b.c){

color+=.1;

color2='hsl('+color+',100%,80%)';

}

ctx.globalAlpha=1;

ctx.fillStyle=b.bc;

ctx.fillRect(0,0,w,h);

for(var i=0;i<y.length;i++){

ctx.globalAlpha=y[i].o;

ctx.fillStyle=color2;

ctx.beginPath();

ctx.shadowBlur=20;

ctx.shadowColor=color2;

y[i].vx2 +=(cx - y[i].wx)/1000;

y[i].vy2 +=(cy - y[i].wy)/1000;

y[i].wx+=y[i].vx2;

y[i].wy+=y[i].vy2;

y[i].o-=b.o/2;

y[i].r=10;

ctx.arc(y[i].wx,y[i].wy,y[i].r,0,Math.PI*2);

ctx.closePath();

ctx.fill();

ctx.shadowBlur=0;

if(y[i].o<=0){

y.splice(i,1);

i--;

};

}

}else if(tp5){

if(!b.c){

color+=.1;

color2='hsl('+color+',100%,80%)';

}

ctx.globalAlpha=.18;

ctx.fillStyle=b.bc;

ctx.fillRect(0,0,w,h);

p+=5;

ctx.globalAlpha=1;

ctx.fillStyle=color2;

ctx.beginPath();

ctx.shadowBlur=20;

ctx.shadowColor=color2;

ctx.arc(cx+50*Math.cos(p*Math.PI/180),cy+50*Math.sin(p*Math.PI/180),10,0,Math.PI*2);

ctx.closePath();

ctx.fill();

ctx.beginPath();

ctx.arc(cx+50*Math.cos((p+180)*Math.PI/180),cy+50*Math.sin((p+180)*Math.PI/180),10,0,Math.PI*2);

ctx.closePath();

ctx.fill();

ctx.beginPath();

ctx.arc(cx+50*Math.cos((p+90)*Math.PI/180),cy+50*Math.sin((p+90)*Math.PI/180),10,0,Math.PI*2);

ctx.closePath();

ctx.fill();

ctx.beginPath();

ctx.arc(cx+50*Math.cos((p+270)*Math.PI/180),cy+50*Math.sin((p+270)*Math.PI/180),10,0,Math.PI*2);

ctx.closePath();

ctx.fill();

ctx.shadowBlur=0;

}else if(tp6){

if(!b.c){

color+=.1;

color2='hsl('+color+',100%,80%)';

}

ctx.globalAlpha=0.2;

ctx.fillStyle=b.bc;

ctx.fillRect(0,0,w,h);

for(var i=0;i<y.length;i++){

ctx.globalAlpha=y[i].o;

ctx.strokeStyle=color2;

ctx.beginPath();

ctx.lineWidth=2;

ctx.moveTo(y[i].x,y[i].y);

ctx.lineTo((y[i].wx+y[i].x)/2+Math.random()*20,(y[i].wy+y[i].y)/2+Math.random()*20);

ctx.lineTo(y[i].wx,y[i].wy);

ctx.closePath();

ctx.stroke();

y[i].o-=b.o;

if(y[i].o<=0){

y.splice(i,1);

i--;

};

}

}else if(tp7){

if(!b.c){

color+=.1;

color2='hsl('+color+',100%,80%)';

}

ctx.globalAlpha=0.2;

ctx.fillStyle=b.bc;

ctx.fillRect(0,0,w,h);

if(y.length<b.n*2){

hs=Math.random()*2*Math.PI;

y.push({x:cx+((Math.random()-.5)*100*Math.cos(hs)),y:cy+((Math.random()-.5)*100*Math.cos(hs)),o:1,h:hs});

}

for(var i=0;i<y.length;i++){

ctx.globalAlpha=y[i].o;

ctx.fillStyle=color2;

ctx.beginPath();

y[i].x+=(cx-y[i].x)/10;

y[i].y+=(cy-y[i].y)/10;

ctx.arc(y[i].x,y[i].y,1,0,Math.PI*2);

ctx.closePath();

ctx.fill();

y[i].o-=b.o;

if(y[i].o<=0){

y[i].h=Math.random()*2*Math.PI;

y[i].x=cx+((Math.random()-.5)*100*Math.cos(y[i].h));

y[i].y=cy+((Math.random()-.5)*100*Math.sin(y[i].h));

y[i].o=1;

};

}

}else if(tp8){

if(!b.c){

color+=.1;

color2='hsl('+color+',100%,80%)';

}

ctx.globalAlpha=0.2;

ctx.fillStyle=b.bc;

ctx.fillRect(0,0,w,h);

ctx.fillStyle=color2;

if(cx%4==0){

cx+=1;

}else if(cx%4==2){

cx-=1

}

else if(cx%4==3){

cx-=2

}

if(cy%4==0){

cy+=1;

}else if(cy%4==2){

cy-=1

}

else if(cy%4==3){

cy-=2

}

for(var i=cx-60;i<cx+60;i+=4){

for(var j=cy-60;j<cy+60;j+=4){

if(Math.sqrt(Math.pow(cx-i,2)+Math.pow(cy-j,2))<=60){

ctx.globalAlpha=1-(Math.sqrt(Math.pow(cx-i,2)+Math.pow(cy-j,2))/60);

if(Math.random()<.2){

ctx.fillRect(i,j,3,3);

}

}else if(tp9){

if(!b.c){

color+=.1;

color2='hsl('+color+',100%,80%)';

}

ctx.globalAlpha=0.2;

ctx.fillStyle=b.bc;

ctx.fillRect(0,0,w,h);

ctx.fillStyle=color2;

if(cx%4==0){

cx+=1;

}else if(cx%4==2){

cx-=1

}

else if(cx%4==3){

cx-=2

}

if(cy%4==0){

cy+=1;

}else if(cy%4==2){

cy-=1

}

else if(cy%4==3){

cy-=2

}

if(y.length<b.n){

y.push({x:cx,y:cy,xv:0,yv:0,o:1});

}

for(var i=0;i<y.length;i++){

if(y[i].xv==0 && y[i].yv==0){

if(Math.random()<.5){

y[i].xv=3;

}else{

y[i].xv=-3;

}

}else{

if(Math.random()<.5){

y[i].yv=3;

}else{

y[i].yv=-3;

}

}else{

if(y[i].xv==0){

if(Math.random()<.66){

y[i].yv=0;

if(Math.random()<.5){

y[i].xv=3;

}else{

y[i].xv=-3;

}

}else if(y[i].yv==0){

if(Math.random()<.66){

y[i].xv=0;

if(Math.random()<.5){

y[i].yv=3;

}else{

y[i].yv=-3;

}

y[i].o-=b.o/2;

ctx.globalAlpha=y[i].o;

y[i].x+=y[i].xv;

y[i].y+=y[i].yv;

ctx.fillRect(y[i].x,y[i].y,3,3);

if(y[i].o<=0){

y.splice(i,1);

i--;

};

}

}else if(tp0){

if(!b.c){

color+=.1;

color2='hsl('+color+',100%,80%)';

}

ctx.globalAlpha=0.2;

ctx.fillStyle=b.bc;

ctx.fillRect(0,0,w,h);

ctx.fillStyle=color2;

y.push({x:cx,y:cy,xv:2,yv:1,o:1});

for(var i=0;i<y.length;i++){

y[i].o-=b.o/10;

ctx.globalAlpha=y[i].o;

y[i].x+=(Math.random()-.5)*4;

y[i].y-=1;

ctx.fillRect(y[i].x,y[i].y,2,2);

if(y[i].o<=0){

y.splice(i,1);

i--;

};

}

window.requestAnimationFrame(begin);

}

function re(){

w=window.innerWidth;

h=window.innerHeight;

canvas.width=w;

canvas.height=h;

cx=w/2;

cy=h/2;

};

c.mousemove(function(e){

cx=e.pageX-c.offset().left;

cy=e.pageY-c.offset().top;

if(tp4){

if(Math.random()<=.5){

bx=-10;

}else{

bx=w+10;

}

by=Math.random()*h;

}else{

if(Math.random()<=.5){

by=-10;

}else{

by=h+10;

}

bx=Math.random()*w;

}

vx=(Math.random()-.5)*8;

vy=(Math.random()-.5)*8;

}

if(tp1 || tp2 || tp3){

y.push({x:cx,y:cy,r:b.r,o:1,v:0});

}else if(tp4){

y.push({x:cx,y:cy,r:b.r,o:1,v:0,wx:bx,wy:by,vx2:vx,vy2:vy});

}else if(tp6){

y.push({x:cx+((Math.random()-.5)*30),y:cy+((Math.random()-.5)*30),o:1,wx:cx,wy:cy});

}

});

/*c.mousedown(function(){

c.on('mousemove',function(e){

cx=e.pageX-c.offset().left;

cy=e.pageY-c.offset().top;

y.push({x:cx,y:cy,r:b.r,o:1});

});

c.on('mouseup',function(){

c.off('mouseup');

c.off('mousemove');

c.off('moseleave');

});

c.on('mouseleave',function(){

c.off('mouseup');

c.off('mousemove');

c.off('moseleave');

});

});*/

$("#btn1").click(function(){

tp1=true;

tp2=false;

tp3=false;

tp4=false;

tp5=false;

tp6=false;

tp7=false;

tp8=false;

tp9=false;

tp0=false;

y=[];

});

$("#btn2").click(function(){

tp1=false;

tp2=true;

tp3=false;

tp4=false;

tp5=false;

tp6=false;

tp7=false;

tp8=false;

tp9=false;

tp0=false;

y=[];

});

$("#btn3").click(function(){

tp1=false;

tp2=false;

tp3=true;

tp4=false;

tp5=false;

tp6=false;

tp7=false;

tp8=false;

tp9=false;

tp0=false;

y=[];

});

$("#btn4").click(function(){

tp1=false;

tp2=false;

tp3=false;

tp4=true;

tp5=false;

tp6=false;

tp7=false;

tp8=false;

tp9=false;

tp0=false;

y=[];

});

$("#btn5").click(function(){

tp1=false;

tp2=false;

tp3=false;

tp4=false;

tp5=true;

tp6=false;

tp7=false;

tp8=false;

tp9=false;

tp0=false;

y=[];

});

$("#btn6").click(function(){

tp1=false;

tp2=false;

tp3=false;

tp4=false;

tp5=false;

tp6=true;

tp7=false;

tp8=false;

tp9=false;

tp0=false;

y=[];

});

$("#btn7").click(function(){

tp1=false;

tp2=false;

tp3=false;

tp4=false;

tp5=false;

tp6=false;

tp7=true;

tp8=false;

tp9=false;

tp0=false;

y=[];

});

$("#btn8").click(function(){

tp1=false;

tp2=false;

tp3=false;

tp4=false;

tp5=false;

tp6=false;

tp7=false;

tp8=true;

tp9=false;

tp0=false;

y=[];

});

$("#btn9").click(function(){

tp1=false;

tp2=false;

tp3=false;

tp4=false;

tp5=false;

tp6=false;

tp7=false;

tp8=false;

tp9=true;

tp0=false;

y=[];

});

$("#btn0").click(function(){

tp1=false;

tp2=false;

tp3=false;

tp4=false;

tp5=false;

tp6=false;

tp7=false;

tp8=false;

tp9=false;

tp0=true;

y=[];

});

(function() {

var lastTime=0;

var vendors=['webkit', 'moz'];

for(var xx=0; xx < vendors.length && !window.requestAnimationFrame; ++xx) {

window.requestAnimationFrame=window[vendors[xx] + 'RequestAnimationFrame'];

window.cancelAnimationFrame=window[vendors[xx] + 'CancelAnimationFrame'] ||

window[vendors[xx] + 'CancelRequestAnimationFrame'];

}

if (!window.requestAnimationFrame) {

window.requestAnimationFrame=function(callback, element) {

var currTime=new Date().getTime();

var timeToCall=Math.max(0, 16.7 - (currTime - lastTime));

var id=window.setTimeout(function() {

callback(currTime + timeToCall);

}, timeToCall);

lastTime=currTime + timeToCall;

return id;

};

}

if (!window.cancelAnimationFrame) {

window.cancelAnimationFrame=function(id) {

clearTimeout(id);

};

}

}());

begin();

});

</script>

</body>

</html>

JS代碼過多沒有在這里展示，大家可在群內查找

試了阿里、美團與滴滴后，我有了幾個重大發現…>>>

html標簽是由<>包圍的關鍵詞 html標簽是成對出現的有部分標簽是沒有結束標簽的，叫單標簽，頁面中所有的內容，都是要放在HTML標簽中的

HTML標簽分三部分：

標簽名稱

標簽內容

標簽屬性

HTML標簽具有語義化：

語義化就是僅通過標簽名就能判斷出該標簽的內容

語義化的作用：網頁結構層次更清晰更加容易被搜索出來更加讓屏幕閱讀器讀出該頁面的內容

標簽的內容就是在一對標簽內部的內容標簽的內容可以是其他標簽

標簽元素全局標準屬性：

class屬性：用于定義元素的類名

id屬性：用于指定元素的唯一id

style屬性：用于指定元素的行內樣式

title屬性：用于指定元素的額外信息

accesskey屬性： 用于指定激活元素的快捷鍵

tabindex屬性：用于指定元素在tab鍵下的次序

dir屬性：用于指定元素中內容的文本方向，屬性值為ltr 或 rtl，left to right 和 right to left

leng屬性： 用于指定元素內容的語言。

全局事件屬性：

onload:在頁面加載結束之后觸發

onunload：在用戶從頁面離開時發生，如點擊跳轉，頁面重載，關閉瀏覽器窗口等。

form：表單事件

onblur：當元素失去焦點時觸發

onchange:在元素的元素值被改變時觸發

onfocus:當元素獲得焦點時觸發

onreset:當表單中的重置按鈕被點擊時

onselect:在元素中文本被選中后觸發

onsubmit:在提交表單時觸發

keyboard：鍵盤事件

onkeydown:在用戶按下按鍵時觸發

onkeypress:在用戶按下按鍵后，按著按鍵時觸發，該屬性不會對所有按鍵生效

不生效的有：alt, ctrl, shift, esc

onkeyup:當用戶釋放按鍵時觸發

Mouse：鼠標事件

onclick:當在元素上發生鼠標點擊時觸發

onblclick: 當元素上發生鼠標雙擊時觸發

onmousedown:當元素上按下鼠標按鈕時觸發

onmousemove:當鼠標指針移動到元素上觸發

onmouseout:當元素指針移出元素時觸發

onmouseover:當鼠標指針移動到元素上時觸發

onmouseup: 當在元素上釋放鼠標時觸發

media:媒體事件

onabort:當退出時觸發

onwaiting:當媒體已停止播放但打算繼續播放時觸發

HTML的標簽

文本標簽

段落標簽<p></p>

段落標簽用來描述一段文字

標題標簽<hx></hx>

標題標簽用來描述一個標題

標題標簽總有六級。

<h1></h1>標簽在每個頁面通常只出現一次
強調語句標簽 <em></em>

用于強調某些文字的重要性

更加強調標簽<strong></strong> 和<em>標簽一樣，用于強調文本，但它的強調更強一些
無語義標簽<span></span> 該標簽沒有語義
短文本引用標簽<q></q> 簡短文字的引用
長文本引用標簽 <blockquote></blockquote> 定義長的文本引用
換行標簽<br/>
<br/>標簽作用相當于word文檔中的回車，起到文字換行的作用。

多媒體標簽

鏈接標簽<a></a> 圖片標簽<img/> 視頻標簽<video></video>

<video src="da.mp4" controls="controls">

音頻標簽<audio></audio>

<audio src="a.mp3"></audio>

列表無序列表標簽

<ul><li></li></ul>

<li></li>代表無序列表中的每一個元素

有序列表

<ol><li></li></ol>

定義列表<dl></dl> <dt></dt>定義列表中的項目 <dd></dd>描述列表中的項目

<dl>
<dt></dt>
<dd></dd>
<dd></dd>
</dl>

表格：表格標簽<table> 表格的行<tr> 表頭<th> 單元格<td>

表格合并

同一行內，合并幾列colspan="2"

同一列內，合并幾行rowspan="2"

表單標簽<form>

<form></form>表單是可以把瀏覽者輸入的數據傳送到服務器端，這樣服務器端程序就可以處理表單傳過來的數據。

<form method="傳送方式" action="服務器文件">

action:瀏覽者輸入的數據被傳送到的地方，比如一個php頁面

method:數據傳送的方式

輸入標簽<input>

input name為文本框命名，用于提交表單，后臺接收數據用 value為文本輸入框設置默認值 type通過定義不同的type類型，input的功能有所不同

type功能： text，password，radio，checkbox，file，button，reset，submit，email，url，number，range，date，color

<button>按鈕： button標簽的功能與input按鈕功能相同，button是雙標簽，內部可以嵌套其他行內元素。

下拉選擇框select

<select>
 <option value="book"></option>
 <option value="go" selected="selected"> go </option>
 <option value="sport"></option>
</select>

文本域textarea cols:多行輸入域的列數 rows:多行輸入域的行數

其他語義化標簽 div盒子俗稱盒子,division分割

在網頁制作過程中，可以把一些獨立的邏輯部分劃分出來，放在一個div標簽中，這個div標簽的作用就是相當于一個容器。

什么是邏輯部分，它是頁面上相互關聯的一組的元素，如網頁中的獨立的欄目版塊，就是一個典型的邏輯部分。

網頁頭部header

html5新增語義化標簽，定義網頁的頭部

主要用于布局，分割頁面的結構

底部信息footer

html5新增語義化標簽，定義網頁的底部

主要用于布局，分割頁面的結構

導航nav

html5新增語義化標簽，定義一個導航主要用于布局，分割頁面的結構

文章article

html5新增語義化標簽，定義一篇文章主要用于布局，分割頁面的結構

側壁欄aside

語義化標簽，定義主題內容外的信息主要用于布局，分割頁面的結構

時間標簽time 語義化標簽，定義一個時間

網頁結構

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 </head>
 <div>
 </div>
</html>

<!DOCTYPE html>定義文檔類型，告知瀏覽器用哪一種標準解釋HTML。

<html></html>可告知瀏覽器其自身是一個Html文檔。

head定義文檔的頭部
頭部元素title,script,style,link,meta

title定義文檔的標題 link標簽將css樣式文件鏈接到html文件內

meta定義文檔的元數據

每個網頁都是由不同的功能模塊組成的，因此在將制作網頁的時候，我們要將網頁的每個功能模塊分開

常見多由頭部區，展示圖片區域，主題區域，底部信息區域組成。

網頁由上到下，由內到外

div,header,footer,nav,article,aside等標簽多用于模塊劃分

css全稱為層疊樣式表，它主要用于定義HTML內容在瀏覽器內的顯示樣式，如文字的大小，顏色，字體加粗等。

css代碼通常存放在style標簽內

css樣式由選擇符和聲明組成，而聲明由屬性和值組成

選擇符{屬性：值}

選擇符，叫選擇器

css放置直接書寫在標簽的style屬性中，不建議使用

內聯樣式表外聯樣式表

css中的繼承

不可繼承樣式： display,margin,border,padding,background,height,min-height,max-height,width,min-width,max-width,overflow,position,left,right,top,bottom,z-index,float,clear

可以繼承的樣式 letter-spacing,word-spacing,white-space,line-height,color,font,font-family,font-size,font-style,font-variant,font-weight,text-decoration,text-transform,direction,visibility,cursor

選擇器的種類

標簽選擇器通配符選擇器屬性選擇器后代選擇器一級子元素選擇器 id選擇器 class選擇器偽類選擇器

選擇某個父元素的直接子元素后代選擇器是選擇父元素的所有子孫元素，一級子元素原則器只選擇第一級子元素。

:hover鼠標移入某個元素
.box:hover{
 color:red;
}
:before在某個元素的前面插入內容
div:before{
 content: '內容';
 background-color: yellow;
 color: red;
 font-weight: bold;
}
:after在某個元素的后面插入內容
div:after{
 content: '內容';
 background-color: yellow;
 color: red;
 font-weight: bold;
}

群組選擇器可以對多個不同的選擇器設置相同的樣式

選擇器的優先級：

權重計算方式：

標簽選擇器：1, class選擇器：10, id選擇器：100, 行內樣式：100, !important最高級別，提高樣式權重，擁有最高級別就近原則

css樣式屬性

background-color background-image background-position 背景圖片不會占位

背景圖片重復background-repeat

background-repeat: no-repeat no-repeat: 設置圖像不重復，常用 round: 自動縮放直到適應并填充整個容器 space:以相同的間距平鋪且填充滿整個容器

背景圖片定位 background-attachment

background-attachment:fixed

背景圖像是否固定或者隨著頁面的其余部分滾動

background-attachment的值可以是scroll跟隨滾動，fixed固定。

字體

font-family字體 font-size font-weight: normal,bold,bolder,lighter,100-900(400=normal,700=bold)

color字體顏色

字體斜體font-style normal文本正常顯示 italic文本斜體顯示 oblique文本傾斜顯示

文本屬性行高line-height 文本水平對齊方式 text-align left,center,right

文本所在行高的垂直對齊方式vertical-align

baseline默認 sub垂直對齊文本的下標 super垂直對齊文本的上標 top對象的頂端與所在容器的頂端對齊 text-top對象的頂端與所在行文字頂端對齊

middle元素對象基于基線垂直對齊 bottom對象的底端與所在行的文字底部對齊 text-bottom對象的底端與所在行文字的底端對齊

文本縮進text-indent text-indent: 2em;

字母之間的間距letter-spacing

單詞之間的間距word-spacing

文本的大小寫： text-transform

capitalize:文本中的每個單詞以大寫字母開頭 uppercase:定義僅有大寫字母 lowercase:定義僅有小寫字母

文本的修飾text-decoration none默認 underline下劃線 overline上劃線 line-through中線

自動換行word-wrap

word-wrap: break-word;

基本樣式： width height

cursor鼠標樣式：定義鼠標的樣式cursor:pointer

default:默認 pointer:小手形狀 move:移動形狀

透明度opacity opacity:0.3

可見性：visibillity

visibility: hidden visible 元素可見 hidden 元素不可見

collapse:當在表格元素中使用時，此值可刪除一行或一列，不會影響表格的布局。

溢出隱藏overflow

設置當對象的內容超過其指定高度以及寬度時如何顯示內容

visible默認值，內容不會被修剪，會呈現在元素框之外

hidden 內容會被修剪，并且其余內容是不可見的

scroll內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余內容

auto 如果內容被修剪，則瀏覽器會顯示滾動條以便查看

邊框顏色： outline

input文本框入框自帶邊框，我們可以通過outline修改邊框

outline: 1px solid #ccc;

outline: none 清除邊框

樣式重置：

一開始沒有css樣式，為了界面美觀，很多元素自帶margin,padding等樣式，但這些樣式在不同瀏覽器的值都是不一樣的，需要將css樣式重置，保證在不同瀏覽器中顯示一致。清除元素的margin和padding 去掉自帶的列表符去掉自帶的下劃線

在線咨詢

上一篇：電子商務（四級）單選題（443）
下一篇：什么是APP封裝？APP封裝如何實現？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Web前端核心重點JavaScript函數BOM、D

函數的定義與調用

函數的參數

函數的返回值

閉包

立即執行函數

DOM的基本概念

節點類型

節點的關系

訪問元素節點常用的方法

節點的創建、添加、移出和克隆

節點的操作

常見的鼠標事件

鍵盤事件（DOM0級事件監聽方式：on +事件名）

常見的表單事件（DOM0級事件監聽方式：on +事件名）

常見的頁面監聽事件（DOM0級事件監聽方式：on +事件名

DOM2級事件監聽

事件的傳播

事件對象

事件對象常用的屬性

事件對象常用的方法

定時器和延時器

BOM相關的基本概念

window對象的常用屬性

window對象的常用事件

navigator對象的常用屬性

history對象的常用方法

location對象的常用屬性和方法

標簽元素全局標準屬性：

全局事件屬性：

HTML的標簽

您的項目需求