点击放大图片
<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()方法使生成的动态元素依然保持页面装载后的效果,使鼠标点击事件生效.
多选框
<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"));
})
});
$("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())
列表降序升序小图标效果
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(){
}
}
});