jquery教程之分享jquery常用技巧

jquery是輕量級的js庫(壓縮後有70多k)它相容css3，還相容各種瀏覽器。由於jquery物件本身是乙個集合。所以如果jquery物件要轉換為dom物件則必須取出其中的某一項，一般可通過索引取出。

1、關於頁面元素的引用

通過jquery的$()引用元素包括通過id、class、元素名以及元素的層級關係及dom或者xpath條件等方法，且返回的物件為jquery物件（集合物件），不能直接呼叫dom定義的方法。

2、jquery物件與dom物件的轉換

只有jquery物件才能使用jquery定義的方法。注意dom物件和jquery物件是有區別的，呼叫方法時要注意操作的是dom物件還是jquery物件。普通的dom物件一般可以通過$()轉換成jquery物件。

如：$(document.getelementbyid(」msg」))則為jquery物件，可以使用jquery的方法。

由於jquery物件本身是乙個集合。所以如果jquery物件要轉換為dom物件則必須取出其中的某一項，一般可通過索引取出。

如：$(」#msg」)[0]，$(」div」).eq(1)[0]，$(」div」).get()[1]，$(」td」)[5]這些都是dom物件，可以使用dom中的方法，但不能再使用jquery的方法。

以下幾種寫法都是正確的：

$("#msg」).html();

$("#msg」)[0].innerhtml;

$("#msg」).eq(0)[0].innerhtml;

$("#msg」).get(0).innerhtml;

3、如何獲取jquery集合的某一項

對於獲取的元素集合，獲取其中的某一項（通過索引指定）可以使用eq或get(n)方法或者索引號獲取，要注意，eq返回的是jquery物件，而get(n)和索引返回的是dom元素物件。對於jquery物件只能使用jquery的方法，而dom物件只能使用dom的方法，如要獲取第三個元素的內容。有如下兩種方法：

$("div」).eq(2).html(); //呼叫jquery物件的方法

$("div」).get(2).innerhtml; //呼叫dom的方法屬性

4、同一函式實現set和get

jquery中的很多方法都是如此，主要包括如下幾個：

$("#msg").html();//返回id為msg的元素節點的html內容。

$("#msg").html("new content"); //將「new content" 作為html串寫入id為msg的元素節點內容中,頁面顯示粗體的new content

$("#msg").text(); //返回id為msg的元素節點的文字內容。

$("#msg").text("new content"); //將「new content" 作為普通文字串寫入id為msg的元素節點內容中,頁面顯示new content

$("#msg").height(); //返回id為msg的元素的高度

$("#msg").height("300″); //將id為msg的元素的高度設為300

$("#msg").width();//返回id為msg的元素的寬度

$("#msg").width("300″); //將id為msg的元素的寬度設為300

$("input").val(); //返回表單輸入框的value值

$("input").val("test"); //將表單輸入框的value值設為test

$("#msg").click(); //觸發id為msg的元素的單擊事件

$("#msg").click(fn); //為id為msg的元素單擊事件新增函式

同樣blur,focus,select,submit事件都可以有著兩種呼叫方法

5、集合處理功能

對於jquery返回的集合內容無需我們自己迴圈遍歷並對每個物件分別做處理，jquery已經為我們提供的很方便的方法進行集合的處理。包括兩種形式：

$("p」).each(function(i))

//為索引分別為0，1，2的p元素分別設定不同的字型顏色。

$("tr」).each(function(i))

//實現**的隔行換色效果

$("p」).click(function())

//為每個p元素增加了click事件，單擊某個p元素則彈出其內容

6、擴充套件我們需要的功能

$.extend(,

max: function(a, b)

});//為jquery擴充套件了min,max兩個方法

使用擴充套件的方法（通過「$.方法名」呼叫）：

alert(」a=10,b=20,max=」+$.max(10,20)+」,min=」+$.min(10,20));

7、支援方法的連寫

所謂連寫，即可以對乙個jquery物件連續呼叫各種不同的方法。例如：

$("p").click(function())

.mouseover(function())

.each(function(i));

以上是7種jquery常見常用技巧，下面會有jquery常用技巧12招（二）繼續分享給大家。

歡迎分享，但請註明出處

jquery教程之分享jquery常用技巧

Jquery基礎教程之神奇的

Jquery基礎教程之神奇的

python基礎教程之分支迴圈簡單用法

jquery教程之分享jquery常用技巧

Jquery基礎教程之神奇的

Jquery基礎教程之神奇的

python基礎教程之分支 迴圈簡單用法

相關推薦

python基礎教程之分支迴圈簡單用法