1、基礎

 jquery對象集：
  $()：jquery對象集合

  獲取jquery對象集中的元素：

   使用索引獲取包裝器中的javascript元素：var temp = $('img[alt]')[0]

   使用jquery的get方法獲取jquery對象集中的javascript元素：var temp = $('img[alt]').get(0)

   使用jquery的eq方法獲取jquery對象集中的jquery對象元素：
    $('img[alt]').eq(0)
    $('img[alt]').first()
    $('img[alt]').last()

  jquery對象集轉換成javascript數組：
   var arr = $('label+button').toArray()label后面所有同級button元素，轉換成javascript數組

  jquery對象集的索引：
   var n = $('img').index($('img#id')[0])注意：index()參數是javascript元素
   var n = $('img').index('img#id') 等同于上一行 找不到返回-1
   var n = $('img').index()img在同級元素中的索引

  向jquery對象集中添加更多的jquery對象集：   
   使用逗號：$('img[alt],img[title]')
   使用add方法：$('img[alt]').add('img[title]')

   對不同的jquery對象集中采取不同的方法：
    $('img[alt]').addClass('thickBorder').add('img[title]').addClass('');

   向jquery對象集中添加新創建的元素：
    $('p').add('<div></div>');

  刪除jquery對象集中的元素：
   $('img[title]').not('[title*=pu]')
   $('img').not(function(){return !$(this).hasClass('someClassname')})
   過濾jquery對象集：
    $('td').filter(function(){return this.innerHTML.match(^/d+$)})過濾包含數字的td

   獲取jquery對象集的子集
    $('*').slice(0,4)包含前4個元素的新的jquery對象集
    $('*').slice(4)包含前4個元素的新的jquery對象集
    $('div').has('img[alt]')

  轉換jquery對象集中的元素
   var allIds = $('div').map(function(){
    return (this.id==undefined) ? null : this.id;
   }).get();通過get方法轉換成javascript數組

  遍歷jquery對象集中的元素
   $('img').each(function(n){
    this.alt = '這是第['+n+']張圖片，圖片的id是' + this.id;
   })
   $([1,2,3]).each(function(){alert(this);})

  使用元素間關系獲取jquery對象集
   $(this).closest('div')比如觸發的按鈕在哪個div中發生
   $(this).siblings('button[title="Close"]')所有同級元素，不包含本身
   $(this).children('.someclassname')所有子節點元素，不包含重復子節點
   $(this).closest('')臨近祖先元素
   $(this).contents()由元素內容組成的jquery對象集，比如可以獲取<iframe>元素內容
   $(this).next('.someclassname')下一個同級元素
   $(this).nextAll()后面所有的同級元素
   $(this).nextUntil('.someclassname')后面所有的同級元素直到遇到目標元素
   $(this).offsetParent()離jquery對象集最近的父輩元素
   $(this).parent()直接父元素
   $(this).parents()所有父元素
   $(this).parrentsUntil()所有父元素，直到目標父元素
   $(this).prev()上一個同級元素
   $(this).prevAll()之前的所有同級元素
   $(this).prevTntl()之前的所有同級元素，直到目標元素

  其它獲取jquery對象集的方式
   $(this).find(p span)

  判斷是否是某個jquery對象集
   var hasImg = $('*').is('img');

 jquery方法：
  $().hide()
  $().addClass('')
  $().html('')
  $('a').size()元素數量

  jquery選擇器：
   $('p:even')  
   $('tr:nth-child(1)')
   $('body > div')直接子元素
   $('a[href=$='pdf']')根據屬性選擇
   $(div:has(a))過濾

 jquery函數：
  $.trim()

 jquery執行時間：
  $(document).ready(function(){});
  $(function(){});

 創建DOM元素：
  $('<p></p>').insertAfter();
  $('<img>',{
   src: '',
   alt: '',
   title: '',
   click: function(){}
  }).css({
   cursor:'pointer',
   border:'',
   padding:'',
   backgroundColor:'white'
  }).append('');
 jquery擴展：
  $.fn.disable = function(){
   return this.each(function(){
     if(this.disabled != null) this.disabled = true;
   })
  };
  $('').disable();

 jquery測試元素是否存在：
  if(item)(){}else{} 寬松測試
  if(item != null) 推薦測試，能把null和undefined區別開
 

2、選擇要操作的元素

 根據標簽名：$('a')  
 根據id：$('#id')
 根據類名：$('.someclassname')
 滿足多個條件：$('a#id.someclassname') 或 $('div,span')
 某個元素的所有子節點：$(p a.someclassname)
 某個元素的直接子節點：$(ul.myList > li)

 根據屬性名：
  $(a[href^='http://']) 以...開頭
  $(href$='.pdf')以...結尾
  $(form[method])包含method屬性的form
  $(intput[type='text'])
  $(intput[name!=''])
  $(href*='some')包含

 某元素后的第一個元素：$(E+F)匹配的是F，F是E后面的第一個元素

 某元素后的某一個元素：$(E~F)匹配的是F，F是E后面的某一個元素

 通過位置：
  $(li:first)第一個li
  $(li:last)最后一個li
  $(li:even)偶數行li
  $(li:odd)奇數行li
  $(li:eq(n))第n個元素，索引從0開始
  $(li:gt(n))第n個元素之后的元素，索引從0開始
  $(li:lt(n))第n個元素之前的元素，索引從0開始
  $(ul:first-child)列表中的第一個li
  $(ul:last-child)列表中的最后一個li
  $(ul:nth-child(n))列表中的第n個li
  $(ul:only-child)沒有兄弟li的ul
  $(ul:nth-child(even))列表中的偶數行li,odd為計數行li
  $(ul:nth-child(5n+1))列表中被5除余1的li

 通過過濾器：
  $(input:not(:checkbox))
  $(':not(img[src*="dog"])')
  $('img:not([src*="dog"])')
  $(div:has(span))
  $('tr:has(img[src$="pu.png"])')
  $(tr:animated)處于動畫狀態的tr
  $(input:button)包括type類型為button,reset,submit的Input
  $(input:checkbox)等同于$(input[type=checkbox])
  $(span:contains(food))包含文字food的span
  $(input:disabled)禁用
  $(input:enabled)啟用
  $(input:file)等同于$(input[type=file])
  $(:header)h1到h6
  $(input:hidden)
  $(input:image)等同于$(input[type=image])
  $(:input)包括input, select, textarea, button元素
  $(tr:parent)
  $(input:password)等同于$(input[type=password])
  $(input:radio)等同于$(input[type=radio])
  $(input:reset)等同于$(input[type=reset])或$(button[type=reset])
  $('.clssname:selected')
  $(input:submit)等同于$(input[type=submit])或$(button[type=submit])
  $(input:text)等同于$(input[type=text])
  $(div:visible)

3、處理DOM元素  

 操作元素的屬性：

  $('*').each(function(n){
   this.id = this.tagName + n;
  })
 

獲取屬性值：$('').attr('');

 設置屬性值：

  $('*').attr('title', function(index, previousValue){
   return previousValue + ' I am element ' + index + ' and my name is ' + this.id;
  }) 為一個屬性設置值
  $('input').attr({
   value: '',
   title: ''
  }); 為多個屬性設置值

 刪除屬性：

  $('p').removeAttr('value');
 讓所有鏈接都在新窗口中打開：
  $('a[href^="http://"]').attr('target',"_blank");

 避免表單多次提交：
  $("form").submit(function(){
   $(":submit", this).attr("disabled","disabled");
  })

 添加類名：$('#id').addClass('')

 刪除類名：$('#id').removeClass('')

 切換類名：$('#id').toggleClass('')存在就刪除類名，不存在就添加類名

 判斷是否含有類名：$('p:first').hasClass('') $('p:first').is('')

 以數組形式返回類名列表：
  $.fn.getClassNames = function(){
   var name = this.attr('someclsssname');
   if(name != null){
    return name.split(" ");
   }
   else
   {
    return [];
   }
  }

 設置樣式：
  $('div.someclassname').css(function(index, currentWidth){
   return currentWidth + 20;
  });
  $('div').css({
   cursor: 'pointer',
   border: '1px solid black',
   padding: '12px 12px 20px 20x',
   bacgroundColor: 'White'
  });

 有關尺寸：
  $(div).width(500)
  $('div').height()
  $('div').innerHeight()
  $('div').innerWidth()
  $('div').outerHeight(true)
  $('div').outerWidth(false)

 有關定位：
  $('p').offset()相對于文檔的參照位置
  $('p').position()偏移父元素的相對位置
  $('p').scrollLeft()水平滾動條的偏移值
  $('p').scrollLeft(value)
  $('p').scrollTop()
  $('p').scrollTop(value)

 有關元素內容：
  $('p').html()
  $('p').html('')
  $('p').text()
  $('p').text('')

 追加內容
  在元素末尾追加一段html：$('p').append('<b>some text</b>');
  在元素末尾dom中現有的元素：$('p').append($(a.someclassname))
  在元素開頭追加：$("p").prepend()
  在元素的前面追加：$("span").before()
  在元素的后面追加：$("span")after()
  把內容追加到末尾：appendTo(targets)
  把內容追加到開頭：prependTo(targets)
  把內容追加到元素前面：insertBefore(targets)
  把內容追加到元素后面：$('<p></p>').insertAfter('p img');

 包裹元素：
  $('a.someclassname').wrap("<div class='hello'></div>")
  $('a.someclassname').wrap($("div:first")[0])
  $('a.someclassname').wrapAll()
  $('a.someclassname').wrapInner()
  $('a.someclassname').unWrap()

 刪除元素：
  $('.classname').remove()刪除元素，綁定到元素上的事件和數據也會被刪除
  $('.classname').detach()刪除元素，但保留事件和數據
  $('.classname').empty()不刪除元素，但清空元素內容

 復制元素：
  $('img').clone().appendTo('p.someclassname')
  $('ul').clone().insertBefore('#id')

 替換元素：
  $('img[alt]').each(function(){
   $(this).replaceWith('<span>' + $(this).attr('alt') + '</span>');
  })
  $("p").replaceAll("<b></b>")

 關于表單元素的值：
  $('[name="radioGroup"]:checked').val()獲取單選按鈕的值，如果沒有選中一個，返回undefined
  var checkboxValues = $('[name="checkboxGroup"]:checked').map(function(){
   return $(this).val();
  }).toArray(); 獲取多選框的值

  對于<select id="list" multiple="multiple">使用$('#list').val()返回值的數組
  $('input').val(['one','two','three'])如果單選框或復選框與數組中的元素匹配，則選中狀態