JS初識_ZenDei技術網路在線

567網頁的組成: html:超文本標記語言,網頁結構層. CSS:層疊樣式表,網頁的樣式. Javascript:腳本語言,規定了網頁交互行為. 什麼是JS? JS是基於對象和事件驅動的解釋型腳本語言. JS特點: 基於對象:JS中萬物皆對象.JS中的任何內容都由一個對象來描述.任何操作都是由對象 ...

567網頁的組成:
- html:超文本標記語言,網頁結構層.
- CSS:層疊樣式表,網頁的樣式.
- Javascript:腳本語言,規定了網頁交互行為.
什麼是JS?
- JS是基於對象和事件驅動的解釋型腳本語言.
- JS特點:
  - 基於對象:JS中萬物皆對象.JS中的任何內容都由一個對象來描述.任何操作都是由對象的方法(函數)來進行描述.
  - 事件驅動:JS可以直接通過用戶的操作做出響應,而無需通過伺服器響應.
  - 解釋型腳本語言

JS的作用
- 頁面的交互
- 前端和後端的交互.–三節點–四階段
JS的歷史：
- 1995年，網景公司開發了第一款商用瀏覽器。
- 需要在瀏覽器設計一個專門用來做表單驗證的語言。布蘭登.愛奇花了10天寫了第一個js版本。
- 之所以JS命名為javascript主要的原因：網景和sun公司合作關係，有因為java非常火，搭了順風車，其名為javascript。
- 同年微軟開發了IE3.0，嵌入了克隆版的JS–JSript.後期由於IE是windows內置瀏覽器，後來網景就慢慢沒落最後到倒閉。
- 原來網景公司Mozilla團隊後來將瀏覽器內核開源，開源之後他們成立了Mozilla組織，後期開發了火狐瀏覽器。
- 後來因為瀏覽器之爭，ECMA組織（歐洲電腦協會）組織各個計算廠商制定了JS的語法標準：ECMAScript.
JS的組成：

ECMAScript:規定了JS語法標準和常用對象。
DOM：（document object model）文檔對象模型
BOM：（browser object model）瀏覽器對象模型

1.什麼是js，js的特點是什麼？

基於對象和事件驅動的解釋型腳本語言.
特點:
基於對象
事件驅動
解釋型腳本語言.

2.js的組成有哪些？

ECMAScript:規定了JS的語法規範.
DOM:document object model 文檔對象模型
BOM:browser object model 瀏覽器對象模型.

3.請說出js的三種引入方式，請分別舉例闡述？

行內引入:通過標簽的事件屬性引入
<div onclick="aleart(1)"></div>
內部引入:在script標簽的內部引入js代碼
<script>
`   alert(2);
</script>
外部引入:
<script src="./外部的js文件.js"></script>

4.談談你對程式調試的理解，可以使用那些方法調試程式？

程式調試:當程式運行時,用於檢測程式運行過程的一種方式.
1.alert():警告框
2.console.log():控制台輸出數據
3.document.write():在文檔視窗中輸出(寫入數據)
    註意:正常文檔流中輸出可以正常顯示,文檔載入完輸出會替換原文檔內容.

5.變數的聲明方式有哪些？並舉例說明？

1.先聲明後賦值
var a;
a =10;
2.聲明的同時賦值
var a = 10;
3.同時聲明多個變數
var a = 10,b=11,c = 12;
var a = 10,
 b=11,
 c = 12;
4.連等聲明:
var a = b = 10;

6.js數據類型是如何劃分的？

JS數據類型可以分為:
1.基本數據類型
    number
    整數
     小數
     負數
     NaN:not a number (計算結果不是數值.)
        infinity:無窮大
 string
    單引號或者雙引號包裹的內容.
 boolean
        ture
     false
 null:空對象
    undefined:聲明未賦值
2.複雜數據類型(引用數據類型)
    Array:數組
 object:對象
 function:函數

7.如何查看字元串的長度，如何獲取字元串的對應下標的字元。

str.length:查看長度
str.charAt(下標)

8.變數的作用和命名規則是什麼？

1.只能是數字,字母,下劃線,$組成.
2.不能以數字開頭
3.不能是關鍵字和保留字.
4.建議使用小駝峰命名法.
5.區分大小寫.
6.不能重覆聲明.重覆聲明後面的會覆蓋前面的.

9.typeof的返回值有哪些？

typeof的作用是查看變數的數據類型.
格式:
typeof(變數)
typeof 變數

typeof返回值:
number-->number
字元串--->string
布爾類型--->boolean
null--->object
undefined-->undefined

1.算術運算的隱式轉換規則有哪些？

1.除+號外,其他算數運算符在運算時預設將操作數轉為number,不能轉,結果為NaN.
2.+兩邊只要出現了字元串,就是字元串的拼接操作.
    如果字元串+基本數據類型:字元串拼接.
 字元串+複雜類型:調用複雜類型的toString()獲取字元串格式,在和字元串拼接.

2.比較運算的隱式轉換規則有哪些？

1.預設轉為number進行比較.
2.字元串和字元串比較:按位比較ascii碼.
3.NaN和任何內容比較的結果均為false.

3.==和===的區別？

==:比較的是值是否相等,會進行隱式轉換.
===:比較值和類型時候都相等,不會進行隱式轉換.

4.如何獲取dom元素，請寫出語法結構。

1.通過dom對象獲取:
    document.getElementById('id');
    document.getElementsByClassName("class")
    document.getElementsByTagName('tag')
2.通過父元素獲取:
    parent.getElementsByClassName('class')
    parent.getElementsByTagName('tag')

5.常見的滑鼠事件有哪些，請分別寫出事件名稱及其含義。

1.onclick:滑鼠的點擊事件
2.onmouseover:滑鼠懸浮(移入)
3.onmouseout:滑鼠移出
4.onmousemove:滑鼠移動
5.onmousedown:滑鼠按下
6.onmouseup:滑鼠抬起
7.ondblclick:雙擊
8.oncontextmenu:右擊

6.如何強制轉數值類型,其規則有哪些?

轉換方法:
    1.Number()
    2.parseInt(字元串)/parseFloat(字元串)

規則:
1.字元串字面量為數值的正常轉為number,空串為0,其他為NaN.
2.布爾類型:true為1,false為0;
3.null和undefined轉number:null為0,undefined為NaN
4.複雜類型轉number,先調用複雜類型的toString(),再將字元串轉為number.
    []-->toString-->''--->0
    {}--->[object Object]-->NaN

7.如何強制轉字元串,其規則有哪些?

轉換方法:
    1.String()
    2.對象.toString()
規則:
    1.基本數據類型轉string,將數據兩邊用雙引號或單引號包裹即可.
 2.複雜類型:
        數組:
            []--->''
            [1]--->'1'
            [1,2]-->'1,2'
        對象:[object Object]

8.如何強制轉布爾類型,其規則有哪些?

1.數值轉布爾:0和NaN為false,其他均為true;
2.字元串轉布爾:空串為false,其他均為true;
3.null和undefined轉布爾均為false.
4.複雜類型轉布爾均為true.

1.頁面有100個li標簽，如何給這些標簽綁定迴圈事件，請寫出具體的思路和步驟。（也可以用代碼表示）

var oLis = document.getElementsByTagName("li");

for(var i = 0;i<oLis.length;i++){
 oLis[i].onclick = function(){

 }
}

2.請寫出for迴圈的語法格式，並說出其執行流程。

迴圈的特征:
1.迴圈變數
2.迴圈的條件
3.迴圈體
4.更新迴圈變數的值.

for(初始化迴圈變數;迴圈的條件;更新迴圈變數的值.){
 迴圈體
}
執行流程:
1.初始化迴圈變數
2.判斷迴圈條件時候滿足,
 滿足執行迴圈體
    不滿足結束迴圈
3.更新迴圈變數的值,繼續從第2步執行.

3.分別寫出單分支,雙分支,多分支的語法結構.

1.單分支:
if(條件){
 條件滿足執行的代碼
}

2.雙分支
if(條件){
    條件滿足執行的代碼
}else{
 條件不滿足執行的代碼
}
3.多分支:
if(條件1){
 條件1滿足執行的代碼
}else if(條件2){
  條件2滿足執行的代碼
}...{
 ...
}else{
 上述條件都不滿足執行的代碼.
}
switch(匹配項){
 case value1:匹配項=value1時執行的代碼;break;
 case value2:匹配項=value2時執行的代碼;break;
 case value3:匹配項=value3時執行的代碼;break;
 case value4:匹配項=value4時執行的代碼;break;
 ...
 default:上述情況都不匹配執行的代碼;

}

4.如何操作DOM元素的內容?

1.操作表單元素的內容:
    設置:元素.value = 新值
    獲取:元素.value
2.操作閉合標簽的內容:
    設置:元素.innerHTML/innerText = "新值"
    獲取:元素.innerHTML/innerText
    註意:
    (1)元素設置內容會將原內容替換掉.
 (2)innerHTML獲取或者設置內容是可以識別html標簽的.
 (3)innerText只能獲取文本內容,不能識別標簽.

5.如何操作DOM元素的屬性?

獲取:元素.屬性名
設置:元素.屬性名= 屬性值
註意:
    (1)元素.屬性名只能獲取或者設置預設屬性,不能操作自定義屬性.
 (2)操作class屬性要通過:元素.className

6.如何操作DOM元素的樣式?

設置樣式:元素.style.樣式名 = 樣式值
註意:
(1)樣式名如果是中劃線命名的,要改成小駝峰命名.
(2)設置的樣式作用在行內.

1.break和continue的作用？

break:結束迴圈。
continue：結束本次迴圈，繼續下一次迴圈。

2.什麼是對象，對象如何獲取對象的屬性值，如何遍歷對象。

JS中的對象主要用來描述一個事物。一個事物可以有多個屬性和方法。
var obj = {
 //對象的屬性
 name:'zs',
 age:10，

 //對象的方法
 study:function(){

 }
}

獲取對象的屬性方法：
1.對象.屬性名：obj.name
2.對象['屬性名']：obj["name"]

遍歷對象：
for(var key in obj ){
 //key:對象的屬性名
 obj[key]:key所對應的屬性值value。
}

3.什麼是函數，函數的作用是什麼？

函數的定義:函數就是將`具有獨立功能的代碼塊`整合到一起並`命名`，需要的時候`調用`即可。
函數的作用：
（1）提高開發效率
（2）提高代碼的重用率。

4.函數聲明方式有幾種，分別寫出其語法結構。

1.關鍵字聲明
function 函數名（）{

}
2.表達式聲明：
var 函數名= function(){

}

5.函數的使用場景有哪些？

1.代碼復用
2.事件處理函數。
//事件一旦觸發，就執行函數中的代碼。（自動調用函數。）
//事件處理函數，事件不觸發就不執行。
oBtn.onclick = function(){

}
oBtn.onclick = show
function show(){

}
3.對象的方法。
var obj = {
 //對象的屬性
 name:'zs',
 age:10，

 //對象的方法
 study:function(){

 }
}

6.什麼是形參，什麼是實參。

形參：形式參數，函數聲明時，寫在小括弧中的參數。
function fun(a,b){

}
實參：實際參數，函數調用時，實際傳遞的具體參數。
fun(10,15)

7.js中函數的參數在聲明函數和調用函數時都有哪些需要註意內容？

1.函數參數的個數問題：
（1）一個參數：聲明和調用時直接寫一個參數即可。
（2）多個確定的參數：
    聲明時，形參按照順序用逗號隔開依次寫到小括弧中即可。
    調用時，實參按照形參的順序依次的傳遞即可。
 函數調用時：實參給形參一一賦值。
（3）參數個數不確定：
    聲明時，形參可以不寫。在函數內部使用arguments來接收所有的實參，並操作實參。
 調用時，實參用逗號分隔傳遞即可。

 function sumTotal(){
     var s = 0;
     for(var i = 0;i<arguments.length;i++){
         s+=arguments[i];
     }

 }
sumTotal(1,2)
sumTotal(1,2,3)
sumTotal(1,2,3,4)

2.參數賦值的問題：
（1）實參和形參個數相等：實參給形參11賦值。
（2）實參比形參多：多餘的實參忽略。
（3）形參比實參多：多餘的形參的值為undefined。

3.參數的類型問題：JS所有的屬性類型都可以作為函數的參數，不用顯示聲明函數的形參的數據類型，實參時什麼類型，形參就是什麼類型。

1.關於函數的返回值，你的理解是什麼？且函數的返回值都有哪些註意的內容。

1.函數的返回值:函數執行所得的結果.
2.註意實現:
    (1)函數中需要使用return關鍵字返回返回值,函數外調用時可以使用變數接收該返回值.
 function fn(){
        return 1
 }
    var res = fn()
 (2)函數執行到return就直接結束函數執行.
 (3)函數沒有return任何內容,預設返回undefined.
 (4)函數一次只能return一個內容.如果返回多個數據,需要使用數組.

2.什麼是函數封裝，函數封裝的步驟是什麼？

1.函數封裝就是把一個或多個功能通過函數的方式封裝起來，對外只提供一個簡單的函數介面,通過調用這個函數就能復用封裝的功能.
2.封裝的步驟:
(1)確定函數名稱,見名知意
(2)確定函數的參數,函數中不確定的內容,或者需要傳入的內容使用參數來表示.
(3)按照邏輯或者功能按步驟寫函數體.
(4)將需求結果使用return返回即可.


數據類型轉換:
Number()-->數組類型的對象.
String()

3.請寫出獲取非行間樣式的函數

function getStyle(elem,attr){
 if(elem.currentStyle){
     //IE
     return elem.currentStyle[attr];
 }else{
     //標準
     return getComputedStyle(elem)[attr];
 }
}

4.this的作用有哪些？

this是函數中的一個特殊對象,在不同的函數中其指向不同.
1.普通函數中,指向window.
function fn(){}
2.事件處理函數中,指向觸發事件的元素.
oDiv.onclick = function(){}
3.對象的方法中,指向當前對象.
{name:zs,study:function(){}}
4.全局作用域下,指向window.

5.排他思想的實現思路是什麼？

1.先清空所有相同元素的目標樣式.
2.誰觸發事件,就給誰添加目標樣式.

6.什麼是開關效果，開關效果實現思路是什麼？

開關效果的思路：
1.設置一個變數（狀態標識）記錄每種狀態。
2.判斷當前處於什麼狀態，就設置成對應的狀態，並修改狀態標識。

7.什麼是作用域，什麼是作用域鏈。js的作用域可以分為哪些？

1.作用域:變數或者是函數的作用範圍.
2.作用域可以分為:
全局作用域:整個script標簽或者最外層 的js代碼的位置.
局部作用域:函數內部.
3.全局變數和局部變數:
全局變數:在全局作用域下定義的變數.
局部變數:在函數內部定義變數.
關係:局部變數只能在函數內部使用,全局變數可以在任意位置都可以使用.

4.作用域鏈:JS查找變數的規則
規則:先從當前作用域查找,如果不存在繼續向父級作用域查找,如果找到就直接用,找不到繼續向父級查找,直到找到全局作用域為止,如果還未找到就報錯:xx is not defined

8.什麼是js的預解析(變數提升)，及js的預解析過程是什麼？

1.預解析是JS解釋器執行JS代碼的一個步驟.
JS解釋器執行JS代碼的步驟可以分為2步:
(1)預解析
(2)代碼從上往下解釋執行.

2.預解析過程:
(1)在任何作用於下都有各自的預解析.
(2)預解析解析的目標對象:var出來的變數,和function關鍵聲明的函數.
(3)預解析具體的處理方式:var出來的變數賦值為undefined,function聲明的函數賦值函數體,如果函數同名,保存最後的一個.

1.什麼是選項卡效果，選項卡效果如何實現？

選項卡效果:一組選項和一組頁面相對應,點擊一個選項顯示相應頁面.
1.分別獲取選項和對應的頁面.
2.對選項進行迴圈事件綁定
3.給迴圈添加自定義屬性index,來標識每個選項下標.
4.在事件迴圈函數中通過this.index來確定操作的頁面的位置.

2.定時器有哪幾種，請分別寫出其語法，並說出他們之間的區別？

1.延時定時器:
語法:id = setTimeOut(函數,延時時間)
作用:延時時間後調用一次函數,只調用一次.
2.間歇定時器:
語法:id = setInterval(函數,間歇時間)
作用:每隔間歇時間,調用一次函數.可以無限調用.

3.停止定時器:
語法:clearInterval(id);

3.請寫出運動函數？

function move(elem,attr,step,target){
 //1.清空定時器,避免定時器疊加.
 clearInterval(elem.timer);
 //2.判斷速度正負.
 step = parseInt(getStyle(elem,attr))<target?step:-step;
 //設置定時器運動
  elem.timer = setInterval(function(){
     //(1)獲取當前attr+step
     var cur = parseInt(getStyle(elem,attr))+step;
     //(2)判斷終點
     if((cur>=target && step>0)||(cur<=target && step<0)){
         cur = target;
         clearInterval(elem.timer);
     }
     //(3)設置attr到elem
     elem.style[attr] = cur+'px';
 },30)
}

1.JS的對象可以分為哪些類，併列舉出常見的對象。

1.內部對象
    Number
 String
 Boolean
 Object
 Array
 Function

 Math
 Global

 Date
 RegExp
 Error

2.宿主對象
    Dom
 Bom
3.自定義對象

2.Math對象的方法都有哪些並說明其作用？

1.取整方法
    Math.floor():下取整
 Math.ceil():上取整
 Math.round():四捨五入
2.隨機數
    [0,1)隨機數：Math.random()
    [0,n]隨機數：Math.floor(Math.random()*(n+1))
    [m,n]隨機數：Math.floor(Math.random()*(n-m+1)+m)

3.數學公式
    Math.max(1,2,3,4,..)
    Math.min(1,2,3,4,...)
 Math.abs()
    Math.sqrt():平方根
 Math.pow(x,y):x^y

3.創建時間對象的方法有哪些？

1.系統時間：new Date()
2.自定義時間：
    a.多個參數：new Date(年，月-1，日，時，分，秒)
    b.一個參數：
        new Date(‘年，月，日，時，分，秒’)
        new Date(‘年-月-日，時，分，秒’)
        new Date(‘年/月/日，時，分，秒’)

4.Date對象的方法有哪些？

oDate.getFullYear()
oDate.getMonth()
oDate.getDate()-獲取天
oDate.getDay()--獲取星期下標
oDate.getHours()--小時
oDate.getMinutes()--分鐘
oDate.getSeconds()--獲取秒
oDate.getTime()--時間戳

5.字元串對象的方法有哪些(11)？

1.字元串屬性
    str.length
2.查找方法
    str[下標]
    str.charAt(下標)
    str.charCodeAt(下標)
    str.indexOf('字元串'):查看字元串在str中首次出現的下標，如果未找到返回-1
3.變形方法
    str.toUpperCase()
    str.toLowerCase()
4.截取方法
    str.substring(start,end)
    str.slice(start,end)

    str.substr(start,length)
5.修改方法
    str.replace(替換什麼，用什麼替換)
    str.split('切分符號')
    str.trim():去除兩邊空格

1.數組的創建方法有哪些？

1.字面量創建
var arr = [1,2,3]
2.關鍵字new創建
var arr = new Array();//創建空數組
var arr = new Array(3);//長度為3的空數組.
var arr = new Array(1,2,3)//[1,2,3]

2.數據的添加元素的方法有哪些？

1.使用下標添加:
arr[i] = value;//給數組下標i的位置添加一個value.也有修改數組元素內容的作用;
2.尾部添加和刪除:
arr.push(items);
arr.pop():尾部刪除一個元素,返回刪除的元素
3.頭部添加和刪除:
arr.unshift(items):頭部添加
arr.shift():頭部刪除一個元素返回

3.如何給數組去重？

1.比較刪除法:
var arr = [11,22,22,33,11];
for(var i =0;i<arr.length-1;i++){
 for(var j=i+1;j<arr.length;j++){
     if(arr[i]==arr[j]){
        arr.splice(j,1);
         j--;
     }
 }
}

2.比較存儲法
var newArr = [];
for(var i =0;i<arr.length;i++){
 if(newArr.indexOf(arr[i])==-1){
     newArr.push(arr[i]);
 }
}

4.請寫出給一個數組使用選擇排序演算法排序的代碼？

for(var i=0;i<arr.length-1;i++){
 var minIndex = i;
 for(var j=i+1;j<arr.length;j++){
     if(arr[minIndex]>arr[j]){
         minIndex = j;
     }
 }
 //minIndex和i交換
 var temp = arr[i];
 arr[i] = arr[minIndex];
 arr[minIndex] = temp;
}

5.請寫出給一個數組使用冒泡排序演算法排序的代碼？

for(var i = 0;i<arr.length-1;i++){
 for(var j=0;j<arr.length-i-1;j++){
     if(arr[j]>arr[j+1]){
         var temp = arr[j];
         arr[j] = arr[j+1];
         arr[j+1] = temp;
     }
 }
}

6.已知數組var arr = [1,2,-4,6,0,9];如何對該數組元素進行隨機排序？

var arr = [1,2,-4,6,0,9];
arr.sort(function(a,b){
 return Math.random()-0.5;
})

7.如何對數組中的對象排序，請用代碼舉例說明？

var arr = [
 {name:'zs',age:18},
 {name:'xx',age:20},
 {name:'zz',age:19},

]
arr.sort(function(a,b){
 returen a.age-b.age;//按照年齡從小到大.
})

8.統計一個字元串中某個字元出現的次數？並找出出現次數最多的字元？

var str = 'aafwafawf23j2i32inkl32jio23';
var obj = {}
for(var i = 0;i<str.length;i++){
 var count = str.split(str[i]).length-1;
 var char = str[i];
 obj[char] = count;
}
//找到value最大的key
var maxCount = 0;
var manChar;
for(var key in obj){
 if(obj[key]>maxCount){
     maxCount = obj[key];
     maxChar = key;
 }
}
maxChar:次數最多的字元
maxCount;最大重覆次數

1.數組的常用方法有哪些（10）？

1.添加和刪除
    arr.push(items):尾部添加
    arr.pop():尾部刪除
arr.unshift(items):頭部添加
arr.shift():頭部刪除
2.splice方法:
    arr.splice(start,deleteCount,items):從start開始刪除deletecount個元素,並用items替換.
        deleteCount:如果不指定,預設刪除到結尾.


3.數組的其他方法:
    arr.join("連接符"):將數組元素通過連接符拼接成一個字元串.
arr.reverse():反轉數組.
arr.concat(arr2,arr3):將數組拼接成一個新數組[arr,arr2,arr3]
    arr.indexOf('元素'):判斷元素在數組中的下標,如果不存在返回-1
    arr.slice(start,end):從start開始截取到end-1為止(包頭不包尾)
4.排序方法:
    arr.sort(function(a,b){
     return a-b//升序
     return b-a//降序
 })

2.正則對象的創建方法?正則修飾符有哪些?

字面量: /正則表達式/修飾符
關鍵字:new RegExp('正則表達式','修飾符')

修飾符:
1.g:全局匹配.
2.i:忽略大小寫

3.正則的匹配方法有哪些?

1.字元串的方法:
    str,replace(regObj,用什麼替換)
    str.split(regObj)
    str.search(regObj):查詢regObj匹配的內容的下標,如果沒有找到返回-1
    str.match(regObj):將正則匹配到的內容提取出來.配合g修飾符可以全局查找提取.
2.正則對象方法:
    regObj.test(str):查看正則對象時候匹配字元串,true為匹配,false為不匹配.
 regObj.exec(str):檢索正則匹配到的內容,返回一個數組.

4.請列舉出常見的元字元並說出他們的含義?

單個字元:
    .:除換行符意外的任意字元.
 [abc]:匹配a或b或c
 [a-z]:匹配小寫字母
    [^a-z]:匹配非小寫字母.
 \d:數值0-9
    \w:數字字母,下劃線
    \s:空白字元(空格&nbsp;,換行\n,\t)
    \b:單詞邊界
表示重覆次數:
    ?:重覆0或1次
 *:>=0
    +:>=1
    {n};重覆n次
 {n,m}:[n,m]
    {n,}:>=n

5.DOM如何獲取子節點，並說出他們的區別？

parent.children :返回htmlcollection,獲取標簽子節點.
parent.childNodes:返回NodeList,可以獲取所有類型的子元素(文本節點,註釋節點,標簽節點)

6.DOM如何獲取父節點。

1.獲取直接父元素:子元素.parentNode
2.獲取定位父元素:子元素.offsetParent

7.DOM如何獲取兄弟節點？

1.首節點:parent.firstElementChild || parent.firstChild
2.尾節點:parent.lastElementChild || parent.lastChild
3.下一個兄弟: 參考節點.nextElementSibling || nextSilbing
4.上一個兄弟:參考節點.previousElementSibling || previousSilbing

8.如何通過css選擇器獲取元素？

document/parent.querySelector();獲取選擇器選中的第一個元素.
document/parent.querySelectorAll():獲取選擇器選中的所有元素.

9.如何創建一個標簽節點。

document.createElement("標簽名")

1.DOM的屬性操作有哪些方法，並說明其作用？

1.元素.屬性名操作屬性:
    獲取:元素.屬性名
    設置:元素.屬性名 = 屬性值
    註意:只能操作預設屬性,操作自定義屬性怎麼設置怎麼獲取.
2.元素.getAttribute(屬性名):獲取屬性
    註意:可以獲取任意屬性.
3.元素.setAttribute(屬性名,屬性值)
    可以設置任意屬性.
4.元素.removeAttribute(屬性名)

2.DOM如何快速的獲取表格內容，都有哪些方法。

第一步:獲取table標簽
第二步:通過table標簽屬性快速獲取其他表格元素.
oTab.tHead-表頭
oTab.tBodies:獲取所有的tbody
oTab.tFoot:獲取表的底部
oTab.tBodies[0].rows:獲取tbody的所有的行
oTab.tBodies[0].rows[0].cells:獲取tbody的第一行的所有單元格.

3.如何快速的獲取表單的input，form表單的事件分別有哪些，其作用是什麼？

1.
第一步:獲取form標簽
第二步:通過form標簽.表單元素name屬性可以快速獲取所有的表單控制項.
2.form的事件:
(1)onreset:重置事件,事件函數中返回true:允許重置,false:阻止重置.
(2)onsubmit:表單提交事件,事件函數中返回true:允許提交,false:阻止提交.

4.input表單控制項的事件（5個）有哪些，請分別說明起作用。

onfocus:表單獲取游標觸發.
onblur:表單失去游標
oninput:獲取焦點後,,當表單內容發生變化時觸發(實時觸發)
    IE低版本不報錯,無效.
onpropertychange:獲取焦點後,當表單內容發生變化時觸發(實時觸發)
    IE低版本有效.
onchange：失去焦點的時候輸入框內容發生變化時觸發（當前內容和上一次內容比較）

5.什麼是BOM，BOM的核心是什麼，window和document的區別是什麼？

BOM:broswer object model(瀏覽器對象模型)
BOM的核心是window,window是JS中最大的對象,所有全局變數和函數都屬於window,可以通過window.來調用,也可以省略window
window和document的區別:
1.window表示瀏覽器視窗對象,是JS最大的對象.是BOM的核心.
2.document表示文檔對象.是DOM的核心.

6.BOM的client系列有哪些屬性，並說明其作用。

元素.clientWidth:獲取可視寬 (content+padding)
元素.clientHeight:獲取可視高(content+padding)
獲取視窗的可視區寬高:
    document.documentElement.clientWidth/clientHeight

7.BOM的offset系列有哪些屬性，並說明起作用？

1.獲取元素的占位寬高:
    元素.offsetWidth/offsetHeight(content+padding+border)
2.獲取元素的位置:(獲取距離定位父元素的距離)
    元素.offsetTop/offsetLeft

8.BOM的scroll系列有哪些屬性，並說明其作用？

1.獲取元素實際寬高:
    元素.scrollWidth/scrollHeight
2.獲取被卷曲的高度:元素.scrollTop
3.獲取元素被卷曲的寬度:元素.scrollLeft
4.獲取頁面被卷曲的高度:
    document.body.scrollTop || document.documentElement.scrollTop

9.DOM創建節點，刪除節點，添加節點，替換和複製節點的方法分別是什麼？(DOM操作節點的方法)（7）

1.獲取節點：通過id獲取------document.getElementById()
　　　　　  通過class獲取---document/parent.getElementByClassName()
　　　　　　通過標簽名獲取---document/parent.getElementByTagName()
　　　　　　通過CSS選擇器獲取---document/parent.querySelector（）
　　　　　　　　　　　　　　　　  documnet/parentquerySelectorAll()
　　　　　　獲取子節點：---parent.children---獲取標簽子元素
　　　　　　　　　　　　　　　　　　　　　　　---返回HtmlCollection
　　　　　　　　　　　　　　parent.childNodes---獲取所有類型的子元素
　　　　　　　　　　　　　　　　　　　　　　　　---返回NodeList
　　　　　　獲取父元素　　直接父元素---child.parentNode
　　　　　　　　　　　　　定位父元素---child.offsetParent
　　　　　　獲取兄弟節點  第一個兄弟節點---parent.firstElementChild||parent.firstChild
　　　　　　　　　　　　　最後一個兄弟節點--parent.lastElementChild||parent.lastChild
　　　　　　　　　　　　　下一個兄弟----refChild.nextElementSibling||refChild.nextSibling
　　　　　　　　　　　　　上一個兄弟----refChild.previousElementSibling||refChild.previousSibling

2.操作節點　　　　創建節點---document.createElement("tagName")
　　　　　　　　　 添加節點：  追加末尾----parent.appendChild(子元素）
　　　　　　　　　　　　　　　 前面插入元素---parent.insertBefore(newChild,refChild)
　　　　　　　　　刪除節點：   刪除自身---元素.removed()
　　　　　　　　　　　　　　　　刪除子元素---父元素.removeChild(子元素）
　　　　　　　　　替換節點:    parent.repaceChild(newChild,refChild)
　　　　　　　　　複製節點：　　被覆制的節點：cloneNode(boolean)   boolean=true---複製標簽和內容
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　boolean=false---複製標簽---預設
3.操作節點屬性  標簽.屬性名
　　　　　　　　 getAttribute
　　　　　　　　　setAttribute
　　　　　　　　　removeAttribute
4.操作節點內容  innnerHTML
　　　　　　　　　innerText
5.操作節點的樣式  設置樣式---標簽.style.樣式名=樣式值
　　　　　　　　　　獲取樣式：function getStyle(elem,attr){
　　　　　　　　　　　　　　　　　　if(elem.currenStyle){
　　　　　　　　　　　　　　　　　　　　return elem.currenStyle[arrt]
　　　　　　　　　　　　　　　　　　　　}else{
　　　　　　　　　　　　　　　　　　　　　　　　getComputedStyle(elem)[arrt]
　　　　　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　　　　}

1.什麼是事件對象，如何獲取事件對象？

事件對象是事件函數中的特殊對象,瀏覽器會將和事件相關的信息放到事件對象中.
獲取事件對象:
1.事件處理函數的第一個參數就是事件對象.
2.window.event(window可以省略)
var e = window.event || e;

2.如何綁定事件，相容寫法是什麼？如何封裝一個綁定事件的函數。

1.標準:
元素.addEventListener(事件類型,事件處理函數)
2.IE:
元素.attachEvent(on事件類型,事件處理函數.)
相容:
if(元素.attachEvent){
 元素.attachEvent(on事件類型,事件處理函數.)
}else{
 元素.addEventListener(事件類型,事件處理函數)
}

函數封裝:
function bindEventListener(elem,etype,fn){
 if(elem.attachEvent){
    elem.attachEvent('on'+etype,fn.)
 }else{
     elem.addEventListener(etype,fn)
 }
}

3.如何解綁事件，相容寫法是什麼？如何封裝一個取消綁定事件的函數。

1.標準:
元素.removeEventListener(事件類型,事件處理函數)
2.IE:
元素.detachEvent(on事件類型,事件處理函數.)
相容:
if(元素.detachEvent){
 元素.detachEvent(on事件類型,事件處理函數.)
}else{
 元素.removeEventListener(事件類型,事件處理函數)
}

函數封裝:
function unbindEventListener(elem,etype,fn){
 if(elem.detachEvent){
    elem.detachEvent('on'+etype,fn.)
 }else{
     elem.removeEventListener(etype,fn)
 }
}

4.什麼是事件流，事件流分為哪些階段，並說明這些階段的過程。

事件流:瀏覽器解析執行事件的過程.事件流可以分為捕獲和冒泡階段.
事件的執行:
(1)確定事件目標
(2)事件傳遞
捕獲階段:當事件發生時,從window依次先事件目標(e.target)傳遞,如果某個元素由相同類型的事件,就觸發,直到傳遞到事件目標為止.
冒泡階段:當事件發生時,從事件目標開始依次先父元素傳遞的過程,如果某個元素由相同類型的事件,就觸發,直到傳遞到window為止.

5.如何阻止事件冒泡？

1.獲取事件對象
var e = window.event||e;
2.阻止冒泡:
(1)標準:e.stopPropagation()
(2)IE:e.cancelBubble = true;

6.如何阻止預設行為？

預設行為:
    a標簽預設跳轉
 img拖拽預設保存
 button在form預設提交
 右鍵預設菜單.

1.元素.on事件類型綁定事件,通過事件函數中return false;
a.onclick = function(){

 return false;//阻止預設行為
}
2.通過事件對象阻止預設行為:
    標準:e.preventDefault();
    IE:e.returnValue = false;

本文來自博客園，作者：葉子dada，轉載請註明原文鏈接：https://www.cnblogs.com/yeziblogs/p/16203698.html

對溫床的眷戀，對過去的沉溺，容易讓人產生一種好像什麼都晚了的錯覺。有沒有勇氣去追尋自己想要的生活，與你是幾歲都沒有關係。任何時間都是及時的，年輕的，能有所為的