前端踩过的坑

-----------------------------------------JS-------------------------------------------

1、checkbox全选和反选时，用jquery的attr代码会出错：

$(":checkbox").attr("checked","checked");
$(":checkbox").removeAttr("checked");

原因：checked属性即分为attribute->checked，和property->true,false。

　　   对于一个checkbox，若未定义checked="checked"，alert($.attr("checked")) 的结果是undefined。若已定义则结果是checked。attribute并不随着checkbox的状态变化而改变。

　　   使用prop($.attr("checked"))的话输出则分别为false和true。property则随其变化而变化。

所以要改为

  $(":checkbox").prop("checked",false);
  $(":checkbox").prop("checked",true);

参考：jQuery中attr()和prop()在修改checked属性时的区别

2、js判断IE版本

function IETester(userAgent){
    var UA =  userAgent || navigator.userAgent;
    if(/msie/i.test(UA)){
        return UA.match(/msie (d+.d+)/i)[1];
    }else if(~UA.toLowerCase().indexOf('trident') && ~UA.indexOf('rv')){
        return UA.match(/rv:(d+.d+)/)[1];
    }
    return false;
}
IETester();//不传参数返回当前IE版本，如果不是IE内核浏览器，返回false   如果为IE11  返回"11.0"
IETester('Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; rv:11.0) like Gecko');//传userAgent字符串，用来判断其他IE浏览器的版本,该示例返回11.0

判断是否为IE
  if (!!window.ActiveXObject || "ActiveXObject" in window) is IE;

　　else not IE;

3、在js中重新载入js文件

function is_load_js(path)
{
     var e; if(e=document.getElementById("dusk")) e.parentNode.removeChild(e);
     var script= document.createElement("SCRIPT"); script.defer = true;
     script.type="text/javascript"; script.src=path; script.id="dusk";
     document.getElementsByTagName("HEAD")[0].appendChild(script);
}

 4、angular 获取$scope对象

var appElement = document.querySelector('[ng-controller=UserContractCtrl]');
var $scope = angular.element(appElement).scope();

5、JavaScript高级程序设计第三版给的检测浏览器 引擎 操作系统的js代码

var client = function(){

    //rendering engines
    var engine = {            
        ie: 0,
        gecko: 0,
        webkit: 0,
        khtml: 0,
        opera: 0,

        //complete version
        ver: null  
    };
    
    //browsers
    var browser = {
        
        //browsers
        ie: 0,
        firefox: 0,
        safari: 0,
        konq: 0,
        opera: 0,
        chrome: 0,

        //specific version
        ver: null
    };

    
    //platform/device/OS
    var system = {
        win: false,
        mac: false,
        x11: false,
        
        //mobile devices
        iphone: false,
        ipod: false,
        ipad: false,
        ios: false,
        android: false,
        nokiaN: false,
        winMobile: false,
        
        //game systems
        wii: false,
        ps: false 
    };    

    //detect rendering engines/browsers
    var ua = navigator.userAgent;    
    if (window.opera){
        engine.ver = browser.ver = window.opera.version();
        engine.opera = browser.opera = parseFloat(engine.ver);
    } else if (/AppleWebKit/(S+)/.test(ua)){
        engine.ver = RegExp["$1"];
        engine.webkit = parseFloat(engine.ver);
        
        //figure out if it's Chrome or Safari
        if (/Chrome/(S+)/.test(ua)){
            browser.ver = RegExp["$1"];
            browser.chrome = parseFloat(browser.ver);
        } else if (/Version/(S+)/.test(ua)){
            browser.ver = RegExp["$1"];
            browser.safari = parseFloat(browser.ver);
        } else {
            //approximate version
            var safariVersion = 1;
            if (engine.webkit < 100){
                safariVersion = 1;
            } else if (engine.webkit < 312){
                safariVersion = 1.2;
            } else if (engine.webkit < 412){
                safariVersion = 1.3;
            } else {
                safariVersion = 2;
            }   
            
            browser.safari = browser.ver = safariVersion;        
        }
    } else if (/KHTML/(S+)/.test(ua) || /Konqueror/([^;]+)/.test(ua)){
        engine.ver = browser.ver = RegExp["$1"];
        engine.khtml = browser.konq = parseFloat(engine.ver);
    } else if (/rv:([^)]+)) Gecko/d{8}/.test(ua)){    
        engine.ver = RegExp["$1"];
        engine.gecko = parseFloat(engine.ver);
        
        //determine if it's Firefox
        if (/Firefox/(S+)/.test(ua)){
            browser.ver = RegExp["$1"];
            browser.firefox = parseFloat(browser.ver);
        }
    } else if (/MSIE ([^;]+)/.test(ua)){    
        engine.ver = browser.ver = RegExp["$1"];
        engine.ie = browser.ie = parseFloat(engine.ver);
    }
    
    //detect browsers
    browser.ie = engine.ie;
    browser.opera = engine.opera;
    

    //detect platform
    var p = navigator.platform;
    system.win = p.indexOf("Win") == 0;
    system.mac = p.indexOf("Mac") == 0;
    system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);

    //detect windows operating systems
    if (system.win){
        if (/Win(?:dows )?([^do]{2})s?(d+.d+)?/.test(ua)){
            if (RegExp["$1"] == "NT"){
                switch(RegExp["$2"]){
                    case "5.0":
                        system.win = "2000";
                        break;
                    case "5.1":
                        system.win = "XP";
                        break;
                    case "6.0":
                        system.win = "Vista";
                        break;
                    case "6.1":
                        system.win = "7";
                        break;
                    default:
                        system.win = "NT";
                        break;                
                }                            
            } else if (RegExp["$1"] == "9x"){
                system.win = "ME";
            } else {
                system.win = RegExp["$1"];
            }
        }
    }
    
    //mobile devices
    system.iphone = ua.indexOf("iPhone") > -1;
    system.ipod = ua.indexOf("iPod") > -1;
    system.ipad = ua.indexOf("iPad") > -1;
    system.nokiaN = ua.indexOf("NokiaN") > -1;
    
    //windows mobile
    if (system.win == "CE"){
        system.winMobile = system.win;
    } else if (system.win == "Ph"){
        if(/Windows Phone OS (d+.d+)/.test(ua)){;
            system.win = "Phone";
            system.winMobile = parseFloat(RegExp["$1"]);
        }
    }
    
    
    //determine iOS version
    if (system.mac && ua.indexOf("Mobile") > -1){
        if (/CPU (?:iPhone )?OS (d+_d+)/.test(ua)){
            system.ios = parseFloat(RegExp.$1.replace("_", "."));
        } else {
            system.ios = 2;  //can't really detect - so guess
        }
    }
    
    //determine Android version
    if (/Android (d+.d+)/.test(ua)){
        system.android = parseFloat(RegExp.$1);
    }
    
    //gaming systems
    system.wii = ua.indexOf("Wii") > -1;
    system.ps = /playstation/i.test(ua);
    
    //return it
    return {
        engine:     engine,
        browser:    browser,
        system:     system        
    };

}();

 6、根据给定的条件在原有的数组上，得到所需要的新数组

var a = [-1, -1, 1, 2, -2, -2, -3, -3, 3, -3];
function f(s, e) {
    var ret = [];
    for (var i in s) { // 根据原有的数组长度进行循环
        ret.push(e(s[i]));
    }
    return ret;
}
f(a, function(n) {
    return n > 0 ? n : 0
}); // 传输一个匿名函数作为逻辑判断

7、比原生type或typeof更详细的类型监测方法

function type(p) {
    /function.(w*)()/.test(p.constructor); //通过其构造函数来获取对应的类型。
    return RegExp.$1;
}

8、对象或数组的深拷贝，用于解决对象引用时值一改全改的问题

var copyObject = function(obj) {
    var result = {};
    for (var x in obj) {
        result[x] = typeof obj === "object" ? copyObject(obj[x]) : obj[x]
        //如果拷贝的值仍然是一个对象,那么重复执行当前方法。
    }　　
    return result;
}

9、通过正则表达式来获取Cookie的值

function getCookie(name) {
    if (name && RegExp("(^| )" + name + "=([^;]*)(;|$)").exec(document.cookie)) return RegExp.$2;
    // (^| ) 不匹配第一个空格。
    // ([^;]*) 只匹配除了;号之外的所有字符。
    // (;|$) 匹配以;号或$为结尾的字符。
}

10、通过移位运算来替代”parseInt”

~~3.14 = > 3;
// ~~ 取整。~取当前数值的反码,~~表示再次取反，也就是得到当前自身（说明，JS中的“位”运算会将数值自动转换为整数）

11、将数值转换为16进制的字符串（常用于表示色彩）

(~~ (Math.random() * (1 << 24))).toString(16)
// ~~ 通过位运算来取整。
// << 左移位。将1的二进制数左移24位。而1<<24 == 2^24(RGB模式下最多可表示的色彩数量)
// toString(16) 将数值转换为16进制的字符串输出。

12、对象方法的兼容性检查

if ('querySelector' in document) {}

13、NodeList || HTMLCollection || Object转换为Array或具有Array的方法

//NodeList: 是指通过集合方法获得到的DOM节点列表，例如：document.getElementsByTagNmae,document.forms…等方法。
//HTMLCollection: HTML块，它与NodeList很像，但是NodeList只支持数字索引，而HTMLCollection可以支持名称作为索引。
//NodeList与HTMLCollection都具有以下类似： 具有数组的外观，但没有数组的方法 、具有length属性、支持索引来读取内容
function makeArray(obj) {
    var rs = [],
        len = obj.length;
    try {
        rs = [].slice.call(obj, 0);
    } catch (e) { //for IE
        for (var i = 0; j = obj[i++];) {
            rs.push(j);
        }
    }
    return rs;
}

14、正则匹配清除两侧空格

var trim = function(v){
    var patrn = /^s*(.*?)s+$/;
    return (patrn.test(v))? RegExp.$1 : '
    null ';
}

15、 时间格式化

function dateFormat(t){        // t 是以秒为单位的值。
    var h = ~~(t/3600),        // t除以3600，取整，得到的就是小时。
        m = ~~(t%3600/60),    // t求余3600，取模，得到的就是去除小时剩下的秒数（分钟 + 秒），再除以60，取整，得到的就是分钟。
        s = ~~(t%3600%60);    // t求余3600，再求余60，剩下的自然就是“秒数”。
 
     return h+'小时'+m+'分'+s+'秒';
}

--------------------------------------CSS---------------------------------------------

1、据说是最好的清除浮动的方法，不添加任何元素

.clearfix:after {
    clear: both;
    content: ' ';
    display: block;
    font-size: 0;
    line-height: 0;
    visibility: hidden;
     0;
    height: 0;
}

2、checkbox 不与说明文字对齐

　　解决方法：1、vertical-align:top || middle;

　　　　　　　2、vertical-align:-3px;

3、 微软雅黑英文名字： Microsoft Yahei   ||    5FAE8F6F96C59ED1

----------------------------------Bootstrap-------------------------------------------

1、使用bootstrap的模态框的时候，点击模态框旁边总是自动关闭，后来细看文档，发现是没修改backdrop属性。


修改backdrop属性有两种方法：

　　（1）在模态框上用data-backdrop来实现

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"  data-backdrop="static">

　　（2）用js控制

$('#myModal').modal({
  backdrop: 'static'
})

2、使用bootstrap时，写手机页面，页面不缩放，还是1000+px的宽度。

　  原因：没加meta viewport

 <meta name="viewport" content="width=device-width, initial-scale=1">

-----------------------------------杂---------------------------------------------

1、让IE以最高版本执行

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