js的開發利器——jQuery

原載於bibodeng think beyond，歡迎訪問 ：）

【js開發的煩惱】

 

做爲一個js學習者，在平時的練習與學習中，所不能避免的一件事就是「瀏覽器兼容」問題。由於實在是讓人頭痛，因此記憶深入。在開發中，時常要當心謹慎地測試。就在上次開發的視力app中，就有不兼容的問題，在ubuntu下用開源chrome打開app則會看到那個焦點塊飛走了！！真是乾瞪眼，白着急。好在有開發利器jQuery,這個集如下做用於一身的工具：

一、彌合瀏覽器兼容性的中間體

二、衆多實用功能的API提供者

三、良好的封裝體，利於擴展的平臺

有了jQuery能夠很方便地選取元素，修改內容，實用AJAX，以及作出很是漂亮的UI。下面一一回顧一下這周所學的jQuery知識點，固然也能夠參考jQuery的學習站點w3school。

 

【jquery的選擇器】

 

jquery實現了一個很是方便的選擇器，其形式如同CSS的選擇器通常：

假設頁面中有如此一段文檔：

 

<form>

<input type="text" id="task">

<input type="submit" id="add_btn">

</form>

 

<ul id="task_list">

    <li>go shopping 7:00 pm</li>

    <li>send email to Mr Chen</li>

</ul>

 

那麼以下代碼，能夠方便地選取列表中元素，而後綁定點擊事件。

$('ul#task_list li').bind('click', function(){

        this. addClass();

    });

 說明： $() 是選取符號，能夠選取文檔對象和集合。例如$(document).ready(); $(this).addClass();

固然該符號也表示對對象進行jQuery的封裝，這樣就能夠調用jQuery庫裏面的各類函數API了。

再例以下面的代碼，將選取task的內容：

$('input:text').attr('value')

而後用該獲取的數據賦值或者加工以備使用。能夠說jQuery的選擇符很是地方便。固然還有find（）、siblings（）查找兄弟節點、next（），prev（），parent（）、children（）等很是有用的API用來選取和過濾元素。仍是到用時多翻幾回工具書，寫過幾回便熟悉了。

 

【jQuery的事件綁定方法】

 

通常狀況下，咱們可使用DOM的 addEventListener()，delegate()或者click()等函數爲文檔元素添加事件監視，可是這樣作可能會不兼容（IE的多是attachEvent() ，甚至其餘瀏覽器還有不一樣的API）.而jQuery 提供了強大的事件API:

bind('事件名'，回調函數); 

$('input:submit').trigger('click');  // 這句模擬觸發click事件

jQuery提供很是豐富的事件API: click() , blur(), focus(), mouseout(), mouseover(),hover(函數一，函數二), toggle(函數一，函數二)

 

【jQuery訪問內容和屬性】

 

jQuery要能方便地讀取和修改文檔的內容，這樣交互起來才讓用戶以爲其中的體驗大大超過查看靜態的文檔。要訪問html文檔中的內容可使用以下的API：

 attr(); // 傳入一個參數，獲取參數名對應的屬性值，能夠傳入名值對能夠設置屬性

例如 attr('id', 'tmpID');

attr(

{title:'helloworld', 

id: 'tmpId'

});

text() // 訪問該元素的文本，不含標記

html() // 訪問該元素內的html內容，包含標記

append() // 在當前元素的子元素中追加，prepend()爲在最首添加。例如 $('ul').prepend('<li>hello</li>');

after()  // 添加到當前元素以後

before() // 添加到當前元素以前

insertAfter() // 將選擇集插入到另一個選擇集中以後

wrap() // 包裝爲元素 wrap('<div></div>');

 

【jQuery的CSS接口】

 

$('div').css('font-size');  // 獲取div元素的文字大小css屬性

outerWidth() / outerHeight()     // 獲取大小 包括

 

 

【ajax】

 

$.get('xml文件名', 回調函數function($xml){相關操做});   // get xml文檔

要傳輸一些數據，能夠在第二個參數做爲參數傳輸到服務器

$.getJSON() // 同上，只不過第一個參數請求的是JSON文件，而function裏面也能夠對JSON數據直接像對象同樣操做

$.load() // 直接加載html文檔，同上

$.post() // 使用post方法

使用AJAX能夠異步傳輸數據，所謂異步傳輸，就是不從新加載整個頁面，而是一部份內容進行修改，這樣頁面就能夠動態響應用戶的操做。例如一個上傳文件功能，按下提交按鈕後，則悄悄上傳了文件，而沒必要從新加載整個頁面。又如註冊的時候異步檢測用戶名是否已經存在。 

【小結】

另外，jQuery 還有一些很是有用的擴展，例如jQuery UI 還有 移動終端開發HTML5 app的jQTouch。這些工具都很容易上手，每每調用一個API，傳入幾個參數就能夠完成很是複雜的功能。 jQuery所提供的以上功能，可以知足咱們的大部分須要，最重要的是使咱們免受瀏覽器兼容之苦，固然之後本身編寫jQuery插件的時候，也須要考慮這個問題。有了jQuery開發以後，一些功能變得簡單許多，開源的庫有的就是這個優勢。另外咱們的GTD項目，接下來的目標是配合後臺PHP打開數據和界面之間的通道。

by bibodeng 2012-10-16