前端一招鲜，实用

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

之前一直是用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;                     }                 }            });