jQuery 操作入門案例
一、核取方塊案例
功能:
列表的全選，反選，全不選功能實現。
實現步驟和分析：
- 全選 1. 為全選按鈕繫結單擊事件。 2. 獲取所有的商品項核取方塊元素，為其新增 checked 屬性，屬性值為 true。
- 全不選 1. 為全不選按鈕繫結單擊事件。 2. 獲取所有的商品項核取方塊元素，為其新增 checked 屬性，屬性值為 false。
- 反選 1. 為反選按鈕繫結單擊事件 2. 獲取所有的商品項核取方塊元素，為其新增 checked 屬性，屬性值是目前相反的狀態。
環境：需要引入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> <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>
二、隨機圖片案例
功能：
隨機圖片：點選開始按鈕,隨機圖片,點選停止按鈕,停止並顯示大圖;
實現步驟和分析：
一)開始按鈕: 1. 準備一個陣列 2. 定義計數器 3. 定義定時器物件 4. 定義圖片路徑變數 5. 為開始按鈕繫結單擊事件 6. 設定按鈕狀態 7. 設定定時器，迴圈顯示圖片 8. 迴圈獲取圖片路徑 9. 將當前圖片顯示到小圖片上 10. 計數器自增
二)停止按鈕: 1. 為停止按鈕繫結單擊事件 2. 取消定時器 3. 設定按鈕狀態 4. 將圖片顯示到大圖片上
環境：需要引入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 style="background-color:red;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); }); //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;"); }); </script> </html>