積累的一些程式碼片段/小知識

呂大豹發表於2014-08-07

★jQuery1.7.2下操作object元素報錯

jQuery1.7.2下，用$選擇器操作object元素會報錯：程式碼如下：

$('object').hide();

換用原生js就沒事了：

document.getElementsByTagName('object')[0].style.display = 'none';

 

★關閉按鈕小叉的字型

做一個簡單的關閉按鈕時，我們經常用字母X來實現，為了讓它看上去更像一個叉，可設定字型為：

font-family: “Microsoft JhengHei”,”microsoft yahei”,Monaco,Menlo,Consolas,”Courier New”,monospace;

 

★this 的值是在函式執行時確定的

<button id="btn1">button1</button>
<button id="btn2">button2</button>
var obj = {
    init : function(){
        $('#btn1').click(this.alert);
    },
    init2 : function(){
        var _this = this;
        $('#btn2').click(function(){
            _this.alert();
        });
    },
    alert : function(){
        alert(this);
    }
}
         
obj.init();
obj.init2();

 

★使用正則實現數字千分位分割

不帶小數點的：

"15000000".split("").reverse().join("").replace(/(\d{3})/g, "$1,").split("").reverse().join("");

帶小數點的：

'123123211312.333123'.replace(/(?=(?!^)(?:\d{3})+(?:\.|$))(\d{3}(\.\d+$)?)/g,',$1');

 

★背景半透明，內容不透明的寫法

<div><p>不透明</p></div>
div{background:rgba(0,0,0,0.2) none repeat scroll !important; /*實現FF背景透明，文字不透明*/
background:#000; filter:Alpha(opacity=20);/*實現IE背景透明*/
width:500px; height:500px; color:#F30; font-size:32px; font-weight:bold;}
div p{ position:relative;}/*實現IE文字不透明*/

火狐我們直接用rgba顏色就可以解決子標籤跟著半透明的問題了，但是ie還不是能很好的支援。

所以我們給不想被透明的標籤設定一個定位屬性，問題接能解決了。

 

★為div元素觸發keydown事件

div元素無法觸發keydown的原因是圖無法被focus，處理的方式是給div加上屬性tabindex就可以了。tabindex的取值為整數，表示按tab鍵的時候元素獲得焦點的順序。當取值為-1時，按tab無法獲得焦點，但可以用js程式碼來focus和blur，同時，還是可以觸發keydown事件的。

所以要讓div能觸發keydown事件，只需如下程式碼：

<div tabindex="-1">hello world !</div>

加此屬性後div會有高亮外框出現，加outline:none;可解決。

 

★查詢url中的引數

function getParameterByName(name) {
    var match = RegExp('[?&]' + name + '=([^&]*)')
                    .exec(window.location.search);
    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}

 

★移動端，繫結了click事件的元素在點選時會出現亮框，下面的程式碼可以去掉：

-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent; /* For some Androids */

 

相關文章