【技术分享】WEB前端全栈成长计划(二阶段)-jQuery之特效篇(1)

DOM基础部分的学习已经结束，本篇将总结一下jQuery特效部分的使用经验，巩固学习效果。为什么没有一开始就去学习jQuery特效的使用，原因其实很简单，在没有掌握DOM文档操作和熟练运用jQuery语法的情况下去学习特效感觉上会很吃力，磨刀不误砍柴功所以现在才开始学习。

本篇将总结jQuery特效－－隐藏/显示样式特效的应用。

隐藏/显示

通过jQuery可以使用hide()和show方法来操作HTML元素的显示与隐藏

·         hide() 隐藏元素

·         show() 显示元素

语法结构1

$(selector).hide()

<p id="p1">我是P元素</p>
<button id="btn1">hide()</button></br>
<button id="btn2">show()</button>
<script>
    $("#btn1").click(function(){
        $("#p1").hide()
    });
    $("#btn1").click(function(){
        $("#p1").show()
    });
</script>

语法结构2

$(selector).hide(speed,callback)
$(selector).show(speed,callback)
$(selector).show(1000,"linear",function(){};) // 第一个参数为毫秒，第二个参数为字符串,表示过渡使用哪种缓动效果 jQuery自身提供"linear"和"swing"，第三个参数匿名函数

·         (speed,callback)为可选项

·         speed 设置隐藏/显示的速度，可以使用毫秒或字面量 "slow"、"fast"

·         callback 设置在隐藏/显示方法完成后执行的函数

<p id="p1">我是P元素</p>
</br><button id="btn3">hide(slow,function)</button></br>
<button id="btn4">show(fast)</button>
<script>
    $("#btn3").click(function(){
        $("#p1").hide("slow","linear",function(){alert("hide()方法执行成功")});     
    });
    $("#btn4").click(function(){
        $("#p1").show("fast");
    });
</script>

toggle()方法

通过该方法可以实现切换hide()/show()方法，和咱们进阶篇(2)中介绍的toggleClass()方法类似

语法结构

$(selector).toggle(speed,callback);

<p id="p1">我是P元素</p>
</br><button id="btn5">toggle()</button></br>
<script>
    $("#btn5").click(function(){
        $("#p1").toggle();
    });
</script>

·         speed 设置隐藏/显示的速度，可以使用毫秒或字面量 "slow"、"fast"

·         callback 设置在隐藏/显示方法完成后执行的函数

关于callback函数使用的注意事项

·         如果选中n个html元素进行操作，callback函数会执行n次

·         使用callbak函数时加上括号，函数将立即执行，并且只会调用一次，如果不加括号，元素显示或隐藏后才开始调用函数，所以就会出现执行n次的情况

·         callback即可以是函数名，也可以是匿名函数

<p id="p1">我是P元素</p>
<p id="p2">我是P元素</p>
<p id="p3">我是P元素</p>
 
</br><button id="btn6">hide(slow,function)</button></br>
<button id="btn7">show(fast)</button>
</br><button id="btn8">hide(slow,function())</button></br>
 
<script>
    $("#btn6").click(function(){
        $("p").hide("slow","linear",function(){alert("hide()方法执行成功")});
    });
    $("#btn7").click(function(){
        $("p").show("slow","swing");
    });
    $("#btn8").click(function(){
        $("p").hide("slow","linear",finsh());
    });
    function finsh(){
        alert("hide()方法执行成功")
    };
</script>

实例代码部分已上传我的Gitee项目 https://gitee.com/net_master/Ajax_Node/tree/master/jQuery

书山有路勤为径，学海无涯苦作舟!!!

zhoubo

2020.8.11 at home