前端筆記-201806

時間 2019-12-02

標籤前端筆記简体版

原文原文鏈接

一、<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">css

參考：http://lightcss.com/add-x-ua-compatible-meta-to-your-website/html

X-UA-Compatible是IE8的一個專有<meta>屬性，它告訴IE8採用何種IE版本去渲染網頁，在html的<head>標籤中使用。前端

IE=edge告訴IE使用最新的引擎渲染網頁，chrome=1則能夠激活Chrome Frame（Chrome Frame可讓舊版IE瀏覽器使用Chrome的WebKit渲染引擎處理網頁，所以舊版IE用戶能夠體驗到包括HTML5在內的衆多現代網頁技術）。html5

二、<meta name="viewport" content="width=640, user-scalable=no">jquery

參考：https://www.zhihu.com/question/32090605git

視覺稿、頁面寬度、viewport width 使用統一寬度，利用瀏覽器自身縮放完成適配。頁面樣式（包括圖像元素）徹底按照視覺稿的尺寸，使用定值單位（px、em）便可完成。荔枝FM,人人都是播客的移動站（http://m.lizhi.fm/）使用的就是此方案。web

三、input type設置成number時maxlength屬性失效ajax

input的type設置成tel , 移動端喚起數字鍵盤，且限制長度的maxlength有效。chrome

四、jsonp跨域json

// jquery ajax
$.ajax({
    url: 'xxx',
    dataType: 'jsonp',
    type: "GET",
    // ...
});

dataType：預期服務器返回的數據類型（"jsonp": JSONP 格式。使用 JSONP 形式調用函數時，如 "myurl?callback=?" jQuery 將自動替換 ? 爲正確的函數名，以執行回調函數）

jsonp方式不支持POST方式跨域請求，就算指定成POST方式，會自動轉爲GET方式；然後端若是設置成POST方式了，那就請求不了了。

jquery-ajax方法。jsonp配置須要與服務端統一。

五、隨着HTML5的風行，<video>、<audio>多媒體標籤使得多媒體的插入更加容易，可是它們對低版本瀏覽器的支持度不夠高，html5media使得這些標籤兼容全部主流瀏覽器。

參考：https://html5media.info/

<!-- 一、在head標籤中引入html5media -->
<script src="http://api.html5media.info/1.2.2/html5media.min.js"></script>
<!-- 二、使用video或audio標籤 -->
<video src="video.mp4" width="320" height="200" controls preload></video>

六、git使用

1）查看全部本地和遠程分支：git branch -a

查看遠程分支：git branch -r

2）git checkout -b 本地分支名 origin/遠程分支名：這個將會自動建立一個新的本地分支，並與指定的遠程分支關聯起來。

git checkout -b dev origin/dev

git checkout -b test origin/dev

把遠程分支的代碼pull到本地分支：git pull <遠程主機名> <遠程分支名>:<本地分支名>

git pull( origin dev:dev)[本地分支與遠程分支同名]

git pull origin dev:test[本地分支與遠程分支不一樣名]

把本地分支的代碼push到遠程分支：git push <遠程主機名> <本地分支名>:<遠程分支名>

git push( origin dev:dev)[本地分支與遠程分支同名]

git push origin test:dev[本地分支與遠程分支不一樣名]

七、前端兼容問題

1）求滾動條垂直偏移的兼容問題

谷歌瀏覽器不支持document.body.scrollTop（圖一），edge不支持document.documentElement.scrollTop（圖二）。最後使用$(document).scrollTop()獲取文檔的滾動條垂直偏移。

八、jquery使用

存在的問題：頁面中有多個元素的id相同（不符常理，ID惟一）

<body>
    <div class="box" id="box" style="display: none;">aaa</div><!-- 起名爲a -->
    <div class="box" id="box">bbb</div><!-- 起名爲b -->
    <script src="https://cdn.bootcss.com/jquery/1.8.2/jquery.min.js"></script>
    <script>
        $('#box').click(function() {
            console.log('div clicked');
        });
    </script>
</body>

使用$('#box').click給元素綁定事件，會致使只有第一個id爲box的元素才能綁上事件（即便這個元素是隱藏的）。所以上面的例子點擊b元素控制檯沒有輸出。

使用jquery的live()方法能夠解決該問題

$('#box').live('click', function() {
    console.log('div clicked');
});

live() 方法爲被選元素附加一個或多個事件處理程序，並規定當這些事件發生時運行的函數。經過 live() 方法附加的事件處理程序適用於匹配選擇器的當前及將來的元素（好比由腳本建立的新元素）。上例經過live()綁定click事件，此時點擊b元素控制檯會輸出div clicked。

<body>
    <div class="box" id="box">bbb</div><!-- 起名爲b -->
    <script src="https://cdn.bootcss.com/jquery/1.8.2/jquery.min.js"></script>
    <script>
        $('.new-box').click(function() {
            console.log('new-box clicked');
        });
        $('#box').click(function() {
            $(this).hide();
            $('<div class="new-box">ccc</div>').appendTo('body');
        });
    </script>
</body>

上例給類名爲new-box的元素（起名爲c）綁定了click事件。運行效果爲點擊b元素，b元素自身隱藏而且往body中追加一個c元素，可是點擊c元素控制檯沒有輸出（由於c元素是新產生的元素）。

// 使用live方法綁定事件
$('.new-box').live('click', function() {
    console.log('new-box clicked');
});

運行效果爲點擊b元素，b元素自身隱藏而且往body中追加一個c元素，此時點擊c元素控制檯會輸出new-box clicked。

on() 方法在被選元素及子元素上添加一個或多個事件處理程序。自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。該方法給 API 帶來不少便利，咱們推薦使用該方法，它簡化了 jQuery 代碼庫。

注意：使用 on() 方法添加的事件處理程序適用於當前及將來的元素（好比由腳本建立的新元素）。live()方法在jquery高版本中已被移除。

// 使用on方法綁定事件（事件委託）
$('body').on('click', '.new-box', function() {
    console.log('new-box clicked');
});

九、前端兼容

1）window.innerWidth：返回窗口的文檔顯示區的寬度；window.innerheight：返回窗口的文檔顯示區的高度。IE 8 及更早 IE版本不支持這兩個屬性。

解決方案能夠使用jquery：$(window).width()、$(window).height()。

2）ie8下沒有打開控制檯時，console未定義，此時使用console會報錯。

若是打開了控制檯，ie8下也能夠使用console。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。