• Python学习第91天(jQuery的动画效果、插件机制)


    今天内容都是硬茬,很实用,没啥可以多说的

    一、动画效果

      1.显示隐藏

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jquery-2.1.4.min.js"></script>
        <script>
    
    $(document).ready(function() {
        $("#hide").click(function () {
            $("p").hide(1000);    //hide 隐藏
        });
        $("#show").click(function () {
            $("p").show(1000);   //show 显示
        });
    
    //用于切换被选元素的 hide() 与 show() 方法。
        $("#toggle").click(function () {
            $("p").toggle();
        });
    })
    
        </script>
        <link type="text/css" rel="stylesheet" href="style.css">
    </head>
    <body>
    
    
        <p>hello</p>
        <button id="hide">隐藏</button>
        <button id="show">显示</button>
        <button id="toggle">切换</button>
    
    </body>
    </html>

      2.滑动

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jquery-2.1.4.min.js"></script>
        <script>
        $(document).ready(function(){
         $("#slideDown").click(function(){
             $("#content").slideDown(1000);
         });
          $("#slideUp").click(function(){
             $("#content").slideUp(1000);
         });
          $("#slideToggle").click(function(){
             $("#content").slideToggle(1000);
         })
      });
    //增加了滑动的隐藏和出现的效果
    </script> <style> #content{ text-align: center; background-color: lightblue; border:solid 1px red; display: none; padding: 50px; } </style> </head> <body> <div id="slideDown">出现</div> <div id="slideUp">隐藏</div> <div id="slideToggle">toggle</div> <div id="content">helloworld</div> </body> </html>

      3.淡入淡出

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jquery-2.1.4.min.js"></script>
        <script>
        $(document).ready(function(){
       $("#in").click(function(){
           $("#id1").fadeIn(1000);
       });
        $("#out").click(function(){
           $("#id1").fadeOut(1000);
       });
        $("#toggle").click(function(){
           $("#id1").fadeToggle(1000);
    
       });
        $("#fadeto").click(function(){
           $("#id1").fadeTo(1000,0.4);
    
       });
    });
        </script>
    </head>
    <body>     //增加了淡入淡出效果,可输入参数表示所需要的毫秒数
          <button id="in">fadein</button>
          <button id="out">fadeout</button>
          <button id="toggle">fadetoggle</button>
          <button id="fadeto">fadeto</button>      //可增加0到1之间的小数,设定淡出的程度
    
          <div id="id1" style="display:none;  80px;height: 80px;background-color: blueviolet"></div>
    
    </body>
    </html>

      4.回调函数(有点像线程,等一个执行完了后再去执行的函数)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jquery-2.1.4.min.js"></script>
    </head>
    <body>
      <button>hide</button>
      <p>helloworld helloworld helloworld</p>
     <script>
       $("button").click(function(){
           $("p").hide(1000,function(){
               alert($(this).html())
           })
       })
        </script>
    </body>
    </html>

    二、扩展方法 (插件机制)

      用JQuery写插件时,最核心的方两个方法

    <script>
        
    $.extend(object)      //为JQuery 添加一个静态方法。
    $.fn.extend(object)   //为JQuery实例添加一个方法。
    
    
        jQuery.extend({
              min: function(a, b) { return a < b ? a : b; },
              max: function(a, b) { return a > b ? a : b; }
            });
        console.log($.min(3,4));
    
    //-----------------------------------------------------------------------
    
    $.fn.extend({    "print":function(){     

    for (var i=0;i<this.length;i++){
    console.log($(
    this)[i].innerHTML)
    }
    }});$(
    "p").print(); </script>

      2.定义作用域

        定义一个JQuery插件,首先要把这个插件的代码放在一个不受外界干扰的地方。如果用专业些的话来说就是要为这个插件定义私有作用域。外部的代码不能直接访问插件内部的代码。插件内部的代码不污染全局变量。在一定的作用上解耦了插件与运行环境的依赖。

    (function(a,b){return a+b})(3,5)
           (function ($) { })(jQuery);
    //相当于
            var fn = function ($) { };
            fn(jQuery);

      3.默认参数

        定义了jQuery插件之后,如果希望某些参数具有默认值,那么可以以这种方式来指定。

    /step01 定义JQuery的作用域
    (function ($) {
        //step03-a 插件的默认值属性
        var defaults = {
            prevId: 'prevBtn',
            prevText: 'Previous',
            nextId: 'nextBtn',
            nextText: 'Next'
            //……
        };
        //step06-a 在插件里定义方法
        var showLink = function (obj) {
            $(obj).append(function () { return "(" + $(obj).attr("href") + ")" });
        }
        //step02 插件的扩展方法名称
        $.fn.easySlider = function (options) {
            //step03-b 合并用户自定义属性,默认属性
            var options = $.extend(defaults, options);
            //step4 支持JQuery选择器
            //step5 支持链式调用
            return this.each(function () {
                //step06-b 在插件里定义方法
                showLink(this);
            });
        }
    })(jQuery);

      都是些死东西,没啥要记得,明天会实现一个比较棒的登录界面,后面也许还能用到。。。

  • 相关阅读:
    springboot热启动中那些不为人知的东东
    maven生命周期(lifecycle)—— maven权威指南学习笔记(四)
    maven 一个简单项目 —— maven权威指南学习笔记(三)
    maven 安装、运行、获取帮助 —— maven权威指南学习笔记(二)
    maven 简介 —— maven权威指南学习笔记(一)
    用opencsv文件读写CSV文件
    java基础之——DecimalFormat格式化数字
    Git学习
    Spring Boot教程(二十四)Web应用的统一异常处理
    Spring Boot教程(二十三)使用Swagger2构建强大的RESTful API文档(2)
  • 原文地址:https://www.cnblogs.com/xiaoyaotx/p/12984748.html
一二三 - 开发者的网上家园