jQuery基礎知識點（DOM操做）

　　使用jQuery的方式來操做DOM更加的簡潔、方便，統一的調用方式方便學習而且可下降學習成本。

一、樣式屬性操做

     1）設置樣式屬性操做

        ①設置單個樣式：

// 第一個參數表示：樣式屬性名稱
// 第二個參數表示：樣式屬性值
$(selector).css(「color」, 「red」);

       ②設置多個樣式（也能夠設置單個）

// 參數爲 {}（對象）
$(selector).css({「color」: 「red」, 「font-size」: 「30px」});

   2）獲取樣式屬性操做

// 參數表示要獲取的 樣式屬性名稱
$(selector).css(「font-size」);

二、類操做

      1）添加類樣式

        ——addClass(className)爲指定元素添加類className

$(selector).addClass(「liItem」); //此處類型不帶點，全部類操做的方法類名都不帶點

2）移除類

        ——removeClass(className)爲指定元素移除類className

$(selector).removeClass(「liItem」);
$(selector).removeClass(); //不指定參數，表示移除被選中元素的全部類

   3）判斷有沒有類樣式

        ——hasClass(className)判斷指定元素是否包含類className

$(selector).hasClass(「liItem」);  //返回值爲true或false

  4）切換類樣式

        ——toggleClass(className)爲指定元素切換類className，該元素有類則移除，沒有指定類則添加

$(selector).hasClass(「liItem」);

【注意】

      一、操做類樣式的時候，全部的類名都不帶點（.）

    二、操做的樣式很是少，那麼能夠經過.css()這個方法來操做

    三、操做的樣式不少，那麼要經過使用類的方式來操做

    四、若是考慮之後維護方便（把CSS從js中分離出來）的話，推薦使用類的方式來操做。類比CSS書寫位置（把CSS從html中分離出來）

關鍵字 ：簡約、粗暴、乾淨利落、直截了當

三、jQuery動畫

      3.1隱藏顯示動畫

        ①show方法

// 用法一：
// 參數爲數值類型，表示：執行動畫時長
/* 單位爲：毫秒（ms），參數2000表示動畫執行時長爲2000毫秒，即2秒鐘 */
$(selector).show(2000);
 
// 用法二：
// 參數爲字符串類型，是jQuery預設的值，共有三個，分別是：slow、normal、fast
/* 跟用法一的對應關係爲： */
/* slow：600ms、normal：400ms、fast：200ms */
$(selector).show(「slow」);
 
// 用法三：
// 參數一能夠是數值類型或者字符串類型
// 參數二表示：動畫執行完後當即執行的回調函數
$(selector).show(2000, function() {});
 
// 用法四：
// 不帶參數，做用等同於 css(「display」, 」block」)
/* 注意：此時沒有動畫效果 */
$(selector).show();

【注意】：jQuery預設的三組動畫效果的語法幾乎一致：參數能夠有兩個，第一個是動畫的執行時長，第二個是動畫執行完成後的回調函數。

　　　　第一個參數能夠是：指定字符或者毫秒數

        ②hide方法

$(selector).hide(1000); 
$(selector).hide(「slow」);
$(selector).hide(1000, function(){});
$(selector).hide();

     3.2 滑入滑出動畫

        ①滑入動畫效果

$(selector).slideDown(speed,callback); 
// 注意：省略參數或者傳入不合法的字符串，那麼則使用默認值：400毫秒（一樣適用於fadeIn/slideDown/slideUp）
$(selector).slideDown();

 ②滑出

// 做用：讓元素以上拉動畫效果隱藏起來
$(selector).slideUp(speed,callback);

 ③滑入滑出切換動畫效果

$(selector).slideToggle(speed,callback);
// 參數等同與"隱藏和顯示"

四、淡入淡出動畫

       ①淡入動畫效果

// 做用：讓元素以淡淡的進入視線的方式展現出來
$(selector).fadeIn(speed, callback);

   ②淡出

// 做用：讓元素以漸漸消失的方式隱藏起來
$(selector).fadeOut(1000);

    ③淡入淡出切換動畫效果

// 做用：經過改變不透明度，切換匹配元素的顯示或隱藏狀態
$(selector).fadeToggle('fast',function(){});
// 參數等同與"隱藏和顯示"

   ④改變不透明度到某個值

——與淡入淡出的區別：淡入淡出只能控制元素的不透明度從 徹底不透明 到徹底透明；而fadeTo能夠指定元素不透明度的具體值；而且時間參數是必需的！

//  做用：調節匹配元素的不透明度
// 用法有別於其餘動畫效果
// 第一個參數表示：時長
// 第二個參數表示：不透明度值，取值範圍：0-1
$(selector).fadeTo(1000, .5); //  0全透，1全不透
 
// 第一個參數爲0，此時做用至關於：.css(「opacity」, .5);
$(selector).fadeTo(0, .5);

jQuery提供的這幾個動畫效果控制的CSS屬性包括：高度、寬度、不透明度。{height:400px; width:300px; opacity:.4;}

這三個CSS屬性的共性是：屬性值只有一個，而且這個值是數值（去掉單位後）。

五、自定義動畫

注意：全部可以執行動畫的屬性必須只有一個數字類型的值。

好比：要改變字體大小，要使用：fontSize（font-size），不要使用：font 

動畫支持的屬性：http://www.w3school.com.cn/jquery/effect_animate.asp

//  做用：執行一組CSS屬性的自定義動畫
// 第一個參數表示：要執行動畫的CSS屬性（必選）
// 第二個參數表示：執行動畫時長（可選）
// 第三個參數表示：動畫執行完後當即執行的回調函數（可選）
$(selector).animate({params},speed,callback);

六、中止動畫 stop()

6.1 做用：中止當前正在執行的動畫

6.2 爲何要中止動畫？

若是一個以上的動畫方法在同一個元素上調用，那麼對這個元素來講，後面的動畫將被放到效果隊列中。這樣就造成了動畫隊列。（聯想：排隊進站）

動畫隊列裏面的動畫不會執行，直到第一個動畫執行完成。

// 第一個參數表示是否清空全部的後續動畫
// 第二個參數表示是否當即執行完當前正在執行的動畫
$(selector).stop(clearQueue,jumpToEnd);
// 經常使用方式
$(selector).stop();

解釋：

當調用stop()方法後，隊列裏面的下一個動畫將會當即開始。可是，若是參數clearQueue被設置爲true，那麼隊列面剩餘的動畫就被刪除了，而且永遠也不會執行。

若是參數jumpToEnd被設置爲true，那麼當前動畫會中止，可是參與動畫的每個CSS屬性將被當即設置爲它們的目標值。好比：slideUp()方法，那麼元素會當即隱藏掉。若是存在回調函數，那麼回調函數也會當即執行。

 注意：若是元素動畫尚未執行完，此時調用sotp()方法，那麼動畫將會中止。而且動畫沒有執行完成，那麼回調函數也不會被執行。

七、jQuery節點操做

      7.1 動態建立元素

// $()函數的另一個做用：動態建立元素
var $spanNode = $(「<span>我是一個span元素</span>」);

  7.2 添加元素（重點）

①在元素的最後一個子元素後面追加元素：append()（重點）

②做用：在被選元素內部的最後一個子元素（或內容）後面插入內容（頁面中存在或者建立出來的元素均可以）

若是是頁面中存在的元素，那麼調用append()後，會把這個元素從原先的位置移除，而後再插入到新的位置。

 若是是給多個目標追加一個元素，那麼append()方法的內部會複製多份這個元素，而後追加到多個目標裏面去。（最好不要這麼作）

③經常使用參數：htmlString 或者 jQuery對象

// 在$(selector)中追加$node
$(selector).append($node);
// 在$(selector)中追加div元素，參數爲htmlString
$(selector).append('<div></div>');

（瞭解）不經常使用操做：（用法跟append()方法基本一致）

// appendTo()
//做用：同append()，區別是：把$(selector)追加到node中去
$(selector).appendTo(node);
 
// prepend()
//做用：在元素的第一個子元素前面追加內容或節點
$(selector).prepend(node);
 
// after()
//做用：在被選元素以後，做爲兄弟元素插入內容或節點
$(selector).after(node);
 
// before()
//做用：在被選元素以前，做爲兄弟元素插入內容或節點
$(selector).before(node);

7.3 html建立元素（推薦，重點）

①做用：設置或返回所選元素的html內容（包括 HTML 標記）

②設置內容的時候，若是是html標記，會動態建立元素，此時做用跟js裏面的 innerHTML屬性相同

// 動態建立元素
$(selector).html(‘<span>大方啊</span>’);
// 獲取html內容
$(selector).html();

   7.4 清空元素

// 清空指定元素的全部子元素（光桿司令）
// 沒有參數
$(selector).empty();
$(selector).html(「」);
// 「自殺」 把本身（包括全部內部元素）從文檔中刪除掉
$(selector).remove();

   7.5 複製元素

//做用：複製匹配的元素
// 複製$(selector)所匹配到的元素
// 返回值爲複製的新元素
$(selector).clone(); 

【總結】：推薦使用html(「<span></span>」)方法來建立元素或者html(「」)清空元素

八、操做form表單（重點）

    8.1屬性操做

①設置屬性：

// 第一個參數表示：要設置的屬性名稱
// 第二個參數表示：改屬性名稱對應的值
$(selector).attr(「title」, 「小花啊」); 

②獲取屬性：

// 參數爲：要獲取的屬性的名稱，改操做會返回指定屬性對應的值
$(selector).attr(「title」);  // 此時，返回指定屬性的值 

③移除屬性：

// 參數爲：要移除的屬性的名稱
$(selector).removeAttr(「title」); 

【注意】：checked、selected、disabled要使用.prop()方法。

prop方法一般用來影響DOM元素的動態狀態，而不是改變的HTML屬性。例如：input和button的disabled特性，以及checkbox的checked特性。

細節參考：http://api.jquery.com/prop/

      8.2 值和內容

①val()方法：

// 做用：設置或返回表單元素的值，例如：input,select,textarea的值
// 獲取匹配元素的值，只匹配第一個元素
$(selector).val();
// 設置全部匹配到的元素的值
$(selector).val(「具體值」);

②text() 方法

 

// 做用：設置或獲取匹配元素的文本內容
//獲取操做不帶參數（注意：這時候會把全部匹配到的元素內容拼接爲一個字符串，不一樣於其餘獲取操做！）
$(selector).text();
//設置操做帶參數，參數表示要設置的文本內容
$(selector).text(「我是內容」);

 

九、尺寸位置操做

    9.1 高度和寬度操做

①高度操做height() ：

// 做用：設置或獲取匹配元素的高度值
//帶參數表示設置高度
$(selector).height(200);
//不帶參數獲取高度
$(selector).height();

②寬度操做width() ：

// 做用：設置或獲取匹配元素的寬度值
//帶參數表示設置寬度
//不帶參數獲取寬度
$(selector).width(200);

css()獲取高度和height獲取高度的區別？

A：方式一，返回值number類型，例如：30
　　方式二，返回值string類型，例如：「30px」

　　區別：方式一經常使用在參與數學計算的狀況。

 

    9.2 座標值操做

①offset()

//  做用：獲取或設置元素相對於文檔左上角的位置
// 無參數表示獲取，返回值爲：{left:num, top:num}，值是相對於document的位置
$(selector).offset();
// 有參數表示設置，參數推薦使用數值類型
$(selector).offset({left:100, top: 150});

注意點：設置offset後，若是元素沒有定位(默認值：static)，則被修改成relative

②scrollTop()

、、做用：獲取或者設置元素垂直方向滾動的位置
// 無參數表示獲取偏移
$(selector).scrollTop();
 
// 有參數表示設置偏移，參數爲數值類型
$(selector).scrollTop(100); 

③scrollLeft()

// 做用：獲取或者設置元素水平方向滾動的位置
$(selector).scrollLeft(100);

對scrollTop的理解：

垂直滾動條位置 是可滾動區域 在 可視區域上方的 被隱藏區域的高度。

若是滾動條在最上方沒有滾動 或者 當前元素沒有出現滾動條，那麼這個距離爲0