對jQuery的學習記錄

最近開始重新學習Java，然後重新學習到了jQuery這裏。把學習中的部分知識點都記錄下來。方便以後查看。

jQuery就是一個輕量級的"寫的少，做的多"的JavaScript庫。

基礎語法： $(selector).action()

其中，$代表jQuery；（selector）是選擇器，選擇對哪些元素進行操作；.是連接selector和action的連接符；action（）就是具體的操作。

比如，$(this).hide() - 隱藏當前元素；$("p.test").hide() - 隱藏所有 class="test" 的 <p> 元素；$("#test").hide() - 隱藏所有 id="test" 的元素。其中，常用的selector：#id和.class，以及*所有，this當前元素。

所有jQuery函數都要位於一個 document ready 函數中，這是爲了防止文檔在完全加載就緒之前運行 jQuery 代碼（即在 DOM 加載完成後纔可以對 DOM 進行操作， Document Object Model（文檔對象模型）），如果在文檔沒有完全加載之前就運行函數，操作可能會失敗。

$(document).ready(function(){                        $(function(){
           // 完整寫法                                   等於              //簡潔寫法
});                                                                          });

鼠標事件	鍵盤事件	表單事件	文檔/窗口事件
click                點擊	keypress  觸發大多數按鍵	submit   提交	load
dblclick            雙擊	keydown  按下去，可以持續	change   表單的值改變	resize
mouseenter    鼠標移到	keyup      彈起來	focus	scroll
mouseleave    鼠標移出		blur	unload

$("p").click(function(){
            $(this).hide();  //點擊元素p後，就隱藏該元素
});

獲得內容

提前聲明：text、html、val三者雖然都能獲取值，但還是各有不同。

• 不同點一

<p>段落一</p>  
<p>段落二</p>   
  
$(function(){  
 alert($("p").text());      //段落一段落二
})  
  
$(function(){  
    alert($("p").html());   //段落一
}) 

text()在獲取元素內容時，結果是由所有匹配元素包含的文本內容組合起來的文本。

html()在獲取元素內容時，如果選擇器匹配多於一個的元素，那麼只有HTML 上的第一個匹配的元素內容會被獲取。

• 不同點二

<p><a><i>段落</i></a></p> 

$(function(){  
 alert($("p").text());    //段落
})  

$(function(){  
    alert($("p").html());  //<a><i>段落</i></a>
})

text()在獲取內容時，會忽略其中的標籤。

html()在獲取內容時，會將其中的其他標籤也讀取出來。

• 不同點三

$("p").html("<b>test</b>");  //網頁上顯示的是加粗的test

$("p").text("<b>test</b>");  //網頁上顯示的是<b>test</>

text()更改的全是內容。

html()在更改內容時，可以加入標籤。
例子：

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());    //.text():設置、返回所選元素的文本內容
});

$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());    //.html():設置、返回所選元素的HTML內容                     
});  

 $("#btn1").click(function(){
  alert("值爲: " + $("#test").val());     //.val():設置、返回所選元素的表單字段的值
});     

$("button").click(function(){
  alert($("#runoob").attr("href"));       //.attr():獲取元素的屬性
});

設置內容

$("#btn1").click(function(){
    $("#test1").text("Hello world!");          //.text("內容的值")
});
$("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");   //.html("html元素")
});
$("#btn3").click(function(){
    $("#test3").val("RUNOOB");                 //.val("具體的值")
});

$("button").click(function(){
  $("#runoob").attr("href","http://www.runoob.com/jquery");   // .attr("屬性的改變")
});

$("button").click(function(){
    $("#runoob").attr({
        "href" : "http://www.runoob.com/jquery",   // 多個參數：大括號括起來，並用逗號隔開。
        "title" : "jQuery 教程"                    //最後一個參數不能加逗號
    });
});

AJAX的用法

AJAX只是用來實現實時更新網頁的功能，是在後臺操作結束後進行的一些網頁顯示內容的變化。所以，Ajax往往是作爲結果部分。

語法：$(selector).load(URL,data,callback);

其中，load是Ajax的代表函數。URL必需要有，data是與請求一起的值，callback則是在load()執行完了後執行的函數。

<script>
$(document).ready(function(){                         //等效於$(function(){});
  $("button").click(function(){                       //在點擊了button後
    $("#div1").load("/try/ajax/demo_test.txt #p1");   //進行Ajax的顯示效果：把文本內容加載到ID=p1的中去。
  });
});
</script>

jQuery中的$.ajax(){}

Tip：

在js中，單引號和雙引號是不怎麼嚴格區分的。但在嵌套情況下，很容易出問題。在嵌套使用時，如果都使用雙引號，內層的雙引號的無效的。

所以，推薦的使用方法：平時使用的時候儘量用單引號，只有碰到嵌套的時候纔會同時用兩種引號。即外面是單引號的時候裏面就要用雙引號，外面是雙引號的時候裏面就要用單引號，總之不能同時用雙引號或者是單引號。

$.ajax({
    url:'/comm/test1.php',	//發送的目的地地址
    type:'POST', 		//請求方式
    async:true,    		//同步異步
    data:{			
        name:'yang',age:25	
    },				//鍵值對數據
    dataType:'json',    	//返回格式
    success:function(data,textStatus,jqXHR){
        console.log(data)
        console.log(textStatus)
        console.log(jqXHR)
    }				//請求成功後的回調函數
});

1、url：發送需求到對應的後臺去處理，是目的地的地址，後臺根據這個url來區別不同的請求。

2、type：默認GET，但GET不安全，明文，且容量小。多數都用POST。
3、async：默認爲true，打開異步請求。false後爲同步請求，一次只能有一個請求，特別注意。
4、data：跟隨請求，一塊發送到服務器的鍵值對數據。

5、dataType：預期服務器返回的數據類型。可以指定：xml、html、script、json、jsonp、text。如果不指定返回類型，那jQuery也會自動返回responseXML、responseText，來作爲回調函數的參數。
6、success：要求爲Function類型的參數，請求成功後調用該回調函數。擁有三個參數：請求返回的數據data、響應狀態字符串textStatus、jqXHR對象。其中，常用的爲data，這是由服務器根據dataType處理後，傳回Ajax的數據。

7、這裏只是把最常用的參數羅列出來了，其他還有很多的參數，在此不再一一詳解，有想知道的，請自行查找。

<script type="text/javascript">
    $(function(){
        //按鈕單擊時執行
        $("#testAjax").click(function(){            
            //Ajax調用
            $.ajax({
               type: "POST",
               url: "test.php",
               data: "name=garfield&age=18",
               success: function(data){
                        $("#myDiv").html('<h2>'+data+'</h2>');
                  }
            });
            
         });
    });
</script> 

初步總結到此爲止。