2018.7.5 jQuery學習
阿新 • • 發佈：2018-07-05
bgcolor false name chang 二級聯動 ice 背景顏色 col NPU
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>JQuery應用</title> <script type="text/javascript" src="js/jquery-3.2.1.js"></script> <script> $(function() { $("table").attr("bgcolor", "red"); //設置表格的背景顏色 $("tr").attr("bgcolor", "#3366CC"); //為單數行表格設置背景顏色 $("tr:even").css("background-color", "#CC0000"); //為雙數行表格設置背顏色素 $("table").css("width", "300px"); //為表格添加樣式，設置表格長度為300像素 }); // 復選框的全選和全不選 $(function() { // 獲得上面的復選框 var $selAll = $("#selAll"); $selAll.click(function() { if($selAll.prop("checked") == true) { // 上面的復選框已被選中 $(":checkbox[name=‘selone‘]").prop("checked", true); } else { // 上面的復選框沒被選中 $(":checkbox[name=‘selone‘]").prop("checked", false); } }); }); //3、使用JQ實現省市聯動 $(function() { var i = 0; var arr = new Array(3); arr[0] = new Array("增城", "新塘", "長安"); arr[1] = new Array("玉林", "容縣", "博白"); arr[2] = new Array("成都", "廣元", "攀枝花"); $("[name=‘pro‘]").change(function() { //獲取省的下拉選的值 var $pro = $("[name=‘pro‘]").val(); //獲取市的下拉選 var $citys = $("[name=‘city‘]"); //初始化 用一種創建標簽增加內容的方式 $citys.html($("<option>").html("-請選擇-")); //遍歷數組 $(arr[$pro]).each(function() { //把二維數組增加到下拉選框內 $citys.append("<option>" + arr[$pro][i] + "</option>"); i++; if(i >= 3) { i = 0; } }); }); }); </script> </head> <body> <!--1、使用JQ實現表格隔行換色 2、使用JQ的表格全選和全不選 3、使用JQ實現省市聯動 --> <div class="d1"> <table border="1" cellspacing="0" cellpadding="0" id="tb"> <tr> <td><input type="checkbox" name="selone" id="selAll" value="" />1</td> <th colspan="2">使用JQ實現表格隔行換色</th> </tr> <tr> <td><input type="checkbox" name="selone" id="sel" value="" />1</td> <td colspan="2">Data</td> </tr> <tr> <td><input type="checkbox" name="selone" id="sel" value="" />1</td> <td colspan="2">Data</td> </tr> <tr> <td><input type="checkbox" name="selone" id="sel" value="sel" />1</td> <td colspan="2">Data</td> </tr> <tr> <td><input type="checkbox" name="selone" id="sel" value="" />1</td> <td colspan="2">Data</td> </tr> </table> </div> <div class="d2"> <h1>省級二級聯動</h1> <select name="pro"> <option selected="selected">---請選擇---</option> <option value="0">廣東省</option> <option value="1">廣西省</option> <option value="2">四川省</option> </select> <select name="city"> <option selected="selected">---請選擇---</option> </select> </div> </body> </html>
2018.7.5 jQuery學習