javascript:alert('hello from address bar :)'); 
 
 

 
 

  
  
data:text/html,
Hello, world!
 
 
 

 
 

  
  
data:text/html,  
 
 

 
 

  
  
document.body.contentEditable='true';  
 
 

 
 

  
  
var a = document.createElement('a');  
  
  
 a.href = 'http://www.cnblogs.com/wayou/p/';  
  
  
 console.log(a.host);  
 
 

 
 

  
  
function parseURL(url) {  
  
  
    var a =  document.createElement('a');  
  
  
    a.href = url;  
  
  
    return {  
  
  
        source: url,  
  
  
        protocol: a.protocol.replace(':',''),  
  
  
        host: a.hostname,  
  
  
        port: a.port,  
  
  
        query: a.search,  
  
  
        params: (function(){  
  
  
            var ret = {},  
  
  
                seg = a.search.replace(/^\?/,'').split('&'),  
  
  
                len = seg.length, i = 0, s;  
  
  
            for (;i
  
  
                if (!seg[i]) { continue; }  
  
  
                s = seg[i].split('=');  
  
  
                ret[s[0]]= s[1];  
  
  
            }  
  
  
            return ret;  
  
  
        })(),  
  
  
        file: (a.pathname.match(/\/([^\/?#]+)$/i) || [,''])[1],  
  
  
        hash: a.hash.replace('#',''),  
  
  
        path: a.pathname.replace(/^([^\/])/,'/$1'),  
  
  
        relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [,''])[1],  
  
  
        segments: a.pathname.replace(/^\//,'').split('/')  
  
  
    };  
  
  
}  
 
 

 
 

  
  
var text = document.getElementById('template').innerHTML 
 
 

 
 

  
  
*{  
  
  
    cursor: none!important;  
  
  
}  
 
 

 
 

  
  
p {  
  
  
    color: transparent;  
  
  
    text-shadow: #111 0 0 5px;  
  
  
} 
 
 

 
 

  
  
.center-vertical {  
  
  
    position: relative;  
  
  
    top: 50%;  
  
  
    transform: translateY(-50%);  
  
  
} 
 
 

 
 

  
  
.center-horizontal {  
  
  
    position: relative;  
  
  
    left: 50%;  
  
  
    transform: translateX(-50%);   
  
  
}  
 
 

 
 

  
  
/*CSS Border with Box-Shadow Example*/ 
  
  
div {  
  
  
    box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0.2);  
  
  
    height: 200px;  
  
  
    margin: 50px auto;  
  
  
    width: 400px 
  
  
}  
 
 

 
 

  
  
 
  
  
 
  
  
     
  
  
         
  
  
            body { color: blue }  
  
  
         
  
  
     
  
  
 
 
 

 
 

  
  
 
  
  
     
  
  
        this content will have a constant aspect ratio that varies based on the width.  
  
  
    

CSS中也可以做簡單運算

通過CSS中的calc方法可以進行一些簡單的運算，從而達到動態(tài)指定元素樣式的目的。

 
 

  
  
.container{  
  
  
    background-position: calc(100% - 50px) calc(100% - 20px);  
  
  
}  
 
 

#p#

JavaScript篇

生成隨機字符串

利用Math.random和toString生成隨機字符串，來自前一陣子看到的一篇博文。這里的技巧是利用了toString方法可以接收一個基數(shù)作為參數(shù)的原理，這個基數(shù)從2到36封頂。如果不指定，默認基數(shù)是10進制。略屌！ 

 
 

  
  
function generateRandomAlphaNum(len) {  
  
  
    var rdmString = "";  
  
  
    for (; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));  
  
  
    return rdmString.substr(0, len);  
  
  
} 
 
 

整數(shù)的操作

JavaScript中是沒有整型概念的，但利用好位操作符可以輕松處理，同時獲得效率上的提升。

|0和~~是很好的一個例子，使用這兩者可以將浮點轉(zhuǎn)成整型且效率方面要比同類的parseInt,Math.round 要快。在處理像素及動畫位移等效果的時候會很有用。性能比較見此。

 
 

  
  
var foo = (12.4 / 4.13) | 0;//結(jié)果為3  
  
  
var bar = ~~(12.4 / 4.13);//結(jié)果為3 
 
 

順便說句，!!將一個值方便快速轉(zhuǎn)化為布爾值 !!window===true 。

重寫原生瀏覽器方法以實現(xiàn)新功能

下載的代碼通過重寫瀏覽器的alert讓它可以記錄彈窗的次數(shù)。

 
 

  
  
(function() {  
  
  
    var oldAlert = window.alert,  
  
  
        count = 0;  
  
  
    window.alert = function(a) {  
  
  
        count++;  
  
  
        oldAlert(a + "\n You've called alert " + count + " times now. Stop, it's evil!");  
  
  
    };  
  
  
})();  
  
  
alert("Hello World"); 
 
 

關于console的惡作劇

關于重寫原生方法，這里有個惡作劇大家可以拿去尋開心。Chrome的console.log是支持對文字添加樣式的，甚至log圖片都可以。于是可以重寫掉默認的log方法，把將要log的文字應用到CSS的模糊效果，這樣當有人試圖調(diào)用console.log()的時候，出來的是模糊不清的文字。好冷，我表示沒有笑。

是從這篇G+帖子的評論里看到的。使用之后的效果是再次調(diào)用log會輸出字跡模糊不清的文字。

 
 

  
  
var _log = console.log;  
  
  
console.log = function() {  
  
  
  _log.call(console, '%c' + [].slice.call(arguments).join(' '), 'color:transparent;text-shadow:0 0 2px rgba(0,0,0,.5);');  
  
  
};  
 
 

不聲明第三個變量的值交換

我們都知道交換兩個變量值的常規(guī)做法，那就是聲明一個中間變量來暫存。但鮮有人去挑戰(zhàn)不聲明中間變量的情況，下面的代碼給出了這種實現(xiàn)。蠻有創(chuàng)意 的。

 
 

  
  
var a=1,b=2;a=[b,b=a][0]; 
 
 

萬物皆對象

在JavaScript的世界，萬物皆對象。除了null和undefined，其他基本類型數(shù)字，字符串和布爾值都有對應有包裝對象。對象的一個特征是你可以在它身上直接調(diào)用方法。對于數(shù)字基本類型，當試圖在其身上調(diào)用toString方法會失敗，但用括號括起來后再調(diào)用就不會失敗了，內(nèi)部實現(xiàn)是用相應的包裝對象將基本類型轉(zhuǎn)為對象。所以(1).toString()相當于new Number(1).toString()。因此，你的確可以把基本類型數(shù)字，字符串，布爾等當對象使用的，只是注意語法要得體。

同時我們注意到，JavaScript中數(shù)字是不分浮點和整形的，所有數(shù)字其實均是浮點類型，只是把小數(shù)點省略了而以，比如你看到的1可以寫成1.，這也就是為什么當你試圖1.toString()時會報錯，所以正確的寫法應該是這樣：1..toString()，或者如上面所述加上括號，這里括號的作用是糾正JS解析器，不要把1后面的點當成小數(shù)點。內(nèi)部實現(xiàn)如上面所述，是將1.用包裝對象轉(zhuǎn)成對象再調(diào)用方法。

If語句的變形

當你需要寫一個if語句的時候，不妨嘗試另一種更簡便的方法，用JavaScript中的邏輯操作符來代替。

 
 

  
  
var day=(new Date).getDay()===0;  
  
  
//傳統(tǒng)if語句  
  
  
if (day) {  
  
  
    alert('Today is Sunday!');  
  
  
};  
  
  
//運用邏輯與代替if  
  
  
day&&alert('Today is Sunday!');  
 
 

比如上面的代碼，首先得到今天的日期，如果是星期天，則彈窗，否則什么也不做。我們知道邏輯操作存在短路的情況，對于邏輯與表達式，只有兩者都真才結(jié)果才為真，如果前面的day變量被判斷為假了，那么對于整個與表達式來說結(jié)果就是假，所以就不會繼續(xù)去執(zhí)行后面的alert了，如果前面day為真，則還要繼續(xù)執(zhí)行后面的代碼來確定整個表達式的真假。利用這點達到了if的效果。

對于傳統(tǒng)的if語句，如果執(zhí)行體代碼超過了1 條語句，則需要加花括號，而利用逗號表達式，可以執(zhí)行任意條代碼而不用加花括號。

 
 

  
  
if(conditoin) alert(1),alert(2),console.log(3); 
 
 

上面if語句中，如果條件成立則執(zhí)行三個操作，但我們不需要用花括號將這三句代碼括起來。當然，這是不推薦的，這里是冷知識課堂:)

禁止別人以iframe加載你的頁面

下面的代碼已經(jīng)不言自明了，沒什么好多說的。

 
 

  
  
if (window.location != window.parent.location) window.parent.location = window.location; 
 
 

console.table

Chrome專屬，IE繞道的console方法?？梢詫avaScript關聯(lián)數(shù)組以表格形式輸出到瀏覽器console，效果很驚贊，界面很美觀。

 
 

  
  
//采購情況  
  
  
var teams_data = [{'品名': '杜雷斯', '數(shù)量': 4}, {'品名': '岡本', '數(shù)量': 3}];  
  
  
console.table(teams_data); 
 
 

原文鏈接：http://www.cnblogs.com/Wayou/p/things_you_dont_know_about_frontend.html