使用jQuery的方式來操作DOM更加的簡潔、方便，統一的調用方式方便學習並且可降低學習成本。
// 第一個參數表示：樣式屬性名稱 // 第二個參數表示：樣式屬性值 $(selector).css(“color”, “red”);
②設置多個樣式（也可以設置單個）
// 參數為 {}（對象）
$(selector).css({“color”: “red”, “font-size”: “30px”});
2）獲取樣式屬性操作
// 參數表示要獲取的 樣式屬性名稱 $(selector).css(“font-size”);
$(selector).addClass(“liItem”); //此處類型不帶點，所有類操作的方法類名都不帶點2）移除類 ——removeClass(className)為指定元素移除類className
$(selector).removeClass(“liItem”); $(selector).removeClass(); //不指定參數，表示移除被選中元素的所有類3）判斷有沒有類樣式 ——hasClass(className)判斷指定元素是否包含類className
$(selector).hasClass(“liItem”); //返回值為true或false4）切換類樣式 ——toggleClass(className)為指定元素切換類className，該元素有類則移除，沒有指定類則添加
$(selector).hasClass(“liItem”);【注意】 1、操作類樣式的時候，所有的類名都不帶點（.） 2、操作的樣式非常少，那麼可以通過.css()這個方法來操作 3、操作的樣式很多，那麼要通過使用類的方式來操作 4、如果考慮以後維護方便（把CSS從js中分離出來）的話，推薦使用類的方式來操作。類比CSS書寫位置（把CSS從html中分離出來） 關鍵字：簡約、粗暴、干淨利落、直截了當
// 用法一：
// 參數為數值類型，表示：執行動畫時長
/* 單位為：毫秒（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);
6.1 作用：停止當前正在執行的動畫
6.2 為什麼要停止動畫？
如果一個以上的動畫方法在同一個元素上調用，那麼對這個元素來說，後面的動畫將被放到效果隊列中。這樣就形成了動畫隊列。（聯想：排隊進站）
動畫隊列裡面的動畫不會執行，直到第一個動畫執行完成。
// 第一個參數表示是否清空所有的後續動畫 // 第二個參數表示是否立即執行完當前正在執行的動畫 $(selector).stop(clearQueue,jumpToEnd); // 常用方式 $(selector).stop();
解釋：
當調用stop()方法後，隊列裡面的下一個動畫將會立即開始。但是，如果參數clearQueue被設置為true，那麼隊列面剩余的動畫就被刪除了，並且永遠也不會執行。
如果參數jumpToEnd被設置為true，那麼當前動畫會停止，但是參與動畫的每一個CSS屬性將被立即設置為它們的目標值。比如：slideUp()方法，那麼元素會立即隱藏掉。如果存在回調函數，那麼回調函數也會立即執行。
注意：如果元素動畫還沒有執行完，此時調用sotp()方法，那麼動畫將會停止。並且動畫沒有執行完成，那麼回調函數也不會被執行。
// $()函數的另外一個作用：動態創建元素 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(“”)清空元素
①設置屬性：
// 第一個參數表示：要設置的屬性名稱 // 第二個參數表示：改屬性名稱對應的值 $(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(“我是內容”);
①高度操作height() ：
// 作用：設置或獲取匹配元素的高度值 //帶參數表示設置高度 $(selector).height(200); //不帶參數獲取高度 $(selector).height();
②寬度操作width() ：
// 作用：設置或獲取匹配元素的寬度值 //帶參數表示設置寬度 //不帶參數獲取寬度 $(selector).width(200);
css()獲取高度和height獲取高度的區別？
A：方式一，返回值number類型，例如：309.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