JavaWeb21.1【JQuery高階：動畫、遍歷】

阿新 • • 發佈：2021-07-07

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>1. 動畫-三種方式顯示和隱藏元素</title>
 6     <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
 7     <script>
 8         //隱藏div
 9         function hideFn(){
 
10             /*$("#showDiv").hide("slow", "swing", function () {
11                 alert("隱藏了");
12             });*/
13 
14             //預設方式
15             // $("#showDiv").hide("normal", "swing");
16             // $("#showDiv").hide(5000, "swing");
17 
18             //滑動方式
19             // $("#showDiv").slideUp("slow"); 

20 
21             //淡入淡出方式
22             $("#showDiv").fadeOut("slow");
23         }
24         //顯示div
25         function showFn(){
26             /*$("#showDiv").show("slow", "swing", function () {
27                 alert("顯示了");
28             });*/
29 
30             //預設方式
31             // $("#showDiv").show("fast", "swing"); 

32 
33             //滑動方式
34             // $("#showDiv").slideDown("slow");
35 
36             //淡入淡出方式
37             $("#showDiv").fadeIn("slow");
38         }
39         //切換顯示和隱藏div
40         function toggleFn(){
41             /*$("#showDiv").toggle("slow", "swing", function () {
42                 alert("切換了");
43             });*/
44 
45             //預設方式
46             // $("#showDiv").toggle("slow");
47 
48             //滑動方式
49             // $("#showDiv").slideToggle("slow");
50 
51             //淡入淡出方式
52             $("#showDiv").fadeToggle("slow");
53         }
54     </script>
55 </head>
56 <body>
57 <input type="button" value="點選按鈕隱藏div" onclick="hideFn()">
58 <input type="button" value="點選按鈕顯示div" onclick="showFn()">
59 <input type="button" value="點選按鈕切換div顯示和隱藏" onclick="toggleFn()">
60 
61 <div id="showDiv" style="width:300px;height:300px;background:pink">
62     div顯示和隱藏
63 </div>
64 </body>
65 </html>

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>2. 遍歷</title>
 6     <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
 7     <script type="text/javascript">
 8         $(function () {
 9             //獲取ul下所有li
10             var citys = $("#city li");
11 
12 
13             //js的遍歷方式
14             /*for (var i=0; i<citys.length; i++){
15                 alert(i + ":" + citys[i].innerHTML);
16             }*/
17             /*for (var i=0; i<citys.length; i++){
18                 if ("上海" == citys[i].innerHTML){
19                     // break; //結束整個迴圈
20                     continue; //結束本次迴圈，繼續下次迴圈
21                 }
22                 alert(i + ":" + citys[i].innerHTML);
23             }*/
24 
25 
26             //jq的遍歷方式1--jq物件.each(callback)
27             /*citys.each(function (index, element) {
28                 //獲取li的方式1：this
29                 // alert(this.innerHTML);
30                 // alert($(this).html());
31 
32                 //獲取li的方式2：在each的回撥函式中定義引數index（元素在集合中的索引）和element（集合中的每一個元素物件）
33                 // alert(index + ":" + element.innerHTML);
34                 alert(index + ":" + $(element).html());
35             });*/
36             /*citys.each(function (index, element) {
37                 if ("上海" == $(element).html()){
38                     //jq中不能直接寫break和continue，會報錯
39                     //如果當前function返回為false，則結束迴圈(break)
40                     //如果返回為true，則結束本次迴圈，繼續下次迴圈(continue)
41                     return true;
42                 }
43                 alert(index + ":" + $(element).html());
44             });*/
45 
46 
47             //jq的遍歷方式2--$.each(object, [callback])
48             /*$.each(citys, function (index, element) {
49                 // alert(this.innerHTML);
50                 // alert($(this).html());
51                 // alert(index + ":" + element.innerHTML);
52                 alert(index + ":" + $(element).html());
53             });*/
54 
55             
56             //jq的遍歷方式3--for(元素物件 of 容器物件)      PS：jq3.0及後版本新增for...of遍歷方式
57             for(li of citys){ //雖然idea報錯of，但實際有效
58                 alert($(li).html());
59             }
60         });
61     </script>
62 </head>
63 <body>
64 <ul id="city">
65     <li>北京</li>
66     <li>上海</li>
67     <li>天津</li>
68     <li>重慶</li>
69 </ul>
70 </body>
71 </html>