JQuery:JQuery基本語法,JQuery選擇器,JQuery DOM,綜合案例 複選框,綜合案例 隨機圖片

時間  2021-02-23
標籤 css html jquery 編程 數組 瀏覽器 app 框架 函數 工具 欄目 JQuery 简体版
原文   原文鏈接

知識點梳理

課堂講義

一、JQuery快速入門

1.一、JQuery介紹

  • jQuery 是一個 JavaScript 庫。css

    • 框架：Mybatis （jar包） 大工具html

    • 插件：PageHelper （jar包） 小工具jquery

    • 庫：js庫：jquery (js文件) 小工具 （對於原生語言的升級，擴展）編程

  • 所謂的庫，就是一個 JS 文件，裏面封裝了不少預約義的函數，好比獲取元素，執行隱藏、移動等，目的就 是在使用時直接調用，不須要再重複定義，這樣就能夠極大地簡化了 JavaScript 編程。數組

  • jQuery 官網：https://www.jquery.com瀏覽器

 

 

1.二、JQuery快速入門

  • 開發思路app

  1. 編寫 HTML 文檔。 框架

  2. 引入 jQuery 文件。函數

  3. 使用 jQuery 獲取元素。工具

  4. 使用瀏覽器測試。

  • 代碼實現

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快速入門</title>
</head>
<body>
    <div id="div">我是div</div>
</body>
<!--引入 jQuery 文件-->
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    // JS方式，經過id屬性值來獲取div元素
    let jsDiv = document.getElementById("div");
    //alert(jsDiv);
    //alert(jsDiv.innerHTML);
​
    // jQuery方式，經過id屬性值來獲取div元素
    let jqDiv = $("#div");
    alert(jqDiv);
    alert(jqDiv.html());
</script>
</html>

1.三、小結

  • jQuery 是一個 JavaScript 庫。

  • 說白了就是定義好的一個 JS 文件，內部封裝了不少功能，能夠大大簡化咱們的 JS 操做步驟。

  • jQuery 官網：https://www.jquery.com。

  • 要想使用，必需要引入該文件。

  • jQuery 的核心語法 $();

二、JQuery基本語法

2.一、JS對象和JQuery對象轉換

  • jQuery 本質上雖然也是 JS，但若是想使用 jQuery 的屬性和方法那麼必須保證對象是 jQuery 對象，而不是 JS 方式得到的 DOM 對象，兩者的 API 方法不能混合使用，若想使用對方的 API，須要進行對象的轉換。

  • JS 的 DOM 對象轉換成 jQuery 對象

    //$(JS 的 DOM 對象);
    ​
    // JS方式，經過id屬性值獲取div元素
    let jsDiv = document.getElementById("div");
    alert(jsDiv.innerHTML);
    //alert(jsDiv.html()); JS對象沒法使用jQuery裏面的功能
    ​
    // 將 JS 對象轉換爲jQuery對象
    let jq = $(jsDiv);
    alert(jq.html());

  • jQuery 對象轉換成 JS 對象

    /*jQuery 對象[索引];
    jQuery 對象.get(索引);*/
    ​
    // jQuery方式，經過id屬性值獲取div元素
    let jqDiv = $("#div");
    alert(jqDiv.html());
    // alert(jqDiv.innerHTML);   jQuery對象沒法使用JS裏面的功能
    ​
    // 將 jQuery對象轉換爲JS對象 ( 將獲取到的js對象放入一個數組中，jq對象就是一個包含了js對象的數組)
    let js = jqDiv[0];
    alert(js.innerHTML);

2.二、事件的基本使用

  • 經常使用的事件

     

     

  • 在 jQuery 中將事件封裝成了對應的方法。去掉了 JS 中的 .on 語法。

  • 代碼實現

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>事件的使用</title>
    </head>
    <body>
        <input type="button" id="btn" value="點我">
        <br>
        <input type="text" id="input">
    </body>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        //單擊事件
        $("#btn").click(function(){
            alert("點我幹嗎?");
       });
    ​
        //獲取焦點事件
        // $("#input").focus(function(){
        //     alert("你要輸入數據啦...");
        // });
    ​
        //失去焦點事件
        $("#input").blur(function(){
            alert("你輸入完成啦...");
       });
    </script>
    </html>

2.三、事件的綁定和解綁

  • 綁定事件

    //jQuery 對象.on(事件名稱,執行的功能);

    //給btn1按鈕綁定單擊事件
    $("#btn1").on("click",function(){
    alert("點我幹嗎?");
    });

  • 解綁事件

    若是不指定事件名稱，則會把該對象綁定的全部事件都解綁

    //jQuery 對象.off(事件名稱);

    //經過btn2解綁btn1的單擊事件
    $("#btn2").on("click",function(){
    $("#btn1").off("click");
    });

2.四、事件的切換

事件的切換：須要給同一個對象綁定多個事件，並且多個事件還有前後順序關係。

  • 方式一：單獨定義

    $(元素).事件方法名1(要執行的功能);

    $(元素).事件方法名2(要執行的功能);

    //方式一 單獨定義
    $("#div").mouseover(function(){
        //背景色：紅色
        //$("#div").css("background","red");
        $(this).css("background","red");
       });
    $("#div").mouseout(function(){
        //背景色：藍色
        //$("#div").css("background","blue");
        $(this).css("background","blue");
    });

  • 方式二：鏈式定義

    $(元素).事件方法名1(要執行的功能)

    .事件方法名2(要執行的功能);

    //方式二 鏈式定義
    $("#div").mouseover(function(){
       $(this).css("background","red");
    }).mouseout(function(){
       $(this).css("background","blue");
    });

2.五、遍歷操做

  • 方式一：傳統方式

    for(let i = 0; i < 容器對象長度; i++){
      執行功能;
    }
    //方式一：傳統方式
    $("#btn").click(function(){
        let lis = $("li");//傳入的是一個標籤名，就會獲取全部的標籤對象，將標籤對象放入jQuery對象
        for(let i = 0 ; i < lis.length; i++) {
            alert(i + ":" + lis[i].innerHTML);
       }
    });

  • 方式二：對象.each()方法

    容器對象.each(function(index,ele){
     執行功能;
    });
    //方式二：對象.each()方法
    $("#btn").click(function(){
        let lis = $("li");
        lis.each(function(index,ele){// 匿名函數做爲參數傳遞給each方法，就是由each方法內部來調用
            alert(index + ":" + ele.innerHTML);
            // each方法第一次調用匿名函數時，0 , lis[0]
            // each方法第二次調用匿名函數時，1 , lis[1]
       });
    });

  • 方式三：$.each()方法

    $.each(容器對象,function(index,ele){
     執行功能;
    });
    //方式三：$.each()方法
    $("#btn").click(function(){
        let lis = $("li");
        $.each(lis,function(index,ele){
            alert(index + ":" + ele.innerHTML);
       });
    });

  • 方式四：for of語句

    for(ele of 容器對象){
     執行功能;
    }
    //方式四：for of 語句遍歷
    $("#btn").click(function(){
        let lis = $("li");
        for(ele of lis){
            alert(ele.innerHTML);
       }
    });

2.六、小結

  • JS 對象和 jQuery 對象相互轉換

    • $(JS 的 DOM 對象)：將 JS 對象轉爲 jQuery 對象。

    • jQuery 對象[索引] jQuery

    • 對象.get(索引)：將 jQuery 對象轉爲 JS 對象。

  • 事件

    • 在 jQuery 中將事件封裝成了對應的方法。去掉了 JS 中的 .on 語法。

    • on(事件名稱,執行的功能)：綁定事件。

    • off(事件名稱)：解綁事件。

  • 遍歷

    • 傳統方式。

    • 對象.each() 方法。

    • $.each() 方法。

    • for of 語句。

三、JQuery選擇器

3.一、基本選擇器

  • 選擇器：相似於 CSS 的選擇器，能夠幫助咱們獲取元素。

  • 例如：id 選擇器、類選擇器、元素選擇器、屬性選擇器等等。

  • jQuery 中選擇器的語法：$();

     

     

     

    代碼實現

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>基本選擇器</title>
    </head>
    <body>
        <div id="div1">div1</div>
        <div class="cls">div2</div>
        <div class="cls">div3</div>
    </body>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        //1.元素選擇器   $("元素的名稱")
        let divs = $("div");
        //alert(divs.length);
    ​
        //2.id選擇器   $("#id的屬性值")
        let div1 = $("#div1");
        //alert(div1);
    ​
        //3.類選擇器     $(".class的屬性值")
        let cls = $(".cls");
        alert(cls.length);
    ​
    </script>
    </html>

3.二、層級選擇器

 

 

  • A和B表明的是任意的基本選擇器

  • 代碼實現

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>層級選擇器</title>
    </head>
    <body>
        <div>
            <span>s1
                <span>s1-1</span>
                <span>s1-2</span>
            </span>
            <span>s2</span>
        </div>
    ​
        <div></div>
        <p>p1</p>
        <p>p2</p>
    </body>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        // 1. 後代選擇器 $("A B");     A下的全部B(包括B的子級)
        let spans1 = $("div span");
        //alert(spans1.length);
    ​
        // 2. 子選擇器   $("A > B");   A下的全部B(不包括B的子級)
        let spans2 = $("div > span");
        //alert(spans2.length);
    ​
        // 3. 兄弟選擇器 $("A + B");   A相鄰的下一個B
        let ps1 = $("div + p");
        //alert(ps1.length);
    ​
        // 4. 兄弟選擇器 $("A ~ B");   A相鄰的全部B
        let ps2 = $("div ~ p");
        alert(ps2.length);
        
    </script>
    </html>

3.三、屬性選擇器

 

 

  • 代碼實現

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>屬性選擇器</title>
    </head>
    <body>
        <input type="text">
        <input type="password">
        <input type="password">
    </body>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        //1.屬性名選擇器   $("元素[屬性名]")
        let in1 = $("input[type]");
        //alert(in1.length);
    ​
    ​
        //2.屬性值選擇器   $("元素[屬性名=屬性值]")
        let in2 = $("input[type='password']");
        alert(in2.length);
    ​
    </script>
    </html>

3.四、過濾器選擇器

 

 

  • 語法： 基本選擇器/層級選擇器 : 過濾選擇器

  • 基本選擇器 不包含id選擇器

  • 過濾選擇器，是從多個結果中選擇一個或多個

  • 代碼實現

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>過濾器選擇器</title>
    </head>
    <body>
        <div>div1</div>
        <div id="div2">div2</div>
        <div>div3</div>
        <div>div4</div>
    </body>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        // 1.首元素選擇器 $("A:first");
        let div1 = $("div:first");
        //alert(div1.html());
    ​
        // 2.尾元素選擇器 $("A:last");
        let div4 = $("div:last");
        //alert(div4.html());
    ​
        // 3.非元素選擇器 $("A:not(B)");
        let divs1 = $("div:not(#div2)");
        //alert(divs1.length);
    ​
        // 4.偶數選擇器   $("A:even");
        let divs2 = $("div:even");
        //alert(divs2.length);
        //alert(divs2[0].innerHTML);
        //alert(divs2[1].innerHTML);
    ​
        // 5.奇數選擇器   $("A:odd");
        let divs3 = $("div:odd");
        //alert(divs3.length);
        //alert(divs3[0].innerHTML);
        //alert(divs3[1].innerHTML);
    ​
        // 6.等於索引選擇器 $("A:eq(index)");
        let div3 = $("div:eq(2)");
        //alert(div3.html());
    ​
        // 7.大於索引選擇器 $("A:gt(index)");
        let divs4 = $("div:gt(1)");
        //alert(divs4.length);
        //alert(divs4[0].innerHTML);
        //alert(divs4[1].innerHTML);
    ​
        // 8.小於索引選擇器 $("A:lt(index)");
        let divs5 = $("div:lt(2)");
        alert(divs5.length);
        alert(divs5[0].innerHTML);
        alert(divs5[1].innerHTML);
        
    </script>
    </html>

3.五、表單屬性選擇器

 

 

  • 代碼實現

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>表單屬性選擇器</title>
    </head>
    <body>
        <input type="text" disabled>
        <input type="text" >
        <input type="radio" name="gender" value="men" checked>男
        <input type="radio" name="gender" value="women">女
        <input type="checkbox" name="hobby" value="study" checked>學習
        <input type="checkbox" name="hobby" value="sleep" checked>睡覺
        <select>
            <option>---請選擇---</option>
            <option selected>本科</option>
            <option>專科</option>
        </select>
    </body>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        // 1.可用元素選擇器 $("A:enabled");
        let ins1 = $("input:enabled");
        //alert(ins1.length);
    ​
        // 2.不可用元素選擇器 $("A:disabled");
        let ins2 = $("input:disabled");
        //alert(ins2.length);
    ​
        // 3.單選/複選框被選中的元素 $("A:checked");
        let ins3 = $("input:checked");
        //alert(ins3.length);
        //alert(ins3[0].value);
        //alert(ins3[1].value);
        //alert(ins3[2].value);
    ​
        // 4.下拉框被選中的元素   $("A:selected");
        let select = $("select option:selected");
        alert(select.html());
        
    </script>
    </html>

3.六、小結

  • 選擇器：相似於 CSS 的選擇器，能夠幫助咱們獲取元素。

  • jQuery 中選擇器的語法：$();

  • 基本選擇器

    • $("元素的名稱");

    • $("#id的屬性值");

    • $(".class的屬性值");

  • 層級選擇器

    • $("A B");

    • $("A > B");

  • 屬性選擇器

    • $("A[屬性名]");

    • $("A[屬性名=屬性值]");

  • 過濾器選擇器

    • $("A:even");

    • $("A:odd");

  • 表單屬性選擇器

    • $("A:disabled");

    • $("A:checked");

    • $("A:selected");

四、JQuery DOM

4.一、操做文本

  • 經常使用方法

     

     

  • 代碼實現

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>操做文本</title>
    </head>
    <body>
        <div id="div">我是div</div>
        <input type="button" id="btn1" value="獲取div的文本">
        <input type="button" id="btn2" value="設置div的文本">
    </body>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
         //1. html()   獲取標籤的文本內容
         $("#btn1").click(function(){
             //獲取div標籤的文本內容
             let value = $("#div").html();
             alert(value);
         });
    ​
         //2. html(value)   設置標籤的文本內容，解析標籤
         $("#btn2").click(function(){
             //設置div標籤的文本內容
             //$("#div").html("我真的是div");
             $("#div").html("<b>我真的是div</b>");
         });
    </script>
    </html>

4.二、操做對象

  • 經常使用方法

     

     

    • append，appendTo，prepend，prependTo是父子關係的操做（父親添加兒子，或者是，兒子添加到父親）

    • before，after是兄弟關係的操做

  • 代碼實現

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>操做對象</title>
    </head>
    <body>
        <div id="div"></div>
        <input type="button" id="btn1" value="添加一個span到div"> <br><br><br>
    ​
        <input type="button" id="btn2" value="將加油添加到城市列表最下方"> &nbsp;&nbsp;&nbsp;
        <input type="button" id="btn3" value="將加油添加到城市列表最上方"> &nbsp;&nbsp;&nbsp;
        <input type="button" id="btn4" value="將雄起添加到上海下方"> &nbsp;&nbsp;&nbsp;
        <input type="button" id="btn5" value="將雄起添加到上海上方"> &nbsp;&nbsp;&nbsp;
        <ul id="city">
            <li id="bj">北京</li>
            <li id="sh">上海</li>
            <li id="gz">廣州</li>
            <li id="sz">深圳</li>
        </ul>
        <ul id="desc">
            <li id="jy">加油</li>
            <li id="xq">雄起</li>
        </ul>  <br><br><br>
        <input type="button" id="btn6" value="將雄起刪除"> &nbsp;&nbsp;&nbsp;
        <input type="button" id="btn7" value="將描述列表所有刪除"> &nbsp;&nbsp;&nbsp;
    </body>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        /*
           1. $("元素")   建立指定元素
           2. append(element)   添加成最後一個子元素，由添加者對象調用
           3. appendTo(element) 添加成最後一個子元素，由被添加者對象調用
           4. prepend(element) 添加成第一個子元素，由添加者對象調用
           5. prependTo(element) 添加成第一個子元素，由被添加者對象調用
           6. before(element)   添加到當前元素的前面，二者之間是兄弟關係，由添加者對象調用
           7. after(element)     添加到當前元素的後面，二者之間是兄弟關係，由添加者對象調用
           8. remove()           刪除指定元素(本身移除本身)
           9. empty()           清空指定元素的全部子元素
       */
        
        // 按鈕一：添加一個span到div
        $("#btn1").click(function(){
            let span = $("<span>span</span>");
            $("#div").append(span);
       });
        
    ​
        //按鈕二：將加油添加到城市列表最下方
        $("#btn2").click(function(){
            //$("#city").append($("#jy"));
            $("#jy").appendTo($("#city"));
       });
    ​
        //按鈕三：將加油添加到城市列表最上方
        $("#btn3").click(function(){
            //$("#city").prepend($("#jy"));
            $("#jy").prependTo($("#city"));
       });
        
    ​
        //按鈕四：將雄起添加到上海下方
        $("#btn4").click(function(){
            $("#sh").after($("#xq"));
       });
        
    ​
        //按鈕五：將雄起添加到上海上方
        $("#btn5").click(function(){
            $("#sh").before($("#xq"));
       });
    ​
        //按鈕六：將雄起刪除
        $("#btn6").click(function(){
            $("#xq").remove();
       });
        
    ​
        //按鈕七：將描述列表所有刪除
        $("#btn7").click(function(){
            $("#desc").empty();
       });
        
    </script>
    </html>

4.三、操做樣式

  • 經常使用方法

     

     

  • 代碼實現

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>操做樣式</title>
        <style>
            .cls1{
                background: pink;
                height: 30px;
           }
        </style>
    </head>
    <body>
        <div style="border: 1px solid red;" id="div">我是div</div>
        <input type="button" id="btn1" value="獲取div的樣式"> &nbsp;&nbsp;
        <input type="button" id="btn2" value="設置div的背景色爲藍色">&nbsp;&nbsp;
        <br><br><br>
        <input type="button" id="btn3" value="給div設置cls1樣式"> &nbsp;&nbsp;
        <input type="button" id="btn4" value="給div刪除cls1樣式"> &nbsp;&nbsp;
        <input type="button" id="btn5" value="給div設置或刪除cls1樣式"> &nbsp;&nbsp;
    </body>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        // 1.css(name)   獲取css樣式
        $("#btn1").click(function(){
            alert($("#div").css("border"));
       });
    ​
        // 2.css(name,value)   設置CSS樣式
        $("#btn2").click(function(){
            $("#div").css("background","blue");
       });
    ​
        // 3.addClass(value)   給指定的對象添加樣式類名
        $("#btn3").click(function(){
            $("#div").addClass("cls1");
       });
    ​
        // 4.removeClass(value) 給指定的對象刪除樣式類名
        $("#btn4").click(function(){
            $("#div").removeClass("cls1");
       });
    ​
        // 5.toggleClass(value) 若是沒有樣式類名，則添加。若是有，則刪除
        $("#btn5").click(function(){
            $("#div").toggleClass("cls1");
       });
        
    </script>
    </html>

4.四、操做屬性

  • 經常使用方法

     

     

    • prop專門用於操做單選框，複選框，下拉列表

  • 代碼實現

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>操做屬性</title>
    </head>
    <body>
        <input type="text" id="username"> 
        <br>
        <input type="button" id="btn1" value="獲取輸入框的id屬性">  &nbsp;&nbsp;
        <input type="button" id="btn2" value="給輸入框設置value屬性">
        <br><br>
    ​
        <input type="radio" id="gender1" name="gender">男
        <input type="radio" id="gender2" name="gender">女
        <br>
        <input type="button" id="btn3" value="選中女">
        <br><br>
        
        <select>
            <option>---請選擇---</option>
            <option id="bk">本科</option>
            <option id="zk">專科</option>
        </select>
        <br>
        <input type="button" id="btn4" value="選中本科">
    </body>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        // 1.attr(name,[value])   得到/設置屬性的值
        //按鈕一：獲取輸入框的id屬性
        $("#btn1").click(function(){
            alert($("#username").attr("id"));
       });
        
        //按鈕二：給輸入框設置value屬性
        $("#btn2").click(function(){
            $("#username").attr("value","hello...");
       });
        
    ​
        // 2.prop(name,[value])   得到/設置屬性的值(checked，selected)
        //按鈕三：選中女
        $("#btn3").click(function(){
            $("#gender2").prop("checked",true);
       });
    ​
        //按鈕四：選中本科
        $("#btn4").click(function(){
            $("#bk").prop("selected",true);
       });
    </script>
    </html>

4.五、小結

  • 操做文本

    • html() html(…)：獲取或設置標籤的文本，解析標籤。

  • 操做對象

    • $(「元素」)：建立指定元素。

    • append(element)：添加成最後一個子元素，由添加者對象調用。

    • prepend(element)：添加成第一個子元素，由添加者對象調用。

    • before(element)：添加到當前元素的前面，二者之間是兄弟關係，由添加者對象調用。

    • after(element)：添加到當前元素的後面，二者之間是兄弟關係，由添加者對象調用。

    • remove()：刪除指定元素(本身移除本身)。

  • 操做樣式

    • addClass(value)：給指定的對象添加樣式類名。

    • removeClass(value)：給指定的對象刪除樣式類名。

  • 操做屬性

    • attr(name,[value])：得到/設置屬性的值。

    • prop(name,[value])：得到/設置屬性的值(checked，selected)。

五、綜合案例 複選框

5.一、案例效果

 

 

5.二、分析和實現

功能分析

  • 全選

      1. 爲全選按鈕綁定單擊事件。

      2. 獲取全部的商品項複選框元素，爲其添加 checked 屬性，屬性值爲 true。

  • 全不選

      1. 爲全不選按鈕綁定單擊事件。

      2. 獲取全部的商品項複選框元素，爲其添加 checked 屬性，屬性值爲 false。

  • 反選

      1. 爲反選按鈕綁定單擊事件

      2. 獲取全部的商品項複選框元素，爲其添加 checked 屬性，屬性值是目前相反的狀態。

代碼實現

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>複選框</title>
</head>
<body>
    <table id="tab1" border="1" width="800" align="center">
        <tr>
            <th style="text-align: left">
                <input style="background:lightgreen" id="selectAll" type="button" value="全選">
                <input style="background:lightgreen" id="selectNone" type="button" value="全不選">
                <input style="background:lightgreen" id="reverse" type="button" value="反選">
            </th>
    
            <th>分類ID</th>
            <th>分類名稱</th>
            <th>分類描述</th>
            <th>操做</th>
        </tr>
        <tr>
            <td><input type="checkbox" class="item"></td>
            <td>1</td>
            <td>手機數碼</td>
            <td>手機數碼類商品</td>
            <td><a href="">修改</a>|<a href="">刪除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="item"></td>
            <td>2</td>
            <td>電腦辦公</td>
            <td>電腦辦公類商品</td>
            <td><a href="">修改</a>|<a href="">刪除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="item"></td>
            <td>3</td>
            <td>鞋靴箱包</td>
            <td>鞋靴箱包類商品</td>
            <td><a href="">修改</a>|<a href="">刪除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="item"></td>
            <td>4</td>
            <td>家居飾品</td>
            <td>家居飾品類商品</td>
            <td><a href="">修改</a>|<a href="">刪除</a></td>
        </tr>
    </table>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //全選
    //1.爲全選按鈕添加單擊事件
    $("#selectAll").click(function(){
        //2.獲取全部的商品複選框元素，爲其添加checked屬性，屬性值true
        $(".item").prop("checked",true);
   });
​
​
    //全不選
    //1.爲全不選按鈕添加單擊事件
    $("#selectNone").click(function(){
        //2.獲取全部的商品複選框元素，爲其添加checked屬性，屬性值false
        $(".item").prop("checked",false);
   });
​
​
    //反選
    //1.爲反選按鈕添加單擊事件
    $("#reverse").click(function(){
        //2.獲取全部的商品複選框元素，爲其添加checked屬性，屬性值是目前相反的狀態
        let items = $(".item");
        items.each(function(){
            $(this).prop("checked",!$(this).prop("checked"));
       });
   });
</script>
</html>

六、綜合案例 隨機圖片

6.一、案例效果

 

 

6.二、動態切換小圖的分析和實現

  • 功能分析

    1. 準備一個數組

    2. 定義計數器

    3. 定義定時器對象

    4. 定義圖片路徑變量

    5. 爲開始按鈕綁定單擊事件

    6. 設置按鈕狀態

    7. 設置定時器，循環顯示圖片

    8. 循環獲取圖片路徑

    9. 將當前圖片顯示到小圖片上

    10. 計數器自增

  • 代碼實現

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>隨機圖片</title>
    </head>
    <body>
    <!-- 小圖 -->
    <div style="border: dotted; height: 50px; width: 50px">
        <img src="img/01.jpg" id="small" style="width: 50px; height: 50px;">
    </div>
    <!-- 大圖 -->
    <div style="border: double ;width: 400px; height: 400px; position: absolute; left: 500px; top:10px">
        <img src="" id="big" style="width: 400px; height: 400px; display:none;">
    </div>
    ​
    <!-- 開始和結束按鈕 -->
    <input id="startBtn" type="button" style="width: 150px;height: 150px; font-size: 20px" value="開始">
    <input id="stopBtn" type="button" style="width: 150px;height: 150px; font-size: 20px" value="中止">
    </body>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        //1.準備一個數組
        let imgs = [
            "img/01.jpg",
            "img/02.jpg",
            "img/03.jpg",
            "img/04.jpg",
            "img/05.jpg",
            "img/06.jpg",
            "img/07.jpg",
            "img/08.jpg",
            "img/09.jpg",
            "img/10.jpg"];
      
        //2.定義計數器變量
        let count = 0;
        
        //3.聲明定時器對象
        let time = null;
        
        //4.聲明圖片路徑變量
        let imgSrc = "";
        
        //5.爲開始按鈕綁定單擊事件
        $("#startBtn").click(function(){
            //6.設置按鈕狀態
            //禁用開始按鈕
            $("#startBtn").prop("disabled",true);
            //啓用中止按鈕
            $("#stopBtn").prop("disabled",false);
            
            //7.設置定時器，循環顯示圖片
            time = setInterval(function(){
                //8.循環獲取圖片路徑
                let index = count % imgs.length; // 0%10=0 1%10=1 2%10=2 .. 9%10=9 10%10=0  
                        
                //9.將當前圖片顯示到小圖片上
                imgSrc = imgs[index];
                $("#small").prop("src",imgSrc);
                        
                //10.計數器自增
                count++;
           },10);
       });
    </script>
    </html>

6.三、顯示大圖的分析和實現

  • 功能分析

    1. 爲中止按鈕綁定單擊事件

    2. 取消定時器

    3. 設置按鈕狀態

    4. 將圖片顯示到大圖片上

  • 代碼實現

    //11.爲中止按鈕綁定單擊事件
    $("#stopBtn").click(function(){
        //12.取消定時器
        clearInterval(time);
    ​
        //13.設置按鈕狀態
        //啓用開始按鈕
        $("#startBtn").prop("disabled",false);
        //禁用中止按鈕
        $("#stopBtn").prop("disabled",true);
    ​
        //14.將圖片顯示到大圖片上
        $("#big").prop("src",imgSrc);
        $("#big").prop("style","width: 400px; height: 400px;");
    });
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程