参考：菜鸟教程

一、简介

　　1.jQuery 是一个 JavaScript 库。
　　2.jQuery的版本：压缩版（用户生成）和未压缩(用于测试和开发)
　　3.jQuery的引入方式：
　　　　从http://jquery.com/download/下载
　　　　从站点引入：<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
　　4.基础语法： $(selector).action()
　　5.代码位置：

        <head>

        <script src="jquery-3.0.0/jquery-3.0.0.min.js"></script>

        <script type="text/javascript">

            $(document).ready(function(){

                   // 开始写 jQuery 代码...

            });

        </script>

        </head>

二、选择器

　　1.基本选择器

　　　　　　通用选择器 $("*") 所有元素　　
　　　　　　元素选择器 $("p") 所有<p>元素
　　　　　　id选择器 $("#name") id为name的元素
　　　　　　class选择器 $("name") class为name的元素

　　2.组合选择器

　　　　　　组合选择器 $(".intro,.demo") class 为 "intro" 或 "demo" 的所有元素
　　　　　　$("h1,div,p") 所有 <h1>、<div> 和 <p> 元素
　　　　　　子代选择器 $("div > p") <div>的子代<p>元素
　　　　　　后代选择器 $("div p") <div> 元素的后代的所有 <p> 元素
　　　　　　毗邻选择器 $("div + p") 每个 <div> 元素相邻的下一个 <p> 元素
　　　　　　同级选择器 $("div ~ p") 选取 <div> 元素之后同级的所有 <p> 元素

　　3.属性选择器

　　　　　　[attribute] $("[id]") 所有带有id属性的元素
　　　　　　[attribute=value] $("[id='name']") 所有带有id属性且值等于"name"的元素
　　　　　　[attribute!=value] $("[id!='name']") 所有带有 id 属性且值不等于"name"的元素
　　　　　　[attribute$=value] $("[id$='.jpg']") 所有带有 id 属性且值以".jpg"结尾的元素
　　　　　　[attribute^=value] $("[title^='Tom']") 所有带有 title 属性且值以"Tom"开头的元素
　　　　　　[attribute~=value] $("[title~='hello']") 所有带有 title 属性且值包含单词"hello"的元素
　　　　　　[attribute*=value] $("[title*='hello']") 所有带有 title 属性且值包含字符串 "hello" 的元素
　　　　　　[name=value][name2=value2] $( "input[id][name$='man']" ) 带有 id 属性，并且 name 属性以 man 结尾的输入框

　　4.表单选择器

　　　　　　$(":input") 所有 input 元素
　　　　　　$(":text") 所有带有 type="text" 的 input 元素
　　　　　　$(":password") 所有带有 type="password" 的 input 元素
　　　　　　$(":radio") 所有带有 type="radio" 的 input 元素
　　　　　　$(":checkbox") 所有带有 type="checkbox" 的 input 元素
　　　　　　$(":submit") 所有带有 type="submit" 的 input 元素
　　　　　　$(":reset") 所有带有 type="reset" 的 input 元素
　　　　　　$(":button") 所有带有 type="button" 的 input 元素
　　　　　　$(":image") 所有带有 type="image" 的 input 元素
　　　　　　$(":file") 所有带有 type="file" 的 input 元素

　　5.基础过滤器

　　　　　　$("p:first") 第一个 <p> 元素
　　　　　　$("p:last") 最后一个 <p> 元素
　　　　　　$("ul li:eq(3)") 列表中的第四个元素（index 值从 0 开始）
　　　　　　$("ul li:gt(3)") 列举 index 大于 3 的元素
　　　　　　$("ul li:lt(3)") 列举 index 小于 3 的元素
　　　　　　$(":header") 所有标题元素 <h1>, <h2> ...

三、查找

　　1.向上查找

　　　　1.1 parent 只找父亲
　　　　1.2 parents 所有祖先元素，一直到html
　　　　1.3 parentsUntil 两个元素之间的所有元素

        <!DOCTYPE html>

        <html>

        <head>

            <title></title>

        </head>

        <script src="jquery-3.0.0/jquery-3.0.0.min.js"></script>

        <script type="text/javascript">

            $(document).ready(function () {

                // $("span").parent().css({"background-color":"red"});  //对div3修改

                // $("span").parents().css({"background-color":"red"}); //一直到<html>

                $("span").parentsUntil("#div1").css({"background-color":"red"}); //对<div2> <div3>修改

            })

        </script>

        <body>

            <div id="div1">div1

                <div id="div2">div2

                    <div id="div3">

                        <span>hello</span>

                    </div>

                </div>

            </div>

        </body>

        </html>

例:向上查找

　　2.向后查找

　　　　2.1children() 子代
　　　　2.2find() 所有后代，直到最后一代

            <!DOCTYPE html>

            <html>

            <head>

                <title></title>

            </head>

            <script src="jquery-3.0.0/jquery-3.0.0.min.js"></script>

            <script type="text/javascript">

                $(document).ready(function () {

                    $("#div1").children("div").css({"border":"2px solid red"})

                    // $("#div1").find("div").css({"border":"2px solid red"})

                })

            </script>

            <body>

                <div id="div1">div1

                    <div id="div2">div2

                        <div id="div3">

                            <span>hello</span>

                        </div>

                    </div>

                </div>

            </body>

            </html>

例：向后查找

　　3.同级查找

　　　　3.1 siblings() 所有同胞元素
　　　　3.2 next() 下一个同胞元素。
　　　　3.3 nextAll() 所有跟随的同胞元素。
　　　　3.4 nextUntil() 介于两个给定参数之间的所有跟随的同胞元素
　　　　3.5 prev()
　　　　3.6 prevAll()
　　　　3.7 prevUntil()

　　4.过滤

　　　　4.1first() 返回第一个元素
　　　　4.2last() 返回最后一个元素
　　　　4.3eq() 返回指定索引号
　　　　4.4filter() 返回匹配结果
　　　　4.5not() 返回不匹配结果

四、事件

　　1.鼠标事件

　　　　1.1 click():当按钮点击事件被触发时会调用一个函数

            <!DOCTYPE html>

            <html>

            <head>

                <title></title>

            </head>

            <script src="jquery-3.0.0/jquery-3.0.0.min.js"></script>

            <script type="text/javascript">

                $(document).ready(function(){

                       $("p").click(function () {

                           $(this).hide()

                       })

                });

            </script>

            <body>

                <p>点我消失</p>

            </body>

            </html>

click

　　　　1.2 dblclick() 当双击元素时，会发生 dblclick 事件。
　　　　1.3 mouseenter()和mouseleave()

            <!DOCTYPE html>

            <html>

            <head>

                <title></title>

            </head>

            <script src="jquery-3.0.0/jquery-3.0.0.min.js"></script>

            <script type="text/javascript">

                $(document).ready(function(){

                       $("p").mouseenter(function () {

                           $(this).text("鼠标放上");

                       })

                });

                $(document).ready(function(){

                    $("p").mouseleave(function () {

                        $(this).text("鼠标离开");

                    })

                });

            </script>

            <body>

                <p>鼠标离开</p>

            </body>

            </html>

mouseenter()和mouseleave()

　　　　1.4 mousedown()和mouseup()

            <!DOCTYPE html>

            <html>

            <head>

                <title></title>

            </head>

            <script src="jquery-3.0.0/jquery-3.0.0.min.js"></script>

            <script type="text/javascript">

                $(document).ready(function(){

                       $("p").mousedown(function () {

                           $(this).text("鼠标按下");

                       })

                });

                $(document).ready(function(){

                    $("p").mouseup(function () {

                        $(this).text("鼠标松开");

                    })

                });

            </script>

            <body>

                <p>点我</p>

            </body>

            </html>

mousedown()和mouseup()

　　　　1.5 hover()

　　　　　　当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。

            <!DOCTYPE html>

            <html>

            <head>

                <title></title>

            </head>

            <script src="jquery-3.0.0/jquery-3.0.0.min.js"></script>

            <script type="text/javascript">

                $(document).ready(function () {

                    $("#p1").hover(

                            function () {

                                $(this).text("你来了");

                            },

                            function () {

                                $(this).text("你走了");

                            }

                        )

                })

            </script>

            <body>

                <!-- <div style="background-color: gray;">你走了</div> -->

                <p id="p1">来点我</p>

            </body>

            </html>

hover()

　 2.键盘事件

　　　　　　暂空

　　3.表单事件

　　　　　　3.1focus()和blur()

            <!DOCTYPE html>

            <html>

            <head>

                <title></title>

            </head>

            <script src="jquery-3.0.0/jquery-3.0.0.min.js"></script>

            <script type="text/javascript">

                $(document).ready(function(){

                  $("input").focus(function(){

                    $(this).css("background-color","#cccccc");

                  });

                  $("input").blur(function(){

                    $(this).css("background-color","#ffffff");

                  });

                });

            </script>

            <body>

            Name: <input type="text" name="fullname">

            </body>

            </html>

focus()和blur()

　　4.文档/窗口事件

　　　　　　暂空

五、修改HTML

　　1.获取内容

　　　　1.1 text() - 设置或返回所选元素的文本内容
　　　　1.2 html() - 设置或返回所选元素的内容（包括 HTML 标记）
　　　　1.3 val() - 设置或返回表单字段的值
　　　　1.4 attr() - 获取属性值

        <!DOCTYPE html>

        <html>

        <head>

            <title></title>

        </head>

        <script src="jquery-3.0.0/jquery-3.0.0.min.js"></script>

        <script type="text/javascript">

            $(document).ready(function () {

                $("#txt").click(function () {

                    alert($(this).text())

                })

                $("#html").click(function () {

                    alert($(this).html())

                })

                $("button").click(function () {

                    alert("你的名字是:" + $("input").val())

                })

            })

        </script>

        <body>

            姓名： <input type="text" name="username">

            <button value="">确认</button>

            <p id="txt">点我显示text内容</p>

            <p id="html">点我显示HTML内容</p>

        </body>

        </html>

获取内容

　　2.设置内容

　　　　2.1 text() - 设置或返回所选元素的文本内容
　　　　2.2 html() - 设置或返回所选元素的内容（包括 HTML 标记）
　　　　2.3 val() - 设置或返回表单字段的值
　　　　2.4 attr() - 设置/改变属性值　　

        <!DOCTYPE html>

        <html>

        <head>

            <title></title>

        </head>

        <script src="jquery-3.0.0/jquery-3.0.0.min.js"></script>

        <script type="text/javascript">

            $(document).ready(function () {

                $("#txt").click(function () {

                    $(this).text("hello world")

                })

                $("#html").click(function () {

                    $(this).html("<p>hello world</p>")

                })

                $("button").click(function () {

                    $("input").val("hello world")

                })

            })

        </script>

        <body>

            姓名： <input type="text" name="username">

            <button value="">确认</button>

            <p id="txt">点我更改text内容</p>

            <p id="html">点我更改HTML内容</p>

        </body>

        </html>

设置内容

　　3.添加元素

　　　　3.1 append() - 在被选元素的结尾插入内容
　　　　3.2 prepend() - 在被选元素的开头插入内容
　　　　3.3 after() - 在被选元素之后插入内容
　　　　3.4 before() - 在被选元素之前插入内容

　　append/prepend与after/before的区别:append/prepend 是在选择元素内部嵌入。after/before 是在元素外面追加。

        <!DOCTYPE html>

        <html>

        <head>

            <title></title>

        </head>

        <script src="jquery-3.0.0/jquery-3.0.0.min.js"></script>

        <script type="text/javascript">

            $(document).ready(function () {

                $("#btn1").click(function () {

                    $("#p1").append("<p>向后又一段</p>")

                })

            })

            $(document).ready(function () {

                $("#btn2").click(function () {

                    $("#p1").prepend("<p>向前又一段</p>")

                })

            })

        </script>

        <body>

            <p id="p1">第一段</p>

            <button id="btn1">在后面添加一段</button>

            <button id="btn2">在前面添加一段</button>

        </body>

        </html>

添加元素

　　4.删除元素

　　　　4.1 remove() 方法删除被选元素及其子元素
　　　　4.2 empty() 方法删除被选元素的子元素

六、修改CSS

　　1.添加、删除样式

　　　　addClass() - 向被选元素添加一个或多个类
　　　　removeClass() - 从被选元素删除一个或多个类
　　　　toggleClass() - 对被选元素进行添加/删除类的切换操作

        <!DOCTYPE html>

        <html>

        <head>

            <title></title>

            <style type="text/css">

                .ppp {

                    color: red;

                    font-size: 30px;

                    border:2px solid  blue;

                }

            </style>

        </head>

        <script src="jquery-3.0.0/jquery-3.0.0.min.js"></script>

        <script type="text/javascript">

            $(document).ready(function () {

                $("#btn1").click(function () {

                    $("#p1").addClass("ppp")

                })

                $("#btn2").click(function () {

                    $("#p1").removeClass("ppp")

                })

                $("#btn3").click(function(){

                    $("#p1").toggleClass("ppp");

                  });

            })

        </script>

        <body>

            <p id="p1">hello world</p>

            <button id="btn1">添加样式</button>

            <button id="btn2">删除样式</button>

            <button id="btn3">切换样式</button>

        </body>

        </html>

添加、删除样式

　　2.设置CSS样式

　　　　css() - 设置或返回样式属性
　　　　css({"propertyname":"value","propertyname":"value",...});

七、效果

　　7.1 显示与隐藏

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

　　　　参数：
　　　　　　可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
　　　　　　可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

        <!DOCTYPE html>

        <html>

        <head>

            <title></title>

            <style type="text/css">

            </style>

        </head>

        <script src="jquery-3.0.0/jquery-3.0.0.min.js"></script>

        <script type="text/javascript">

            $(document).ready(function () {

                $("#hide").click(function(){

                        $("p").hide("slow");

                  });

                  $("#show").click(function(){

                        $("p").show("fast");

                  });

                   $("#change").click(function(){

                        $("p").toggle(2000);

                  });

            })

        </script>

        <body>

            <p>hello world</p>

            <button id="show">显示</button>

            <button id="hide">隐藏</button>

            <button id="change">切换</button>

        </body>

        </html>

显示与隐藏

　　7.2 淡入淡出

　　　　$(selector).fadeIn(speed,callback); 淡入已隐藏的元素。
　　　　$(selector).fadeOut(speed,callback); 用于淡出可见元素。
　　　　$(selector).fadeToggle(speed,callback); 在 fadeIn() 与 fadeOut() 方法之间进行切换
　　　　$(selector).fadeTo(speed,opacity,callback); 渐变为给定的不透明度（值介于 0 与 1 之间）

            <!DOCTYPE html>

            <html>

            <head>

                <title></title>

                <style type="text/css">

                </style>

            </head>

            <script src="jquery-3.0.0/jquery-3.0.0.min.js"></script>

            <script type="text/javascript">

                $(document).ready(function(){

                      $("#button1").click(function(){

                        $("#div1").fadeIn();

                        $("#div2").fadeIn("slow");

                        $("#div3").fadeIn(3000);

                      });

                      $("#button2").click(function(){

                          $("#div1").fadeOut();

                          $("#div2").fadeOut("slow");

                          $("#div3").fadeOut(3000);

                        });

                    $("#button3").click(function(){

                        $("#div1").fadeToggle();

                        $("#div2").fadeToggle("slow");

                        $("#div3").fadeToggle(3000);

                    });

                     $("#button4").click(function(){

                        $("#div1").fadeTo("slow",0.15);

                        $("#div2").fadeTo("slow",0.4);

                        $("#div3").fadeTo("slow",0.7);

                      });

                });

            </script>

            </head>

            <body>

                <button id="button1">点击淡入 div 元素。</button>

                <button id="button2">点击淡出 div 元素。</button>

                <button id="button3">点击淡入/淡出元素。</button>

                <button id="button4">点击让颜色变淡。</button>

                <br><br>

                <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>

                <div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>

                <div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

            </body>

            </html>

淡入淡出

　　7.3 滑动

　　　　$(selector).slideDown(speed,callback); 向下滑动元素
　　　　$(selector).slideUp(speed,callback); 向上滑动元素
　　　　$(selector).slideToggle(speed,callback); 在 slideDown() 与 slideUp() 方法之间进行切换。

        <!DOCTYPE html>

        <html>

        <head>

            <title></title>

            <style type="text/css">

            </style>

        </head>

        <script src="jquery-3.0.0/jquery-3.0.0.min.js"></script>

        <script type="text/javascript">

            $(document).ready(function(){

                  $("#button1").click(function(){

                    $("#div1").slideUp();

                  });

                  $("#button2").click(function(){

                      $("#div1").slideDown();

                    });

                $("#button3").click(function(){

                     $("#div1").slideToggle();

                });

            });

        </script>

        </head>

        <body>

            <button id="button1">点击滑出元素。</button>

            <button id="button2">点击滑入元素。</button>

            <button id="button3">点击滑入/滑出元素。</button>

            <br><br>

            <div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>

        </body>

        </html>

滑动

　　7.4 动画

　　　　$(selector).animate({params},speed,callback);

　　　　参数：
　　　　　　必需的 params 参数定义形成动画的 CSS 属性。
　　　　　　可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
　　　　　　可选的 callback 参数是动画完成后所执行的函数名称。

        <!DOCTYPE html>

        <html>

        <head>

            <title></title>

            <style type="text/css">

            </style>

        </head>

        <script src="jquery-3.0.0/jquery-3.0.0.min.js"></script>

        <script>

            $(document).ready(function(){

                  $("button").click(function(){

                    var div=$("div");

                    div.animate({left:'100px'},"slow");

                    div.animate({fontSize:'3em'},"slow");

                  });

            });

        </script>

        </head>

        <body>

            <button>开始动画</button>

            <div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>

        </body>

        </html>

动画

jQuery学习笔记（基础部分）的更多相关文章

jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
JQuery学习笔记——基础选择器
第一篇博客,现在原生安卓需求不大了.招聘的Android工程师都需要附带更多的其他技术.这也是开启我学习前端之路的开端.前端时间看了HTML.CSS等,在界面渲染这一块,就不多记录博客了.现在学习着J ...
jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点基本选择器层次选择器过滤选择器表单选择器第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
jQuery 学习笔记
jQuery 学习笔记一.jQuery概述宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...
JQuery学习笔记——层级选择器
JQuery学习笔记--层级选择器上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器和并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...
jQuery学习笔记之概念（1）
jQuery学习笔记之概念(1) ----------------------学习目录-------------------- 1.概念 2.特点 3.选择器 4.DOM操作 5.事件 6.jQuer ...
jQuery学习笔记（一）：入门
jQuery学习笔记(一):入门一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...
Python学习笔记基础篇——总览
Python初识与简介[开篇] Python学习笔记——基础篇[第一周]——变量与赋值.用户交互.条件判断.循环控制.数据类型.文本操作 Python学习笔记——基础篇[第二周]——解释器.字符串.列 ...
jQuery学习笔记之Ajax用法详解
这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下本文实例讲述了j ...
数论算法剩余系相关学习笔记 (基础回顾,(ex)CRT,(ex)lucas,(ex)BSGS,原根与指标入门,高次剩余,Miller_Rabin+Pollard_Rho)
注:转载本文须标明出处. 原文链接https://www.cnblogs.com/zhouzhendong/p/Number-theory.html 数论算法剩余系相关学习笔记 (基础回顾,(ex ...

随机推荐

elasticsearch 深入 —— 地理位置
地理位置我们拿着纸质地图漫步城市的日子一去不返了.得益于智能手机,我们现在总是可以知道自己所处的准确位置,也预料到网站会使用这些信息.我想知道从当前位置步行 5 分钟内可到的那些餐馆,对伦敦更大范 ...
大数据-hadoop学习记录
hadoop 创始人 DogCutting 高效,可扩展性,高容错性,价格低廉的大数据软件处理架构主要应用于数据分析.数据实时查询.数据挖掘领域 HDFS(HadoopDistributeFileS ...
265-Keystone II JESD204B 66AK2L06 评估模块 (现行) XEVMK2LX
Keystone II JESD204B 66AK2L06 评估模块 (现行) XEVMK2LX 一. 板卡概述The XEVMK 2LX is a full-featured evaluation ...
go语言从例子开始之Example30.通道遍历
在前面的例子中,我们讲过 for 和 range为基本的数据结构提供了迭代的功能.我们也可以使用这个语法来遍历从通道中取得的值 Example: package main import "f ...
qt如何去掉文件路径最后一个反斜杠的内容
QString strTemp = “E:\\hell\\word\\detect.txt” int nIndex = strTemp.lastIndexOf('\\'); strTemp ...
center os7 安装mysql
安装mariadb MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护,采用GPL授权许可.开发这个分支的原因之一是:甲骨文公司收购了MySQL后,有将MySQL闭源的潜在风险, ...
HTML5 canvas绘制图片
demo.js window.onload=function() { createcanvas(); drawImage(); } function createcanvas() { var CANV ...
Es学习第十一课，使用java操作elasticsearch
前面十节课我们已经把ES的基本概念和使用讲的差不多了,现在我们就用基于java来实际开发一个操作ES的小项目,带大家来一起练练手. 1.我们用IDEA创建一个maven项目项目结构如上图所示,然后我 ...
thread 类详解
java.lang.Thread类详解一.前言位于java.lang包下的Thread类是非常重要的线程类,它实现了Runnable接口,今天我们来学习一下Thread类,在学习Thread类之前 ...
sql server 2000安装程序配置服务器失败
第一种方法今天安装SQL Server 2000遇到了个很BT的问题,提示出下: 安装程序配置服务器失败.参考服务器错误日志和C:\Windows\sqlstp.log了解更多信息. 以前进安装目录 ...

jQuery学习笔记（基础部分）

一、简介

二、选择器

1.基本选择器

2.组合选择器

3.属性选择器

4.表单选择器

5.基础过滤器

三、查找

1.向上查找

2.向后查找

3.同级查找

4.过滤

四、事件

1.鼠标事件

2.键盘事件

3.表单事件

4.文档/窗口事件

五、修改HTML

1.获取内容

2.设置内容

3.添加元素

4.删除元素

六、修改CSS

1.添加、删除样式

2.设置CSS样式

七、效果

7.1 显示与隐藏

7.2 淡入淡出

7.3 滑动

7.4 动画

jQuery学习笔记（基础部分）的更多相关文章

随机推荐

热门专题

　　1.基本选择器

　　2.组合选择器

　　3.属性选择器

　　4.表单选择器

　　5.基础过滤器

　　1.向上查找

　　2.向后查找

　　3.同级查找

　　4.过滤

　　1.鼠标事件

　 2.键盘事件

　　3.表单事件

　　4.文档/窗口事件

　　1.获取内容

　　2.设置内容

　　3.添加元素

　　4.删除元素

　　1.添加、删除样式

　　2.设置CSS样式

　　7.1 显示与隐藏

　　7.2 淡入淡出

　　7.3 滑动

　　7.4 动画