jquery 基本操做

在項目開發中遇到用j Query  總結以下

jQuery 有什麼好處呢?

我想好處有如下幾點:

1. 簡化了html對象的操做, 起碼寫的字少了, 並且原來須要本身寫循環作的, 如今一句話就搞定

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

全部的 jQuery 選擇器返回值都是 jQuery 對象, 而不是html元素. 因此一些普通的用法, 好比InnerHTML都是無效的.

 

1. 選取元素

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

 

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

 

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

 

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

), 那麼這麼寫: $(」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=」>asdasd a>」)

$(」#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(」 ’asd’  」)

該語句會把這段html插入到body結束 標籤 以前, 結果是’asd’

$(」body」).prepend(」 ’asd’  」)

該語句會把這段html插入到body開始 標籤 以後, 結果是’asd’

 

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方法

 

7.其餘方法

$.trim(str) 將str先後空格去掉

$.browser 返回當前用戶瀏覽器的類型

$.browser.version返回當前瀏覽器的版本

 

8. 插件

jQuery 支持插件, http:// jquery .com/plugins/ 上面有不少現成的插件, 也能夠本身寫

本身寫插件,