天天看點

鋒利的jQuery--jQuery與DOM對象的互相轉換,DOM的三種操作(讀書筆記一)

1.jquery對象就是通過jquery包裝dom對象後産生的對象。

2.jquery對象和dom對象的互相轉換。

良好的書寫風格:

var $input=$("input")

jquery擷取的對象在變量前面加上$。

<1>jquery對象轉成dom對象,兩種方法:[index]和get(index)

a:var $cr=$("#cr")    //jquery對象

    var cr=$cr[0]    //dom對象

b:var $cr=$("#cr")    //jquery對象

    var cr=$cr.get(0);    //dom對象

<2>dom對象轉成jquery對象

var cr=document.getelementbyid("cr");    //dom對象

var $cr=$(cr);

3.解決與其他庫的沖突

jquery.noconflict()。

jquery用$作為自身的快捷方式。

4.使用jquery的優點

<1>簡潔的寫法

<2>支援cc1到ccs3

<3>完善的處理機制

鋒利的jQuery--jQuery與DOM對象的互相轉換,DOM的三種操作(讀書筆記一)

運作上面的代碼浏覽器就會報錯!

但是如果這麼寫的話:

$('#tt').css("color","red");

浏覽器不會因為沒有這個元素而報錯!

5.jquery選擇器

jquery選擇器是jquery的重中之重!

jquery過濾選擇器與css中的僞類選擇器相似。

<1>偶數與奇數選擇器

偶數:$("tr:even")

奇數:$("tr:odd")

<2>css3 僞類選擇器奇偶數

鋒利的jQuery--jQuery與DOM對象的互相轉換,DOM的三種操作(讀書筆記一)
鋒利的jQuery--jQuery與DOM對象的互相轉換,DOM的三種操作(讀書筆記一)

<2>表單類型選擇器

<3>轉義選擇器防止出錯

鋒利的jQuery--jQuery與DOM對象的互相轉換,DOM的三種操作(讀書筆記一)
鋒利的jQuery--jQuery與DOM對象的互相轉換,DOM的三種操作(讀書筆記一)

6.dom操作分類(1:dom core 2.html-dom 3.css-dom)

1.dom core

dom core并不專屬于javascript,任何一種支援dom的程式設計語言都可以使用它。它的用途并不僅限于處理網頁。也可以用來處理任何一種使用标記語言編寫出來的文檔,例如:xml。

2.html_dom

在使用javascript和dom為html檔案編寫腳本時,有許多專屬于html——dom的屬性。

html_dom提供了一些更加簡明的記号來描述各種html元素的屬性。

如:

隻能用于web

3.css_dom

css_dom是針對css的操作。主要是擷取和設定style對象的各種屬性。

通過改變style對象的各種屬性。改變不同效果。

element.style.color=“red”;

7.周遊節點

1.children()

2.next()

3.prev()

4.siblings()

5.closest()

8.jquey的css

<1>可以使用opacity設定透明度,jquery已經處理好了相容性問題。

$("p").css("opacity","0.5");

<2>$("p").height(100)    //100預設機關是px,如果要用别的機關,必須要用字元串

<3>offset()方法

<4>position()

<5>scrolltop()和scrollleft()

<6>pagex與pagey,擷取滑鼠在頁面上的位置

 轉載:http://www.cnblogs.com/zqzjs/p/4918841.html

繼續閱讀