1. 如何在显示蒙版时禁止触屏滚动

    function preventScroll(e){ e.preventDefault(); }
    $('body').on('touchmove', preventScroll);
    $('body').off('touchmove', preventScroll);

2. 计算 hash

    String.prototype.hashCode = function() {
        var hash = 0, i, chr, len;
        if (this.length == 0) return hash;
        for (i = 0, len = this.length; i < len; i++) {
            chr   = this.charCodeAt(i);
            hash  = ((hash << 5) - hash) + chr;
            hash |= 0; // Convert to 32bit integer
        }
        return hash;
    };

3. 获取远程图像的 base_64 字符串（序列化图像）

但是这样做的话绝大部分情况下会有权限问题（跨站了）

    function imgstr(url) {
        var img = new Image();
        img.src = url;
        var canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0);
        return canvas.toDataURL('image/png');
    };

4. 去除点击时出现的蓝色背景：

.selector {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

5. 可编辑 div (类似 textarea 的效果)

http://stackoverflow.com/questions/20726174/placeholder-for-contenteditable-div

关键在于这样用的时候内部的 Html 是可解析的，例如表情

<div class="test" placeholder="Type something..." contenteditable="true"></div>

6.可以通过下面这个来模拟 placeholder 的效果：

.test[placeholder]:empty:before {
    content: attr(placeholder);
    color: #555; 
}

7. 对 contenteditable 属性的标签 change 事件处理

$('body').on('focus', '[contenteditable]', function() {
    var $this = $(this);
    $this.data('before', $this.html());
    return $this;
}).on('blur keyup paste input', '[contenteditable]', function() {
    var $this = $(this);
    if ($this.data('before') !== $this.html()) {
        $this.data('before', $this.html());
        $this.trigger('change');
    }
    return $this;
});

8. javascript utf8 字符串字节长

function byteCount(s) {
    return encodeURI(s).split(/%..|./).length - 1;
}

9. 解码 html encode

    html_decode = function(encoded_text) {
        return $("<div/>").html(encoded_text).text()
    };
    html_encode = function(encoded_text) {
        return $("<div/>").text(encoded_text).html()
    };

10. 选择一个 input 的范围（涂黑），仅限于 input 和 textarea

http://stackoverflow.com/q/499126/2544762

$.fn.selectRange = function(start, end) {
    if(!end) end = start;
    return this.each(function() {
        if (this.setSelectionRange) {
            this.focus();
            this.setSelectionRange(start, end);
        } else if (this.createTextRange) {
            var range = this.createTextRange();
            range.collapse(true);
            range.moveEnd('character', end);
            range.moveStart('character', start);
            range.select();
        }
    });
};

11. 涂黑整个元素的内容（任意元素）：

http://stackoverflow.com/q/985272/2544762

function SelectText(element) {
    var doc = document
        , text = element
        , range, selection
    ;
    if (doc.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    } else if (window.getSelection) {
        selection = window.getSelection();
        range = document.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
    }
}

12. 客户端使用 $_GET

// 解析 querystring 参数，放在 $.request.get 里面
(function() {
    var url = location.search; // 获取url中"?"符后的字串
    var objGet = {};
    if (url.indexOf("?") != -1) {
        var str = url.substr(1);
        var segment = str.split("&");
        for(var i = 0; i < segment.length; i ++) {
            objGet[segment[i].split("=")[0]] = decodeURI(segment[i].split("=")[1]);
        }
    }
    $.request = { get: objGet };
})();

---

【转载请附】愿以此功德，回向 >>

原文链接：http://www.huangwenchao.com.cn/2014/07/frontend-note.html【移动前端布局经验笔记】