作用：交互
修改樣式

事件 ：用戶操作,
html引入js其他方式
js可以寫在html行內(nèi)中，不用通過script標(biāo)簽，比如標(biāo)簽綁定一個事件，onclick="divi.style.display='none' ;ivi.style.display='none' ;ivi.style.display='none' ;" 原來可以這樣寫，但在實(shí)際中不會這樣做，這就引出函數(shù)的概念

函數(shù)

參數(shù)
形參：占位符，場景：不確定時時候，
當(dāng)函數(shù)業(yè)務(wù)邏輯相似時，把多個函數(shù)寫成一個，代碼重用性;

注意

html中怎么寫，js中就怎么寫
1.用style加樣式 作用在行間

2. 用style取樣式， 也是取行間，如果行間沒有就取不到
   styleg與className 如果用過style修改樣式了再通過添加類名的方式，如果style有className修改過的屬性，哪么通過className修改的方式?jīng)]有效，原理style修改的樣式加在行間（優(yōu)先級）

提取行間事件

ECMAScript :解釋器
DOM document

BOM windom

為什么數(shù)據(jù)類型轉(zhuǎn)換
類型不是我們要的類型
parseInt()參數(shù) 字符串返回NaN
NaN 不等于NaN
isNaN() 是 不是數(shù)字 trun

閉包：子函數(shù)可以使用父函數(shù)的局部變量

//真：true ,非零數(shù)字， 非空字符串 非空對象
//假：false ,數(shù)字零， 空字符串 空對象 ， undefined

Json
訪問
求值
沒有l(wèi)ength
怎么循環(huán)
for(var i in json)

arguments 數(shù)組

currentStyle

數(shù)組操作

添加

• push(元素)， 從尾部添加
• unshift(元素)， 從頭部添加
  刪除
• pop(), 從尾部彈出
• shift(),從頭部彈出
  splice 萬能操作 數(shù)組添加刪除
• splice(開始，長度，元素。。。)
• 先刪除，后插入
  刪除
• splice(開始，長度)
  插入
• splice(開始，0，元素。。。。)
  替換
  數(shù)組連接合并
  arr.concat(arrb) 數(shù)組連接合并
  數(shù)組元素連接成字符串
  arr.join("-")
  排序

arr.sort();
arr.sort(function(n1,n2){
//return  n1-n2
if(n1<n2){
return -1
}
else if (n1>n2){
  return -1;
}
else{
return 0 ;
}
})

定時器的作用

開啟定時器
var time =setInterval （funtion,100） 間隔型
setTimeout （funtion,100） 延時型
停止定時器
clearInterval(time)
clearTimeout（）

獲取系統(tǒng)時間

Date對象
getHours , getMinutes, getSeconds
getFullYear(), getMonth(),getDate(), getDay()

字符串

str.charAt(0);獲取字符串指定下標(biāo)對應(yīng)的字符

延時提示框
如果兩個元素綁定的事件一樣，可以用 連object1.onclick=object2 .onclik=function(){};
無縫滾動
運(yùn)動本質(zhì)，改變position
offsetLeft 元素左邊距
offsetTop 上邊距

DOM基礎(chǔ)

標(biāo)簽 html
元素 js
節(jié)點(diǎn) DOM
獲取子節(jié)點(diǎn)
childNodes nodeType
children
會把空格當(dāng)成文本節(jié)點(diǎn)，而nodeType可以判斷文本節(jié)點(diǎn)還是元素節(jié)點(diǎn)

var oUl = document.getElementById("ul1");
for(var i=0;i<oUl.childNodes.length;i++){
if(oUl.childNodes[i].nodeType==1){
oUl.childNodes[i].style.background = 'red';
}
}

獲取父節(jié)點(diǎn)
e.parentNode
offsetParent 定位的父節(jié)點(diǎn)

操縱元素屬性

oDiv.style.display = "block";
oDiv.style['display'] = "block"
獲?。篻etAttribut(名稱)
設(shè)置：setAttribut(名稱,值)
刪除：removeAttribut(名稱)

DOM元素靈活查找

className

DOM操作應(yīng)用

創(chuàng)建元素

var oLi=document.createElement(標(biāo)簽名);
父級.appendChild(oLl);

插入元素
父級.insertBefore(節(jié)點(diǎn)，原有節(jié)點(diǎn))

if(aLi.length>0){
  oUl.insertBefore(oLi,aLi[0])
}else{
  oUl.appendChild(oLi);
}

刪除元素
父級.removeChild(節(jié)點(diǎn)) 刪除一個節(jié)點(diǎn)

文檔碎片

相當(dāng)一個包 先把所有創(chuàng)建的元素裝到文檔碎片中，然后一次性裝到父級中，減少瀏覽器渲染

var oUl = document.getElementById('ul1');
var oFrag = document.createDocumentFragment();//文檔碎片
for(var i=0;i<10000;i++){
var oLi = document.createElement('li');
oFrag = appendchild(oLi);
}
oUl.appendChild(oFrag)

DOM高級應(yīng)用

表格應(yīng)用

oTab.tBodies[0].rows[1].cells[1].innerHTML

運(yùn)動框架
像素 px 為什么沒有小數(shù)， 電腦分辨率最小單位是1px,所以不能小于1，如果有小數(shù)，就會取整
所以運(yùn)動中的left 不能取整的話，就不能到達(dá)目標(biāo)位置

js事件高級應(yīng)用

事件綁定

ev.attachEvent(事件名，函數(shù))
addEventListener(事件名，函數(shù)，false);

function myAddEvent(obj,ev,fn){
  if(obj.attachEvent){
      obj.attachEvent('on'+ev,fn);
  }
 else
  {
      obj.addEventListener(ev,fn,false);
  }
}

解除綁定
dedtachEvent(事件名稱，函數(shù))
removeEventListener(事件名稱，函數(shù))

function myRemoveEvent(obj,ev,fn){
  if(obj.dedtachEvent){
      obj.dedtachEvent('on'+ev,fn);
  }
 else
  {
      obj.removeEventListener(ev,fn,false);
  }
}