JavaWeb的學習--jQuery一

時間 2019-11-10

標籤 javaweb 學習 jquery 欄目 Java 简体版

原文原文鏈接

1、使用JQ完成首頁的定時廣告彈出

　　1.需求分析

　　　　在首頁中(logo的上方)顯示一個廣告圖片(頁面加載後，間隔3秒彈出廣告圖片，再間隔3秒後隱藏廣告圖片)。【使用jQuery實現】javascript

　　2.技術分析

　　　2.1 jquery相關的知識

a. 什麼是jquery

Jquery它是javascript的一個輕量級框架，對javascript進行封裝，它提供了不少方便的選擇器。供你快速定位到須要操做的元素上面去。還提供了不少便捷的方法。css

b. 怎麼使用jquery

Jquery它是一個庫(框架)，要想使用它，必須先引入！html

jquery-1.8.3.js：通常用於學習階段。java

jquery-1.8.3.min.js：用於項目使用階段jquery

c. Jquery的簡單入門

全部的jquery代碼寫在頁面加載函數框架

$(function(){dom

Jquery代碼ide

}); 函數

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>頁面加載</title>
 6         <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
 7         <script>
 8             //整個文檔加載完後執行
 9             function init() {
10                 alert("李四");
11             }
12             window.onload = function() {
13                 alert("張三");
14             }
15             //整個文檔加載完畢後執行
16             window.onload = function() {
17                 alert("老王");
18             }
19             //dom樹執行完畢後加載，可能DOM元素關聯的東西並無加載完
20             jQuery(document).ready(function() {
21                 alert("王五");
22             });
23             //JQuery頁面的方法(簡寫)
24             $(function() {
25                 alert("老李");
26             })
27         </script>
28     </head>
29     <body onload="init()">
30         <a href="#">ss</a>
31         <a href="#">ddd</a>
32     </body>
33 </html>

d. 獲取元素

JS:document.getElementById();學習

JQ:$(「#id」);

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>JQuery對象與DOM對象的轉換</title>
 6     </head>
 7     <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
 8     <script>
 9     
10         //注意：JQ對象只能操做JQ裏面的屬性和方法
11         //      JS對象只能操做JS裏面的屬性和方法。
12 
13         //JS寫入
14         function JsWrite() {
15             //document.getElementById("span1").innerHTML = "hello world!";
16             //DOM對象轉換成JQuery對象
17             var spanEle = document.getElementById("span1");
18             $(spanEle).html("hello world!");
19         }
20         //JQuery寫入
21         $(function() {
22 //            $("#btn1").click(function() {
23 //                $("#span1").html("hello!");
24 //            });
25 
26             
27             $("#btn1").click(function() {
28                 //JQuery對象轉換成DOM對象的第一種方式
29 //                $("#span1")[0].innerHTML = "哈哈";
30                 //JQuery對象轉換成DOM對象的第二種方法
31                 $("#span1").get(0).innerHTML = "嘿嘿";
32             });
33         });
34     </script>
35     <body>
36         <input type="button" value="JS寫入" onclick="JsWrite()" />
37         <input type="button" value="JQ寫入" id="btn1"/>
38         <br />
39         <span id="span1">sss</span>
40     </body>
41 </html>

e. Jquery的效果

　　3.實現步驟

第一步：引入jQuery相關的文件

第二步：書寫頁面加載函數

第三步：在頁面加載函數中，獲取顯示廣告圖片的元素。

第四步：設置定時操做(顯示廣告圖片的函數)

第五步：在顯示廣告圖片的函數中，使用jQuery的方法讓廣告圖片顯示(show())

第六步：清除顯示廣告圖片的定時操做

第七步：設置定時操做(隱藏廣告圖片的函數)

第八步：在隱藏廣告圖片的函數中，使用jQuery的方法讓廣告圖片隱藏(hide())

第九步：清除隱藏廣告圖片的定時操做

　　4.代碼實現

JS代碼：

 1 <script>
 2             //1. 頁面加載的函數
 3             $(function() {
 4                 time = setInterval("showAd()", 3000);
 5             });
 6             //2. 顯示廣告的函數
 7             function showAd() {
 8                 //3. 獲取廣告圖片元素,並顯示隱藏的匹配元素  show()
 9                 //$("#imgAd").show();
10                 //有速度的顯示 show(speed)
11 //                $("#imgAd").show(1000);
12                 //淡入效果 fadeIn(speed)
13                 $("#imgAd").fadeIn(1000);
14                 //4. 清楚顯示廣告圖片的定時操做
15                 clearInterval(time);
16                 //5. 設置隱藏圖片的定時操做
17                 time = setInterval("hiddenAd()", 3000);
18             }
19             //6. 隱藏廣告圖片的函數
20             function hiddenAd() {
21                 //7， 獲取廣告圖片元素，並設置隱藏顯示的匹配元素 hide()
22 //                $("#imgAd").hide();
23                 //有速度的隱藏hide(speed)
24 //                $("#imgAd").hide(1000);
25                 //淡出效果 fadeOut(speed)
26                 $("#imgAd").fadeOut(1000);
27                 //8. 清楚隱藏廣告的定時操做
28                 clearInterval(time);
29             }
30         </script>

html代碼：

<img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" style="display: none;" id="imgAd" />

　　5.補充內容

5.1 Toggle的使用

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Toggle的使用</title>
 6     </head>
 7     <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
 8     <script>
 9         $(function() {
10             $("#btn1").click(function() {
11                 //toggle()  若是元素是可見的，切換爲隱藏的；若是元素是隱藏的，切換爲可見的。
12                 $("#img1").toggle();
13             });
14         });
15     </script>
16     <body>
17         <input type="button" id="btn1" value="顯示/隱藏" /><br />
18         <img src="../img/middle01.jpg" id="img1" />
19     </body>
20 </html>

　　6.總結

6.1 JQ的選擇器

a. 基本選擇器

　　 id選擇器：$(「#id名稱」);

　　元素選擇器：$(「元素名稱」);

　　類選擇器：$(「.類名」);

　　通配符：*

　　多個選擇器共用(並集)

代碼演示：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>基本選擇器</title>
 6         <link rel="stylesheet" href="../../css/s1.css" />
 7         <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
 8         <script>
 9             $(function() {
10                 $("#btn1").click(function() {
11                     //id選擇器
12                     $("#one").css("background-color", "pink");
13                 });
14                 $("#btn2").click(function() {
15                     //類選擇器
16                     $(".mini").css("background-color", "pink");
17                 });
18                 $("#btn3").click(function() {
19                     //元素選擇器
20                     $("div").css("background-color", "pink");
21                 });
22                 $("#btn4").click(function() {
23                     //匹配全部的元素 通配符*
24                     $("*").css("background-color", "pink");
25                 });
26                 $("#btn5").click(function() {
27                     //多個選擇器公用，並集
28                     $("#two, .mini").css("background-color", "pink");
29                 })
30             });
31         </script>
32             
33     </head>
34     <body>
35         <input type="button" id="btn1" value="選擇爲one的元素"/>
36         <input type="button" id="btn2" value="選擇樣式爲mini的元素"/>
37         <input type="button" id="btn3" value="選擇全部的div元素"/>
38         <input type="button" id="btn4" value="選擇全部元素"/>
39         <input type="button" id="btn5" value="選擇id爲two而且樣式爲mini的元素"/>
40         <hr/>
41         <div id="one">
42             <div class="mini">
43                 111
44             </div>
45         </div>
46         
47         <div id="two">
48             <div class="mini">
49                 222
50             </div>
51             <div class="mini">
52                 333
53             </div>
54         </div>
55         
56         <div id="three">
57             <div class="mini">
58                 444
59             </div>
60             <div class="mini">
61                 555
62             </div>
63             <div class="mini">
64                 666
65             </div>
66         </div>
67         
68         <span id="four">
69             
70         </span>
71     </body>
72 </html>

　　b. 層級選擇器

　　ancestor descendant: 在給定的祖先元素下匹配全部的後代元素(兒子、孫子、重孫子)

　　parent > child : 在給定的父元素下匹配全部的子元素(兒子)

　　prev + next: 匹配全部緊接在 prev 元素後的 next 元素(緊挨着的，同桌)

　　prev ~ siblings: 匹配 prev 元素以後的全部 siblings 元素(兄弟)

代碼演示：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>層級選擇器</title>
 6         <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
 7         <link rel="stylesheet" href="../../css/s1.css" />
 8         <script>
 9             $(function() {
10                 $("#btn1").click(function() {
11                     $("body div").css("background-color", "pink");
12                 })
13                 $("#btn2").click(function() {
14                     $("body>div").css("background-color", "pink");
15                 })
16                 $("#btn3").click(function() {
17                     $("#two+div").css("background-color", "pink");
18                 });
19                 $("#btn4").click(function() {
20                     $("#one~div").css("background-color", "pink");
21                 });
22             });
23         </script>        
24     </head>
25     <body>
26         <input type="button" id="btn1" value="選擇body中的全部的div元素"/>
27         <input type="button" id="btn2" value="選擇body中的第一級的孩子"/>
28         <input type="button" id="btn3" value="選擇id爲two的元素的下一個元素"/>
29         <input type="button" id="btn4" value="選擇id爲one的全部的兄弟元素"/>
30         
31         <hr/>
32         <div id="one">
33             <div class="mini">
34                 111
35             </div>
36         </div>
37         
38         <div id="two">
39             <div class="mini">
40                 222
41             </div>
42             <div class="mini">
43                 333
44             </div>
45         </div>
46         
47         <div id="three">
48             <div class="mini">
49                 444
50             </div>
51             <div class="mini">
52                 555
53             </div>
54             <div class="mini">
55                 666
56             </div>
57         </div>
58         
59         <span id="four">
60             
61         </span>
62     </body>
63 </html>

　　c. 基本過濾選擇器

　　$('li').first() 等價於：$(「li:first」)

代碼案例演示：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>層級選擇器</title>
 6         <link rel="stylesheet" href="../../css/s1.css" />
 7         <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
 8         <script>
 9             $(function() {
10                 $("#btn1").click(function() {
11                     $("div:first").css("background-color", "pink");
12                 })
13                 $("#btn2").click(function() {
14                     $("div:last").css("background-color", "pink");
15                 })
16                 $("#btn3").click(function() {
17                     $("div:odd").css("background-color", "pink");
18                 });
19                 $("#btn4").click(function() {
20                     $("div:even").css("background-color", "pink");
21                 });
22             });
23         </script>
24         
25         
26     </head>
27     <body>
28         <input type="button" id="btn1" value="body中的第一個div元素"/>
29         <input type="button" id="btn2" value="body中的最後一個div元素"/>
30         <input type="button" id="btn3" value="選擇body中的奇數的div"/>
31         <input type="button" id="btn4" value="選擇body中的偶數的div"/>
32         
33         <hr/>
34         <div id="one">
35             <div class="mini">
36                 111
37             </div>
38         </div>
39         
40         <div id="two">
41             <div class="mini">
42                 222
43             </div>
44             <div class="mini">
45                 333
46             </div>
47         </div>
48         
49         <div id="three">
50             <div class="mini">
51                 444
52             </div>
53             <div class="mini">
54                 555
55             </div>
56             <div class="mini">
57                 666
58             </div>
59         </div>
60         
61         <span id="four">
62             
63         </span>
64     </body>
65 </html>

　　d. 屬性選擇器

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>屬性選擇器</title>
 6         <link rel="stylesheet" href="../../css/s1.css" />
 7         <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
 8         <script>
 9             $(function() {
10                 $("#btn1").click(function() {
11                     $("div[id]").css("background-color", "pink");
12                 })
13                 $("#btn2").click(function() {
14                     $("div[id='two']").css("background-color", "pink");
15                 })
16             });
17         </script>
18     </head>
19     <body>
20         <input type="button" id="btn1" value="選擇有id屬性的div"/>
21         <input type="button" id="btn2" value="選擇有id屬性的值爲two的div"/>
22         
23         <hr/>
24         <div id="one">
25             <div class="mini">
26                 111
27             </div>
28         </div>
29         
30         <div id="two">
31             <div class="mini">
32                 222
33             </div>
34             <div class="mini">
35                 333
36             </div>
37         </div>
38         
39         <div id="three">
40             <div class="mini">
41                 444
42             </div>
43             <div class="mini">
44                 555
45             </div>
46             <div class="mini">
47                 666
48             </div>
49         </div>
50         
51         <span id="four">
52             
53         </span>
54     </body>
55 </html>

　　e. 表單選擇器

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>表單選擇器</title>
 6         <link rel="stylesheet" href="../../css/s1.css" />
 7         <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
 8         <script>
 9             $(function() {
10                 $("#btn1").click(function() {
11                     $(":input").css("background-color", "pink");
12                 })
13                 $("#btn2").click(function() {
14                     $(":text").css("background-color", "pink");
15                 })
16             });
17         </script>
18         
19     </head>
20     <body>
21         <input type="button" id="btn1" value="選擇全部input元素" />
22         <input type="button" id="btn2" value="選擇文本框" />
23         <br/>
24         <form>
25             <input type="text" /><br />
26             <input type="checkbox" /><br />
27             <input type="radio" /><br />
28             <input type="image" /><br />
29             <input type="file" /><br />
30             <input type="submit" />
31             <input type="reset" /><br />
32             <input type="password" /><br />
33             <input type="button" /><br />
34             <select><option/></select><br />
35             <textarea></textarea><br />
36             <button></button>
37         </form>
38     </body>
39 </html>

2、使用JQ完成表格的隔行換色

　　1.需求分析

　　在頁面加載的時候讓顯示用戶的表格進行隔行換色顯示，效果以下：使用JQ實現！

　　2.技術分析

　　須要使用jquery的選擇器(基本選擇器、基本過濾選擇器)

　　還須要使用jquery的CSS的方法(css(name,value))

　　若是CSS樣式已經由美工寫好，此時能夠使用jquery的CSS類操做

　　3.步驟分析

　　第一步：引入jquery的類庫

　　第二步：直接寫頁面加載函數

　　第三步：直接使用jquery的選擇器(組合選擇)拿到須要操做的元素(奇數行和偶數行)

　　第四步：分別使用CSS的方法(css(name,value))對奇數行和偶數行設置背景顏色。

　　4.代碼實現

<script>
            //頁面加載函數
            $(function() {
//                $("tbody tr:odd").css("background-color", "pink");
//                $("tbody tr:even").css("background-color", "#AAAAAA");
                //將奇數行設置爲css樣式中的背景顏色
                $("tbody tr:odd").addClass("odd");
                //將偶數行設置爲css樣式中的背景顏色
                $("tbody tr:even").addClass("even");
            })
</script>

3、使用JQ完成全選和全不選

　　1.需求分析

　　在系統後臺進行人員管理時，進行批量刪除，使用jq完成全選和全不選

　　2.技術分析

　　須要使用jquery的選擇器(id選擇器、類選擇器)

　　須要使用jquery的屬性操做方法 prop()

　　3.步驟分析

　　第一步：引入jquery文件

　　第二步：書寫頁面加載函數

　　第三步：爲上面的複選框綁定單擊事件

　　第四步：將下面全部的複選框的選中狀態設置成跟上面的一致！

　　4.代碼實現　

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>使用jQuery完成複選框的全選和全不選</title>
 6         <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
 7         <script>
 8             $(function() {
 9                 $("#select").click(function() {
10                     //attr(key, value) 在1.11版本以上不適用，採用prop(key, value)來替代
11 //                    $(".selectOne").attr("checked", this.checked);
12                     $(".selectOne").prop("checked", this.checked);
13                 });
14             });
15         </script>
16     </head>
17     <body>
18         <table border="1" width="500" height="50" align="center" id="tbl" >
19             <thead>
20                 <tr>
21                     <td colspan="4">
22                         <input type="button" value="添加" />
23                         <input type="button" value="刪除" />
24                     </td>
25                 </tr>
26                 <tr>
27                     <th><input type="checkbox" id="select"></th>
28                     <th>編號</th>
29                     <th>姓名</th>
30                     <th>年齡</th>
31                 </tr>
32             </thead>
33             <tbody>
34                 <tr >
35                     <td><input type="checkbox" class="selectOne"/></td>
36                     <td>1</td>
37                     <td>張三</td>
38                     <td>22</td>
39                 </tr>
40                 <tr >
41                     <td><input type="checkbox" class="selectOne"/></td>
42                     <td>2</td>
43                     <td>李四</td>
44                     <td>25</td>
45                 </tr>
46                 <tr >
47                     <td><input type="checkbox" class="selectOne"/></td>
48                     <td>3</td>
49                     <td>王五</td>
50                     <td>27</td>
51                 </tr>
52                 <tr >
53                     <td><input type="checkbox" class="selectOne"/></td>
54                     <td>4</td>
55                     <td>趙六</td>
56                     <td>29</td>
57                 </tr>
58                 <tr >
59                     <td><input type="checkbox" class="selectOne"/></td>
60                     <td>5</td>
61                     <td>田七</td>
62                     <td>30</td>
63                 </tr>
64                 <tr >
65                     <td><input type="checkbox" class="selectOne"/></td>
66                     <td>6</td>
67                     <td>汾九</td>
68                     <td>20</td>
69                 </tr>
70             </tbody>
71         </table>
72     </body>
73 </html>