jQuery學習小記

今天開始學習jQuery，發現jQuery真的很強大。學習的東西還很多，首先把基礎的東西過了一遍。

1.當DOM裝入就緒可以查詢及操縱時綁定一個要執行的函數。這個方法純粹是對window.load事件註冊時間的代替方法。

    $(document).ready(function(){

           //這裡寫你的代碼

    });

   

    jQuery(function($) {

        //這裡寫你的代碼

    });

       

    $(function(){

        //這裡寫你的代碼

})

 

 

2.擷取對象，對象值，html，text，屬性等

2.1 擷取元素

    //根據給定的ID匹配一個元素。

    $("#id");

   

    //根據給定的元素名匹配所有元素

    //element(String): 一個用於搜尋的元素。指向 DOM 節點的標籤名。

    $(element);$("div");

   

    //根據給定的類匹配元素。

    //class(String):一個用以搜尋的類。一個元素可以有多個類，只要有一個符合就能被匹配到。

    $(class);$(".myClass");

   

    //將每一個選取器匹配到的元素合并後一起返回。

    //你可以指定任意多個選取器，並將匹配到的元素合并到一個結果內。

    //selector1 (Selector) : 一個有效選取器

    //selector2 (Selector) : 另一個有效選取器

    //selectorN (Selector) : (可選) 任意多個有效選取器   

    $("div,span,p.myClass")

 

2.2 元素的html

     //取得第一個匹配元素的html內容。

    //這個函數不能用於XML文檔。

    //但可以用於XHTML文檔。

    $("#id").html();

    //設定每一個匹配元素的html內容。

    //這個函數不能用於XML文檔。

    //但可以用於XHTML文檔。

    $("#id").html(val);

   

2.3 元素的text

    //取得所有匹配元素的內容。

    $("#id").text();

    //設定所有匹配元素的常值內容

    $("#id").text(val);

   

2.4 元素的值

    //擷取第一個匹配元素的當前值

    $("#id").val();   

    //設定每一個匹配元素的值

    //check,select,radio等都能使用為之賦值

    $("#id").val(val);

   

2.5 元素的屬性

    //取得第一個匹配元素的屬性值。

    //通過這個方法可以方便地從第一個匹配元素中擷取一個屬性的值。

    //如果元素沒有相應屬性，則返回 undefined 。

    $("#id").attr("id");

   

    //將一個“名/值”形式的對象設定為所有匹配元素的屬性。

    $("#id").attr({src:"test.jpg", alt:"Test Image"});

   

    //為所有匹配的元素設定一個屬性值。

    //key(String):屬性名稱

    //value(Object):屬性值

    $("#id").attr(key, value);

   

    //為所有匹配的元素設定一個計算的屬性值。

    //不提供值，而是提供一個函數，由這個Function Compute的值作為屬性值。

    //key(String):屬性名稱

    //fu(Function):傳回值的函數 範圍：當前元素，參數;當前元素的索引

    $("#id")(key,fn);

   

    //從匹配的元素中刪除一個屬性

    //name(String):要刪除的屬性名稱

    $("#id").removeAttr(name);

   

    //為匹配的元素添加指定的類名

    //class(String):一個或多個 CSS類名，調用空格分開

    $("#id").addClass(class);

    //為匹配的元素刪除指定的類名

    //class(String):一個或多個 CSS類名，調用空格分開

    $("#id").removeClass(class);

   

    //如果存在（不存在）就刪除（添加）一個類。

    //class(String):一個或多個 CSS類名，調用空格分開

    $("#id").toggleClass(class);