JQuery_ケースとプラグインのメカニズムhehe.employment.over.21.3


21.4 JQuery_ケース_広告の表示と非表示
  • 需要:
  • 1.ページのロードが完了し、3秒後.広告を自動的に表示します.
  • 2.広告表示5秒後、自動的に消えます.

  • 分析:
  • 1.タイマーを使用して完了します.settimeout(タイマーを1回実行);
  • 2.分析によると、JQueryの表示と非表示のアニメーション効果は実はdisplayを制御することである.
  • 3.show/hideメソッドを使用して広告の表示を完了する.

  • 例:
  • 
    <html>
    <head>
        <meta charset="UTF-8">
        <title>          title>
        <style>
            #content{
          width:100%;height:500px;background:#999}
        style>
    
        
        <script type="text/javascript" src="../js/jquery-3.3.1.min.js">script>
        <script>
            //    ,         ,     ,       
            $(function () {
          
                //     ,  adShow   3      
                setTimeout(adShow,3000);
                //     ,  adHide  ,8      
                setTimeout(adHide,8000);
            });
            //    
            function adShow() {
          
                //    div,      
                $("#ad").show("slow");
            }
            //    
            function adHide() {
          
                //    div,      
                $("#ad").hide("slow");
            }
        script>
    head>
    <body>
    
    <div>
        
        <div id="ad" style="display: none;">
            <img style="width:100%" src="../img/adv.jpg" />
        div>
    
        
        <div id="content">
                
        div>
    div>
    body>
    html>
    

    21.5 JQuery_ケース_くじを引く
  • 分析:
  • 1.スタートボタンにクリックイベントをバインドする:
  • 1.1循環タイマーを定義する.
  • 1.2小さなフォトボックスのsrcプロパティを切り替えます
  • 配列を定義し、ピクチャリソースパスを格納する.
  • 乱数を生成します.配列インデックス.


  • 2.終了ボタンにクリックイベントをバインド:
  • 2.1タイマーを停止します.
  • 2.2大きなフォトボックスにsrcプロパティを設定します.


  • 例:
  • 
    <html>
    <head>
        <meta charset="UTF-8">
        <title>jquery     title>
        <script type="text/javascript" src="../js/jquery-3.3.1.min.js">script>
        <script>
            var imgs = ["../img/man00.jpg",
                "../img/man01.jpg",
                "../img/man02.jpg",
                "../img/man03.jpg",
                "../img/man04.jpg",
                "../img/man05.jpg",
                "../img/man06.jpg",
            ];
            var startId;//      id
            var index;//    
            $(function () {
          
                //             
                $("#startID").prop("disabled",false);
                $("#stopID").prop("disabled",true);
                //1.            
                $("#startID").click(function () {
          
                    // 1.1         20      
                    startId = setInterval(function () {
          
                        //             
                        $("#startID").prop("disabled",true);
                        $("#stopID").prop("disabled",false);
                        //1.2       0-6
                        index = Math.floor(Math.random() * 7);//0.000--0.999 --> * 7 --> 0.0-----6.9999
                        //1.3      src  
                        $("#img1ID").prop("src",imgs[index]);
    
                    },20);
                });
                //2.            
                $("#stopID").click(function () {
          
                    //             
                    $("#startID").prop("disabled",false);
                    $("#stopID").prop("disabled",true);
                    // 1.1      
                    clearInterval(startId);
                    // 1.2       src  
                    $("#img2ID").prop("src",imgs[index]).hide();
                    //  1   
                    $("#img2ID").show(1000);
                });
            });
        script>
    head>
    <body>
    
    
    <div style="border-style:dotted;width:160px;height:100px">
        <img id="img1ID" src="../img/man00.jpg" style="width:160px;height:100px"/>
    div>
    
    
    <div
            style="border-style:double;width:800px;height:500px;position:absolute;left:500px;top:10px">
        <img id="img2ID" src="../img/man00.jpg" width="800px" height="500px"/>
    div>
    
    
    <input
            id="startID"
            type="button"
            value="    "
            style="width:150px;height:150px;font-size:22px"
            onclick="imgStart()">
    
    
    <input
            id="stopID"
            type="button"
            value="    "
            style="width:150px;height:150px;font-size:22px"
            onclick="imgStop()">
    
    
    <script language='javascript' type='text/javascript'>
        //        ,        
        var imgs = [
            "../img/man00.jpg",
            "../img/man01.jpg",
            "../img/man02.jpg",
            "../img/man03.jpg",
            "../img/man04.jpg",
            "../img/man05.jpg",
            "../img/man06.jpg"
        ];
    
    script>
    body>
    html>
    

    21.6 JQuery_プラグインメカニズム
  • プラグイン:JQueryの機能を強化します.
  • 実装:
  • $.fn.extend(object)
  • Jqueryで取得したオブジェクトの機能を強化する$("#id")
  • $.extend(object)
  • JQeuryオブジェクト自体の機能を強化$/jQuery

  • 例:
  • 
    <html>
    <head>
        <meta charset="UTF-8">
        <title>01-jQuery        title>
        <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8">script>
        <script type="text/javascript">
            //1.  jquery     
            $.fn.extend({
          
                //     check()  ,   jquery          
                check:function () {
          
                    //      
                    this.prop("checked",true);
                },
                uncheck:function () {
          
                    //       
                    this.prop("checked",false);
                }
            });
            $(function () {
          
                //    
                $("#btn-check").click(function () {
          
                    //       
                    $("input[type='checkbox']").check();
                });
                //    
                $("#btn-uncheck").click(function () {
          
                    //       
                    $("input[type='checkbox']").uncheck();
                });
            });
        script>
    head>
    <body>
    <input id="btn-check" type="button" value="       " onclick="checkFn()">
    <input id="btn-uncheck" type="button" value="         " onclick="uncheckFn()">
    <br/>
    <input type="checkbox" value="football">  
    <input type="checkbox" value="basketball">  
    <input type="checkbox" value="volleyball">  
    
    body>
    html>
    
    
    
    
    <html>
    <head>
        <meta charset="UTF-8">
        <title>01-jQuery        title>
        <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8">script>
        <script type="text/javascript">
            //       2   ,  min  : 2      ;  max  : 2     
            $.extend({
          
                max:function (a,b) {
          
                    return a>=b ? a:b;
                },
                min:function (a,b) {
          
                    return a<=b ? a:b;
                }
            });
            //      
            var max = $.max(4,5);
            alert(max);
            var min = $.min(2,3);
            alert(min);
        script>
    head>
    <body>
    body>
    html>