1.對於文檔的操作

1>創建一個元素：

導入jquery後，創建元素的方式變得更加簡單瞭。
語法：

$(“直接寫入元素表達式”);

示例：

 var op = $("

this is p

"); var op1 = $("

this is p2

");

2>將創建的元素加入到已有元素

加入的時候，默認放在內容最後。
示例：

 $("#p1").append(op);
 $("#p1").append(op1);

註意：
創建的op隻有一個，如果在後面代碼中加入多次，但是隻會生效一次。不會產生copy行為。

3>將元素追加到內容的前面

采用：prepend（）方法。
示例：

 $("#p1").prepend(op);
 /*將op元素加入到p1中，並放在p中的最前面*/

4>將元素追加到內容裡面

與上面相類似又有不同。
采用的是prependTo()；方法。
這裡方法區別是：選中某個元素，把這個元素追加到xxx裡面
示例：

$("#p2").prependTo("#p2");
/*將id為p2的元素加入到id是p2中的元素中*/

5>在指定元素的前後加入

很簡單的兩個單詞。
前：before（）
後：after（）
示例：

 $("#p2").before($("this is b"));
  /*在id為p2的元素前面加上b元素*/
 $("#p2").after($("this is b2"));

6>替換元素

采用：replaceAll（）方法

示例：

$("em").replaceAll("b");
 /*用em元素來替換所有的b元素*/

還有replaceWith（）：用後面的元素 替換前面的元素

7>刪除元素（節點）

1：empty（）； 將選中的元素內容清空。
2：remove( ) ； 刪除自己節點，不傳入參數，傳入參數就傳入過濾條件

eg：

   $("#p1").empty();
   $("#p1").remove();

8>克隆

采用的是clone() ；方法。
克隆也有參數，如果true 克隆當前的元素，將事件也一起克隆瞭。false隻克隆元素。
示例：

var num = 1;
$("#btn1").click(function(){
    num++;     $(this).clone(true).val("btn"+num).insertBefore($(this));
});
/*將id是btn1的元素加入點擊事件，當點擊的時候，就將自己進行克隆，並克隆此點擊觸發的內容。內容就是value是 btn + 這個num 而這個num每次點擊就加1 ，並且每次克隆的元素放在自己的前面。*/

2.CSS操作

1>獲取css樣式

直接采用css（“樣式屬性名稱”）
示例：

  var cs = $("#p1").css("color");
  var cs1 = $("#p1").css("font-size");

2>設置樣式

同樣采用css（）方法，傳入兩個參數就可以瞭。
第一個參數是樣式屬性名稱，第二個是屬性值
示例：

 $("#p1").css("color","blue"); 

對於設置樣式，如果要設置多個的話，怎麼辦呢？
這個時候就用到json對象。
傳入一個json對象即可。
例如：

$("#span1").css({"color":"red", "font-size":"30px"});

3>一些特殊的用法：

代碼：

$("#p1").click(function(){
    $(this).css({"width":function(n,value){
        /*默認傳2個參數，第一個是當前元素的下標，第二個是當前對象的值，返回的是xxpx px可以加可以不用加*/
        return parseInt(value)*2;
    },"height":function(n,value){
        return parseInt(value)*2;
    }});
});

此代碼的含義：
找到id是p1的元素，加入點擊事件。
事件內容是：被點擊的對象的樣式屬性為寬度發生改變，改變的值是現在寬度的2倍。高度是現在的兩倍。在這段代碼裡面，代碼本身會傳入兩個參數，如上所說。此參數和event十分類似。也是隨事件直接傳入。

3.事件

1>直接通過事件名稱綁定

 $("#p1").click(function(){

});

$("#sel1").change(function(){

});

2>通過on方法綁定

 $("#p2").on("click",function(){
    /*感覺就是相當於addEventListener*/
});

當需要多個事件同時觸發這個行為時：
$("#p3").on("click,mouseover",function(){
    //逗號隔開即可
});

3>當多個事件，多個行為時候。

依舊傳入json對象處理。
代碼：

 $("#p3").on({"click":function(){
    /*點擊觸發的事件內容*/
},"mouseover":function(){
    /*鼠標移進觸發的內容*/
}});

4.動畫效果

1>設置隱藏

采用的是hide（）方法。
設置當前元素在xxx毫秒之類隱藏，參數是毫秒，系統參數3個：”slow”,”“normal”,”fast”

代碼：

 $("#p1").hide(2000);
 /*設置id是p1的元素在2s後隱藏*/

2>設置顯示

采用show（）方法。
效果是：動態改變寬和高，最後顯示全部。
示例：

$("#p2").show(2000,function(){
      alert("ok");
      /*在2s後 id為p2的元素出現（先要設置不顯示），當顯示完全執行彈出框ok，對於動畫的本節內容都可以寫入此方法參數*/
 });

3>流動的方式顯示和隱藏

顯示：.slideDown()
隱藏：.slideUp();
代碼：

$("#p2").slideDown();
$("#p2").slideUp();

4>反向操作元素0.0

如果元素隱藏，就顯示，如果是顯示就隱藏
.slideToggle(2000)；
示例：

 $("#p2").slideToggle(2000);

5>通過改變透明度的方式顯示隱藏

顯示：fadeIn（）
隱藏：fadeOut（）

示例：

 $("#p2").fadeIn(2000);
 $("#p2").fadeOut(2000);

6>設置某個動畫延時

示例來說明：

 $("#p3").fadeOut(2000).delay(1000).fadeIn(2000);
/*id為p3的元素在2s內以透明度漸變的方式隱藏後，1s後，在2s內以透明度漸變的方式顯示出來*/

---

大體這些常用，如需更多，請翻閱API