前端學習（三）javascript（*）
阿新 • • 發佈：2018-12-14
三、DOM應用
1、dom基礎
（1）dom 節點：
- 父節點的獲取：parentNode、offsetParent（獲取有定位的父節點）；
- 子節點的獲取：childNodes和nodeType（也可以用children）；
- 首尾子節點：firstChild（firstElementChild 不會獲取到文字節點，IE9以下不可用）、lastChild（lastElementChild）；
- 兄弟子節點：nextSibling（nextElementSibling）、previousSibling（previousElementSibling）；
（2） 元素的屬性操作：
- obj.value（不可以傳參） 和 obj["value"]（可以傳參）
- setAttribute | getAttribute | removeAttribute
- 屬性相關：
- 1、屬性基本 html 怎麼寫 js 就怎麼寫，除了 class 外：div.className=" "；
- 2、style 屬性無論是增加還是獲取都是取行間，行間沒有的話，取值的時候取不到；
- 3、style 的優先順序高於 className；
- 4、獲取非行間樣式的相容性寫法：
function getStyle(obj, attr) { if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,null)[attr]; } }
（3）dom元素靈活查詢：
- 用 className 來獲取元素，封裝函式 getByClass（oParent，sClass）
（4）建立、插入和刪除元素
- createElement | appendChild（加在末尾，也是先刪後加）| insertBefore（節點，指定節點）--加在前面；
- removeChild（）
（5）文件碎片（*）：createDocumentFragment----幾乎不用
2、dom高階
（1）表格應用
- 表格的便捷操作：tHead、tFoot、tBodies、rows、cells；
- 表格的隔行變色；
- 新增和刪除一行；
- 搜尋和排序；
（2）表單應用
- 事件：onsubmit、onreset；
- 表單的驗證；
四、JS運動技術
1、運動基礎
（1）offsetWidth 和 offsetHeight：只和自身相關，與周圍的元素無關
- offsetWidth = border-left + border-right + padding-left+padding-right+元素本身的寬度;
- offsetHeight = border-top + border-bottom + padding-top+padding-bottom+元素本身的高度；
（2）offsetLeft和offsetTop
- offsetTop = 上級定位元素的padding + 元素本身的margin；
- 如果二者中間還有其他元素，還要加上該元素的 margin padding 和 border；
- offsetLeft同理；
（3）scrollTop和scrollLeft：與滾動條相關的屬性
- scrollTop：滾動條當前位置顯示的最上面和真正的最上面的距離，scrollLeft同理；
（4）clientHeight和clientWidth
- clientHeight包括padding但不包括border、水平滾動條、margin的元素的高度，clientWidth同理；
（5）定時器
- 開啟：setInterval（函式，時間）---迴圈執行；setTimeout（）---只執行一次；
- 關閉：clearInterval；clearTimeOut；
- 應用：數碼時鐘，延時提示框、無縫滾動；
2、運動框架
（1）開始運動前先關閉已有的定時器；
（2）將運動和停止的狀態用 if else 隔開；
（3）練習：側邊欄、圖片的淡入淡出；
3、緩衝運動
（1）速度越來越慢，最後停止；
（2）速度=（目標值-當前值）/縮放係數；
（3）緩衝選單：速度取整（向上和向下取整）；目標值取整；
4、勻速運動的停止條件
（1）距離小於速度就停止；
（2）再手動將元素移到目標點；
（3）勻速和緩衝運動程式碼的差異：速度表示式不同，最後的停止條件和處理方法也不同
5、多物體運動框架
（1）多物體運動框架很多東西都不能公用，定時器和透明度的變數等，解決方法就是給每個元素設定自定義屬性；
6、任意值的運動框架
（1）offset 屬性 bug 和 opacity 的小數問題；
（2）練習：圖片輪換的播放器；
7、運動中級
（1）鏈式運動
- 在原有框架的基礎上加一個回撥函式，在運動結束關閉定時器之後加
（2）完美運動框架
- 多個屬性同時變化；
- 等所有的條件都滿足再停止；
五、JS事件應用
1、基礎
（1）event物件
- 用來獲取事件的詳細資訊：滑鼠位置，鍵盤鍵位
- 滑鼠的位置：clientX 和 clientY
- document的本質：可以看作一個最高階的節點，包含html 的所有內容，全域性事件加在 document 上
- 事件物件的相容性寫法：var oEvent = ev || event
（2）事件冒泡
- 父級和子級的元素假如都有 onclick 事件，子級元素的被點選，則會觸發父級元素的點選事件
- 阻止事件的冒泡：event.cancelBubble = true;
（3）滑鼠事件
- onmousemove事件
- clientX 和 clientY 實際是可視區域的座標，如果要獲取相對與 document 的絕對座標，需要和 scrolltop 等配合使用，封裝相應的方法；
- 應用：div 跟隨滑鼠的移動
（4）鍵盤事件
- keycode ：可以用來判斷鍵盤的按鍵；應用：鍵盤控制 div 的移動；
- ctrlkey、altkey、shiftkey：應用提交留言；
2、中級
（1）預設行為
- 預設行為就是瀏覽器自發產生的行為，不用人為寫程式碼觸發；
- document.onContextMenu（右鍵選單彈出）；
- 阻止預設行為，直接在事件的方法裡 return false；
- 練習：阻止右鍵預設選單，彈出自定義選單；只能輸入數字的文字框（keycode 和 onKeydown）；
（2）拖拽
1、基本原理：
- 元素位置的確定依靠滑鼠位置和滑鼠距離元素左上邊界的長度來確定；
- onmousedown計算滑鼠和元素邊界的距離，onmousemove重新定位元素，onmouseup停止事件；
2、拖拽的改進：
- 快速拖動滑鼠會移出 div ：直接給 document 加事件；
- 火狐瀏覽器下空 div 的拖拽 bug：阻止預設行為；
- 防止 div 脫出頁面：進行位置的修正；
3、應用
（1）事件繫結
- 老方法給同一個元素相同事件繫結不同的函式，會出現後面的把前面的覆蓋了的問題；
- 解決以上問題需要用到新的事件的繫結方法
function myAddEvent(obj, ev, fn)
{
if(obj.attachEvent)
{
obj.attachEvent('on'+ev, fn);
}
else
{
obj.addEventListener(ev, fn, false);
}
}- 事件的解綁：IE（detachEvent）；CHROME（removeEventListener）；
（2）高階拖拽
- 練習：不能脫出指定的元素；
- 練習：磁性吸附功能（靠近邊界的時候把距離設定為0即可）；
- 練習：帶框的拖拽；
- 事件捕獲：將所有元素的事件集中到某一個元素上，解決IE下拖拽引起的其他元素的選中問題（setCapture()、releaseCapture()）；
（3）自定義滾動條
- 原理：橫向拖拽；限制範圍；計算比例；
- 應用：控制元素大小；控制透明度；控制文字的滾動；
六、AJAX技術
1、概念
- Ajax 即 Asynchronous Javascript And XML（非同步 JavaScript 和 XML）；
- 無重新整理資料讀取技術；
2、應用
- 讀取靜態資料，如txt檔案等；
- 讀取動態資料，如json；
- 用於網頁的區域性重新整理；
其他：
- eval（str）可以將 str 解析為 js 執行；
- 瀏覽器快取是根據 url 進行快取的，變更 url 可以阻止瀏覽器的快取；
3、原理
（1）AJAX 原理
/**
* ajax 的封裝
*/
function myAjax(method,url,data,async,sucFn,faiFn){
//get ajax obj
if(window.XMLHttpRequest)
{
var oAjax=new XMLHttpRequest();
}
else
{
var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
}
//connection check method
if(method.toUpperCase() == "GET"){
oAjax.open(method, url+(data ? '?'+data : ''), async);
oAjax.send(data);
}else if(method.toUpperCase() == "POST"){
oAjax.open(method, url, async);
oAjax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
oAjax.send(data);
}
//state listener
oAjax.onreadystatechange=function ()
{
if(oAjax.readyState==4)
{
if(oAjax.status==200)
{
if(sucFn){
sucFn(oAjax);
}
}
else
{
if(faiFn){
faiFn(oAjax);
}
}
}
};
};（2）說明：
- ajax 資料型別：xml 和 json；
- 字符集問題：統一字符集就不會出現亂碼；
- js 的變數與屬性：使用未定義的變數會報錯；使用未定義的屬性僅僅是 undefine，不會報錯；
（3）AJAX請求的幾種狀態
- 0：未初始化，還未呼叫 open 方法；
- 1：載入，已呼叫 send 方法，正在傳送去請求；
- 2：載入完成，send 方法完成，收到所有的響應內容；
- 3：解析，解析響應內容；
- 4：完成，解析完成，可以在客戶端使用了；