文章出處

★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 */

 


文章列表


不含病毒。www.avast.com
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄