牛叉的Jquery－Jquery與DOM對象的互相轉換及DOM的三種操作_jquery

只有jQuery物件才能呼叫jQuery類別函式庫的各種函數，同樣有些dom物件的屬性和方法在jQuery上也是無法呼叫的，不過基本上jQuery類別函式庫提供的函數包含了所有的dom運算。這就需要我們知道如何將jQuery物件和DOM的相互轉換的方法。

1.jQuery物件就是透過jQuery包裝DOM物件後產生的物件。

2.jQuery物件與DOM物件的相互轉換。

良好的書寫風格：

複製程式碼 程式碼如下:

var $input=$("input")

jQuery取得的物件在變數前面加上$。

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物件

DOM物件轉成jQuery物件

var cr=document.getElementById("cr");    //DOM物件
var $cr=$(cr);

3.解決與其他函式庫的衝突

jQuery.noConflict()。
jQuery用$作為自身的快捷方式。

4.使用jQuery的優點

簡潔的寫法
支援CC1到CCS3
完善的處理機制

運行上面的程式碼瀏覽器就會報錯！
但如果這麼寫的話：

複製程式碼 程式碼如下:

$('#tt').css("color","re​​d");

瀏覽器不會因為沒有這個元素而報錯！

5.jQuery選擇器

jQuery選擇器是jQuery的重中之重！

jQuery過濾選擇器與CSS中的偽類選擇器相似。

偶數與奇數選擇器

偶數：$("tr:even")
奇數：$("tr:odd")

CSS3 偽類選擇器奇偶數

複製程式碼 程式碼如下:

p:nth-child(odd)
{
background:#ff0000;
}
p:nth-child(even)
{
background:#0000ff;
}

表單類型選擇器

轉義選擇器防止出錯

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元素的屬性。
如：

複製程式碼 程式碼如下:

document.forms
element.src

只能用於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

可以使用opacity設定透明度，jQuery已經處理好了相容性問題。

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

$("p").height(100)    //100預設單位是px,如果要用別的單位，必須要用字串

offset()方法

傳回相對視窗的偏移

複製程式碼 程式碼如下:

var offset=$("p").offset();
var left=offset.left;
var top=offset.top;

position()

複製程式碼 程式碼如下:

//傳回相對最近一個position樣式的偏移。
var position=$("p").position();
var left=position.left;
var top=position.top;

scrollTop()和scrollLeft()

複製程式碼 程式碼如下:

//返回滾動條距離頂端的距離與距離左側的距離。
var $p=$("p");
var top=$p.scrollTop();
var left=$p.scrollLeft();
//同樣可以設定滾動到指定位置：
$("ab").scrollTop(300);

pageX與pageY，取得滑鼠在頁面上的位置

複製程式碼 程式碼如下:

$(document).mousemove(function(e){
  $("span").text("X: " e.pageX ", Y: " e.pageY);
});