jQuery 的方法

首先，首先一定要引入<script type="text/javascript" src="js/jquery-3.2.1.js" ></script>。不引入一切效果都是空。

1：函数截流：

if ($("#big").is(":animated")) {
        return ;
    }

当前的动画效果完成之后再进行下一个动画。当前运动没有结束之前，下面的程序不运行。

2：stop()

stop(是否清除队列,是否瞬间完成当前动画)如果没有写true或者false，默认是false
$("li").stop(true); 这个stop 里面有两个参数，第一个是是否清空动画序列，一般为false，跳过当前动画效果，执行下一个动画效果。
第二个是是否将当前动画效果执行到最后，
$("li").stop(true) 是当前的效果执行不用执行到最后买就可以立即执行下一个于东效果。再百叶窗里充分显示出。

3鼠标滚轮事件 mousewheel()

$(document).mousewheel(function(e) {
    console.log( e.deltaY )
}

滚轮事件 的 e.deltaY 有-1和1 的值。为正说明页面往上滚。
根据 e.deltaY的值可以写满屏滚动事件，

$(document).mousewheel(function(e) {
    if ($("#big").is(":animated")) {
        return ;
    }
    if (e.deltaY > 0) {
        y--;
    } else {
        y++;
    }
    if (y < 0) {
        y = 0;
    }
    if (y > 4) {
        y = 4;
    }
    var h = $("body").innerHeight();
    $("#big").animate({"top": -y*h}, 1000);
}

先要函数截流，就是滚轮滚一下，页面运动完成后 再滚动再运动，不会出现一次滚多了，页面一直动到最后。

4 遍历 each（）与当前$(this).index();

做百叶窗的时候，优化后的程序

$("li").mouseenter(function() {
    $("li").stop(true);
         var left=[0,60,120,180,240]
    var right=[0,560,620,680,740]
    var i=$(this).index();
    $("li").each(function(j){
    if (j<=i) {
        $("li").eq(j).animate({"left":left[j]},1000)
    }else{
        $("li").eq(j).animate({"left":right[j]},1000)
        }
})

打个比方就是挨个去访问，内容在each(函数里)。这里是遍历所有的，并且保存了li 的下表i,让大雨等于i的li的宽度设置为left数组里。

5 delay（）延迟函数

$("#box1").animate({"left": 500});
$("#box2").delay(1000).animate({"top": 300});

这里box1先动，过了 delay（）里面的参数（时间）后再动；

6动画效果

slideDown : 下滑展开 （前提是display:none）
slideUp：上滑收回
slideToggle : 滑动切换
fadeIn()淡入（前提是display:none）
fadeOut()淡出
fadeTo() 淡到那个数: 有三个参数，第一个参数是动画的时间，第二个参数是要变到的透明度，第三个参数是回调函数
fadeToggle() 淡出入切换

7 克隆

$("#box").append(  $("#box img").eq(0).clone() );

将#box 的img 第一张图片复制一张 增加到#box里面，要写clone,要不会更改html里面的程序代码，会把复制克隆的元素放在先前的后面！

8 手风琴

$(".accordion h3").click(function(){
或者把下面的stop 不写，写成 

if ($(".content").is(":animated")) {
        return;
    }
函数截流，效果一样，不会出现点击次数太多运动不正常现象！
    if ($(this).parent().is(".cur")) {
        $(this).parent().removeClass("cur")
        $(this).siblings(".content").slideUp()
        return;
    }
    
    $(this).parent().addClass("cur").siblings().removeClass("cur");
    $(this).parent().siblings().children(".content").stop(true,true).slideUp();
    $(this).siblings().stop(true,true).slideToggle();
    
})

if 判断是当前点击的li 有cur 这个属性的，去掉父级的cur 属性，把小盒子拉上去，隐藏。
slideToggle() 点击出现，再次点击就是合上。
$(this).parent() 是li ;
$(this).siblings()是 div;

9 Date().getTime()

从1970年1月1日到现在 事件的 毫秒数；
利用在 缓存，地址里加上这个变量，就可以一直访问就不缓存了

setInterval(function() {
    
    // 【练习】 实现ajax无缓存刷新   9:36对对
    // 拼接当前唯一毫秒数
    var url = "http://localhost:8080/ajax/person?v=" + new Date().getTime();
    
    console.log(url);
 
    $.get(url, function(str) {
        // 返回的结果 是 字符串
        console.log(str);
    })
}, 1000);

$.cookie() 缓存函数

$.cookie("left", x,  { expires: 7 });

保存 x的值，"left" 自己命名，后面{ expires: 7 } 缓存日期，先调用

<script type="text/javascript" src="js/jquery.cookie.js" ></script>