jQuery起步

當初遇到jQuery時，是先看到Lightbox的換圖效果，感覺很酷!但後來實驗室就出現了一本"歐萊禮"的-《深入淺出jQuery》還不錯的書籍，這本書算是我第一本認真看過"歐萊禮"的書籍，書內的解說帶著趣味性，以及也有實際上的運用，真的是本好書。

在看書之前，也建議去看看jQuery官網的Demo吧~
↓jQuery API
http://api.jquery.com/
在裡面有很多最基礎的範例可以學習
















在小尖兵訓練結束後的一個成果-民生健康養生館

此網站的jQuery有用到以下幾個方法:
1.animate() 字型放大縮小
他是可以更改css的屬性讓你所選的class和id可以以動畫的方式呈現
function big() {
   $(".UU").animate({ fontSize: "12pt" });
   $(".U").animate({ fontSize: "12pt" });
}
    function small() {
        $(".UU").animate({ fontSize: "10pt" });
        $(".U").animate({ fontSize: "10pt" });
}

http://api.jquery.com/animate/   可以參考官網的API

2.jQuery tinyMap 地圖

這就是我在"關於我們"裡面的Google map

$(document).ready(function () {
    $(".w2bslikebox").hover(function () {
        $(this).stop().animate({ right: "0" }, "medium");
    },
     function () {
         $(this).stop().animate({ right: "-250" }, "medium");
     }, 500);

         $('#map').tinyMap({
        zoom:15,
        center: {
            x: '24.811599386089206',
            y: '120.97587168216705',
         
        },
     
     marker:[
        {addr: '24.811599386089206,120.97587168216705',text: '<p style="font-size: 14pt">民生健康養生館 </br> 地址：新竹市民生路193號 </br> 電話：03-5353626</p>' },
        {addr: '24.809221,120.975552',text: '<p style="font-size: 14pt">遠東巨城購物中心',icon:'images/map_02.png' },]
    });

    });

http://app.essoduke.org/tinyMap/#.UsXUyfQW0ys  可以參考這個網站的詳細介紹

3.jQuery.validate表單驗證

這是當初使用Visual Studio裡面的驗證工具，感覺很麻煩，所以後來就找到了jQuery驗證表單的好物

$(document).ready(function () {
        $("#commentForm").validate(
        {
            rules: {
                        <%=RadioButtonList1.UniqueID %>:{
                        required: true
                        },
                        <%=CheckBoxList1.UniqueID %>:{
//                        required: true
                        },
                   },
            messages: {
                            <%=RadioButtonList1.UniqueID %>:{
                            required: "請選擇性別"
                            },
                            <%=CheckBoxList1.UniqueID %>:{
                            required: "至少選一項"
                            }              
            }                    
       });
});

http://www.minwt.com/js/1800.html  可以參考這個網站的詳細介紹

4.fadeIn()、hide()淡入淡出

這是在首頁換圖的效果，其實當初也沒想這麼多就簡單的做一做了XD  (有點偷懶)
他的效果跟上面提到的animate()其實都是一個動態的效果

function pic1(){
$("#apDiv4").fadeIn(500);
$("#apDiv5").hide();
$("#apDiv6").hide();
$("#apDiv7").hide();
$("#apDiv8").hide();
}

哈哈哈 從小弟的code就可以看的出來如此的簡單(偷懶)
fadeIn()、hide()淡入淡出的效果呈現

動態效果.fadeIn()、.animate()、.delay()、.fadeTo()、.promise()、.queue()、.stop()
這幾個方法可以使用

http://api.jquery.com/?s=fadeIn%28%29  可以參考官網的API

5.getJSON()

講到getJSON首先我們要先來了解一下json的格式

[{"Tittle":"2013-12-5 ","Id":"我們加入GOMAJ...","Time1":"48"},{"Tittle":"2012-12-25","Id":"新創立的FB粉絲團...","Time1":"46"},{"Tittle":"2012-12-23","Id":"網頁功能介紹...","Time1":"45"},{"Tittle":"2012-12-23","Id":"網頁首頁介紹...","Time1":"44"},{"Tittle":"2012-12-23","Id":"網頁風格介紹...","Time1":"43"},{"Tittle":"2012-12-23","Id":"網頁介紹-意見回饋...","Time1":"42"}]

以上這個就是養生館首頁右下方NEWS的json資料
來看一下
[
   {"Tittle":"2013-12-5 ","Id":"我們加入GOMAJ...","Time1":"48"},
   {"Tittle":"2012-12-25","Id":"新創立的FB粉絲團...","Time1":"46"},
   {"Tittle":"2012-12-23","Id":"網頁功能介紹...","Time1":"45"},
   {"Tittle":"2012-12-23","Id":"網頁首頁介紹...","Time1":"44"},
   {"Tittle":"2012-12-23","Id":"網頁風格介紹...","Time1":"43"},
   {"Tittle":"2012-12-23","Id":"網頁介紹-意見回饋...","Time1":"42"}
]

這樣整齊排好後，應該也有發現他的格式要怎麼排了吧
為什麼我會先提格式呢?
因為如果格式錯了 你要get他 會完全不理你
到時候你就在那無窮迴圈
結果只是格式錯誤...悲劇

再來看我們要如何抓取整理好json的格式

$.getJSON('Json.aspx', function (aa) {
    $("#apDiv11").append("<table border='0'>" +
                           "<tr>" +
                           "<td class='PP' height='20' width='3'>" + "<img src='images/icon_index.png'/>" + "</td>" +
                           "<td class='PP' height='25' width='245' style='font-size: 10pt'>" + "<a href=" + 'news_1.aspx?ID=' + aa[0].Time1 + ">" + aa[0].Id + "</a>" + "</td>" +
                           "<td class='PP' height='25' width='100' align='left' style='font-size: 10pt'>" + aa[0].Tittle + "</td>" +
                           "</tr>"+"</table>");
});
                       
http://api.jquery.com/jQuery.getJSON/   可以參考官網的API


以上是我jQuery起步走來的一些成果
希望你們能在小尖兵的過程中獲得一些幫助