jQuer常用的一些方法总结

1、克隆

• clone(true/false) ---

/* 把第一个元素克隆然后添加到对象后面去 */
$(".box").append($(".box p").eq(0).clone(true));//true表示深度克隆

2、animate

• jQuery要实现缓冲需要去下载easing框架

• jQuery的运动框架取消了异步

<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="js/jQuery.easing.min.js"></script>
<script>
    $('.box p').animate({left:600},{
        easing:"easeInOutCirc",
        duration:2000,//运动的时间
        complete:function(){//回调函数
            $(this).css("background","deeppink");
        }
    })
</script>

animate实现同步

/* 先向右运动600px，3秒，然后再向下运动600px，3秒 */
$(".box p").animate({left:600},3000);
$(".box p").animate({top:600},3000);

animate实现异步（也很简单）

$(".box p").animate({left:600,top:600},3000);//写在一起就能实现异步的效果

3、常用的方法（6）

• hide --显示

• shiw --隐藏

• fadeIn --淡入

• fadeOut --淡出

• slideUp --上拉

• slideDown --下拉

hide()隐藏、show()显示

/* 点击显示 */
$("button").eq(0).clicck(function(){
    $(".box p").show()
    //$(".box p").show(1000)---加参数变动画
};
/* 点击隐藏 */
$("button").eq(1).clicck(function(){
    $(".box p").hide()
    //$(".box p").hide(1000)---加参数变动画
};

fadeIn()淡入、fadeOut()淡出

/* 淡入 */
$("button").eq(2).clicck(function(){
    $(".box p").fadeIn()
    //$(".box p").fadeIn(1000)---加参数变动画
};
/* 淡出 */
$("button").eq(2).clicck(function(){
    $(".box p").fadeOut()
    //$(".box p").dadeOut(1000)---加参数变动画
};

slideUp()下拉、slideDown上拉

/* 上拉 */
$("button").eq(2).clicck(function(){
    $(".box p").slideUp()
    //$(".box p").slideUp(1000)---加参数变动画
};
/* 下拉 */ 
$("button").eq(5).click(function () {
    $("div p").slideDown();
});

2、合用--- toggle----英文：切换

• toggle --显示隐切换

• fadeToggle --淡入淡出切换

• slideToggle --上拉下拉切换

toggle() ---- 显示隐藏切换

/* 显示隐藏切换 */
$("button").eq(6).click(function () {
    $("div p").toggle();
    //$("div p").toggle(1000);--加参数为缓冲
});

fadeToggle ----- 淡入淡出切换

/* 淡入淡出切换 */
$("button").eq(7).click(function () {
    $("div p").fadeToggle();
    //$("div p").fadeToggle(1000);---加参数为缓冲
});

slideToggle ----- 上拉下拉切换

/* 上拉下拉切换 */
$("button").eq(8).click(function () {
    $("div p").slideToggle();
    //$("div p").slideToggle(1000);--加参数为缓冲
});