ノート-JavaWeb旅17を学びます

その他 2019-06-17 02:57:34 訪問数: null
1.フィルタ選択

最初の要素セレクター：最初の選択要素の最初の要素を取得します

終了要素セレクター：選択した要素を取得するために、最後の最後の要素

非エレメントセレクター：いない（セレクタ）要素を含んでいない、コンテンツを指定し

偶数セレクタ：偶数偶数、0から数え

奇数セレクター：奇数奇数、0から数えて

当量（インデックス）指定されたインデックスの要素：インデックス選択に等しいです

インデックス選択より大きい：GT（index）指定されたインデックスの要素よりも大きいです

インデックス選択未満：LT（index）指定されたインデックスの要素よりも小さいです

セレクタタイトル：タイトルを取得するために、ヘッダ（H1-H6）素子、固定文言

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>基本过滤选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script  src="js/jquery-3.3.1.min.js"></script>
    <style type="text/css">
            div,span{
                width: 180px;
                height: 180px;
                margin: 20px;
                background: #9999CC;
                border: #000 1px solid;
                float:left;
                font-size: 17px;
                font-family:Roman;
            }
            
            div .mini{
                width: 50px;
                height: 50px;
                background: #CC66FF;
                border: #000 1px solid;
                font-size: 12px;
                font-family:Roman;
            }
            
            div .mini01{
                width: 50px;
                height: 50px;
                background: #CC66FF;
                border: #000 1px solid;
                font-size: 12px;
                font-family:Roman;
            }
     </style>
    <script type="text/javascript">

        $(function () {
            // <input type="button" value=" 改变第一个 div 元素的背景色为 红色"  id="b1"/>
            $("#b1").click(function(){
                $("div:first").css("backgroundColor","red");
            });
            // <input type="button" value=" 改变最后一个 div 元素的背景色为 红色"  id="b2"/>
            $("#b2").click(function(){
                $("div:last").css("backgroundColor","red");
            });
            // <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色"  id="b3"/>
            $("#b3").click(function(){
                $("div:not(.one)").css("backgroundColor","red");
            });
            // <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色"  id="b4"/>
            $("#b4").click(function(){
                $("div:even").css("backgroundColor","red");
            });
            // <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色"  id="b5"/>
            $("#b5").click(function(){
                $("div:odd").css("backgroundColor","red");
            });
            // <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色"  id="b6"/>
            $("#b6").click(function(){
                $("div:gt(3)").css("backgroundColor","red");
            });
            // <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色"  id="b7"/>
            $("#b7").click(function(){
                $("div:eq(3)").css("backgroundColor","red");
            });
            // <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色"  id="b8"/>
            $("#b8").click(function(){
                $("div:lt(3)").css("backgroundColor","red");
            });
            // <input type="button" value=" 改变所有的标题元素的背景色为 红色"  id="b9"/>
            $("#b9").click(function(){
                $(":header").css("backgroundColor","red");
            });
        });
    </script>
    </head>
     
    <body>
                
         <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
         <input type="button" value=" 改变第一个 div 元素的背景色为 红色"  id="b1"/>
         <input type="button" value=" 改变最后一个 div 元素的背景色为 红色"  id="b2"/>
         <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色"  id="b3"/>
         <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色"  id="b4"/>
         <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色"  id="b5"/>
         <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色"  id="b6"/>
         <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色"  id="b7"/>
         <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色"  id="b8"/>
         <input type="button" value=" 改变所有的标题元素的背景色为 红色"  id="b9"/>     
         <h1>有一种奇迹叫坚持</h1>
         <h2>自信源于努力</h2>
         <div id="one">
             id为one  
             
         </div>
        
         <div id="two" class="mini" >
               id为two   class是 mini 
               <div  class="mini" >class是 mini</div>
        </div>
        
         <div class="one" >
                class是 one 
               <div  class="mini" >class是 mini</div>
               <div  class="mini" >class是 mini</div>
         </div>
         <div class="one" >
              class是 one 
               <div  class="mini01" >class是 mini01</div>
               <div  class="mini" >class是 mini</div>
               <div  class="mini" >class是xinlaid mini</div>
        </div>          
    </body>  
</html>
フォームフィルタセレクタ

セレクタ利用可能な要素：利用可能な要素のために有効に

利用不可能要素セレクター：利用不可能得無効要素

セレクタを選択してラジオ/チェックボックス要素をチェックします

セレクターを選択：選択した要素は、ドロップダウンボックスで取得

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>表单属性过滤选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script  src="js/jquery-3.3.1.min.js"></script>
    <style type="text/css">
            div,span{
                width: 180px;
                height: 180px;
                margin: 20px;
                background: #9999CC;
                border: #000 1px solid;
                float:left;
                font-size: 17px;
                font-family:Roman;
            }
            
            div .mini{
                width: 50px;
                height: 50px;
                background: #CC66FF;
                border: #000 1px solid;
                font-size: 12px;
                font-family:Roman;
            }
            
            div .mini01{
                width: 50px;
                height: 50px;
                background: #CC66FF;
                border: #000 1px solid;
                font-size: 12px;
                font-family:Roman;
            }
            #job{
                margin: 20px;
            }
            #edu{
                margin-top:-70px;
            }       
     </style>
    <script type="text/javascript">
    
        $(function () {
            // <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值"  id="b1"/>
            $("#b1").click(function(){
                //获取所有的表单，并且是纯文本框可用的，改变他们的值
                $("input[type='text']:enabled").val("aaa");
            })
            // <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值"  id="b2"/>
            $("#b2").click(function(){
                $("input[type='text']:disabled").val("aaa");
            })
            // <input type="button" value=" 利用 jQuery 对象的 length 属性获取复选框选中的个数"  id="b3"/>
            $("#b3").click(function(){
                //获取所有复选框，checked表示选中的个数
                alert($("input[type='checkbox']:checked").length);
            })
            // <input type="button" value=" 利用 jQuery 对象的 length 属性获取下拉框选中的个数"  id="b4"/>
            $("#b4").click(function(){
                //通过id获取器获得下拉框元素
                alert($("#job > option:selected").length);
            });
        });     
    </script>
    </head>  
    <body>              
         <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
         <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值"  id="b1"/>
         <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值"  id="b2"/>
         <input type="button" value=" 利用 jQuery 对象的 length 属性获取复选框选中的个数"  id="b3"/>
         <input type="button" value=" 利用 jQuery 对象的 length 属性获取下拉框选中的个数"  id="b4"/>
 
        <br><br>
        
         <input type="text" value="不可用值1" disabled="disabled"> 
         <input type="text" value="可用值1" >
         <input type="text" value="不可用值2" disabled="disabled">
         <input type="text" value="可用值2" >
         
         <br><br>
         <input type="checkbox" name="items" value="美容" >美容
         <input type="checkbox" name="items" value="IT" >IT
         <input type="checkbox" name="items" value="金融" >金融
         <input type="checkbox" name="items" value="管理" >管理
         
         <br><br>
         
          <input type="radio" name="sex" value="男" >男
          <input type="radio" name="sex" value="女" >女
          
         <br><br>
         
          <select name="job" id="job" multiple="multiple" size=4>
            <option>程序员</option>
            <option>中级程序员</option>
            <option>高级程序员</option>
            <option>系统分析师</option>
          </select>
            
          <select name="edu" id="edu">
            <option>本科</option>
            <option>博士</option>
            <option>硕士</option>
            <option>大专</option>
          </select>         
        <br/>
            
         <div id="two" class="mini" >
               id为two   class是 mini  div
               <div  class="mini" >class是 mini</div>
        </div>
        
         <div class="one" >
                class是 one 
               <div  class="mini" >class是 mini</div>
               <div  class="mini" >class是 mini</div>
         </div>
         <div class="one" >
              class是 one 
               <div  class="mini01" >class是 mini01</div>
               <div  class="mini" >class是 mini</div>
        </div>
        
    </body>  
</html>
DOM操作

（動作させるために、タグ本体の属性またはタグ本体のコンテンツを区別する必要があることです）

コンテンツの操作

HTML（）/タグ本体要素の内容を取得または設定します

テキスト（）：/タグbody要素プレーンテキストを設定し、取得します

ヴァル（）：/ value属性要素を設定し、取得します

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script  src="js/jquery-3.3.1.min.js"></script>
        <script>
            $(function () {
                // 获取myinput的value值
                // 通过id选择器获取元素对象
                var value = $("#myinput").val();
                alert(value);
                // 获取mydiv的标签体内容,使用html方法
                alert($("#mydiv").html());
                // 获取mydiv文本内容
                alert($("#mydiv").text());
            });
        </script>
    </head>
    <body>
        <input id="myinput" type="text" name="username" value="张三" /><br />
        <div id="mydiv"><p><a href="#">标题标签</a></p></div>
    </body>
</html>
プロパティの操作

一般的な操作1.プロパティ

  • （）ATTR：取得/要素の属性を設定します
  • removeAttr（）：プロパティを削除します。
  • （）小道具：取得/要素の属性を設定します
  • removeProp（）：プロパティを削除します。
小道具およびattRの違い

操作は要素の固有の特性である場合には、プロップを使用することをお勧めします

操作は自己定義された属性の要素であるならば、ATTRを使用することをお勧めします

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>获取属性</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script  src="js/jquery-3.3.1.min.js"></script>
    
    
    <style type="text/css">
            div,span{
                width: 140px;
                height: 140px;
                margin: 20px;
                background: #9999CC;
                border: #000 1px solid;
                float:left;
                font-size: 17px;
                font-family:Roman;
            }
            
            div.mini{
                width: 30px;
                height: 30px;
                background: #CC66FF;
                border: #000 1px solid;
                font-size: 12px;
                font-family:Roman;
            }
            
            div.visible{
                display:none;
            }
     </style>
    
    <script type="text/javascript">
        $(function () {
            //获取北京节点的name属性值
            //name是标签体的属性，li标签中没有name属性，所以是自定义的属性，建议使用attr
            //获取标签元素，使用方法attr获取属性值
            var value = $("#bj").attr("name");
            alert(value);
            //设置北京节点的name属性的值为dabeijing
            var value1 = $("#bj").attr("name","dabeijing");
            //新增北京节点的discription属性 属性值是didu
            var value2 = $("#bj").attr("discription","didu");
            //删除北京节点的name属性并检验name属性是否存在
            $("#bj").removeAttr("name")
            //获得hobby的的选中状态,checked是固有属性，建议使用prop
            var checked = $("#hobby").prop("checked");
            alert(checked);
        });
        
    </script>   
    
    </head>
     
    <body>
                
         <ul>
             <li id="bj" name="beijing" xxx="yyy">北京</li>
             <li id="tj" name="tianjin">天津</li>
         </ul>
         <input type="checkbox" id="hobby"/>     
        
    </body> 
   
</html>
2.クラス属性の操作

1.addClass（）：クラス属性値を追加します

2.removeClass（）：クラス属性値を削除します。

3.toggleClass（）：クラス属性を切り替える（属性値が存在する場合、それを削除し、プロパティの値が追加することが存在しません）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>样式操作</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script  src="js/jquery-3.3.1.min.js"></script>
    <style type="text/css">
           .one{
                width: 200px;
                height: 140px;
                margin: 20px;
                background: red;
                border: #000 1px solid;
                float:left;
                font-size: 17px;
                font-family:Roman;
            }
        
            div,span{
                width: 140px;
                height: 140px;
                margin: 20px;
                background: #9999CC;
                border: #000 1px solid;
                float:left;
                font-size: 17px;
                font-family:Roman;
            }
            
            div .mini{
                width: 40px;
                height: 40px;
                background: #CC66FF;
                border: #000 1px solid;
                font-size: 12px;
                font-family:Roman;
            }
            div .mini01{
                width: 40px;
                height: 40px;
                background: #CC66FF;
                border: #000 1px solid;
                font-size: 12px;
                font-family:Roman;
            }
            
            /*待用的样式*/
            .second{
                width: 300px;
                height: 340px;
                margin: 20px;
                background: yellow;
                border: pink 3px dotted;
                float:left;
                font-size: 22px;
                font-family:Roman;
            }       
            
     </style>
    <script type="text/javascript">

        $(function () {
            // <input type="button" value="采用属性增加样式(改变id=one的样式)"  id="b1"/>
            //使用attr获取/设置属性的值
            $("#b1").click(function () {
                $("#one").attr("class","second");
            })
            // <input type="button" value=" addClass"  id="b2"/>
            $("#b2").click(function () {
                $("#one").addClass("second");
            })
            // <input type="button" value="removeClass"  id="b3"/>
            $("#b3").click(function () {
                $("#one").removeClass("second");
            })
            // <input type="button" value=" 切换样式"  id="b4"/>
            $("#b4").click(function () {
                $("#one").toggleClass("second");
            })
            // <input type="button" value=" 通过css()获得id为one背景颜色"  id="b5"/>
            $("#b5").click(function () {
                alert($("#one").css("backgroundColor"))
            })
            // <input type="button" value=" 通过css()设置id为one背景颜色为绿色"  id="b6"/>
            $("#b6").click(function () {
               $("#one").css("backgroundColor","green")
            })
        });  
    
    </script>
   
    </head>
     
    <body>
                
         <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
         <input type="button" value="采用属性增加样式(改变id=one的样式)"  id="b1"/>
         <input type="button" value=" addClass"  id="b2"/>
         <input type="button" value="removeClass"  id="b3"/>
         <input type="button" value=" 切换样式"  id="b4"/>
         <input type="button" value=" 通过css()获得id为one背景颜色"  id="b5"/>
         <input type="button" value=" 通过css()设置id为one背景颜色为绿色"  id="b6"/>
 
         <h1>有一种奇迹叫坚持</h1>
         <h2>自信源于努力</h2>
         
         <div id="one" class="one">
             id为one 
         </div>
        
         <div id="two" class="mini" >
               id为two   class是 mini 
               <div  class="mini" >class是 mini</div>
        </div>
        
         <div class="one" >
                class是 one 
               <div  class="mini" >class是 mini</div>
               <div  class="mini" >class是 mini</div>
         </div>
         
         <div class="one" >
              class是 one 
               <div  class="mini01" >class是 mini01</div>
               <div  class="mini" >class是 mini</div>
        </div>
        <span class="spanone">    span
        </span>
        
    </body>
    
</html>
CRUD操作
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>内部插入脚本</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script  src="js/jquery-3.3.1.min.js"></script>
    <style type="text/css">
            div,span{
                width: 140px;
                height: 140px;
                margin: 20px;
                background: #9999CC;
                border: #000 1px solid;
                float:left;
                font-size: 17px;
                font-family:Roman;
            }
            
            div .mini{
                width: 30px;
                height: 30px;
                background: #CC66FF;
                border: #000 1px solid;
                font-size: 12px;
                font-family:Roman;
            }
            
            div.visible{
                display:none;
            }
     </style>
     <script type="text/javascript">

         $(function () {
             // <input type="button" value="将反恐放置到city的后面"  id="b1"/>
             $("#b1").click(function () {
                 $("#city").append($("#fk"));
             })
             // <input type="button" value="将反恐放置到city的最前面"  id="b2"/>
             $("#b2").click(function () {
                 $("#city").prepend($("#fk"));
             })
             // <input type="button" value="将反恐插入到天津后面"  id="b3"/>
             $("#b3").click(function () {
                 $("#tj").after($("#fk"));
             })
             // <input type="button" value="将反恐插入到天津前面"  id="b4"/>
             $("#b4").click(function () {
                 $("#tj").before($("#fk"));
             })
         });


        
    </script>
     
     
    </head>
     
    <body>

        <input type="button" value="将反恐放置到city的后面"  id="b1"/>
        <input type="button" value="将反恐放置到city的最前面"  id="b2"/>
        <input type="button" value="将反恐插入到天津后面"  id="b3"/>
        <input type="button" value="将反恐插入到天津前面"  id="b4"/>
         <ul id="city">
             <li id="bj" name="beijing">北京</li>
             <li id="tj" name="tianjin">天津</li>
             <li id="cq" name="chongqing">重庆</li>
         </ul>   
         
          <ul id="love">
             <li id="fk" name="fankong">反恐</li>
             <li id="xj" name="xingji">星际</li>
         </ul>
        
        <div id="foo1">Hello1</div> 
       
    </body>
    
   
</html>
高度なjQueryの

アニメーション

表示し、要素を非表示するには、3つの方法

1.デフォルトの表示モードと非表示

  1. ショー（[速度]、[緩和]、[FN]）
  2. 非表示（[速度]、[緩和]、[FN]）
  3. トグル（[速度]、[緩和]、[FN]）

速度：アニメーションの速度、3つの定義済みの値（「遅い」、「ノーマル」、「高速」）またはミリ秒のアニメーションを多数発現

緩和：効果を切り替えるには、デフォルトでは「スイング」、使用可能なパラメータ「直線的」であります

FN：アニメーションは、各実行機能は、一度、関数実行中に行われます

2.スライドショーと道を隠します

1.slideDown（[速度]、[緩和]、[FN]）

2.slideUp（[速度]、[緩和]、[FN]）

3.slideToggle（[速度]、[緩和]、[FN]）

3.フェードが道を示し、非表示にします

フェードイン（[速度]、[緩和]、[FN]）

フェードアウト（[速度]、[緩和]、[FN]）

fadeToggle（[速度]、[緩和]、[FN]）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>


    <script>
        //隐藏div
        function hideFn(){
            //默认方式
          //$("#showDiv").hide("slow","swing")
            //滑动方式
          //$("#showDiv").slideUp("slow","swing")
            //淡入淡出方式
          $("#showDiv").fadeOut("8000","swing")
        }
        //点击按钮显示div
        function showFn(){
            //默认方式
             //$("#showDiv").show("slow","linear");
            //滑动方式
             //$("#showDiv").slideDown("slow","linear");
            //淡入淡出方式
             $("#showDiv").fadeIn("5000","linear");
        }
        //点击按钮切换div显示和隐藏
        function toggleFn(){
             //默认方式
             //$("#showDiv").toggle("slow","swing");
             //滑动方式
             //$("#showDiv").slideToggle("slow","swing");
            //淡入淡出方式
             $("#showDiv").fadeToggle("5000","swing");
        }
    </script>

</head>
<body>
<input type="button" value="点击按钮隐藏div" onclick="hideFn()">
<input type="button" value="点击按钮显示div" onclick="showFn()">
<input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()">

<div id="showDiv" style="width:300px;height:300px;background:pink">
    div显示和隐藏
</div>
</body>
</html>
トラバーサル

用JSトラバーサル（初期値、ループ終了条件;ステップ）

JQトラバーサル

1.jqは.eachオブジェクト（コールバック）

2。$。各（オブジェクト、[コールバック]）

3.for ...の。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">

    $(function () {
        //获取遍历对象
       var citys =  $("#city li");
       //第一种方式，不能获得索引
       citys.each(function (index,element) {
       //     alert(this.innerHTML)
       // });
        //第二种方式，可以获得索引，在回调函数中定义参数
       if("上海"==$(element).html()){
           return false;//false相当于java的break,true相当于continue
       }
        alert(index+":"+$(element).html());//把获得的js对象强制转换jq对象
    });
    });
    </script>
</head>
<body>
<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
    <li>重庆</li>
</ul>
</body>
</html>
イベントバインディング

1.jquery標準的な結合方法:. JQ対象イベントメソッド（コールバック）

アンバインド2.on結合事象/オフ

（ "イベント名"、コールバック）.on JQオブジェクト

JQは.offオブジェクト（ "イベント名"）

3.イベントスイッチ：トグル

JQオブジェクト.toggle（FN1、FN2 ....）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function () {
            //绑定单机事件
            $("#btn").on("click",function () {
                alert("我被点击了")
            })
            //解除单机事件
            $("#btn2").click(function () {
                $("#btn").off("click");//若不传递click参数，则将btn上的所有绑定事件解绑
            })
        });


    </script>
</head>
<body>
<input id="btn" type="button" value="使用on绑定点击事件">
<input id="btn2" type="button" value="使用off解绑点击事件">
</body>
</html>
ケース1

ページの読み込み、3秒を完了すると、自動的に広告が表示されます

広告が5秒間表示された後、自動的に消え

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>广告的自动显示与隐藏</title>
    <style>
        #content{width:100%;height:500px;background:#999}
    </style>

    <!--引入jquery-->
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script>
        $(function () {
            setTimeout(adShow,3000);
            setTimeout(adHide,8000);
        })
        function adShow() {
            $("#ad").fadeIn("slow","swing")
        }
        function adHide() {
            $("#ad").fadeOut("slow","swing")
        }


    </script>
</head>
<body>
<!-- 整体的DIV -->
<div>
    <!-- 广告DIV -->
    <div id="ad" style="display: none;">
        <img style="width:100%" src="adv.jpg" />
    </div>

    <!-- 下方正文部分 -->
    <div id="content">
        正文部分
    </div>
</div>
</body>
</html>
ケース2--宝くじ
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jquery案例之抽奖</title>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>

    <script language='javascript' type='text/javascript'>
        var imgs = [
            "man00.jpg",
            "man01.jpg",
            "man02.jpg",
            "man03.jpg",
            "man04.jpg",
            "man05.jpg",
            "man06.jpg",
        ];
        var satrtId;
        var index;
        $(function () {
            //点击开始按钮，需要循环加载图片
          $("#startID").click(function () {
              $("#startID").prop("disabled",false);//设置按钮可用
              $("#stopID").prop("disabled",true);//设置按钮不可用
                //使用定时器，循环加载图片
              satrtId= setInterval(function () {
                  $("#startID").prop("disabled",true);
                  $("#stopID").prop("disabled",false);
                    //随机获得数字
                    index = Math.floor(Math.random()*7);
                    $("#img1ID").prop("src",imgs[index]);//获得随机图片
                },20);
            })
            //点击停止按钮，加载大方框图片
            $("#stopID").click(function () {
                $("#startID").prop("disabled",false);
                $("#stopID").prop("disabled",true);
                //结束定时器
                clearInterval(satrtId)
               var img =  $("#img2ID").prop("src",imgs[index]).hide();
                img.show(1000);

            })
        })

    </script>

</head>
<body>

<!-- 小像框 -->
<div style="border-style:dotted;width:160px;height:100px">
    <img id="img1ID" src="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="man00.jpg" width="800px" height="500px"/>
</div>

<!-- 开始按钮 -->
<input
        id="startID"
        type="button"
        value="点击开始"
        style="width:150px;height:150px;font-size:22px">

<!-- 停止按钮 -->
<input
        id="stopID"
        type="button"
        value="点击停止"
        style="width:150px;height:150px;font-size:22px">


</body>
</html>

IMG

プラグイン機構

実装：

1. jqueryの$を通じてオブジェクトを取得するには$。Fn.extend（オブジェクト）、拡張機能（ "＃番号"）

（オブジェクトのメソッド呼び出しを使用して）

<!DOCTYPE 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">
       //使用jquery插件 给jq对象添加2个方法 check()选中所有复选框，uncheck()取消选中所有复选框
        //1.定义jqeury的对象插件
            $.fn.extend({
                //该方法所有的jq对象都可以调用
                check:function () {
                    this.prop("checked",true);
                },
                uncheck:function () {
                    this.prop("checked",false);
                }
            });
            $(function () {
                $("#btn-check").click(function () {
                    $("input[type='checkbox']").check();//获取所有的复选框对象
                })

            })
       $(function () {
           $("#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>

2. $。拡張（オブジェクト）、オブジェクト自体jQueryの強化された機能、$ / jQueryの

（メソッドを呼び出すために$を使用します）

<!DOCTYPE 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(2,3);
        alert(max);

        var min =  $.min(2,3);
        alert(min);

    </script>
</head>
<body>
</body>
</html>

おすすめ

転載: www.cnblogs.com/train99999/p/11037394.html
おすすめ
ランキング
Javaのデザインパターンプロトタイプモード
パンダのデータ処理| apply（）関数の使用ガイド！
C＃02
同じフォームを使用してレコードを追加し、更新するPHPのフォームは、クエリパラメータに依存します
1807512-43-1，Dde Biotin-PEG4-DBCO可切割的生物素试剂
LINUXは、一時的にユーザーIDを切り替えるためにsuコマンドを使用します
例题8-15(uva-12174)
VTK-vtk質量特性
DockfileとDockerのデータボリューム
SQLの分離レベル
アーカイブ
もっと
2024-06-16(0)
2024-06-15(0)
2024-06-14(0)
2024-06-13(0)
2024-06-12(0)
2024-06-11(0)
2024-06-10(0)
2024-06-09(0)
2024-06-08(0)
2024-06-07(0)

コードワールド

© 2018 codetd.com