jq常用功能操作

 

//表示所有选中的商品
var $goods=$(".goods:checked");
var arr=[];
for(i=0;i<$goods.length;i++){
arr.push($goods.eq(i).id); //取出所有选中商品的id，这里是用eq(i)来读取选中的第几个元素！
}

$.ajax({
url:'login',
type:"post",
data:{id:arr},
success: function(res){

},
error: function(){
$.alert('出错啦！');
flag = true;
}
})

 

2、走马灯滚动

px单位的时候

方法一：

html：
<div class="list">
      <ul>
            <li></li>
             <li></li>
      </ul>
</div>



//滚动
$(function(){
     setInterval(function() {
      scrollList(".list");
     }, 3000);
});


    function scrollList(obj) {
        var parent = $(obj).find("ul");
        if(parent.find("li").length > 5) {
            parent.animate({  
                marginTop : "-1.05rem"  //单位可修改成px
            },800,function(){  
                parent.css({marginTop : "0"}).find("li:first").appendTo(this);  
            }) 
        }
    }

缺点：一直在进行dom操作，很耗性能，在有些页面下，ios滑动会出现闪屏！！！

方法二：

html：
 <div class="list" id="demo">
                <ul id="demo1">
                    <foreach name="none_list" item="vo" >
                        <li class="flexbox">
                            <div class="flexchild ellipsis">{$vo.nickname}</div>
                            <div class="flexchild">{$vo.join_num}</div>
                            <div class="flexchild ellipsis">{$vo.pro_name}</div>
                        </li>
                    </foreach>
                </ul>
                <ul id="demo2"></ul>
            </div>

js：
$(function(){
        var demo = document.getElementById("demo");
        var demo1 = document.getElementById("demo1");
        var demo2 = document.getElementById("demo2");
        var speed = 3000; //数值越大滚动速度越慢  
        demo2.innerHTML = demo1.innerHTML;

        demo.scrollTop = demo.scrollHeight + 'px';

        function Marquee() {
            if(demo2.offsetTop - demo.scrollTop <= 0) //当滚动至demo1与demo2交界时  
                $(demo).animate({
                    scrollTop: demo.scrollTop-demo1.offsetHeight
                }, 600);
            else {
                $(demo).animate({
                    scrollTop: demo.scrollTop + 53
                }, 800);
            }
        }
        if($("#demo1 li").length > 4) {
            setInterval(Marquee, speed);
        }

});

其中53为li的高度，li标签用直接设置高度，不要设置padding值撑开，不会滚动的时候，不会每次都滚动一条li值。

rem单位的时候js代码如下：：

var demo = document.getElementById("demo");
    var demo1 = document.getElementById("demo1");
    var demo2 = document.getElementById("demo2");
    var speed = 3000; //数值越大滚动速度越慢  
    demo2.innerHTML = demo1.innerHTML;


    demo.scrollTop = demo.scrollHeight;
    demo.scrollTop = demo.scrollHeight;    
    function Marquee() {
        if(demo2.offsetTop - demo.scrollTop <= 0) //当滚动至              demo1与demo2交界时  
            $(demo).animate({
                scrollTop:0  //使用rem单位的时候
            }, 600);
        else {
            $(demo).animate({
                scrollTop:demo.scrollTop + window.innerWidth/750*105   //使用rem单位的时候进行适配
//                scrollTop: demo.scrollTop + 1.05 + "rem"
            }, 800);
            
            console.log(demo.scrollTop+"demo.scrollHeight"+ demo.scrollTop + window.innerWidth/750*105 )
        }
    }
    if($("#demo1 li").length > 5) {
        setInterval(Marquee, speed);
    }
    
    });    

 方法3

 

<div class="lunb-box">

<div class="lun-title">看大家的运气</div>

  <div class="lunb-list">
    <ul>
       <li class="flexbox flexbox-middle">
           <div class="photo"><img src="../../../Public/src/activity/2018/5yue1wan/images/photo.png?v={$v}" /></div>
           <div class="name ellipsis">昵称五个字你好么导航</div>
           <div class="time">3秒钟前</div>
           <div class="money">获得1.000元红包</div>
       </li>
   </ul>
 </div>
</div>

.lunb-box {
position: relative;
width: 7.5rem;
height: 5.5rem;
background: url("../images/lunb-bg.png") no-repeat;
background-size: 100% 100%;
margin-top: .18rem;
padding: 1rem .1rem .9rem .5rem;
box-sizing: border-box;
overflow: hidden;
font-size: .3rem;
}
.lunb-list {
height: 4.35rem;
overflow: hidden;

}
.lunb-list li {
height: .9rem;
}
.lunb-list .photo {
width:.6rem;
height: .6rem;
border-radius:50% ;
overflow: hidden;
}
.lunb-list .photo img {
width: 100%;
}
.lunb-list .name {
width:1.85rem;
margin:0 .22rem 0 .17rem;
}
.lunb-list .time{
width: 1.3rem;
margin-right: .2rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lunb-list .money{
color: #d84545;
width: 2.5rem;
}

//轮播
var startRollOne=setInterval(lunbo,2000);
function lunbo(){
$(".lunb-list ul").animate({marginTop:"-.9rem"},800,"linear",function(){
$(this).children("li").first().remove().clone(true).appendTo(".lunb-list ul");
$(this).css("margin-top","0rem");
});
}

 注意：滚动的最外层需要设置高度然后overflow:hidden;否则在ios下面滑动页面的时候会抽搐！！！

 

 

3.关于头部导航栏返回上一级问题，使用history.back()页面不刷新问题，使用document.referrer是获取上一页的url来解决

使用href="javascript:history.back()" 那么页面不会刷新，js、ajax不会重新请求，但是有时候返回上一级页面的时候，需要刷新页面重新获取数据那么就要使用self.location=document.referrer;来返回上一级页面并刷新！！！

方法一，不刷新页面

history.back(-1):直接返回当前页的上一页，数据全部消息，是个新页面

history.go(-1):也是返回当前页的上一页，不过表单里的数据全部还在

    <header class="header flexbox flexbox-middle person-header">
        <a href="javascript:history.back()" id="hrefLogin" class="icon icon-comeback block" title="返回"></a>
        <h1 class="flexchild ellipsis">详情</h1>
    </header>

方法二，返回上一页面并刷新

<a href="javascript:" onclick="self.location=document.referrer;">返回上一页并刷新</a>

4.点击图片的时候，禁止图片显示<img onClick='return false'>

4、实现向上滚动跟向下滚动展示不同的显示效果

思路：通过对比每次滚动前后的scrollTop距离之差

        $(document).ready(function(){
            var scrollp=0,scrollt=10;
    
            $(".content").on('scroll',function(){
                scrollp = $(this).scrollTop();
                if(scrollt<=scrollp){
                    console.log('下滚');
                    $('.activate_show img').addClass('imgchange');
                    setTimeout("$('.activate_show img').removeClass('imgchange')",2000);
                }else{
                    console.log('上滚');
                    $('.activate_show img').addClass('imgchange');
                    setTimeout("$('.activate_show img').removeClass('imgchange')",2000);
                }
//                setTimeout(function(){scrollt = scrollp;},0);
                scrollt = scrollp;
            });
        }); 


通过坐标判断距离

var startX,startY,endX,endY,X,Y;
$('.content').on('touchstart',function(e){
var touch=e.originalEvent.targetTouches[0];
startX=touch.pageX;
startY=touch.pageY;
}).on('touchend',function(e){
var touch = e.originalEvent.changedTouches[0];
endX=touch.pageX;
endY=touch.pageY;
X=endX-startX;
Y=endY-startY;
console.log(Y)
if(Y>50){
$('.activate_show img').addClass('slideInRight').removeClass('slideInRight1')
setTimeout("$('.activate_show img').addClass('slideInRight1').removeClass('slideInRight')",1500);
}else if (Y<-50) {
$('.activate_show img').addClass('slideInRight').removeClass('slideInRight1')
setTimeout("$('.activate_show img').addClass('slideInRight1').removeClass('slideInRight')",1500);
}else {
$('.activate_show img').removeClass('slideInRight').removeClass('slideInRight1')
}
})

5、实现每次页面进来都弹出领红包弹窗 

方法：使用sessionStorage

默认div是展示，点击关闭按钮的时候，设置sessionStorage.setItem("popPacket", 1);如果页面存在这个属性，那么就关闭这个弹窗！

if (sessionStorage.getItem("popPacket")){
    $(".red-packet-dialog").hide();
}else {
    $(".red-packet-dialog").show();
    $(".is_no").hide();
}

 6、倒计时功能实现

在移动端中要保持时间格式是2018/1/31 18:31:00，不然ios下不识别会报错，当纯前端处理时

//获取开始时间
// var date = new Date();
//// var now = date.getTime();
// var nowDate = new Date(nowTime);
// var now = nowDate.getTime();
// //设置截止时间
// var endDate = new Date(endTime);
// var end = endDate.getTime();
// //时间差
// var leftTime = end-now;

    //倒计时
    var time1 = "{$rest_time}";//1天=86400秒
    var times = parseInt(time1);
    countDown(times);
    function countDown(times){
        var timer=null;
        timer=setInterval(function(){
            var day=0,
                hour=0,
                minute=0,
                second=0;//时间默认值
            if(times > 0){
                day = Math.floor(times / (60 * 60 * 24)) ;
                hour = Math.floor(times / (60 * 60)) - (day * 24);
                minute = Math.floor(times / 60) - (day * 24 * 60 ) - (hour * 60);
                second = Math.floor(times) - (day * 60 * 60 * 24) - (hour * 60 * 60) - (minute * 60);
            }
            if (day <= 9) {day = '0' + day;}
            if (hour <= 9) {hour = '0' + hour;}
            if (minute <= 9){ minute = '0' + minute;}
            if (second <= 9) {second = '0' + second;}
            //
//        console.log(hour+"小时："+minute+"分钟："+second+"秒");
            $(".day").html(day);
            $(".hour").html(hour);
            $(".min").html(minute)
            $(".sec").html(second)
            times--;
            if(times<=-1){
                clearInterval(timer);
            }
        },1000);
    }

7、简单日历制作

html：

    <!--日历制作-->
    <div id="calendar">
       <h4>2013年10月</h4>
       <a href="##" rel="external nofollow" rel="external nofollow" class="a1">上月</a>
       <a href="##" rel="external nofollow" rel="external nofollow" class="a2">下月</a>
       <ul class="week">
            <li>日</li>
            <li>一</li>
            <li>二</li>
            <li>三</li>
            <li>四</li>
            <li>五</li>
            <li>六</li>     
       </ul>
       <ul class="dateList"></ul>
    </div>

css：

   * {margin: 0;padding: 0}
   #calendar {width: 210px;margin: 100px auto;overflow: hidden;border: 1px solid #000;padding: 20px;position: relative}
   #calendar h4 {text-align: center;margin-bottom: 10px}
   #calendar .a1 {position: absolute;top: 20px;left: 20px;}
   #calendar .a2 {position: absolute;top: 20px;right: 20px;}
   #calendar .week {height: 30px;line-height: 20px;border-bottom: 1px solid #000;margin-bottom: 10px}
   #calendar .week li {float: left;width: 30px;height: 30px;text-align: center;list-style: none;}
   #calendar .dateList {overflow: hidden;clear: both}
   #calendar .dateList li {float: left;width: 30px;height: 30px;text-align: center;line-height: 30px;list-style: none;}
   #calendar .dateList .ccc {color: #ccc;}
   #calendar .dateList .red {background: #F90;color: #fff;}
   #calendar .dateList .sun {color: #f00;}

js：

$(function() {
 
    //必要的数据
    //今天的年 月 日 ；本月的总天数；本月第一天是周几？？？
    var iNow=0;
     
    function run(n) {
     
         var oDate = new Date(); //定义时间
         oDate.setMonth(oDate.getMonth()+n);//设置月份
         var year = oDate.getFullYear(); //年
         var month = oDate.getMonth(); //月
         var today = oDate.getDate(); //日
     
         //计算本月有多少天
         var allDay = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
     
         //判断闰年
         if(month == 1) {
          if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
           allDay = 29;
          }
         }
     
         //判断本月第一天是星期几
         oDate.setDate(1); //时间调整到本月第一天
         var week = oDate.getDay(); //读取本月第一天是星期几
     
         //console.log(week);
         $(".dateList").empty();//每个月对应的不同，要每次清空
         
         //插入空白     
         for(var i = 0; i < week; i++) {
          $(".dateList").append("<li></li>");
         }
     
         //日期插入到dateList
         for(var i = 1; i <= allDay; i++) {
          $(".dateList").append("<li>" + i + "</li>")
         }
         //标记颜色=====================
         $(".dateList li").each(function(i, elm){
              //console.log(index,elm);
              var val = $(this).text();
              //console.log(val);
              if (n==0) {
                   if(val<today){
                   $(this).addClass('ccc')
                  }else if(val==today){
                   $(this).addClass('red')
                  }else if(i%7==0 || i%7==6 ){
                   $(this).addClass('sun')
                  }
              }else if(n<0){
               $(this).addClass('ccc')
              }else if(i%7==0 || i%7==6 ){
               $(this).addClass('sun')
              }
         });
     
         //定义标题日期
         $("#calendar h4").text(year + "年" + (month + 1) + "月");
        };
        run(0);
         
        $(".a1").click(function(){
         iNow--;
         run(iNow);
        });
         
        $(".a2").click(function(){
         iNow++;
         run(iNow);
        })
   });

 

 8、强制保留两位小数如：8，会在2后面补上00.即8.00   

function toDecimal2(x) {   
      var f = parseFloat(x);   
      if (isNaN(f)) {   
        return false;   
      }   
      var f = Math.round(x*100)/100;   
      var s = f.toString();   
      var rs = s.indexOf('.');   
      if (rs < 0) {   
        rs = s.length;   
        s += '.';   
      }   
      while (s.length <= rs + 2) {   
        s += '0';   
      }   
      return s;   
}

 九、对应动态添加的元素绑定事件时，需要进行事件委托

例如downctn元素是通过ajax获取渲染来的，那么这个时候，就需要委托不是通过ajax渲染出来的父级元素，进行事件委托，执行点击事件！！！

$(".security").on("click", ".downctn", function() {})

 

十、滚动模拟上拉加载

 //上滑加载
 $(window).scroll(function() {
     var winH = $(window).height();
     var scrH = $(window).scrollTop();
     var htmH = $(document).height()- $("header").height();
     if(winH + scrH >= htmH) {
        page++;
        getProduct();
     }
})