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);--加参数为缓冲 });