jQuer常用的一些方法总结

1、克隆

  • clone(true/false) ---

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

2、animate

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

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



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

 

你可能感兴趣的:(Javascript)