前言: 今天2月最后一天，寫一篇jQuery的幾個實例，算是之前前端知識的應用。寫完這篇博客會做一個登陸界面+后台管理(i try...)
一、菜單實例
最開始的界面:
點擊菜單三后的界面:
View Code
二、表單實例
效果圖:
優化后:
實現功能:
- 功能1:點擊菜單A, 則下面的內容為菜單A對應的內容。
- 功能2:點擊菜單A,則菜單A會出現背景色，而未被點擊的菜單沒有。
難點說明:
一點擊菜單一，菜單一的背景就"變色"，背景顏色其實就是一種樣式(以樣式A為稱)嘛，一點擊菜單的div就會它加上樣式A，同時給菜單二，菜單三(即菜單一的同級元素siblings)去除樣式A。這個是不難實現的，如果有看我之前寫的博客的話。
問題來了，如何實現一點擊菜單1，就顯示菜單1的內容??其實菜單1對應的內容就是一塊div嘛。只要找到這塊div元素，去除隱藏的樣式，同時給菜單2和3加上隱藏的樣式。就OK啦~ 現在的問題是如何一點菜單一就找到菜單一對應內容的div元素??
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<
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)。嗯，挺有意思的哈哈~~
View Code
三、復選框
效果圖:
改進版:
View Code
四、返回頂部
一點擊"返回頂部"，就調用下面的方法便可回到頂部:
|
1
2
3
|
function
GoTop(){
$(window).scrollTop(0);
}
|
優化版:
看下面這個網站https://www.yonglibao.com/ ，會發現剛開始右下角是沒有出現返回頂部的標記的，當滑輪向下滾動一定距離后才會出現返回頂部的標記!!
如果想等到滑輪離頂部100時才出現返回頂部字樣的話，可以給windows注冊一個事件，當滑輪每移動一次就執行一次該事件，檢測當前滑輪離頂部的距離，如果超過100，則去除div(返回頂部)的隱藏樣式。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<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)。
View Code
五、滾動菜單
效果圖:
如果頁面已經到底部了，但此時第3張的頂部還未到瀏覽器的頂部，所以是顯示第2張，但按用戶體驗來說，左側的菜單對第3張着色會更好.
如何判定滑輪到了底部?? 可用：瀏覽器界面高度+滑輪滾動高度＝HTML文檔高度
|
1
|
$(window).height()+$(window).scrollTop()==$(document).height()
|
View Code
六、拖動面板
效果圖:
鼠標放在黑色標題點擊后便可拖動。
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>
View Code
七、跨域Ajax請求與電視節目實例
Ajax概述
對於WEB應用程序：用戶瀏覽器發送請求，服務器接收並處理請求，然后返回結果，往往返回就是字符串（HTML），瀏覽器將字符串（HTML）渲染並顯示瀏覽器上。頁面不刷新便能提交數據。通過ajax請求，收到返回的數據。通過跨域ajax請求接收的數據是包裝在服務端發往客戶端的函數中的。
1、傳統的Web應用
一個簡單操作需要重新加載全局數據
2、AJAX
AJAX，Asynchronous JavaScript and XML (異步的JavaScript和XML)，一種創建交互式網頁應用的網頁開發技術方案。
- 異步的JavaScript：
使用 【JavaScript語言】 以及 相關【瀏覽器提供類庫】 的功能向服務端發送請求，當服務端處理完請求之后，【自動執行某個JavaScript的回調函數】。
PS：以上請求和響應的整個過程是【偷偷】進行的，頁面上無任何感知。- XML
XML是一種標記語言，是Ajax在和后台交互時傳輸數據的格式之一利用AJAX可以做：
1、注冊時，輸入用戶名自動檢測用戶是否已經存在。
2、登陸時，提示用戶名密碼錯誤
3、刪除數據行時，將行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>
接收的數據是列表與字典的嵌套，結合着下圖與上面代碼看會好很多:
今天在博客園看到一條段子: