js技巧
1 JSON.parse()
JSON.parse()
a='{"a":"abc"}';
b='[a,b,c,d]';
a,b 都是字符串 用 JSON.parse(a) -> 得到 原来对象;
原来只知道 json 对象可以用现在知道 数组对象也可以这样用
那对于 JSON.stringify() 对于数组同样有效
2 回到顶部
结构部分
<div class="goTop hide"></div>
css部分
.goTop{
position: fixed;
top: 75%;
right: 30px;
width: 60px;
height: 60px;
background-image: url("../img/goTop.png");
background-size: cover;
cursor: pointer;
}
.hide{
display:none;
}
就是部分
$(window).scroll(function(){
if ($(this).scrollTop() > 300){
$(".goTop").removeClass("hide");
}else {
$(".goTop").addClass("hide");
}
});
$(".goTop").on("click",function(){
$("html,body").animate({scrollTop:0},1000);//回到顶端 耗时1秒
});
3 avalon过滤器的使用技巧
根据后台返回的数据 根据 自定义显示
avalon.filters.Sugar_time = function(str){
switch(str){
case "before_breakfast":
return "🍞 早餐前";
case "after_breakfast":
return "🧀 早餐后";
case "before_lunch":
return "🍚 午餐前";
case "after_lunch":
return "🍔 午餐后";
case "before_dinner":
return "🍲 晚餐前";
case "after_dinner":
return "🍜 晚餐后";
case "before_sleeping":
return "😴 睡觉前";
}
}
<span>{{el.time_interval | Sugar_time}}</span>
4 replace 正则处理字符串 数组
处理"2012-01-05"和"2013-01-01"时间早晚的问题.
var reg = new RegExp('-', 'g');
var l_t = $('#begin_date').val().replace(reg, '');
var r_t = $( '#end_date').val().replace(reg, '');
if (l_t - r_t > 0) {
layer.open({
content: "亲,开始时间 应早于 结束时间 ^_^",
type: 1,
time: 3,
className: 'mylayer',
shade: false
});
return false;
}
<script type="text/javascript">
var acss='red2 blue yellow red2 eee';
var str='red';
var str2='red2'
var reg=new RegExp('\\b'+str2+'\\b','g');
//alert(reg.test(acss))
alert(acss.replace(reg,str))
var acss='2012-12-02';
var str='-';
var str2='+';
var reg=new RegExp('\\b'+str+'\\b','g');
//alert(reg.test(acss))
alert(acss.replace(reg,''))
</script>
5 登录表单,注册表单 对不齐的解决方案
1 可以span标签设置固定的宽度,
2 也可以让容器内部元素定位的方式实现.
<p><span>同户名:</span> <input type="text" placeholder="4-15个字"></p>
<p><span>密码:</span> <input type="text" placeholder="4-15个字"></p>
<p><span>住址:</span> <input type="text" placeholder="4-15个字"></p>
避免让用户短时间之内重复点击.
//点击出发时间之后 获取到触发点.
var $btn = $(e.target);
//当点击事件发生后 立刻让点击事件 失效
$btn.prop('disabled',true);
........
........
当函数只想完毕以后 在从新让点击事件恢复.
$btn.prop('disabled',false);
