前端一招鲜，实用

一、字符串过长，需要用省略号代替超出长度的那串？

之前一直是用vm在判断字符串个数来做，虽然可以实现，但是体验不好，因为中文和英文的长度不一样，这时候如果用样式来控制的话，就不存在这些问题了：

.ellipsis{
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
}

这样只要再加上你想控制的长度样式，就可以实现这个简单的小功能啦~

二、自动换行

一般情况下，元素拥有默认的white-space:normal（自动换行，PS：不换行是white-space:nowrap）,当录入的文字超过定义的宽度后会自动换行，但当录入的数据是一堆没有空格的字符或字母或数字（常规数据应该不会有吧，但有些测试人员是会这样子做的），超过容器宽度时就会把容器撑大，不换行。

解决方法（以IE，chrome,FF为测试浏览器）：

{
　　word-break:break-all; /*支持IE，chrome，FF不支持*/
　　word-wrap:break-word;/*支持IE，chrome，FF*/
}

三、发送ajax请求，你要缓存吗？

如果客户端在请求一个文件的时候，发现自己缓存的文件有 Last Modified ，那么在请求中会包含 If Modified Since ，这个时间就是缓存文件的 Last Modified 。因此，如果请求中包含 If Modified Since，就说明已经有缓存在客户端。只要判断这个时间和当前请求的文件的修改时间就可以确定是返回 304 还是 200 。对于静态文件，例如：CSS、图片，服务器会自动完成 Last Modified 和 If Modified Since 的比较，完成缓存或者更新。

所以我们发送ajax请求的时候也要注意，如果你不希望走缓存的，记得加上cache:false，如：

$.ajax({
       url:Bing.serverData.urls.addProductQuotation,
       data:{
           'supplyNoteItemId':supplyNoteItemId
       },
       cache:false,
       dataType:'json'
}).done(function(res) {
......
)};

四、单选按钮的绑定事件

不要给单选按钮radio绑定click事件，浏览器兼容问题很蛋疼，调了一天的样式和JS得出的惨痛教训啊！要绑请绑change～

五、window.location

属性 描述
hash ：设置或获取 href 属性中在井号“#”后面的分段。
host ： 设置或获取 location 或 URL 的 hostname 和 port 号码。
hostname ：设置或获取 location 或 URL 的主机名称部分。
href ：设置或获取整个 URL 为字符串。
pathname ：设置或获取对象指定的文件名或路径。
port ：设置或获取与 URL 关联的端口号码。
protocol ：设置或获取 URL 的协议部分。
search ：设置或获取 href 属性中跟在问号后面的部分。

六、控制输入框只能输入数字

方法1：不让用户输入除数字以外的其他内容

$.fn.numeral=function(bl){//限制金额输入、兼容浏览器、屏蔽粘贴拖拽等
         $(this).keypress(function(e){
            var keyCode=e.keyCode?e.keyCode:e.which;
            if(bl){//浮点数
              if((this.value.length==0 || this.value.indexOf(".")!=-1) && keyCode==46) return false;
              return keyCode>=48&&keyCode<=57||keyCode==46||keyCode==8;
            }else{//整数
              return  keyCode>=48&&keyCode<=57||keyCode==8;
            }
         });
         $(this).bind("copy cut paste", function (e) { // 通过空格连续添加复制、剪切、粘贴事件
              if (window.Clipboard)//clipboardData.setData('text', clipboardData.getData('text').replace(/\D/g, ''));
                  return !Clipboard.getData('text').match(/\D/);
              else
                  event.preventDefault();
         });
         $(this).bind("dragenter",function(){return false;});
         $(this).css("ime-mode","disabled");
         $(this).bind("focus", function() {  
            if (this.value.lastIndexOf(".") == (this.value.length - 1)) {  
                this.value = this.value.substr(0, this.value.length - 1);
            } else if (isNaN(this.value)) {  
                this.value = "";  
            }  
        });  
    }

使用：$('#input-text').numeral(false);

方法2：输入之后判断是否是数字，如果不是，将内容全部清空

	    $('#input-text').keydown(function(event){　　　
                if ($.browser.msie){  // 判断浏览器
                   if ( ((event.keyCode > 47) && (event.keyCode < 58)) || (event.keyCode == 8) || (event.keyCode == 86)) { 　// 判断键值
                       return true;
                   } else {
                       return false;
                   }
                }else{
                   if( ((event.which > 47) && (event.which < 58)) || (event.which == 8) || (event.which == 86) ) {
                       return true;
                   } else{
                       return false;
                   }
                }
            }).focus(function(){
                this.style.imeMode='disabled';
        　　 }).bind("paste",function(){
            
            }).keyup(function(e){
                 var _v= $("#input-text").val();
                 for(var _i=0;_i<_v.length;_i++){
                     var _c=_v.charAt(_i);
                     if(isNaN(_c)){
                          $("#input-text").val("");
                          return;
                     }
                 }
            });