使用jQuery簡化Ajax開發——Ajax開發入門[2][完]

來源:互聯網
上載者:User

4. 讓你的html動起來

你可以使用jQuery做一些基本的動畫和效果。 動畫效果的核心就是函數animate(), 它可以隨時改變指定的css樣式. 舉例來說, 你可以改變高度, 寬度, 透明度或者位置. 你還可以指定動畫的速度, 改變速度的時候你可以使用毫秒(milliseconds),或者你也可以使用預定的速度值: 慢速, 正常或者快速(slow, normal, or fast).

下面是個同時改變元素寬和高的動畫樣本. 注意, 沒有初始值,只有最終的值. 初始值可以直接從現有元素取到. 同時, 我還添加了一個回呼函數:

$('#grow').animate({ height: 500, width: 500 }, "slow", function(){
  alert('The element is done growing!');
});

使用jQuery 的這些內建函數, 使動畫效果做起來也相當容易了. 你可以使用show() 函數以及hide() 函數來顯示和隱藏元素, 可以設定立即執行或者指定速度. 你還可以使用fadeIn()函數和fadeOut()函數或者slideDown()和slideUp()函數來顯示或者隱藏一個元素, 這要看你想要哪種效果了. 下面是個簡單的例子, 展示導航條的投影片效果(slide down):

$('#nav').slideDown('slow');

5. DOM指令碼以及事件處理

jQuery最擅長的可能就是操作DOM以及進行事件處理了. 遍曆以及操作DOM其實很容易, 綁定移除以及呼叫事件用起來也很自然順手,

並且和手動寫這些代碼相比,可以大大的減少錯誤.

事實上, jQuery簡化了DOM的各種操作. 你可以建立一個元素並且使用append()函數把它連結到其他元素上, 可以使用clone()

複製元素, 可以使用html()設定內容,可以使用empty()函數刪除內容,使用remove()函數刪除元素以及內容, 甚至,可以使用wrap()

函數來使用另一個元素封裝此元素.

有一些函數,可以靠遍曆DOM來改變jQuery對象本身的內容. 又可以得到一個元素的siblings(),parents(), 或者children().你還

可以使用next()和prev()來尋找兄弟元素. find()也許是這些函數中最強大的一個了. 它允許你使用一個jQuery選擇符來在你的jQuery

對象以及其子孫節點中進行搜尋.

如果配合end()函數,這些函數將變得更加強大. end()函數就像執行撤銷一樣, 會讓你的jQuery對象回退到你調用find()或者parents()

或者其他任一個遍曆函數之前的狀態.

如果使用上面我們講到的方法連結,那就可以讓很複雜的功能以簡介的代碼來實現. Listing7展示了一個例子,你將找到一個登入表單,

並對其上的元素進行 一些操作.

Listing 7. Traversing and manipulating the DOM with ease

$('form#login')
  // hide all the labels inside the form with the 'optional' class
  .find('label.optional').hide().end()
  // add a red border to any password fields in the form
  .find('input:password').css('border', '1px solid red').end()
  // add a submit handler to the form
  .submit(function(){
    return confirm('Are you sure you want to submit?');
  });

信不信由你,這個例子其實只有單一個連結起來的一行代碼,中間加了一些空格而已. 首先,我選中了登入表單. 然後,我找到裡邊可選的label,

隱藏他們,然後調用end()回到表單. 我找到密碼輸入框, 把邊框變成紅色,然後再次調用end()返回到表單. 最後,我給這個表單增加了一個

提交時間處理函數. 特別有趣的是,除了代碼格外簡潔以外, jQuery還自己最佳化了所有的操作,以保證當一切都很好的連結起來的時候,你不需

要兩次尋找一個元素.

處理一般的事件也很簡單,就像調用函數click(),submit(),或者 mouseover(),然後傳給一個事件監聽函數一樣. 另外,你還可以使用

bind('eventname', function(){})來指定事件處理函數, 你可以使用unbind('eventname') 解除綁定某事件,或者使用unbind()解除

所有事件. 更多關於這一系列函數的資訊以及使用方法,請查閱jQuery的應用程式介面文檔(API).

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.