jQuery基礎知識小結_jquery

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('

');

  刪除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物件集，例如可以取得

  其它取得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元素：
  $('

').insertAfter();
  $('',{
   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('some text');
  在元素末端dom中現有的元素：$('p').append($(a.someclassname))
  在元素開頭追加：$("p").prepend()
  在元素的前面追加：$("span").before()
  在元素的後面追加：$("span")after()
  把內容追加到最後：appendTo(targets)
  把內容追加到開頭：prependTo(targets)
  把內容追加到元素前面：insertBefore(targets)
  把內容追加到元素後面：$('

').insertAfter('p img');

 包裹元素：
  $('a.someclassname').wrap("

")
  $('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('' $(this).attr('alt') '');
  })
  $("p").replaceAll("")

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

  對於使用$('#list').val()傳回值的陣列
  $('input').val(['one','two','three'])如果單選方塊或複選框與陣列中的元素匹配，則選取狀態