2015年JS摘抄

点击放大图片

<link rel="stylesheet" href="static/js/fancybox/jquery.fancybox-1.3.4.css?rev=@@hash">
<script  src="static/js/fancybox/jquery.fancybox-1.3.4.js?rev=@@hash"></script>
$(".cert-img").fancybox({
        "transitionIn": "elastic",
        "transitionOut": "elastic",
        "width":500,
        "height":300,
        "speedIn": 600,
        "speedOut": 200,
        "overlayShow": true,
        "hideOnOverlayClick": true
    });


 <li ><a href="static/img/pic/certificate/org_201407.jpg"  class="cert-img"><img src="static/img/pic/certificate/org_201407.jpg" alt="" style="width:350px; height:250px;"/></a></li>

列表字符过长处理

html += "<td title='"+rxdai.emptyToStr(one.remark)+"'> " + rxdai.subString(one.remark) + "</td>";//备注
rxdai.subString = function(result){
   if(!result)return "-";
   return result=result.length>5?result.substring(0,5)+"...":result;
  }

四舍五入

Math.round(12.4453*100)/100

live事件
jQuery在动态生成HTML元素后,如果该元素集合中有鼠标点击CLICK事件,这时点击无响应,需要用到.live()方法使生成的动态元素依然保持页面装载后的效果,使鼠标点击事件生效.

多选框

<tr><th><input type="checkbox" id="select_all"/></th>
<td><input type="checkbox" name="checkbox_item" value="12"</td>'

//全选框
   $("#select_all").live("click", function(){
      $("input[name='checkbox_item']").prop("checked", $(this).prop("checked"));
   });
   //全选按钮
   $("#selectAll").live("click", function(){
      $("#select_all").click();
   });
   //反选
   $("#invertSelect").live("click", function(){
      $("input[name='checkbox_item']").each(function(i,n){
        $(n).prop("checked", !$(n).prop("checked"));
      })
   });

var ids = [];
    $("input[name='checkbox_item']:checked").each(function(){
     ids.push($(this).val());
    });
    if(ids.length==0){
     return alert("请选择要审核的记录");
    }

数组
Array.prototype.remove = function(s) {    
   for (var i = 0; i < this.length; i++) {    
    if (s == this[i])    
     this.splice(i, 1);    
   }    
  } 
var exceptIds = []
exceptIds = [] //清除
if(exceptIds.indexOf($(this).val())==-1){ //是否包含
        exceptIds.push($(this).val());//添加
exceptIds.remove($(this).val())

列表降序升序小图标效果

<style>
table th a .arrow{width:0;height:0;margin:0 0 4px 3px;display:inline-block;overflow:hidden;border-top:5px solid #067bce;border-left:5px solid transparent;border-right:5px solid transparent;}
</style>

<th><a name='total' class='sort'>总余额<i class="arrow"></i></a></th>
<th><a name='use_money' class='sort'>可用余额<i class="arrow"></i></a></th>

$(".sort").on("click", function(){
       var $this = $(this);
    switch($this.val()){
     case "":
     case "down"://down to up
        $this.children("i").css({"border-top":"none","border-bottom":"5px solid #067bce"});
     // TODO
     break;
     case "up"://up to down
        $this.children("i").css({"border-bottom":"none","border-top":"5px solid #067bce"});
     // TODO
     break;
    }
   })

事件绑定

不推荐的写法

<button id="foo" οnclick="dosomething()">Bar</button>

缺点：这样做的结果就是html前端和js前端的工作混在了一起，原则上HTML代码只能体现网页的结构

建议写法

$(“#foo”).click(function(){});

优点：jQuery是追加绑定的，绑多少执行多少，还解决了IE的不兼容问题。

Jquery中的事件绑定方式有很多 click,live,bind,one,on…,它们之间的区别这里就不多讲了。on方法是官方推荐的绑定事件的一个方法，从性能和试用场景上来说都是很好的。

$(“#foo”).on(“click”,function(){});

高级用法，场景（在多行的表格表格中，动态添加了一行，如果想给新增的这行绑定点击事件）

$(“#table”).on(“click”,”.row”,function(){});

这里在页面初始化的时候可以给表格里面带row样式的行绑定click事件，就算row是新增的，也会添加上该click事件，即事件委托。用C#来解释：发布者会把click事件发布给所有继承row这个类的订阅者身上，即常说的发布-订阅者模式。

函数闭包

推荐使用闭包的方式封装函数，避免函数覆盖。

var PublicHandle=(function(){

/*私有变量和函数*/

var _privateVar;

var _getName=function(){

};

/*对外提供的接口*/

return{

verifyName:function(){

　　 },

　　getName:function(){

　　}

　　}

});