jQuery 使用小結

1、選擇器部分

1. $("input[type='radio']") 選擇不一樣 type 的 input
2. $("input[type='radio']:checked") 選擇被選中的 radio

3. 選擇父類元素

   • $selector.parent('td') 僅限於直接父類元素 parent
   • $(this).parents('.content') 只要是父類元素便可，能向父級多級查找 parents

4. 選擇子類元素

   • $ele.children('p.tip');
   • $this.siblings('.content').find('textarea')
5. 選擇兄弟元素 $selector.parent('td').siblings('.title')

2、插入和刪除元素

1. 插入

1. 在被選元素的結尾插入內容

   $ele.append("<p class='tip red'> &nbsp;&nbsp;請選擇</p>");

2. 在被選元素的開頭插入內容

   $(".must").prepend("<span class='red star'>*&nbsp;</span>");

3. 在被選元素以前插入內容

   $('.item:eq(2)').before($('.milestone'));

4. 在被選元素以後插入內容

   $('.item:eq(2)').after($('.milestone'));

2. 刪除

1. remove() 刪除被選元素（及其子元素），可傳入參數（選擇器）做爲過濾條件

   $tip.remove()` 或 `$("p").remove(".italic");

2. empty() 刪除被選元素的子元素

   $tip.empty()

3、設置元素樣式

4、動畫

1. animate 動畫使用固定值

$dialog.animate({
    top: "60px"
})

2. animate 動畫使用相對值

$dialog.animate({
    top: "-=60px"
})

3. 判斷當前是否有動畫還沒有執行完畢

• 若是正在執行動畫返回 true

  $(".box").is(":animated")

5、獲取和設置元素的值

1. 獲取文本域的輸入的內容

   var $val = $this.siblings('.content').find('textarea').val();

2. 獲取屬性值

   var id = $(this).parents('.item').attr('id');

6、其餘的一些方法

1. 清空被選中的 radio

   $("input[type='radio']").removeAttr('checked');

2. 判斷 radio 是否被選中

   $(this).is(":checked")

3. 判斷元素是否具備指定的類名

   $(this).hasClass("bad")

4. jQuery 對象有 length 屬性，該屬性表示選中的 DOM 元素的個數

   if($radiosChecked.length != 2) {}

5. 判斷選中元素是否爲 display:none 狀態

   if(!$(this).is(":hidden")) {}

6. 序列化表單數據，用於 ajax 提交表單數據

   $('form').serialize()

7. 輸入框失去焦點

   $('input').blur(function () {});