筆記-JavaWeb學習之旅17

train99999發表於2019-06-16

筆記JavaWeb

1.過濾選擇器

首元素選擇器：first 獲得選擇的元素中的第一個元素

尾元素選擇器：last獲得選擇元素中的最後一個元素

非元素選擇器：not(selector) 不包括指定內容的元素

偶數選擇器：even偶數，從0開始計數

奇數選擇器：odd奇數，從0開始計數

等於索引選擇器：eq(index)指定索引元素

大於索引選擇器：gt(index) 大於指定索引元素

小於索引選擇器：lt(index)小於指定索引元素

標題選擇器：header 獲得標題(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>

表單過濾選擇器

可用元素選擇器：enabled 獲得可用元素

不可用元素選擇器：disabled 獲得不可用元素

選中選擇器 checked 獲得單選/核取方塊選中的元素

選中選擇器：selected 獲得下拉框選中的元素

<!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():獲取/設定元素的標籤體內容

text()：獲取/設定元素的標籤體純文字內容

val()：獲取/設定元素的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():刪除屬性
prop():獲取/設定元素的屬性
removeProp():刪除屬性

attr和prop的區別

如果操作的是元素的固有屬性，則建議使用Prop

如果操作的是元素自定義的屬性，則建議使用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.對class屬性的操作

1.addClass():新增class屬性值

2.removeClass():刪除class屬性值

3.toggleClass():切換class屬性(如果存在該屬性值就刪除掉，不存在該屬性值就新增)

<!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高階

動畫

三種方式顯示和隱藏元素

1.預設顯示和隱藏方式

show([speed],[easing],[fn])
hide([speed],[easing],[fn])
toggle([speed],[easing],[fn])

speed:動畫的速度，三個預定義的值("slow","normal","fast")或表示動畫時長的毫秒數值

easing:用來指定切換效果，預設是"swing",可用引數"linear"

fn:在動畫完成是執行的函式，每個函式執行一次

2.滑動顯示和隱藏方式

1.slideDown([speed],[easing],[fn])

2.slideUp([speed],[easing],[fn])

3.slideToggle([speed],[easing],[fn])

3.淡入淡出顯示和隱藏方式

fadeIn([speed],[easing],[fn])

fadeOut([speed],[easing],[fn])

fadeToggle([speed],[easing],[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遍歷方式 for(初始化值;迴圈結束條件；步長)

jq遍歷方式

1.jq物件.each(callback)

2.$.each(object,[callback])

3.for...of;

<!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繫結事件/off解除繫結

jq物件.on("事件名稱"，回撥函式)

jq物件.off("事件名稱")

3.事件切換：toggle

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>

外掛機制

實現方式：

1.$.fn.extend(object),增強通過jquery獲取物件的功能 $("#id")

(使用物件呼叫方法)

<!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.$.extend(object),增強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>

JavaWeb 學習筆記
2018-10-28
JavaWeb筆記
JavaWeb學習筆記
2020-10-24
JavaWeb筆記
JavaWeb學習筆記~01.Servlet
2020-11-27
JavaWeb筆記Servlet
JavaWeb基礎-學習筆記02
2024-10-03
JavaWeb筆記
JavaWeb學習筆記後端部分
2024-07-19
JavaWeb筆記後端
Java基礎-學習筆記17
2024-09-09
Java筆記
JavaWeb學習筆記——第一天
2024-03-22
JavaWeb筆記
JavaWeb學習筆記——第七天
2024-03-28
JavaWeb筆記
JavaWeb學習筆記——第九天
2024-03-30
JavaWeb筆記
JavaWeb學習筆記——第十一天
2024-04-01
JavaWeb筆記
JavaWeb學習筆記——第十四天
2024-04-04
JavaWeb筆記
Hadoop學習筆記—17.Hive框架學習
2015-04-19
Hadoop筆記Hive框架
JavaWeb學習筆記_Day03_JavaScript詳解
2020-11-25
Web筆記JavaScript
JavaWeb學習筆記——Tomcat資料來源
2016-05-14
JavaWeb筆記Tomcat
面試複習筆記二(javaweb)
2017-12-14
面試筆記JavaWeb
Java學習筆記：Javaweb的伺服器介紹
2021-06-15
Java筆記Web伺服器
Java學習筆記-Day52 JavaWeb、Tomcat、Servlet
2020-12-23
Java筆記WebTomcatServlet
三路合併 —— Git 學習筆記 17
2018-10-14
Git筆記
2020-11-17 redis學習筆記
2020-11-17
Redis筆記
20160322 javaweb 學習筆記--response 重定向
2016-03-22
JavaWeb筆記
筆記二(JavaWeb)
2020-05-22
筆記JavaWeb
Solidity語言學習筆記————17、原始檔對映
2018-06-22
Solid筆記
javaweb學習4
2024-09-28
JavaWeb
numpy的學習筆記\pandas學習筆記
2018-03-18
筆記
Redis基礎知識（學習筆記17--持久化 (3)）
2024-07-13
Redis筆記持久化
JavaScript入門學習之旅(二)——JavaScript DOM程式設計藝術學習筆記(上)
2017-07-13
JavaScript程式設計筆記
《從零開始學Swift》學習筆記（Day 17）——Swift中陣列集合
2016-03-15
Swift筆記陣列
學習筆記歸納 2010-9-5.10-17
2020-04-05
筆記
P6學習筆記（Oracle Primavera P6 R17）
2018-10-25
筆記Oracle
RHCE7認證學習筆記17——KickStart安裝系統
2016-03-14
筆記
CMake構建學習筆記17-uriparser庫的構建和使用
2024-09-17
筆記
20160322 javaweb 學習筆記--response驗證碼實現
2016-03-22
JavaWeb筆記
IT學習筆記
2009-10-14
筆記
學習筆記
2024-04-14
筆記
JavaWeb學習總結
2018-12-20
JavaWeb
javaweb學習路線
2016-12-16
JavaWeb
JAVA程式設計學習記錄（JavaWeb-Html）
2018-03-29
Java程式設計WebHTML
【學習筆記】數學
2024-07-15
筆記