jQuery學習總結

1：jQuery是什麼

jQuery是繼prototype以後又一個優秀的Javascript框架。它是輕量級的js庫，兼容各類瀏覽器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。jQuery使用戶能更方便地處理HTML documents、events、實現動畫效果，而且方便地爲網站提供AJAX交互。jQuery還有一個比較大的優點是，它的文檔說明很全，並且各類 應用也說得很詳細，同時還有許多成熟的插件可供選擇。jQuery可以使用戶的html頁保持代碼和html內容分離，也就是說，不用再在html裏面插 入一堆js來調用命令了，只需定義id便可。

2：jQuery選擇器

jQuery最強大的方面之一就是它可以簡化DOM遍歷任務。通常來講，能夠經過html文檔中的元素的標籤名，id屬性，class屬性來獲取該元素。舉例以下：

標籤名：$(‘p’)會取得文檔中全部的段落。

Id：$(‘#some-id’)會取得文檔中具備對應id爲some-id的一個元素。這裏使用的是「#」號。

Class：$(‘.some-class’) 會取得文檔中帶有some-class類的全部元素。這裏使用的是「.」符合

因爲經過選擇器獲取的元素可能不止一個，所以，一個jQuery對象實際上能夠說是一個集合，集合中包含多個被獲取到的元素。

有時，咱們可能須要經過元素的屬性對元素進行選擇。在jQuery中，在涉及屬性選擇符時，jquery使用了XPath中的慣例來標識屬性，即將屬性前 置一個@符號並放在一個方括號中。例如，要選擇全部帶title屬性的連接，可使用下面的代碼：$(‘a[@title]’)。屬性選擇符容許以相似正 則表達式的語法來標識字符的開始(^)和結尾($)，也可使用(*)來表示字符串中的任意位置。例如，要取得全部電子郵件連接，須要構造一個選擇符，用 來尋找全部href屬性([]@href)且以mailto開頭(^=」mailto」)的錨元素。結果以下所示：

$(‘a[@href^=」mailto」]’);

3：jQuery事件有哪些

bind():爲每個匹配元素的特定事件（像click）綁定一個事件處理器函數。例如：當每一個段落被點擊的時候，彈出其文本，

$("p").bind("click", function(){

  alert( $(this).text() );

});

unbind():bind()的反向操做，從每個匹配的元素中刪除綁定的事件。例如：將段落的click事件取消綁定，

       $("p").unbind( "click" );

而實際上，咱們常常不這麼寫，由於jQuery自己已經提供了不少經常使用的事件的函數供咱們調用，例如：將頁面內全部段落點擊後隱藏，

       $("p").click( function () { $(this).hide(); });

另外，在不前置@符的狀況下，能夠用來指定包含在另外一個元素中的屬性。例如取到包含一個ol元素的全部div元素，代碼：$(‘div[ol]’)。

在jQuery中，當觸發任何事件處理程序時，關鍵字this引用的都是攜帶相關行爲的DOM元素。經過在事件處理程序中使用$(this)，能夠爲相應的元素建立一個jQuery對象。例如以下用法：

$("p").click( function () { $(this).addClass(‘selected’); });

4：jQuery對象與dom對象的轉換

只有jquery對象才能使用jquery定義的方法。注意dom對象和jquery對象是有區別的，調用方法時要注意操做的是dom對象仍是jquery對象。
普通的dom對象通常能夠經過$()轉換成jquery對象。
如：$(document.getElementById("msg"))則爲jquery對象，可使用jquery的方法。
因爲jquery對象自己是一個集合。因此若是jquery對象要轉換爲dom對象則必須取出其中的某一項，通常可經過索引取出。
如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]這些都是dom對象，可使用dom中的方法，但不能再使用Jquery的方法。

如下幾種寫法都是正確的：

$("#msg").html();
$("#msg")[0].innerHTML;

5：ajax

asynchronous javascript and xml:異步的javascript和xml。

ajax是一種用來改善用戶體驗的技術，其本質是利用瀏覽器內置的一種特殊的對象 (XMLHttpRequest)異步(即發送請求時，瀏覽器不會銷燬當前頁面，用戶能夠繼續在當前頁面作其它的操做)的向服務器發送請求,而且利用服務器返回的數據(再也不是一個完整的頁面，只是部分的數據，通常使用文本或者xml返回)來部分更新當前頁面。使用ajax技術以後，頁面無刷新，而且不打斷用戶

的操做。

ajax的優勢

(1).頁面無刷新

(2).不打斷用戶的操做，用戶的體驗好。

(3).按需獲取數據，瀏覽器與服務器之間數據的傳輸量減小。

(4).是一個標準技術，不須要下載任何的插件。

(5).能夠利用客戶端(瀏覽器)的計算能力。

請求方式

get和post請求

ajax的緩存問題：

當使用IE瀏覽器時，若是使用get方式發請求，瀏覽器會先緩存以前

 

訪問的數據，若是訪問的地址不變，不會向服務器發請求。

 

解決方式1:使用post方式發請求。

 

解決方式2: 在請求地址後面添加一個隨機數。

發送同步請求：

xhr.open('post','check_username.do',false);

 

  function check_username(){

 

var xhr = getXhr();xhr.open('post','show.do',true);

 

xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');

 

xhr.onreadystatechange=function(){

 

if(xhr.readState == 4){

 

 var txt = xhr.responseText;alert(txt);

 

        $('username_msg').innerHTML=txt;

 

      }

 

};

 

xhr.send('username=' + $F('username'));