2017-3-12 JS 學習筆記

函式的引數

//函式定義
function sum(a,b){
//函式體
      console.log(a + b);
}

• 函式呼叫，函式必須呼叫，
  函式名稱()
• 函式的引數
• 一種實際引數；簡稱實參
• 一種形式引數，簡稱形參
• 函式呼叫的時候傳入的引數叫做實參，定義的時候叫做形參，一般函式有幾個形參就有幾個實參

字典的使用

• 字典的建立
  通過鍵值對建立
• 字典中的資料一般沒有順序
• 字典中的資料一般不能重複

//第一種寫法
var myDict = {
        name:'張三',
        age:16;
        sex:'人妖'
}
//第二種寫法
var myDict = {
        "name":'張三',
        "age":16;
        "sex":'人妖'
}
//第三種寫法
var myDict = {
        'name':'張三',
        'age':16;
        'sex':'人妖'
}

訪問字典中的資料

• 訪問字典可以通過 key 值訪問
  字典名稱.key;
  字典名稱[key];

console.log(myDict.name);
console.log(myDict.age);
console.log(myDict.sex);

for in 的使用

• 遍歷字典

for(var key in myDict){
        //在for in 迴圈中要使用 []來訪問資料
        console.log(myDict[key]);
}

字典設定樣式

//獲取 box 
var box = document.getElementById('box');
//設定屬性字典
var attrDict = {
        width:'100px'
        height:'100px'
        background:'red'
}
//給盒子設定屬性，因為盒子的屬性一般比較多，所以我們通過遍歷來設定
for(var key in attrDict){
        box.style[key] = attrDict[key];
}

動態新增節點

• 傳送網路請求，請求資料，當資料返回來後，根據資料動態新增節點
• 返回的格式是 json，json 包含了陣列和字典
• 一般 json 是陣列和字典的組合，一般外層是陣列，裡面是字典
• 陣列用來確定個數，字典用來設定每一個盒子中的屬性值

//設定一個 json 資料
 var jsonData = [{name:'李四',age:4,email:'161.com',phone:'1232423422'},{name:'李四',age:4,email:'161.com',phone:'1232423422'},{name:'李四',age:4,email:'161.com',phone:'1232423422'},{name:'李四',age:4,email:'161.com',phone:'1232423422'}];
//根據資料設定節點
//根據陣列長度確定盒子的個數
var oBody = document.getElementById('div');
box.className = 'box';
oBody.appendChild(box);
var oul = document.createElement('ul');
box.appendChild(oul);
//每個字典中有多少個 key 就新增多少個 li
for(var key in jsonData[i]){
        //建立li
        var oli = documentcreateElement('li');
        //設定內容
        oli.innerHTML = key +':'+jsonData[i][key];
        //新增 li
        oul.appendChile(oli);
}

屬性設定

• 設定盒子的屬性

box.setAttribute('title','我是盒子');

• 獲取盒子的屬性

box.getAttribute('title');

• 刪除盒子屬性

box.removeAttribute('title');

抽取的常見方法

• 抽取函式的原則
  把相同的東西放在一起形成一個函式，然後讓不同的東西作為引數

• 抽取通過 id 獲取標籤的方法

function $(tagId){
        return document.getElementById(tagId);
}
var btn1 = $('btn1');

• 通過標籤名稱獲取標籤

function getSymByTagName(dom,tagName){
        return dom.getElementsByTagName(tagName);
}

• 抽取遍歷函式
  each 函式

function each(doms,fn){
        for(var i = 0; i < doms.length;i++){
//做事情，呼叫函式
//可能需要陣列裡的每一個元素，以及對應的索引
                  fn(doms[i],i);
        }
}
//獲取 box
var box = $('box');
//獲取 box 下面所有的按鈕
var btns = getSymByTagName(box,'button');
//遍歷按鈕，輸出每一個按鈕的索引
for(var i = 0; i < btns.length;++i){
        alert(i);
        alert(btns[i]);
//每次遍歷節點的時候，做的事情不一樣，作為引數，函式作為引數， fn
//每次遍歷的節點集合也不一樣，doms
}
each(btns,function(a,b){
        alert(b);
})

• 應用字典獲取對應標籤

var box = myFn.$('box');
var btns = myFn.getSymByTagName(box,'button');
myFn.each(btns,function(a,b){
         //輸出 btns
         alert(a);
})

事件物件的認識

• 事件物件，就是當我們的事件觸發的時候，會把事件相關的屬性以及其他的東西打包成一個包，一般這個包以形式引數傳遞給事件指令，一般這個形式引數是 event

box.onclick = function(event){
//獲取點選的位置舉例瀏覽器的左上角的位置，clientX\clientY 只是數值，如果使用需要加 "px"
//target 表示事件的觸發者，一般是事件源
        var targetX = event.clientX;
        var targetY = event.clientY;
}

最大事件源

• 獲取最大事件源，最大事件源一般是 document

//點選最大的事件源觸發對應的事件
document.onclick = function(event){
        var myX = event.clientX;
        var myY = event.clientY;
        alert(myX);
}

• ie 瀏覽器不識別 event 事件物件，但是識別 window.event,所以我們要相容

//函式內部新增 邏輯或
var event = event || window.event;

自定義選單欄的實現

//獲取盒子
var box = document.getElementById('box');
//觸發對應的彈出選單事件
document.oncontextmenu = function(event){
        //獲取事件物件
        var event = event || window.event;
        //組織預設彈出選單
        //在事件指令的最後返回 fales
        // 讓自定義的選單出來
        box.style.display = 'block';
        //確定 box 的位置
        box.style.left = event.clientX + 'px';
        box.style.top = event.clientY + ‘px’;
        return false;
}

滑鼠跟隨的實現

 /*0.獲取span*/
    var oSpan = document.getElementById('oSpan');
    /*1.觸發滑鼠的移動事件*/
    var timer = null;
    var currentX = 0;//表示初始值
    var currentY = 0;//表示初始值
    document.onmousemove = function(event){

        /*1.0獲取對應的事件物件，從而獲取目標值*/
        var event = event||window.event;
        var targetX = event.clientX;
        var targetY = event.clientY;

        clearInterval(timer);
     /*2.讓對應的小天使採用緩動動畫移動到最終的位置*/
        timer = setInterval(function(){
            currentX += (targetX - currentX)*0.2;
            currentY += +(targetY - currentY)*0.2;
            /*2.1設定位置*/
            oSpan.style.left = currentX +'px';
            oSpan.style.top = currentY +'px';


        },100)

    }

滑鼠拖拽的實現

 /*1.讓對應的盒子觸發滑鼠點選下去的事件，在這個事件中觸發最大事件源的移動事件*/
    var box = document.getElementById('box');
    box.onmousedown = function(event){

        /*不同事件中的事件的物件是不一樣的*/
        /*0.獲取事件物件*/
        var event = event ||window.event;


        /*1.0獲取點選的點距離box盒子邊框的間距*/
        /*distanceX = 點選下去的點的座標的值 - 盒子距離瀏覽器的邊框的間距*/
        var distanceX = event.clientX - box.offsetLeft;
        var distanceY = event.clientY - box.offsetTop;



        /*1.1觸發最大事件源的移動事件*/
        document.onmousemove = function(event){
            /*1.11獲取事件物件*/
            var event = event ||window.event;
            /*1.12設定box位置*/
            box.style.left = event.clientX - distanceX+ 'px';
            box.style.top = event.clientY - distanceY+'px';

        }

        /*1.2當最大事件源滑鼠抬起的時候，我們要清空移動事件*/
        document.onmouseup = function(){
            document.onmousemove = null;

        }

    }

offset 屬性的基本認識

//獲取標籤
var box = document.getElementById('box');
//獲取標籤對應 offsetW 和 offsetH
//offsetW = width + padding + border
//獲取的時候不需要 style
//獲取的取出的是數值，不是字元
//一般 offset 屬性只能取值，不能設定值
//等號左邊表示設定值，右邊表示取值
var offsetW = box.offsetWidth;
var offsetH = box.offsetHeight;

• offsetparent
  噹噹前的標籤需要設定 offsetLeft 的時候，如果他相對於他的父標籤有定位，那麼他的父標籤就是它的 offsetParent, 如果沒有就找他的爺爺，如果爺爺也沒有，就一直往上找，直到都沒有，body 就是 offsetParent