jQuery使用小結

$(document).ready(
function(){}
);

選擇器

$("p:first")            第一個元素
$("p.intro")            class爲intro的P元素
$("ul li:first") 選取第一個 <ul> 元素的第一個 <li> 元素      【!】
$("ul li:first-child") 選取 每 個 <ul> 元素的第一個 <li> 元素      【!】  :first過濾器只匹配第一個子元素，而:first-child過濾器將爲每個父元素匹配一個子元素。
$("[href]")             含有href屬性的
$("a[target='_blank']") 選取所有 target 屬性值等於 "_blank" 的 <a> 元素
$("a[target!='_blank']") 選取所有 target 屬性值不等於 "_blank" 的 <a> 元素
$(":button")         選取所有 type="button" 的 <input> 元素 和 <button> 元素   【!】
$("tr:even")     選取偶數位置的 <tr> 元素                       【!】 注意是從0開始算的   第0,2,4...個

$("tr:odd")              奇數     

更新選擇器可以參考文章   、在線選擇器檢測  

事件

鼠標：click()  dbclick()           mouseenter()劃過元素   mouseleave()離開            mousedown()移動到並點擊鼠標   mouseup()鬆開鼠標  

         focus()  blur()獲得與失去焦點      hover()懸浮模擬了enter和leave 

DOM

• text() - 設置或返回所選元素的文本內容
• html() - 設置或返回所選元素的內容（包括 HTML 標記）
• val() - 設置或返回表單字段的值（value值等）  寫  val("Dolly Duck")
• attr()  設置與獲取  屬性值

    這些方法都有回調函數 參數是當前元素的下標 和  原值 。 比如下例，改變a標籤的href值，URL末位加/jquery

$(document).ready(function(){
  $("button").click(function(){
    $("#w3s").attr("href", function(i,origValue){
      return origValue + "/jquery"; 
    });
  }); 
});

添加元素 ：  被選元素的內容的前後  後append   前prepend    被選元素的前後   after  before

eg.  

$("#select_id").append("<option>heh</option>");

可以添加多個：

	o1="<option>heh</option>";
	o2="<option>mem</option>";
	$("#select_id").append(o1,o2);

刪除元素：remove()  emoty()      過濾：刪除class是aa的所有 <p> 元素：  $("p").remove(".aa");
操作CSS：addClass()    removeClass   toggleClass()

css()  取值 設置值   也可以用來設置多個值  

eg.

$("p").css({"background-color":"yellow","font-size":"200%"});

尺寸： 參考圖片即可

遍歷

祖先：parent()單個  parents()所有，可篩選→_→ parents("ul")   parentsUnit()取兩者之間，不包含兩者本身。

後代：children()所有，可篩選 find()也可用於篩選 

同胞：siblings()所有，可篩選  next（）下一個 nextAll()   nextUnit() 同理 prev() prevAll()  prevUnit()

 frist() last()  eq(0)  索引是從0開始  $("p").filter(".intro")所有p中含有.intro的元素  同理not() 不含有