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="https://www.cnblogs.com/yeziblogs/p/外部的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 = https://www.cnblogs.com/yeziblogs/p/新值
    獲取:元素.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 = https://www.cnblogs.com/yeziblogs/p/false;

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

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/467056.html

標籤：JavaScript

上一篇：javascript生成一棵樹

下一篇：JavaScript學習筆記