java第二阶段之JQuery

2021/11/8 14:09:48

编程Tag： 选择器 jQuery function console Java div log 第二阶段

本文主要是介绍java第二阶段之JQuery，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、JQuery简介

（一）简介

jQuery是一个快速、简洁的JavaScript框架。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

（二）使用

1、引入

之前JavaScript课程我们讲过外部js文件的引入，如下:

2、使用

在jQuery中，标识符$与jQuery是等价的，即jQuery == $，为了书写简单方便，我们通常使用$替代jQuery。但jQuery是严格区分大小写的。

例如：我们可以通过jQuery(选择器) 或 $(选择器)来查找元素。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Jquery的使用</title>
    </head>
    <script src="./js/jquery-3.3.1.min.js" type="text/javascript"></script>
    <script>
        $(function() {
            console.log($("div").html());
        });
    </script>
    <body>
        <div>Hello Jquery</div>
    </body>
</html>

二、页面加载

jQuery提供了ready()函数，用于页面加载成功后执行。与window.onload函数作用一致。写法有以下三种：

代码示例：

$(function(){
		alert(3);
})

JQuery的ready()与window.onload的区别：

1.执行时间不同

window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。

$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

由此可见，$(document).ready()的执行时机要早于window.onload。

2.编写个数不同

window.onload不能同时编写多个，如果有多个window.onload，只会执行一个。

$(document).ready()可以同时编写多个，并且都可以得到执行。

3.简化写法

window.onload没有简化写法。

$(document).ready(function(){})可以简写成$(function(){});

三、js对象与jQuery对象

(js对象)DOM对象：就是通过原生JavaScript方法获取到的对象就是DOM对象。

jQuery对象：就是通过jQuery包装DOM对象后产生的对象。

jQuery对象和DOM对象可以进行相互转换，但是切记两个对象的属性和函数不能彼此混搭使用

DOM对象转jQuery对象，语法：jQuery(DOM对象); 或 $(DOM对象);

jQuery对象转DOM对象，语法：jQuery对象[index]; 或 jQuery对象.get(index);

代码示例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
    <script>
        $(function(){
            var obj = document.getElementsByTagName("div")[0];
            console.log(obj.innerHTML);
            console.log($("div").html());
            console.log($(obj).html());
            $obj = $("div");
            console.log($obj[0].innerHTML);
        })
    </script>
</head>
<body>
    <div>div区域标签
        <a href="">百度一下</a>
    </div>
</body>
</html>

四、jQuery选择器

jQuery选择器是jQuery强大的体现，它提供了一组方法，让我们更加方便的获取到页面中的元素。jQuery选择器继承了CSS与Path语言的部分语法，允许通过标签名、属性名或内容对DOM元素进行快速、准确的定位，从而完成元素属性和行为的处理。

jQuery选择器的分类：

1.基本选择器

2.层级选择器

3.属性选择器

4.过滤选择器

5.表单选择器

（一）基本选择器

基本选择器是我们使用频率最高的选择器。

主要有：标签选择器、ID选择器、类选择器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
    <script>
        $(function(){
            $arr = $("p");
            for(var i = 0;i<$arr.length;i++){
                console.log($arr[i].innerHTML);
           }
            $obj = $(".first");
            for(var i = 0;i<$obj.length;i++){
                console.log($obj[i].innerHTML);
            }
            console.log($("#title").html());
        })
    </script>
</head>
<body>
    <p id = "title" class="first">我是p标签</p>
    <p class="first">I am p </p>
    <p>I am p3</p>
</body>
</html>

（二）层级选择器

层级选择器指按节点树的层级关系获取元素。通俗一点讲就是子孙元素/父子元素/兄弟元素的关系。

主要有：后代选择器、子选择器。

1.后代选择器：parent child, 使用空格隔开。获得父元素内部的所有儿子、孙子...元素。（祖孙关系）

2.子选择器：parent > child ,使用>符号隔开。获得父元素下面的子元素。（父子关系）

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
        $(function(){
            $arr = $("#main span");
            for(var i=0;i<$arr.length;i++){
                console.log($arr[i].innerHTML);
            }
            $arr.each(function(i,dom){
               
                console.log(dom.innerHTML);
                console.log($(dom).html());
            })
        })
    </script>
</head>
<body>
    <div id="main">
        <p> I am a p in div</p>
        <span>i am a span in div</span>
        <p>
            <span>I am a span in p</span>
        </p>
    </div>
    <div>
        <span>hahahahahha</span>
    </div>
</body>
</html>

（三）属性选择器

根据属性或属性的值进行筛选。

[attribute] $("[href]") 所有带有 href 属性的元素

[attribute=value] $("[href='#']") 所有 href 属性的值等于 "#" 的元素

[attribute=value] [attribute=value] $("[href='#'][class='demo']") 所有href属性的值等于"#"，且class属性的值为"demo"

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
        $(function(){
            $arr = $("[href]");
            $arr.each(function(i,dom){
                console.log(dom.innerHTML);
            });
            $obj = $("[href='regist.html']");
            console.log($obj.html());
        })

    </script>
</head>
<body>
    <a href="index.html">链接1</a>
    <a href="login.html">链接2</a>
    <a href="regist.html">链接3</a>
    <a href=""></a>
    <a href=""></a>
</body>
</html>

（四）过滤选择器

过滤选择器是从获取的对象列表中再次筛选想要的元素。常用的过滤选择器有：

:first 第一个

:last 最后一个

:eq(index) 指定索引的

:gt(index) 大于索引的

:lt(index) 小于索引的

:odd 奇数

:even 偶数

:not() 除了**

:header 匹配标题,比如h2,h3...

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
        $(function(){
            //:first
            console.log($("ul li:first").html());
            //:last
            console.log($("ul li:last").html());
            //:eq(index)
            console.log($("ul li:eq(1)").html());
            console.log("============================");
            //:lt(index)
            $arr = $("ul li:lt(3)");
            $arr.each(function(i,dom){
                console.log(dom.innerHTML);
            })
            //:gt(index)
            $arr4 = $("ul li:gt(1)")
            $arr4.each(function(i,dom){
                console.log(dom.innerHTML);
            })
            console.log("============================");
            //:odd
            $arr1 = $("ul li:odd");
            $arr1.each(function(i,dom){
                console.log(dom.innerHTML);
            })
            //:even
            $arr3 = $("ul li:even");
            $arr3.each(function(i,dom){
                console.log(dom.innerHTML);
            })
            console.log("============================");
            //:header
            $arr2 = $("body :header");
            $arr2.each(function(i,dom){
                console.log(dom.innerHTML);
            })
        })
    </script>
</head>
<body>
    <h1>H1 title</h1>
    <h2>H2 title</h2>
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
    </ul>
    <h3>H3 title</h3>
</body>
</html>

（五）表单选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
        $(function(){
            $obj = $("body :disabled");
            console.log($obj.val());
            $arr= $("body :enabled");
            $arr.each(function(i,dom){
                console.log(dom.value);
            })
            $("#btn").click(function(){
                $arr1 = $("input[type='checkbox']:checked");
                $arr1.each(function(i,dom){
                    console.log(dom.value);
                })
                $arr2 = $(":selected");
                console.log($arr2.val());
            })
            $("#txt").blur(function(){
                console.log($(this).val());
            })

            $("#d1").change(function(){
                console.log(this.value);
            })

        })
    </script>
</head>
<body>
    sex:

    man:<input type="radio" name="sex" value="man" id="" disabled>
    women:<input type="radio" name="sex" value="woman" id=""><br>
    hobby:
    smoking:<input type="checkbox" name="hobby" value="smoking" id="">
    tang:<input type="checkbox" name="hobby" value="tang" id="">
    walk:<input type="checkbox" name="hobby" value="walk" id=""><br>
    <select name="" id="d1">
        <option value="bj">bj</option>
        <option value="sh">sh</option>
        <option value="nj">nj</option>
    </select>
    <input type="button" value="点击" id = "btn">
    <input type="text" name="" id="txt">
</body>
</html>

五、jQuery的DOM操作

（一）属性操作

attr()

attr("属性名") 获取标签中对应的属性名的值

attr("属性名","属性值") 设置标签的属性名与对应的属性值

prop()

prop("属性名") 获取标签中对应的属性名的值

prop("属性名","属性值") 设置标签的属性名与对应的属性值

attr()与prop()的区别？

attr()能够实现对标签中自带属性与自定义属性的操作,但是在某些使用过程中有功能失效问题

prop()实现对标签中自带属性的操作,推荐使用

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .c2{
            border: 2px solid red;
        }
    </style>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
        $(function(){
            console.log($("#txt").attr("name"));
            console.log($("#txt").prop("name"));
            console.log($("#txt").attr("ids"));
            console.log($("#txt").prop("ids"));
            $("#txt").prop("class","c2");
        })
 
    </script>
</head>
<body>
    <input type="text" id="txt" name="username" ids="hello" class="c1">

</body>
</html>

（二）class类操作

1. addClass() 向被选元素添加一个或多个类

2. removeClass() 从被选元素删除一个或多个类

3. toggleClass() 对被选元素进行添加/删除类的切换操作

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            border: 1px solid orange;
            height: 100px;
            width: 100px;
        }
        .c1{
            border: 1px solid red;
            height: 300px;
        }
        .c2{
            width: 400px;
            background-color: blue;
        }
        .c3{
            background-color: springgreen;
        }
    </style>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
        $(function(){
            $("div").mouseover(function(){
                $(this).addClass("c1 c2");
            })
            $("div").mouseout(function(){
                $(this).removeClass("c2");
            })
            $("div").click(function(){
                $(this).toggleClass("c3");
            })
        })
    </script>
</head>
<body>
    <div>区域标签</div>
</body>
</html>

（三）内容操作

1. html() 设置或返回所选元素的内容（包括 HTML 标记）

2. text() 设置或返回所选元素的文本内容

3. val() 设置或返回表单字段的值

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.3.1.min.js"></script>
    <script>
        $(function() {
            $("#btn").click(function() {
                console.log($("div").html()); //获取div的内容
                console.log($("div").text()); //获取div的文本内容
                console.log($("#d1").val()); //获取文本框输入的值
            });
        })
    </script>
</head>

<body>
    <div>
        <a href="">超链接-百度一下</a>
    </div>
    <input type="text" id="d1" /> <br>
    <input type="button" value="点击" id="btn">
</body>

</html>

（四）样式操作

1. css("样式名") 获取该样式的值

2. css("样式名","值") 设置一个样式

3. css({"样式名":"值","样式名":"值",...}) 设置多个样式

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
        $(function(){
            $("#btn").click(function(){
                $("div").css({"height":"200px","width":"200px","border":"1px solid red"})
            })
        })
    </script>
</head>
<body>
    <div></div>
    <input type="button" value="点击" id="btn">
</body>
</html>

（五）文档操作

1、内部插入

1. append(); 在被选元素的结尾插入内容

2. prepend(); 在被选元素的开头插入内容

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
        $(function(){
            $("#btn1").click(function(){
                $("ul").append("<a href=''>百度一下</a>")
                $("ul").prepend("<a href=''>百度一下</a>")
            })
            $("#btn2").click(function(){
                
            })
            
        })
    </script>
</head>
<body>
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
    <input type="button" value="内部添加" id="btn1">
    <input type="button" value="外部添加" id="btn2">
    <input type="button" value="">
</body>
</html>

2、外部插入

1. after(); 在被选元素之后插入内容

2. before();在被选元素之前插入内容

3、删除

1. empty(); 清空里面内容

2. remove(); 删除整个元素

3. detach(); 删除整个元素

2,3删除的区别,detach删除后还遗留在页面上，并没有完全消失

六、jQuery事件

jQuery的事件类型和我们之前学习的JavaScript事件类型基本上是一样的，只是在使用的方式上有一些差别比如点击事件click,失焦事件 blur,聚焦事件 focus等...

代码示例如下:

$obj.click(function(){

//编写点击事件触发后要执行的js代码

});

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.3.1.min.js"></script>
    <script>
        $(function() {
            //给按钮添加点击事件
            $("#btn").click(function() {
                alert("按钮点击事件触发并执行");
            });
        })
    </script>
</head>

<body>
    <input type="button" value="点击事件演示" id="btn">
</body>

</html>

七、动画效果

1、显示与隐藏

jQuery特效，是指jQuery封装了JS的一些用于处理元素的显示与隐藏的比较好看的效果，我们可以通过调用函数直接使用。

常用的jQuery特效有以下几种：

1.显示与隐藏

（1）show(speed,callback);显示元素。

（2）hide(speed,callback);隐藏元素。

（3）toggle(speed,callback); 在 show() 和hide() 方法之间切换，显示被隐藏的元素，并隐藏已显示的元素。

参数说明：

speed 参数规定隐藏和显示的速度，可以取以下值："slow"、"fast" 或毫秒。

callback 参数是隐藏或显示完成后所执行的回调函数名称。

以上两个参数都是可选项。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: brown;
        }
    </style>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
        $(function(){
            $("#btn1").click(function(){
                $("div").hide(5000,function(){
                    alert("嘿嘿嘿嘿嘿")
                })
            })
            $("#btn2").click(function(){
                $("div").show(5000,function(){
                    alert("大大大大大")
                })
            })
            $("#btn3").click(function(){
                $("div").toggle(3000)
            })
        })
    </script>
</head>
<body>
    <div>12</div>
    <input type="button" value="隐藏" id="btn1">
    <input type="button" value="显示" id="btn2">
    <input type="button" value="hide/show" id="btn3">
</body>
</html>

2、淡入淡出

（1）fadeIn(speed,callback);淡入已隐藏的元素。

（2）fadeOut(speed,callback);淡出可见元素。

（3）fadeToggle(speed,callback);在 fadeIn()与 fadeOut()方法之间进行切换。如果元素已淡出，则 fadeToggle()会向元素添加淡入效果。如果元素已淡入，则 fadeToggle()会向元素添加淡出效果。

参数作用同上。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: brown;
        }
    </style>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
        $(function(){
            $("#btn1").click(function(){
                $("div").fadeIn(5000,function(){
                    alert("嘿嘿嘿嘿嘿")
                })
            })
            $("#btn2").click(function(){
                $("div").fadeOut(5000,function(){
                    alert("大大大大大")
                })
            })
            
        })
    </script>
</head>
<body>
    <div>12</div>
    <input type="button" value="隐藏" id="btn1">
    <input type="button" value="显示" id="btn2">
    <input type="button" value="hide/show" id="btn3">
</body>
</html>

3、滑动效果

（1）slideDown(speed,callback);向下滑动元素，用于作显示。

（2）slideUp(speed,callback);向上滑动元素，用于作隐藏。

（3）slideToggle(speed,callback);在 slideDown()与 slideUp()方法之间进行切换。如果元素已向下滑动，则 slideToggle()会向上滑动它们。如果元素已向上滑动，则 slideToggle()会向下滑动它们。

参数作用同上。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            border:1px solid black;
            width: 200px;
            height: 200px;
        }
        #a {
            
            background-color: brown;
        }
    </style>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
        $(function(){
            $("#btn1").click(function(){
                $("#a").slideUp(5000,function(){
                    alert("嘿嘿嘿嘿嘿")
                })
            })
            $("#btn2").click(function(){
                $("#a").slideDown(5000,function(){
                    alert("大大大大大")
                })
            })
            
        })
    </script>
</head>
<body>
    <div>
        <div id="a">12</div>
    </div>
    <input type="button" value="隐藏" id="btn1">
        <input type="button" value="显示" id="btn2">
        <input type="button" value="hide/show" id="btn3">
</body>
</html>

4、自定义动画

用于创建自定义动画的函数。

这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left.

animate(params,[speed],[fn])

参数解析:

1.params:一组包含作为动画属性和终值的样式属性和及其值的集合

2.speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

3.fn:在动画完成时执行的函数，每个元素执行一次。

代码示例：

八、数组操作

jQuery中有属于自己的遍历对象或者数组的方法，如下：

第一种写法:

$obj.each(function(i,dom){

});

第二种写法：

$.each(object,function(i,dom){

});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 50px;
            height: 50px;
            background-color: red;
            position: absolute;
        }
    </style>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
        $(function(){
            $("div").click(function(){
                $(this).animate({"left":"500px"},5000,function(){
                    $(this).hide(3000)
                })
            })
        })
    </script>
</head>
<body>
    <div>12</div>
</body>
</html>

i :对象的成员或数组的索引

dom:对应变量或内容,该变量或者内容为js对象

注意：如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
        $(function(){
            $arr = $("div")
            $arr.each(function(i,dom){
                console.log($(dom).html());
            })
        })
    </script>
</head>
<body>
    <div>123</div>
    <div>321</div>
</body>
</html>

九、表单插件

在学习javascript时候，我们手动的完成过表单数据的校验，这项功能在实际开发中也是常见的，属于通用功能，但是单纯的通过javascript进行校验，如果选项过多，那么还是有些力不从心。实际在开发中我们都是使用第三方工具，本案例中我们将使用jQuery插件validation进行表单的校验。

validation插件的使用步骤：

1、下载validation工具。

2、导入工具jquery-3.4.1.js、jquery.validate.js、messages_zh.js。

3、编写form表单信息并在脚本中给form表单绑定validate验证方法。

4、在form表单元素中逐个指定校验规则。

这篇关于java第二阶段之JQuery的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

java第二阶段之JQuery

一、JQuery简介

（一）简介

（二）使用

二、页面加载

1.执行时间不同

2.编写个数不同

3.简化写法

三、js对象与jQuery对象

四、jQuery选择器

（一）基本选择器

（二）层级选择器

（三）属性选择器

（四）过滤选择器

（五）表单选择器

五、jQuery的DOM操作

（一）属性操作

（二）class类操作

（三）内容操作

（四）样式操作

（五）文档操作

1、内部插入

2、外部插入

3、删除

六、jQuery事件

七、动画效果

1、显示与隐藏

2、淡入淡出

3、滑动效果

4、自定义动画

九、表单插件

相关编程文章