函數(shù)的參數(shù)

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

• 函數(shù)調(diào)用，函數(shù)必須調(diào)用，
  函數(shù)名稱()
• 函數(shù)的參數(shù)
• 一種實際參數(shù)；簡稱實參
• 一種形式參數(shù)，簡稱形參
• 函數(shù)調(diào)用的時候傳入的參數(shù)叫做實參，定義的時候叫做形參，一般函數(shù)有幾個形參就有幾個實參

字典的使用

• 字典的創(chuàng)建
  通過鍵值對創(chuàng)建
• 字典中的數(shù)據(jù)一般沒有順序
• 字典中的數(shù)據(jù)一般不能重復(fù)

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

訪問字典中的數(shù)據(jù)

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

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

for in 的使用

• 遍歷字典

for(var key in myDict){
        //在for in 循環(huán)中要使用 []來訪問數(shù)據(jù)
        console.log(myDict[key]);
}

字典設(shè)置樣式

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

動態(tài)添加節(jié)點

• 發(fā)送網(wǎng)絡(luò)請求，請求數(shù)據(jù)，當(dāng)數(shù)據(jù)返回來后，根據(jù)數(shù)據(jù)動態(tài)添加節(jié)點
• 返回的格式是 json，json 包含了數(shù)組和字典
• 一般 json 是數(shù)組和字典的組合，一般外層是數(shù)組，里面是字典
• 數(shù)組用來確定個數(shù)，字典用來設(shè)置每一個盒子中的屬性值

//設(shè)置一個 json 數(shù)據(jù)
 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'}];
//根據(jù)數(shù)據(jù)設(shè)置節(jié)點
//根據(jù)數(shù)組長度確定盒子的個數(shù)
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]){
        //創(chuàng)建li
        var oli = documentcreateElement('li');
        //設(shè)置內(nèi)容
        oli.innerHTML = key +':'+jsonData[i][key];
        //添加 li
        oul.appendChile(oli);
}

屬性設(shè)置

• 設(shè)置盒子的屬性

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

• 獲取盒子的屬性

box.getAttribute('title');

• 刪除盒子屬性

box.removeAttribute('title');

抽取的常見方法

• 抽取函數(shù)的原則
  把相同的東西放在一起形成一個函數(shù)，然后讓不同的東西作為參數(shù)

• 抽取通過 id 獲取標(biāo)簽的方法

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

• 通過標(biāo)簽名稱獲取標(biāo)簽

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

• 抽取遍歷函數(shù)
  each 函數(shù)

function each(doms,fn){
        for(var i = 0; i < doms.length;i++){
//做事情，調(diào)用函數(shù)
//可能需要數(shù)組里的每一個元素，以及對應(yīng)的索引
                  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]);
//每次遍歷節(jié)點的時候，做的事情不一樣，作為參數(shù)，函數(shù)作為參數(shù)， fn
//每次遍歷的節(jié)點集合也不一樣，doms
}
each(btns,function(a,b){
        alert(b);
})

• 應(yīng)用字典獲取對應(yīng)標(biāo)簽

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

事件對象的認(rèn)識

• 事件對象，就是當(dāng)我們的事件觸發(fā)的時候，會把事件相關(guān)的屬性以及其他的東西打包成一個包，一般這個包以形式參數(shù)傳遞給事件指令，一般這個形式參數(shù)是 event

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

最大事件源

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

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

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

//函數(shù)內(nèi)部添加 邏輯或
var event = event || window.event;

自定義菜單欄的實現(xiàn)

//獲取盒子
var box = document.getElementById('box');
//觸發(fā)對應(yīng)的彈出菜單事件
document.oncontextmenu = function(event){
        //獲取事件對象
        var event = event || window.event;
        //組織默認(rèn)彈出菜單
        //在事件指令的最后返回 fales
        // 讓自定義的菜單出來
        box.style.display = 'block';
        //確定 box 的位置
        box.style.left = event.clientX + 'px';
        box.style.top = event.clientY + ‘px’;
        return false;
}

鼠標(biāo)跟隨的實現(xiàn)

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

        /*1.0獲取對應(yīng)的事件對象，從而獲取目標(biāo)值*/
        var event = event||window.event;
        var targetX = event.clientX;
        var targetY = event.clientY;

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


        },100)

    }

鼠標(biāo)拖拽的實現(xiàn)

 /*1.讓對應(yīng)的盒子觸發(fā)鼠標(biāo)點擊下去的事件，在這個事件中觸發(fā)最大事件源的移動事件*/
    var box = document.getElementById('box');
    box.onmousedown = function(event){

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


        /*1.0獲取點擊的點距離box盒子邊框的間距*/
        /*distanceX = 點擊下去的點的坐標(biāo)的值 - 盒子距離瀏覽器的邊框的間距*/
        var distanceX = event.clientX - box.offsetLeft;
        var distanceY = event.clientY - box.offsetTop;



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

        }

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

        }

    }

offset 屬性的基本認(rèn)識

//獲取標(biāo)簽
var box = document.getElementById('box');
//獲取標(biāo)簽對應(yīng) offsetW 和 offsetH
//offsetW = width + padding + border
//獲取的時候不需要 style
//獲取的取出的是數(shù)值，不是字符
//一般 offset 屬性只能取值，不能設(shè)置值
//等號左邊表示設(shè)置值，右邊表示取值
var offsetW = box.offsetWidth;
var offsetH = box.offsetHeight;

• offsetparent
  當(dāng)當(dāng)前的標(biāo)簽需要設(shè)置 offsetLeft 的時候，如果他相對于他的父標(biāo)簽有定位，那么他的父標(biāo)簽就是它的 offsetParent, 如果沒有就找他的爺爺，如果爺爺也沒有，就一直往上找，直到都沒有，body 就是 offsetParent