【前端】:jQuery實例

時間 2019-11-13

標籤前端 jquery 實例欄目 JQuery 简体版

原文原文鏈接

前言: 今天2月最後一天，寫一篇jQuery的幾個實例，算是以前前端知識的應用。寫完這篇博客會作一個登錄界面+後臺管理(i try...)javascript

1、菜單實例

最開始的界面:css

點擊菜單三後的界面:html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .left_menu{
 8             float: left;
 9             width: 30%;
10             height: 400px;
11             background-color: #f9ebc4;
12         }
13         .container{
14             float: left;
15             width: 70%;
16             height: 400px;
17             background-color: aquamarine;
18         }
19         .title{
20             background-color: indianred;
21             color: white;
22             height: 40px;
23             line-height: 40px;
24             font-size: larger;
25             font-weight: bold;
26         }
27         .hide{
28             display: none;
29         }
30     </style>
31 </head>
32 <body>
33     <div class="left_menu">
34         <div class="item">
35             <!--this是特殊參數，表明自己的標籤-->
36             <div class="title" onclick="Func(this);">菜單一</div>
37             <div class="body">
38                 <div>1.1</div>
39                 <div>1.2</div>
40                 <div>1.3</div>
41             </div>
42         </div>
43 
44         <div class="item">
45             <div class="title" onclick="Func(this);">菜單二</div>
46             <div class="body hide">
47                 <div>2.1</div>
48                 <div>2.2</div>
49                 <div>2.3</div>
50             </div>
51         </div>
52 
53         <div class="item">
54             <div class="title" onclick="Func(this);">菜單三</div>
55             <div class="body hide">
56                 <div>3.1</div>
57                 <div>3.2</div>
58                 <div>3.3</div>
59             </div>
60         </div>
61 
62         <div class="item">
63             <div class="title" onclick="Func(this);">菜單四</div>
64             <div class="body hide">
65                 <div>4.1</div>
66                 <div>4.2</div>
67                 <div>4.3</div>
68             </div>
69         </div>
70     </div>
71 
72     <div class="container"></div>
73 
74     <script src="jquery-3.1.1.min.js"></script>
75     <script>
76         function Func(ths) {
77             //難點:如何點菜單Ｘ，就得到菜單Ｘ的標籤？？
78             //經過參數this
79             //console.log($(ths).text());  //獲取標籤內容
80 
81             //得到菜單標籤後，如何得到菜單標籤下的body標籤，並去除hide樣式 removeClass()
82             $(ths).next().removeClass("hide");
83             $(ths).parent().siblings().find(".body").addClass("hide");
84         }
85     </script>
86 </body>
87 </html>

View Code

2、表單實例

效果圖:前端

優化後:java

實現功能:jquery

功能1:點擊菜單A, 則下面的內容爲菜單A對應的內容。
功能2:點擊菜單A,則菜單A會出現背景色，而未被點擊的菜單沒有。

難點說明:web

一點擊菜單一，菜單一的背景就"變色"，背景顏色其實就是一種樣式(以樣式A爲稱)嘛，一點擊菜單的div就會它加上樣式A，同時給菜單二，菜單三(即菜單一的同級元素siblings)去除樣式A。這個是不難實現的，若是有看我以前寫的博客的話。ajax

問題來了，如何實現一點擊菜單1，就顯示菜單1的內容??其實菜單1對應的內容就是一塊div嘛。只要找到這塊div元素，去除隱藏的樣式，同時給菜單2和3加上隱藏的樣式。就OK啦~ 如今的問題是如何一點菜單一就找到菜單一對應內容的div元素?? 數據庫

    <div class="tab-box">
        <div class="box-menu">
            <!--全部菜單-->
            <a zcl="c1" onclick="ChangeTab(this);" class="current_menu">菜單一</a>
            <a zcl="c2" onclick="ChangeTab(this);">菜單二</a>
            <a zcl="c3" onclick="ChangeTab(this);">菜單三</a>
        </div>
        <div class="box-body">
            <!--全部內容-->
            <div id="c1">內容一</div>
            <div id="c2" class="hide">內容二</div>
            <div id="c3" class="hide">內容三</div>
        </div>
    </div>

我給菜單(a標籤)加上自定義屬性zcl，該屬性對應的值就是菜單對應內容的id。因此我只要一點擊菜單，就去獲取則菜單的zcl屬性的值(即內容的id)。嗯，挺有意思的哈哈~~編程

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .tab-box .box-menu{
 8             background-color: #adadad;
 9             border: 1px solid #dddddd;
10             height: 30px;
11             line-height: 30px;
12         }
13         .tab-box .box-body{
14             border: 1px solid #e7d9b1;
15             background-color: #f4f9e7;
16             height: 50px;
17         }
18         .hide{
19             display: none;
20         }
21         .current_menu{
22             /*background-color: #505aff;*/
23             background-color: white;
24             color: black;
25             border-top: 2px solid red;
26         }
27         .box-menu a{
28             border-right: 1px solid #f8ff89;
29             padding: 8px;
30         }
31     </style>
32 </head>
33 <body>
34     <div class="tab-box">
35         <div class="box-menu">
36             <!--全部菜單-->
37             <a zcl="c1" onclick="ChangeTab(this);" class="current_menu">菜單一</a>
38             <a zcl="c2" onclick="ChangeTab(this);">菜單二</a>
39             <a zcl="c3" onclick="ChangeTab(this);">菜單三</a>
40         </div>
41         <div class="box-body">
42             <!--全部內容-->
43             <div id="c1">內容一</div>
44             <div id="c2" class="hide">內容二</div>
45             <div id="c3" class="hide">內容三</div>
46         </div>
47     </div>
48 
49     <script src="jquery-3.1.1.min.js"></script>
50     <script>
51         function ChangeTab(ths) {
52             $(ths).addClass("current_menu").siblings().removeClass("current_menu");
53             //獲取當前點擊的標籤
54             //獲取當前標籤屬性zcl對應的值
55             var content_id = $(ths).attr("zcl");
56             console.log(content_id);
57             var temp = "#" + content_id;
58             //找到與菜單標籤對應的內容<div>標籤,去除hide樣式，併爲該div的兄弟標籤加上hide樣式
59             $(temp).removeClass("hide").siblings().addClass("hide");
60 
61         }
62     </script>
63 </body>
64 </html>

View Code

3、複選框

效果圖:

改進版:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div>
 9         <input type="button" value="全選" onclick="SelectAll();" />
10         <input type="button" value="取消" onclick="ClearAll();" />
11         <input type="button" value="反選" onclick="Reverse();" />
12     </div>
13     <div>
14         <table border="1">
15             <tr>
16                 <td><input type="checkbox"/></td>
17                 <td>123</td>
18                 <td>123</td>
19             </tr>
20             <tr>
21                 <td><input type="checkbox"/></td>
22                 <td>123</td>
23                 <td>123</td>
24             </tr>
25             <tr>
26                 <td><input type="checkbox"/></td>
27                 <td>123</td>
28                 <td>123</td>
29             </tr>
30             <tr>
31                 <td><input type="checkbox"/></td>
32                 <td>123</td>
33                 <td>123</td>
34             </tr>
35         </table>
36     </div>
37 
38     <script src="jquery-3.1.1.min.js"></script>
39     <script>
40         function SelectAll() {
41             //找到table標籤中的全部input
42             //$("table input[type='checkbox']")  找到全部input，是一個列表
43             $("table input[type='checkbox']").prop("checked", true);
44         }
45         function ClearAll() {
46             $("table input[type='checkbox']").prop("checked", false);
47         }
48         function Reverse() {
49             /*
50             //用下面的方法，能夠即輸出序號，也能輸出元素
51             var userList = [11,22,33,44];
52             $.each(userList, function (i, item) {
53                 console.log(i, item);
54             });
55             */
56             
57             $("table input[type='checkbox']").each(function () {
58                 //jQuery封裝，循環執行該方法
59                 //$(this) 表示當前執行的元素
60                 var isChecked = $(this).prop("checked");  //返回true或false
61                 //檢查是否已被選中，是則取消，不然選中
62                 if(isChecked){
63                     $(this).prop("checked",false);
64                 }else {
65                     $(this).prop("checked",true);
66                 }
67 
68             })
69         }
70     </script>
71 
72 </body>
73 </html>

View Code

4、返回頂部

一點擊"返回頂部"，就調用下面的方法即可回到頂部:

function GoTop(){
	$(window).scrollTop(0);
}

優化版:

看下面這個網站https://www.yonglibao.com/　，會發現剛開始右下角是沒有出現返回頂部的標記的，當滑輪向下滾動必定距離後纔會出現返回頂部的標記!!

若是想等到滑輪離頂部100時纔出現返回頂部字樣的話，能夠給windows註冊一個事件，當滑輪每移動一次就執行一次該事件，檢測當前滑輪離頂部的距離，若是超過100，則去除div(返回頂部)的隱藏樣式。

    <script>
        //給windows註冊一個事件，當滑輪每移動一次就執行一次該事件
        window.onscroll = function () {
            //console.log(123);　　//一滾動就輸出123
            //獲取當前的scrollTop
            var current_top = $(window).scrollTop();
            if(current_top>100){
                $(".top").removeClass("hide");
            }else {
                $(".top").addClass("hide");
            }
        };

    </script>

PS: 也能夠給一個標籤訂義滑輪(overflow: auto)。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Top</title>
 6     <style>
 7         .top{
 8             position: fixed;
 9             right: 0;
10             bottom: 0;
11             width: 100px;
12             height: 40px;
13             line-height: 40px;
14             text-align: center;
15             background-color: #e7d9b1;
16         }
17         .hide{
18             display: none;
19         }
20     </style>
21 </head>
22 <body>
23     <!--可經過$("#aa").scrollTop(0)使下面的小滾動條返回頂部-->
24     <div id="aa" style="height: 200px;background-color: #f8ff89;overflow: auto;">
25         <p>aa</p>
26         <p>aa</p>
27         <p>aa</p>
28         <p>aa</p>
29         <p>aa</p>
30         <p>aa</p>
31         <p>aa</p>
32         <p>aa</p>
33     </div>
34 
35     <div style="height: 2000px; background-color: #a3ffd3;"></div>
36 
37     <div class="top hide" onclick="GoTop();">返回頂部</div>
38 
39     <script src="jquery-3.1.1.min.js"></script>
40     <script>
41         //給windows註冊一個事件，當滑輪每移動一次就執行一次該事件
42         window.onscroll = function () {
43             //console.log(123);　　//一滾動就輸出123
44             //獲取當前的scrollTop
45             var current_top = $(window).scrollTop();
46             if(current_top>100){
47                 $(".top").removeClass("hide");
48             }else {
49                 $(".top").addClass("hide");
50             }
51         };
52 
53         function GoTop() {
54             $(window).scrollTop(0);
55         }
56     </script>
57 </body>
58 </html>

View Code

5、滾動菜單

效果圖:

若是頁面已經到底部了，但此時第3張的頂部還未到瀏覽器的頂部，因此是顯示第2張，但按用戶體驗來講，左側的菜單對第3張着色會更好.

如何斷定滑輪到了底部?? 可用：瀏覽器界面高度+滑輪滾動高度＝HTML文檔高度

$(window).height()+$(window).scrollTop()==$(document).height()

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <style>
  7 
  8         body{
  9             margin: 0px;
 10         }
 11         img {
 12             border: 0;
 13         }
 14         ul{
 15             padding: 0;
 16             margin: 0;
 17             list-style: none;
 18         }
 19         .clearfix:after {
 20             content: ".";
 21             display: block;
 22             height: 0;
 23             clear: both;
 24             visibility: hidden;
 25         }
 26 
 27         .wrap{
 28             width: 980px;
 29             margin: 0 auto;
 30         }
 31 
 32         .pg-header{
 33             background-color: #303a40;
 34             -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
 35             -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
 36             box-shadow: 0 2px 5px rgba(0,0,0,.2);
 37         }
 38         .pg-header .logo{
 39             float: left;
 40             padding:5px 10px 5px 0px;
 41         }
 42         .pg-header .logo img{
 43             vertical-align: middle;
 44             width: 110px;
 45             height: 40px;
 46 
 47         }
 48         .pg-header .nav{
 49             line-height: 50px;
 50         }
 51         .pg-header .nav ul li{
 52             float: left;
 53         }
 54         .pg-header .nav ul li a{
 55             display: block;
 56             color: #ccc;
 57             padding: 0 20px;
 58             text-decoration: none;
 59             font-size: 14px;
 60         }
 61         .pg-header .nav ul li a:hover{
 62             color: #fff;
 63             background-color: #425a66;
 64         }
 65         .pg-body{
 66 
 67         }
 68         .pg-body .catalog{
 69             position: absolute;
 70             top:60px;
 71             width: 200px;
 72             background-color: #fafafa;
 73             bottom: 0px;
 74         }
 75         .pg-body .catalog.fixed{
 76             position: fixed;
 77             top:10px;
 78         }
 79 
 80         .pg-body .catalog .catalog-item.active{
 81             color: #fff;
 82             background-color: #425a66;
 83         }
 84 
 85         .pg-body .content{
 86             position: absolute;
 87             top:60px;
 88             width: 700px;
 89             margin-left: 210px;
 90             background-color: #fafafa;
 91             overflow: auto;
 92         }
 93         .pg-body .content .section{
 94             height: 500px;
 95         }
 96     </style>
 97 </head>
 98 <body>
 99 
100     <div class="pg-header">
101         <div class="wrap clearfix">
102             <div class="logo">
103                 <a href="#">
104                     <!--<img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn">-->
105                 </a>
106             </div>
107             <div class="nav">
108                 <ul>
109                     <li>
110                         <a  href="#">首頁</a>
111                     </li>
112                     <li>
113                         <a  href="#">功能一</a>
114                     </li>
115                     <li>
116                         <a  href="#">功能二</a>
117                     </li>
118                 </ul>
119             </div>
120 
121         </div>
122     </div>
123     <div class="pg-body">
124         <div class="wrap">
125             <div class="catalog">
126                 <div class="catalog-item" auto-to="function1"><a>第1張</a></div>
127                 <div class="catalog-item" auto-to="function2"><a>第2張</a></div>
128                 <div class="catalog-item" auto-to="function3"><a>第3張</a></div>
129             </div>
130             <div class="content">
131                 <div menu="function1" class="section">
132                     <h1>第一章</h1>
133                 </div>
134                 <div menu="function2" class="section">
135                     <h1>第二章</h1>
136                 </div>
137                 <div menu="function3" class="section">
138                     <h1>第三章</h1>
139                 </div>
140             </div>
141         </div>
142 
143     </div>
144 
145     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
146     <script type="text/javascript">
147         window.onscroll = function () {
148             if($(window).scrollTop() > 50){　//當滑輪離頂部距離大於50，則將菜單固定，不然移除固定屬性
149                 $('.catalog').addClass('fixed');
150             }else{
151                 $('.catalog').removeClass('fixed');
152             }
153 
154             var ws = $(window).scrollTop();  //滑輪滾動距離
155             $('.content').children().each(function () {  //循環每一個子標籤
156                 var offs = $(this).offset();   //離頂部，左部的距離
157                 var offTop = offs.top;        //每一章的標籤離頂部的距離
158 //                console.log(offTop);
159                 //當前標籤離頂部的高度 + 當前標籤的高度 > 滾動條的高度，則對當前標籤對應的菜單着色
160                 var total = offTop + $(this).height();
161                 //滑輪滾動距離大於標籤離頂部的距離，此時菜單要着色　ws>offTop
162                 if(ws>offTop && ws<total){
163                     //若是滑輪到了底部，最後一個菜單增大
164                     //如何斷定滑輪到了底部？？可用：瀏覽器界面高度+滑輪滾動高度＝HTML文檔高度
165                     if($(window).height() + $(window).scrollTop() == $(document).height()){
166                         $(".catalog").children(':last').css("fontSize", "48px").siblings().css("fontSize", "12px");
167                     }else {  //未到底部
168                         var t = $(this).attr("menu");  //獵取標籤屬性menu的值，去菜單找對應的auto_to屬性值
169                         var target = 'div[auto-to="' + t + '"]';
170                         $(".catalog").children(target).css("fontSize", "48px").siblings().css("fontSize", "12px");
171 
172                     }
173                 }
174             })
175         };
176 
177     </script>
178 </body>
179 </html>

View Code

6、拖動面板

效果圖:

鼠標放在黑色標題點擊後即可拖動。

JS代碼講解:

 1     <script>
 2         $(function () {  3             //頁面加載完成以後自動執行
 4             $("#title").mouseover(function () {  //給title綁定事件
 5                 $(this).css("cursor", "move");　　　//this表明title(標題標籤)
 6             }).mousedown(function (e) {   //鏈式編程，在jQuery是很流行的；也是對title綁定事件
 7                 //綁定事件，e爲封裝了事件的對象，包含不少信息
 8                 var _event = e || window.event;  //有些瀏覽器不兼容沒給出e,就用window.event
 9                 var old_x = _event.clientX; //原始鼠標橫座標
10                 var old_y = _event.clientY; 11                 //框左上角離瀏覽器界面左邊界，頂部的距離
12                 var parent_left = $(this).parent().offset().left; 13                 var parent_top = $(this).parent().offset().top; 14 
15                 $(this).bind("mousemove", function (e) {　　//this表明title;爲誰綁定事件，$(this)即是誰
16                     var _new_event = e || window.event; 17                     var new_x = _new_event.clientX;  //新的鼠標座標
18                     var new_y = _new_event.clientY; 19 
20                     var x = parent_left + (new_x-old_x);  //移動的橫座標距離
21                     var y = parent_top + (new_y-old_y); 22 
23                     $(this).parent().css("left", x+'px');　　//this仍表明title
24                     $(this).parent().css("top", y+'px'); 25  }) 26             }).mouseup(function () {  //鼠標一放開(不點擊)，則取消綁定移動事件
27                     $(this).unbind("mousemove"); 28  }) 29  }) 30     </script>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div style="border: 1px solid indigo;width: 400px;height: 300px;position: absolute;">
 9         <div id="title" style="background-color: black;height: 50px;color: white;">
10             標題
11         </div>
12         <div style="height: 350px;">
13             內容
14         </div>
15     </div>
16 
17     <script src="jquery-3.1.1.min.js"></script>
18     <script>
19         $(function () {
20             //頁面加載完成以後自動執行
21             $("#title").mouseover(function () {  //給title綁定事件
22                 $(this).css("cursor", "move");　　　//this表明title(標題標籤)
23             }).mousedown(function (e) {   //鏈式編程，在jQuery是很流行的；也是對title綁定事件
24                 //綁定事件，e爲封裝了事件的對象，包含不少信息
25                 var _event = e || window.event;  //有些瀏覽器不兼容沒給出e,就用window.event
26                 var old_x = _event.clientX; //原始鼠標橫座標
27                 var old_y = _event.clientY;
28                 //框左上角離瀏覽器界面左邊界，頂部的距離
29                 var parent_left = $(this).parent().offset().left;
30                 var parent_top = $(this).parent().offset().top;
31 
32                 $(this).bind("mousemove", function (e) {　　//this表明title;爲誰綁定事件，$(this)即是誰
33                     var _new_event = e || window.event;
34                     var new_x = _new_event.clientX;  //新的鼠標座標
35                     var new_y = _new_event.clientY;
36 
37                     var x = parent_left + (new_x-old_x);  //移動的橫座標距離
38                     var y = parent_top + (new_y-old_y);
39 
40                     $(this).parent().css("left", x+'px');　　//this仍表明title
41                     $(this).parent().css("top", y+'px');
42                 })
43             }).mouseup(function () {  //鼠標一放開(不點擊)，則取消綁定移動事件
44                     $(this).unbind("mousemove");
45                 })
46         })
47     </script>
48 </body>
49 </html>

View Code

7、跨域Ajax請求與電視節目實例

Ajax概述

對於WEB應用程序：用戶瀏覽器發送請求，服務器接收並處理請求，而後返回結果，每每返回就是字符串（HTML），瀏覽器將字符串（HTML）渲染並顯示瀏覽器上。頁面不刷新便能提交數據。經過ajax請求，收到返回的數據。經過跨域ajax請求接收的數據是包裝在服務端發往客戶端的函數中的。

一、傳統的Web應用

一個簡單操做須要從新加載全局數據

二、AJAX

AJAX，Asynchronous JavaScript and XML (異步的JavaScript和XML)，一種建立交互式網頁應用的網頁開發技術方案。

異步的JavaScript：
使用【JavaScript語言】以及相關【瀏覽器提供類庫】的功能向服務端發送請求，當服務端處理完請求以後，【自動執行某個JavaScript的回調函數】。
PS：以上請求和響應的整個過程是【偷偷】進行的，頁面上無任何感知。

XML
XML是一種標記語言，是Ajax在和後臺交互時傳輸數據的格式之一

利用AJAX能夠作：
一、註冊時，輸入用戶名自動檢測用戶是否已經存在。
二、登錄時，提示用戶名密碼錯誤
三、刪除數據行時，將行ID發送到後臺，後臺在數據庫中刪除，數據庫刪除成功後，在頁面DOM中將數據行也刪除。（博客園）

目前我對ajax學習不怎麼深刻，具體能夠參考http://www.cnblogs.com/wupeiqi/articles/5703697.html，下次有時間再整理寫篇關於ajax的博客。

效果圖:

經過江西電視臺的接口http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403獲取數據

代碼分析:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 <input type="button" onclick="AjaxRequest()" value="跨域Ajax" />
 9 
10 
11 <div id="container"></div>
12 
13 <script src="jquery-3.1.1.min.js" type="text/javascript"></script>
14     <script type="text/javascript">
15         function AjaxRequest() { 16  $.ajax({ 17  url: 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403', 18  type: 'GET', 19  dataType: 'jsonp', 20  jsonp: 'callback', 21  jsonpCallback: 'list', 22 
23  success: function (arg) { 24                     //當請求執行完成以後，自動調用，arg(參數):服務器返回的數據
25                     //arg = {data: xxx}
26                     //jsonpdic爲字典，jsonpdic有兩個元素，一個是week:xx；另外一個是list列表，包含周幾相關的信息
27                     var jsonpdic = arg.data; 28                     //k爲列表(裏面爲星期Ｘ對應的內容)，v爲一個字典{week:xx}
29  $.each(jsonpdic, function (k, v) { 30                         var week = v.week;　　//得到星期幾，並將其拼接成h1標籤，並append到div標籤
31                         var temp = "<h1>" + week + "</h1>"; 32  $('#container').append(temp); 33                         //得到key爲list所對應的value(包含相關信息)；listArray爲列表，裏面元素爲字典形式
34                         var listArray = v.list; 35  $.each(listArray, function (kk,vv) { 36                             var link = vv.link; 37                             var name = vv.name; 38                             //a標籤是沒有換行的，因此在後面加上<br/>
39                             var tempNex = "<a href='" + link + "'>" + name + "</a><br/>"
40  $('#container').append(tempNex); 41  }) 42  }) 43  } 44  }); 45  } 46 
47 </script>
48 </body>
49 </html>