1、基礎(chǔ)

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

  獲取jquery對(duì)象集中的元素：

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

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

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

  jquery對(duì)象集轉(zhuǎn)換成javascript數(shù)組：
   var arr = $('label+button').toArray()label后面所有同級(jí)button元素，轉(zhuǎn)換成javascript數(shù)組

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

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

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

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

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

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

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

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

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

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

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

 jquery方法：
  $().hide()
  $().addClass('')
  $().html('')
  $('a').size()元素?cái)?shù)量

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

 jquery函數(shù)：
  $.trim()

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

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

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

2、選擇要操作的元素

 根據(jù)標(biāo)簽名：$('a')  
 根據(jù)id：$('#id')
 根據(jù)類(lèi)名：$('.someclassname')
 滿足多個(gè)條件：$('a#id.someclassname') 或 $('div,span')
 某個(gè)元素的所有子節(jié)點(diǎn)：$(p a.someclassname)
 某個(gè)元素的直接子節(jié)點(diǎn)：$(ul.myList > li)

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

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

 某元素后的某一個(gè)元素：$(E~F)匹配的是F，F(xiàn)是E后面的某一個(gè)元素

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

 通過(guò)過(guò)濾器：
  $(input:not(:checkbox))
  $(':not(img[src*="dog"])')
  $('img:not([src*="dog"])')
  $(div:has(span))
  $('tr:has(img[src$="pu.png"])')
  $(tr:animated)處于動(dòng)畫(huà)狀態(tài)的tr
  $(input:button)包括type類(lèi)型為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('');

 設(shè)置屬性值：

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

 刪除屬性：

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

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

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

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

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

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

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

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

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

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

 有關(guān)元素內(nèi)容：
  $('p').html()
  $('p').html('')
  $('p').text()
  $('p').text('')

 追加內(nèi)容
  在元素末尾追加一段html：$('p').append('<b>some text</b>');
  在元素末尾dom中現(xiàn)有的元素：$('p').append($(a.someclassname))
  在元素開(kāi)頭追加：$("p").prepend()
  在元素的前面追加：$("span").before()
  在元素的后面追加：$("span")after()
  把內(nèi)容追加到末尾：appendTo(targets)
  把內(nèi)容追加到開(kāi)頭：prependTo(targets)
  把內(nèi)容追加到元素前面：insertBefore(targets)
  把內(nèi)容追加到元素后面：$('<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()刪除元素，綁定到元素上的事件和數(shù)據(jù)也會(huì)被刪除
  $('.classname').detach()刪除元素，但保留事件和數(shù)據(jù)
  $('.classname').empty()不刪除元素，但清空元素內(nèi)容

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

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

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

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

最新評(píng)論