jQuery 基本操做篇

時間 2019-11-19

標籤 jquery 基本欄目 JQuery 简体版

原文原文鏈接

jQuery基本操做篇

2008年02月20日星期三 14:42

jQuery是一個輕量級的javascript類庫, 只有14k(未壓縮的版本有77k)javascript

jQuery有什麼好處呢?php

我想好處有如下幾點:
1. 簡化了html對象的操做, 起碼寫的字少了, 並且原來須要本身寫循環作的, 如今一句話就搞定css

2. 提升了代碼的瀏覽器兼容性. 如今的4種主流瀏覽器之間的js腳本或多或少都會存在兼容性問題, 用jQuery, 會讓你不用關心兼容性.
好比Ajax請求, ie和firefox的對象徹底不同
還有box模型的問題, 好比一個div外面加了一個邊框, 而後爲這個div設定一個寬度, ie和firefox對這個div的實際寬度理解的就不同. ie會認爲div的實際寬度是div的寬度+邊框寬度, 而firefox認爲div的實際寬度就是你設定的寬度, 不過div的有效寬度就是div的寬度-邊框寬度了, 這個問題會影響一個元素的實際位置. 因此必定要用jquery的offset方法來取元素的位置, 用width來取寬度html

全部的jQuery選擇器返回值都是jQuery對象, 而不是html元素. 因此一些普通的用法, 好比InnerHTML都是無效的.
更多更詳細的參考請訪問http://docs.jquery.com/Main_Pagejava

別人寫的基礎教程 http://bbs.jquery.org.cn/frame.....ghlight%3Djquery

1. 選取元素

$(」#myid」)效果等於document.getElementById(」myid」), 可是寫的字符要少好多啊.瀏覽器

若是須要將jQuery對象轉換成html元素, 則只須要取其第0個元素便可. 例如$(」#myid」)返回的是jQuery對象, 而$(」#myid」)[0]返回的就是html元素app

若是選擇全部的img元素, 那麼這麼寫: $(」img」)post

若是選擇帶有class=」TextBox」的div元素(this

), 那麼這麼寫: $(」div.TextBox」)

選擇帶有myattr屬性的元素$(」div[myattr]」)
選擇帶有myattr屬性, 而且屬性值等於myclass的元素$(」div[myattr=’myclass’]」)
屬性不等於[myattr!=’myclass’]
屬性以my開頭[myattr^=’my’]
屬性以class結尾[myattr$=’class’]
屬性包含cla這三個字符[myattr*=’cla’]

若是一個選擇會返回多個元素, 而且但願每返回一個元素, 就把某些屬性應用到該元素上, 能夠這麼寫
$(」div」).each(function()
{
$(this).css(」background-color」, 「#F00″);
alert($(this).html());
$(this).width(」200px」);
});

2.事件

給頁面加onload事件處理方法
$(function()
{
alert(」頁面結構加載完畢, 可是可能某些圖片還沒有加載(通常狀況下, 此事件就夠用了)」);
});

能夠給頁面綁定多個onload事件處理方法
$(function()
{
alert(」我首先被執行」);
});

$(function()
{
alert(」我第二被執行」);
});

綁定特殊事件
$(」#myid」).keydown(function()
{
alert(」觸發了keydown事件」);
});

除了這些經常使用的, 不經常使用的事件須要經過bind方法綁定

3. 元素屬性/方法

獲得一個元素的高度, $(」#myid」).height()
獲得一個元素的位置, $(」#myid」).offset() 返回的是一個offset對象, 若是取元素位置的top, 則$(」#myid」).offset().top,?取left則$(」#myid」).offset().left
獲得一個元素的innerHTML, $(」#myid」).html()
獲得一個元素的innerText, $(」#myid」).text()
獲得一個文本框的值, $(」#myid」).val()
獲得一個元素的屬性, $(」#myid」).attr(」myattribute」)

以上這些方法有個基本特徵, 就是不帶參數表示取值, 帶有參數表示設定值(除了offset), 例如
$(」#myid」).height(」20″);
$(」#myid」).html(」<a href=」>asdasda>」)
$(」#myid」).val(」asdasd」)

須要注意, offset是隻讀的.

給一個元素設置屬性 $(」#myid」).attr(」width」, 「20%」)
讀取一個屬性 $(」#myid」).attr(」width」)
一次指定多個屬性 $(」#myid」).attr({disabled: 「disabled」, width:」20%」, height: 「30″})
刪除屬性$(」#myid」).removeAttr(」disabled」)

應用樣式$(」#myid」).addClass(」myclass」)
刪除樣式$(」#myid」).removeClass(」myclass」)

加一個樣式$(」#myid」).css(」height」, 「20px」)
加一組樣式$(」#myid」).css({height:」20px」, width:」100px」})
須要注意的是: 若是是加一個樣式, 這個樣式的名字是css中的名字, 好比說style=」background-color:#FF0000″, 對應的jQuery寫法是$(」#myid」).css(」background-color」, 「#FF0000″)
可是加一組樣式的時候, 樣式的名字就是javascript中的css名字了, 好比: myid.style.backgroundColor = 「#FF0000″, 對應的jQuery寫法是$(」#myid」).css({backgroundColor:」#FF0000″})

4. 根據關係查找元素

找和本身同級的下一個元素$(」#myid」).next()
找和本身同級的全部位於本身之下的元素$(」#myid」).nextAll()
找和本身同級的上一個元素$(」#myid」).prev()
找和本身同級的全部位於本身之上的全部元素$(」#myid」).prl()
找本身的第一代子元素$(」#myid」).children()
找本身的第一個父元素$(」#myid」).parent()
找本身的全部父元素$(」#myid」).parents()
例子:
$(」div.l4″).parents().each(
function() {
alert($(this).html());
});

會把class=l4的div的全部父元素都獲得, 而且alert出他們的html

例子:
$(」div.l4″).parents(」div.l2″).each(function() { alert($(this).html()); });
會獲得class=l4的父元素, 該父元素必須是div, 並且其class=l2

這裏說的全部方法, 均可以帶表達式, 表達式的寫法參考第一部分

5. 維護元素

在body中增長一個元素
$(」body」).append(」」)
該語句會把這段html插入到body結束標籤以前, 結果是

$(」body」).prepend(」」)
該語句會把這段html插入到body開始標籤以後, 結果是

6.AJAX

用get方法請求一個頁面
$.get(」http://www.google.com」, 「q=jquery」, function(data, status){alert(data)})
表示請求http://www.google.com, 參數是q, 參數的值是jquery, 請求結束後(無論成功仍是失敗)執行後面的function, 該function有兩個固定參數, data和status, data是返回的數據, status是本次請求的狀態

用post方法請求一個頁面
$.post(……..) 參數同get方法