jQuery經常使用方法總結【一】

近幾天上班閒來無事，把jQuery經常使用的方法作了下總結，記個筆記。

用來操做元素的方法

1. val() ：返回的或設置被選元素的值，大多用於input元素。至關於document.getElementById("input1").value;

2. html() ：返回或設置被選元素的內容（包括HTML標記）。或者說當被選元素有子元素時，則連子元素的標籤一塊兒返回。

3. text() ：返回或設置被選元素的文本內容（不包括HTML標記）。

這三個方法的區別：

用於取值時

val()通常用於input元素的取值，text()和html()通常用於除input之外的文本的取值。
val()和html()相同，若是其應用在多個元素上時，只能讀取第一個表單元素的"value"值，而text()則能夠獲取
全部選中的元素的文本內容。

例:    <input type="text" id="text1"/>
       <input type="text" id="text2"/>
        
   ->   $("#text1,#text2").val();  //只能獲取到text1的value

---

<div id="p1"> <p>text1</p> </div>    
        <div id="p2"> <p>text2</p> </div>         
        
   ->   $("#p1,#p2").html();  //只能獲取到id=p1的div的文本值和標籤 <p>text1</p>

---

<p id="p1">text1</p>     
        <p id="p2">text2</p>  
        
   ->   $("#p1,#p2").text();  //能夠獲取到p1和p2的文本值text1,text2

用於設置值時

html(),val(),text()均可以改變全部已選取元素的值。

例：  $("#text1,#text2,#text3").val("test");  //能夠將id爲text1,text2,text3的元素值所有改爲test

4.attr() ：用於獲取或改變屬性值，只要是鍵值對的元素屬性，均可以使用attr()。

例(獲取屬性值)：                   
                   <a id="a1" href="www.baidu.com">連接</a>
     
             ->    var href = $("#a1").attr("href");  //返回id=a1的a元素的href屬性：www.baidu.com   

 
     
  (改變屬性值)：  
     ->    $("#a1").attr("href"，"www.google.com");  //將id=a1的a元素href改爲 www.google.com

---

(獲取屬性值)：
            <input id="text1" type="text" class="aa" style="width:100px;"/>
        
 ->     var text1 = $("#text1").attr("id");  //返回 "text1"
 ->     var text2 = $("#text1").attr("type");  //返回 "text"
 ->     var text3 = $("#text1").attr("class");  //返回 "aa"
 ->     var text4 = $("#text1").attr("style");  //返回 "width:100px;"




(改變屬性值)：  
 ->     $("#text1").attr({
                'type' : 'password',
                'class' : 'bb',
                'style' : 'width:80px;'
        });  //將id=text1的元素type改爲 password，class改爲bb，style改爲width:80px;
 
        注意：修改多個屬性值時，最後一個屬性不要帶逗號！  
        建議：對於checked和selected這兩個屬性，用prop代替attr會好一些，由於：
               1） attr只能獲取初始值，不管是否變化。
               2） prop能訪問變化後的值，並以true/false返回。

操做元素的css屬性或者類

1. addClass() ： 向被選元素添加一個或者多個類。

例： .text1{
        width:100%;
        height:90px;
     }
     
     <input type="text" id="text1"/>
     
     $(#text1").addClass("text1");
->   <input type="text" id="text1" class="text1"/>

2. removeClass() : 從被選元素中刪除一個類。

3. toggleClass() ： 對被選元素進行添加/刪除類的切換操做。

例：  .blue{
          color : blue;
      }
      
      <h1>標題</h1>
      
      $("h1").toggleClass("blue");      
->    當h1元素的class包括blue時就刪除，沒有時就加上。

4. css() ： 設置或返回被選元素的一個或者多個樣式屬性，用法和attr()同樣。

例： $('#text1').css('background-color');  //返回text1的背景色
     $('#text1').css('background-color','red');  //設置text1的背景色爲紅色
     $('#text1').css({ 'background-color':'red',
                       'font-size':'200%'}
                     );   //設置多個樣式屬性

用於添加或刪除元素

1. append() : 在被選元素的結尾插入新內容。

例： <p id="p1"> 111 </p>

->   $('#p1').append("222");
                
->   <p id="p1"> 111222 </p>

2. prepend() : 在被選元素的開頭插入新內容，與append相反。

3. after() ：在被選元素以後插入新內容。

例： <p id="p1"> 111 </p>

->   $('#p1').after("222");
                
->   <p id="p1"> 111 </p>222

4. before() : 在被選元素以前插入新內容，與after相反。

區別： append和prepend是在被選元素裏面添加內容，after和before是在被選元素外面添加內容。

---

5. remove() : 刪除被選元素（及其子元素），就是刪除被被選元素包裹在內的全部元素，包括它本身。

6. empty() ： 刪除被選元素的全部子元素，不刪除被選元素本身。

操做元素尺寸

在看下面的方法以前，咱得先把div的那些尺寸再搞清楚一遍。

上圖是一張div的圖，上面標記了它的各項屬性，

• 第二層灰色的部分是這個div的邊框，平時的邊框可能沒這麼寬，只是這個想讓你們看的更明白一點，
• 最裏層的淡灰色是div裏面的內容，多是table，文本或者其餘的，這些內容會和邊框有個距離，無論是上下左右，這個距離就是padding（內邊距），也是藍色的部分。這三層構成了一個div，這個div呢，和它的父元素，可能也是一個div，也可能就是瀏覽器窗口了，無論是上下左右也會有一個距離，這個距離就是margin（外邊距），是最外面虛線框與灰色邊框中間的那部分白色的。

好，來看下面的方法：

1. width() ：設置或返回元素的寬度（不包括內邊距，邊框，和外邊距）。

例 ： <div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;">
      </div>
      
      這個例子是一個div，它的高度是100px，寬度是300px，內邊距padding是10px，外邊距margin是3px，
邊框的寬度是1px。

-> $("#div1").width(); //返回div1元素的寬度300px
-> $("#div1").width("300px"); //從新設置div1元素的寬度爲300px

2. height() ：設置或返回元素的高度（不包括內邊距，邊框，和外邊距），

仍是上面那個例子，$("#div1").height();返回div1的高度100px。也能夠用這個方法也能夠設置高度，同上。

3. innerWidth() ：返回元素的寬度（包括內邊距）。

這個方法是不只返回元素的寬度，還會加上它的左右內邊距的值一塊兒返回，好比上個例子，

$("#div1").innerWidth();
->  300（寬度） + 10（左內邊距） + 10（右內邊距） = 320px 。

我也不太明白爲何有這樣一個方法，我還沒用過，不過能夠用來計算內邊距。
注意： 這個方法只能返回值，並不能設置值。

4. innerHeight() ： 返回元素的高度（包括外邊距）。

這個方法返回元素的高度，加上它的上下內邊距.

$("#div1").innerHeight();
->  100（高度）+ 10（上邊距）+10（下邊距）= 120px

5. outerWidth() ： 返回元素的寬度（包括內邊距，邊框）。

這個方法返回元素的寬度，再加上它的左右邊距，再加上它左右邊框的寬度。

$("#div1").outerWidth();
->  300（寬度） + 10（左內邊距） + 10（右內邊距） + 1（左邊框寬度) + 1（右邊框寬度）= 322px 。

就是innerWidth加上兩邊邊框的寬度嘛，估計是用來計算邊框寬度的。

6. outerHeight() ： 返回元素的高度（包括內邊距，邊框）。
這個方法返回元素的寬度，再加上它的左右邊距，再加上它上下邊框的寬度。計算方法同上，應該是122px。

7. outerWidth(true) ：返回元素的寬度（包括內邊距，邊框和外邊距）。

寬度，內邊距，邊框都算完了，怎麼能落下外邊距呢，inner和outer都用完了，估計開發的時候沒詞了，就在outerWidth()裏面加個true，
就這樣咱能夠把外邊距再算進去。

$("#div1").outerWidth(true); 
->  300（寬度） + 10（左內邊距） + 10（右內邊距） + 1（左邊框寬度) + 1（右邊框寬度）+ 3（左外邊距）+ 3（右邊距）= 328px 。

8. outerHeight(true) : 返回元素的高度（包括內邊距，邊框和外邊距）。

$("#div1").outerHeight(true); 
->  300（寬度） + 10（上內邊距） + 10（下內邊距） + 1（上邊框寬度) + 1（下邊框寬度）+ 3（上外邊距）+ 3（下邊距）= 128px 。

---

元素的操做先寫這麼多，等下在下一篇文章裏面寫一下jQuery的ajax操做，元素的遍歷。