平常整理

1： 圖片加連接後有的瀏覽器默認藍色邊框， 消除方法

    img{border:0;}或者 img{border:none;}
   img雖然沒有border，可是這種狀況能夠解決遇到a標籤包裹的時候出現的問題。

2 3條以上 ie 和 ff 的腳本兼容問題

 

1、腳本差別：

一、事件綁定：addEventListener 與 attachEvent  事件處理函數中this指向不一樣， IE中指向window

二、獲取事件對象 ：事件處理函數     window.event 

三、獲取觸發事件的DOM元素： target  srcElement

四、阻止默認行爲： e.preventDefault（）   e.returnValue= false

五、阻止冒泡：e.stopPropagation()  e.cancelBubble = true;

六、獲取樣式信息：getComputedStyle（obj,null）.width  currentStyle.width

七、 實例化XHR對象  new XMLHttpRequest（）  newActiveXObject（）

八、獲取dom元素： parentNode parentElement  

 

 

2、css差別

 

一、!important  優先級最高，在IE6如下異常。

 

 

3 XHTML與HTML區別是什麼？

html:超文本標記語言 (Hyper Text Markup Language)

xhtml:可擴展超文本標記語言，是一種置標語言，表現方式與超文本標記語言（HTML）相似，不過語法上更加嚴格。XHTML 元素必須被正確地嵌套

     XHTML 元素必須被關閉，空標籤也必須被關閉，如 <br> 必須寫成 <br />
     XHTML 標籤名必須用小寫字母
     XHTML 文檔必須擁有根元素
     XHTML 文檔要求給全部屬性賦一個值
     XHTML 要求全部的屬性必須用引號""括起來
     XHTML 文檔須要把全部 < 、>、& 等特殊符號用編碼表示
     XHTML 文檔不要在註釋內容中使「--」
     XHTML 圖片必須有說明文字
     XHTML 文檔中用id屬性代替name屬性


4 構建一個自定義版本的foeach函數


5 slice方法返回字符串的片斷。 
strObj.slice(start[,end]) 
說明： 
start下標從0開始的strObj指定部分其實索引。若是start爲負，將它做爲length+start處理，此處length爲字符串的長度。 
end小標從0開始的strObj指定部分結束索引。若是end爲負，將它做爲length+end處理，此處length爲字符串的長度。 
例如： 
012345 
var str = "ABCDEF"; 
str.slice(2,4); 
結果：CD 
slice(start,end) 從某個已有的數組返回選定的元素
請注意，該方法並不會修改數組，而是返回一個子數組

substr() 方法可在字符串中抽取從 start 下標開始的指定數目的字符。  一個新的字符串，包含從 stringObject 的 start（包括 start 所指的字符） 處開始的 length 個字符。若是沒有指定 length，那麼返回的字符串包含從 start 到 stringObject 的結尾的字符。

 

6 jQuery事件綁定on()、bind()與delegate() 方法詳解

 

bind   

給匹配到的元素直接綁定事件（不推薦，1.7之後的jQuery版本被on取代）

第一個參數：事件類型

第二個參數：事件處理程序

$("p").bind("click mouseenter", function(e){

    //事件響應方法

});

優勢：能夠同時綁定多個事件，好比：bind(「mouseenter  mouseleave」, function(){})

缺點：仍然沒法給動態建立的元素綁定事件

 

delegate方式

做用：給匹配到的元素綁定事件，對支持動態建立的元素有效（特色：性能高，支持動態建立的元素）

// 第一個參數：selector，要綁定事件的元素

// 第二個參數：事件類型

// 第三個參數：事件處理函數

$(".parentBox").delegate("p", "click", function(){

    //爲 .parentBox下面的全部的p標籤綁定事件

});

與前兩種方式最大的優點：減小事件綁定次數提升效率，支持動態建立出來的元素綁定事件

on

咱們如今用on的方式來綁定事件（最現代的方式，強烈建議使用的方式）

jQuery1.7版本後，jQuery用on統一了全部的事件處理的方法

做用：給匹配的元素綁定事件，包括了上面全部綁定事件方式的優勢

 

 

  事件解綁

unbind() 方式

做用：解綁 bind方式綁定的事件

$(selector).unbind(); //解綁全部的事件

$(selector).unbind(「click」); //解綁指定的事件

 

undelegate() 方式

做用：解綁delegate方式綁定的事件

$( selector ).undelegate(); //解綁全部的delegate事件

$( selector).undelegate( 「click」 ); //解綁全部的click事件

 

 

 

off解綁on方式綁定的事件（重點）

// 解綁匹配元素的全部事件

$(selector).off();

// 解綁匹配元素的全部click事件

$(selector).off(「click」);

// 解綁全部代理的click事件，元素自己的事件不會被解綁

$(selector).off( 「click」, 「**」 );

 

1.選擇器匹配到的元素比較多時，不要用bind()迭代綁定

2.用id選擇器時，能夠用bind()

3.須要給動態添加的元素綁定時，用delegate()或者on()

4.用delegate()和on()方法，dom樹不要太深

5.儘可能使用on()

  事件觸發（重點）

簡單事件觸發

$(selector).click(); //觸發 click事件

trigger方法觸發事件

$(selector).trigger(「click」);

triggerHandler觸發 事件響應方法，不觸發瀏覽器行爲

好比:文本框得到焦點的默認行爲

$(selector).triggerHandler(「focus」);

 

 

forEach

    語法: 數組.forEach( callback )

    執行: 遍歷數組中的每個元素, 而且將每個元素的處理過程交給回調函數

    回調函數中會傳入兩個參數, 一個是遍歷的數組元素, 一個是當前的索引.

 

// 首先若是不提供參數, 那麼 this 是 window

        // 若是提供一個對象 那麼 這個對象就是 回調函數中的 this

        // 可是 forEach 這個方法執行一次, 也就是說這個對象是固定不變的

        // 也就代表回調函數中的 this 不會隨着遍歷元素的改變而改變, 它是固定的

 

    例如: 遍歷打印數組中的每個元素與索引號

    傳統:

        for ( var i = 0; i < arr.length; i++ ) {

            console.log( i + ', ' + arr[ i ] );  // 打印, 索引號 與 當前元素

        }

    forEach:

        arr.forEach( function ( value, index ) { 

            console.log( index + ', ' + value );

        } );

    比較一下 jq 中的 each 方法

        $.each( arr, function ( i, v ) { ... } )

    爲何要這樣抽象???

        因爲大多數循環數組都是將數組所有遍歷, 所以 forEach 默認就是將數組遍歷出來

        咱們遍歷數組的重點是在操做數組中的 當前元素與當前索引. 所以咱們將其抽象出來

        單獨放到回調函數中處理. 那麼咱們的業務邏輯更加集中.

 

    思考: 爲何 jq 的 each 方法中回調函數的 參數是 i, v; 而數組中的參數是 v, i 呢?

        從實際開發中考慮, 統計上來講遍歷數組的時候使用 i 多仍是 v 多?

        js 中不少特徵是動態的, 所以將回調函數寫成 v, i 的形式, 若是不須要使用索引, 直接不提供 i 這個參數

 

        arr.forEach( function ( v, i ) { 

            // 在函數中只會用到 v 而不會用到 i

        } );

 

        // 若是在設計這個 api 的時候是將 i 放在前面, 那麼使用的時候即便不使用 i 也得寫

        arr.forEach( function ( i, v ) { 

            // 在函數中只會用到 v 而不會用到 i

        } );

 

        在 jq 中遍歷 each 方法有兩個, 一個是靜態的, 一個是實例.

        $.each( arr, callback );

        $( 'div' ).each( callback );

        在 jq 中遍歷每個 dom 對象的時候 通常不是使用 參數 v 而是使用 this

 

        $( 'div' ).each( function ( i ) {

            this 直接就是 DOM 元素, 若是要使用 索引, 在參數中提供 i 便可

        });

 

 

 

 

map 函數

    語法:

        數組.map( 回調函數 )

    簡單的來理解, map 也是在遍歷數組. 這種理解不許確.

 

    map 原意 映射, 通俗的理解就是將一個集合按照特定的規律變成另外一個集合.

    例如: 有數字構成的集合, 將其中 的數字擴大一倍.

 

    map 的實現邏輯

    1> map 函數要返回一個數組

    2> map 返回的這個數組的元素由 回調函數的返回值決定

 

    類比: 

        [ 1, 2, 3 ], []

        [ 1, 2, 3 ], [ 2 ]

        [ 1, 2, 3 ], [ 2, 4 ]

        [ 1, 2, 3 ], [ 2, 4, 6]

    map 函數也是如此, map 函數中的回調函數來實現咱們的規則

        var newArr = arr.map( function ( v, i ) {

            return v * 2;

        });

    若是回調函數沒有返回值, 注意默認返回了 undefined

 

    咱們的要求是將數組中的元素轉換成另外一個東西, 那麼這個轉換的過程由回調函數來實現

 

    典型的案例:

        'a,b,c'.split( ',' ).map(function ( v ) {

            return '<td>' + v + '</td>';

        });

        // [ 'a', 'b', 'c' ] => [ '<td>a</td>', '<td>b</td>', '<td>c</td>' ]

 

    將箭頭函數引入 map. 上面的案例就能夠改良成

        'a,b,c'.split( ',' ).map( v => '<td>' + v + '</td>' );

 

7. jq 中 map 方法與數組 中提供的 map 的異同( 討論 )

 

8. every 和 some

    some 方法, 表示判斷數組中的元素只要含有某一個條件便可

    every 方法, 表示判斷數組中的每個元素必須含有某個條件

 

    語法: 

        數組.方法名( 回調函數 ) -> boolean

    說明:

    1> 回調函數依舊是遍歷數組的每個元素

    2> 回調函數的參數依舊是 v, i

    3> 回調函數的做用是用來判斷數組中的元素, 因此回調函數有返回值, 返回一個 boolean

    4> some 方法凡是發現知足了條件的元素就會中止遍歷, 並返回 true, 不然返回 false.

    5> every 方法凡是發現了一個元素不知足條件就會中止遍歷, 並返回 false, 不然返回 true.

 

    該方法與邏輯中斷相似 是邏輯中斷的升級版.

 

    ||  表達式1 || 表達式2

        若是表達式1爲假, 纔會判斷表達式2, 若是表達式1已經真 那麼不執行表達式2, 就獲得結果

    &&  表達式1 && 表達式2

        若是表達式1爲假, 那麼不在判斷表達式2, 直接獲得結果爲假, 若是表達式1爲真, 再判斷表達式2

 

    

    練習: 有一個數組, 判斷該數組中是否含有數字.

        var arr = [ 'a', 'b', '12', 123 , 'd' ];

        arr.some( function ( v ) {

            return typeof v == 'number';

        });

    若是說練習是 判斷數組中是否都爲 DOM 元素( 潛規則, 判斷元素是否含有屬性 nodeType )

        arr.every( function ( v ) {

            // 若是是dom 元素應該返回 true

            // 若是不是 dom 元素 返回 false

            return v.nodeType;

        });

 

 

    ( 擴展 ) 有些項目中須要判斷兩個表達式, 可是仍是要實現邏輯運算

 

    if ( ( v1 = xxxxxx ) || ( v2 = xxxxxxxxxx ) ) {

    }

 

    可使用 按位或( | ) 與 按位與( & )

 

    注意在邏輯真假中 按位與 和 邏輯與, 以及 按位或與邏輯或 真值等價.

 

    按位與, 就是比較二進制數據中每個二進制位 而且求 與

 

        0011 & 1100 = 0000 => 3 & 12 == 0

 

        0111 & 0100 = 0100 => 7 & 4 == 4

    

    位運算在前端領域通常在權限限制 狀態操做等方面使用. 可是不是絕對的.

 

    算法: 在 a, b, c, d, e, f, g 這幾個字符中, 隨機的取出 3 個字符串來, 不容許重複 將全部的取法求出來.

 

 

 

9. 問題

    數組中遍歷方法能不能使用 this.

    在 js 中這個 this 在函數中被稱爲上下文( 環境 ).

 

 

10. filter 函數

    功能: 將一個數組中符合某要求的全部元素篩選出來, 組成一個新的數組返回.

    語法: 數組.filter( 回調函數 ) -> 新數組

    回調函數的參數依舊是 v, i

    回調函數判斷的時候, 判斷元素 v 是否符合要求, 若是符合返回 true, 不然返回 false

    filter 就會將全部的符合元素組成新的數組

 

    案例: 將全部的數字中奇數取出來.

        var arr = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 0 ];

        arr.filter( v => v % 2 == 1 );

 

        等價於

        arr.filter( function ( v ) {

            return v % 2 == 1;

        } );

 

 

 

 

 

forEach    語法: 數組.forEach( callback )    執行: 遍歷數組中的每個元素, 而且將每個元素的處理過程交給回調函數    回調函數中會傳入兩個參數, 一個是遍歷的數組元素, 一個是當前的索引.
// 首先若是不提供參數, 那麼 this 是 window        // 若是提供一個對象 那麼 這個對象就是 回調函數中的 this        // 可是 forEach 這個方法執行一次, 也就是說這個對象是固定不變的        // 也就代表回調函數中的 this 不會隨着遍歷元素的改變而改變, 它是固定的
    例如: 遍歷打印數組中的每個元素與索引號    傳統:        for ( var i = 0; i < arr.length; i++ ) {            console.log( i + ', ' + arr[ i ] );  // 打印, 索引號 與 當前元素        }    forEach:        arr.forEach( function ( value, index ) {             console.log( index + ', ' + value );        } );    比較一下 jq 中的 each 方法        $.each( arr, function ( i, v ) { ... } )    爲何要這樣抽象???        因爲大多數循環數組都是將數組所有遍歷, 所以 forEach 默認就是將數組遍歷出來        咱們遍歷數組的重點是在操做數組中的 當前元素與當前索引. 所以咱們將其抽象出來        單獨放到回調函數中處理. 那麼咱們的業務邏輯更加集中.
    思考: 爲何 jq 的 each 方法中回調函數的 參數是 i, v; 而數組中的參數是 v, i 呢?        從實際開發中考慮, 統計上來講遍歷數組的時候使用 i 多仍是 v 多?        js 中不少特徵是動態的, 所以將回調函數寫成 v, i 的形式, 若是不須要使用索引, 直接不提供 i 這個參數
        arr.forEach( function ( v, i ) {             // 在函數中只會用到 v 而不會用到 i        } );
        // 若是在設計這個 api 的時候是將 i 放在前面, 那麼使用的時候即便不使用 i 也得寫        arr.forEach( function ( i, v ) {             // 在函數中只會用到 v 而不會用到 i        } );
        在 jq 中遍歷 each 方法有兩個, 一個是靜態的, 一個是實例.        $.each( arr, callback );        $( 'div' ).each( callback );        在 jq 中遍歷每個 dom 對象的時候 通常不是使用 參數 v 而是使用 this
        $( 'div' ).each( function ( i ) {            this 直接就是 DOM 元素, 若是要使用 索引, 在參數中提供 i 便可        });

 

 

 

10 :    switch底層是===判斷：若是數值相等數據類型不一樣，那麼也不算。