JQuery架構

1) JQuery是目前比較主流的 JavaScript 庫，封裝了很多預定義的對象和實作函數，幫助使用者建立有高難度互動的頁面，并且相容大部分主流的浏覽器.

JQuery對同樣提供了對Ajax的支援，可以更加友善快速的進行Ajax的開發，相關的方法有$.get $.post $.ajax等.

JQuery的對象的本質就是dom對象的數組/集合

2) JQuery對象與dom對象的互相轉換

JS轉JQuery: var jObj = $(dObj);

JQuery轉JS: var dObj = jObj[0] 或者 var dObj = jObj.get(0)

導入jquery-1.7.2.min.js，放置在scripts檔案夾中

$(function(){   // 相當于 window.onload();，目前檔案加載完畢，就會執行
            //alert("文檔加載完畢了")
            
        });

例如：

...head  script     
　　　　　　　$(function(){   // 相當于 window.onload();
            //alert("文檔加載完畢了")
            // $("#d2")  就相當于  document.getElementById("d2");
            
            $("#d2").click(function(){  // 動态綁定事件，在HTML标簽中并沒有使用js
                var msg = $("#s1").html();
                //alert(msg);
                
                $("#i1").val(msg);
                
                
                //Jquery  --> Dom   一般都是操作Jquery對象
                var Jobj  = $("#s1");
                var dObj = Jobj[0];  // Jobj.get(0)
                
                //Dom -->JQuery JQuery的對象的本質就是dom對象的數組/集合
                
                var JJobj = $(dObj);
            });
        });
...
...body
 <input type="button" id="d2" value="測試Jquery" />
..

3) $.get方法

4) $.post方法

5) $.ajax方法

底層 AJAX 實作。簡單易 $.get, $.post 等。$.ajax() 傳回其建立的 XMLHttpRequest參數直接使用。

$.ajax方法的參數

對于settings請求設定來說，所有選項都是可選的，詳見jQuery手冊

$(function(){
            var  usernameFlag = false ; 
            var  passwordFlag = false ; 
            
            $("#username").blur(function(){
                var username = $("#username").val();
                //發送異步請求
                $.ajax({
                    url:"checkUsername",
                    type:"post",
                    data:"username=" + username,
                    success:function(data){  // 會将伺服器傳回的資料儲存到data中
                        if(data == 0){
                            $("#regist_span").html("使用者名可以使用");
                            usernameFlag =true;
                        }else{
                            $("#regist_span").html("使用者名不可以使用");
                        }
                    }
                });
            });