• jQuery成功之路——jQuery动画效果和遍历效果概述

    一、jQuery动画效果 

    1.1显示效果

    • 方法

    方法名称解释
    show([speed],[easing],[fn]])显示元素方法
    hide([speed],[easing],[fn]])隐藏元素方法
    toggle([speed],[easing],[fn])切换元素方法，显示的使之隐藏，隐藏的使之显示

    • 参数

    参数名称解释
    speed三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
    easing用来指定切换效果，默认是"swing"(摆动)，可用参数"linear"(直线)
    fn在动画完成时执行的函数，每个元素执行一次

    • 示例

    1. html>
    2. <html>
    3.   <head>
    4.     <meta charset="UTF-8">
    5.     <title>Insert title heretitle>
    6.     <script type="text/javascript" src="../js/jquery-3.3.1.min.js">script>
    7.     <script type="text/javascript">
    8.       function hideFn(){
    9.         $("#showDiv").hide("slow","swing");
    10.       }
    11.       function showFn(){
    12.         $("#showDiv").show("normal","swing");
    13.       }
    14.       function toggleFn(){
    15.         $("#showDiv").toggle(5000,"linear");
    16.       }
    17.     script>
    18.   head>
    19.   <body>
    20.     <input type="button" value="点击按钮隐藏div" onclick="hideFn()">
    21.     <input type="button" value="点击按钮显示div" onclick="showFn()">
    22.     <input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()">
    23. ​
    24.     <div id="showDiv" style="width:300px;height:300px;background:red">
    25.       div显示和隐藏
    26.     div>
    27.   body>
    28. html>

    • 示例效果图

    1.2滑动效果

    • 方法

    方法名称解释
    slideDown([speed,[easing],[fn]])向下滑动方法
    slideUp([speed,[easing],[fn]])向上滑动方法
    slideToggle([speed],[easing],[fn])切换元素方法，向下使之向下,向下使之向上

    • 参数

    参数名称解释
    speed三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
    easing用来指定切换效果，默认是"swing"，可用参数"linear"
    fn在动画完成时执行的函数，每个元素执行一次

    • 示例

    1. html>
    2. <html>
    3.   <head>
    4.     <meta charset="UTF-8">
    5.     <title>Insert title heretitle>
    6.     <script type="text/javascript" src="../js/jquery-3.3.1.min.js">script>
    7.     <script type="text/javascript">
    8.       function hideFn(){
    9.         $("#showDiv").fadeOut("slow","swing");
    10.       }
    11.       function showFn(){
    12.         $("#showDiv").fadeIn("normal","swing");
    13.       }
    14.       function toggleFn(){
    15.         $("#showDiv").fadeToggle(5000,"linear");
    16.       }
    17.     script>
    18.   head>
    19.   <body>
    20.     <input type="button" value="点击按钮隐藏div" onclick="hideFn()">
    21.     <input type="button" value="点击按钮显示div" onclick="showFn()">
    22.     <input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()">
    23. ​
    24.     <div id="showDiv" style="width:300px;height:300px;background:red">
    25.       div显示和隐藏
    26.     div>
    27.   body>
    28. html>

    • 示例效果图

    1.3淡入淡出效果

    • 方法

    方法名称解释
    fadeIn([s],[e],[fn])淡入方法
    fadeOut([s],[e],[fn])淡出方法
    fadeTo([[s],o,[e],[fn]])设置元素的透明度
    fadeToggle([s,[e],[fn]])淡入淡出之间切换

    • 参数

    参数名称解释
    speed三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
    easing用来指定切换效果，默认是"swing"，可用参数"linear"
    fn在动画完成时执行的函数，每个元素执行一次
    opacity一个0至1之间表示透明度的数字

    • 示例

    1. html>
    2. <html>
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>Insert title heretitle>
    6. <script type="text/javascript" src="../js/jquery-1.8.3.js">script>
    7. <script type="text/javascript">
    8.     function hideFn(){
    9.         $("#showDiv").fadeOut(1000);//1秒钟淡出(隐藏)
    10.     }
    11.     
    12.     function showFn(){
    13.         $("#showDiv").fadeIn(1000);//1秒钟淡入(显示)
    14.     }
    15.     
    16.     function toggleFn(){
    17.         $("#showDiv").fadeToggle(1000);//1秒钟淡入淡出之间切换
    18.     }
    19.     
    20.     function fadeTofn(){
    21.         $("#showDiv").fadeTo(2000,0.5);//2秒钟设置div的透明度为50%
    22.     }
    23. script>
    24. head>
    25. <body>
    26.     <input type="button" value="点击按钮隐藏div" onclick="hideFn()">
    27.     <input type="button" value="点击按钮显示div" onclick="showFn()">
    28.     <input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()">
    29.     <input type="button" value="点击按钮设置div透明度" onclick="fadeTofn()">
    30. ​
    31.     <div id="showDiv" style="width:300px;height:300px;background:red">
    32.         div显示和隐藏
    33.     div>
    34. body>
    35. html>

    二、jQuery的遍历

    jQuery对象本身就是数组对象，通过jQuery选择器获得的都是满足该选择器条件的元素对象的集合体。因此常常需要对jQuery对象进行遍历。

    2.1原始方式遍历

    • 语法

    1. for(var i=0;i<元素数组.length;i++){
    2.     元素数组[i];
    3. }

    • 代码

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <title>title>
    6.         <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8">script>
    7.         <script type="text/javascript">
    8.             $(function(){
    9.                 var $lis = $("#city li");
    10.                 //1、原始循环方式
    11.                 for(var i=0;i<$lis.length;i++){
    12.                     console.log($($lis[i]).html());
    13.                 }
    14.             });
    15.         script>
    16.     head>
    17.     <body>
    18.         <ul id="city">
    19.             <li>北京li>
    20.             <li>上海li>
    21.             <li>天津li>
    22.             <li>重庆li>
    23.         ul>
    24.     body>
    25. html>

    • 代码效果

    2.2jquery对象方法遍历

    • 语法

    1. jquery对象.each(function(index,element){});
    2. ​
    3. 其中，
    4. index:就是元素在集合中的索引
    5. element：就是集合中的每一个元素对象

    • 代码

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <title>title>
    6.         <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8">script>
    7.         <script type="text/javascript">
    8.             $(function(){
    9.                 var $lis = $("#city li");
    10.                 $lis.each(function(index,element){
    11.                     console.log(index+"--"+$(element).html());
    12.                 });
    13.             });
    14.         script>
    15.     head>
    16.     <body>
    17.         <ul id="city">
    18.             <li>北京li>
    19.             <li>上海li>
    20.             <li>天津li>
    21.             <li>重庆li>
    22.         ul>
    23.     body>
    24. html>
    25. ​

    • 代码效果

    2.3 jquery的全局方法遍历

    • 语法

    1. $.each(jquery对象,function(index,element){});
    2. ​
    3. 其中，
    4. index:就是元素在集合中的索引
    5. element：就是集合中的每一个元素对象

    • 代码

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <title>title>
    6.         <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8">script>
    7.         <script type="text/javascript">
    8.             $(function(){
    9.                 var $lis = $("#city li");
    10.                 $.each($lis, function(index,element) {
    11.                     console.log(index+"--"+$(element).html());
    12.                 });
    13.             });
    14.         script>
    15.     head>
    16.     <body>
    17.         <ul id="city">
    18.             <li>北京li>
    19.             <li>上海li>
    20.             <li>天津li>
    21.             <li>重庆li>
    22.         ul>
    23.     body>
    24. html>
    25. ​

    • 代码效果

    2.4 jQuery3.0新特性for、of语句遍历

    • 语法

    1. for(变量 of jquery对象){
    2.     变量；
    3. }
    4. ​
    5. 其中，
    6. 变量:定义变量依次接受jquery数组中的每一个元素
    7. jquery对象：要被遍历的jquery对象

    • 代码

    1. html>
    2. <html>
    3.   <head>
    4.     <meta charset="UTF-8">
    5.     <title>title>
    6.     
    7.     <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8">script>
    8.     <script type="text/javascript">
    9.       $(function(){
    10.         var $lis = $("#city li");
    11.         for(li of $lis){
    12.           console.log($(li).html());
    13.         }
    14.       });
    15.     script>
    16.   head>
    17.   <body>
    18.     <ul id="city">
    19.       <li>北京li>
    20.       <li>上海li>
    21.       <li>天津li>
    22.       <li>重庆li>
    23.     ul>
    24.   body>
    25. html>
    26. ​
    • 代码效果

     

  • 相关阅读:
    保研考研机试攻略：第二章——入门经典（2）
    剑指YOLOv7改进最新重参数化结构RepViT｜ 最新开源移动端网络架构ICCV 2023，1.3ms 延迟，速度贼快
    DA3 网站的第10位用户信息读取
    【Java 基础篇】Java实现文件搜索详解
    greenplum数据库-锁
    图像绘制-线段、矩形、圆形、椭圆等
    go语言tcp协议实现文件上传
    Ubuntu 22.04 x86_64 源码编译 pytorch-v2.0.1 笔记【2】编译成功
    OpenTDF 客户端cpp版本SDK的编译和使用
    python 如何将视频文件的语音转换为文字
  • 原文地址：https://blog.csdn.net/weixin_62458944/article/details/132675988