jQuery基礎知識小結

今天為大家介紹的是jQuery基礎知識小結，希望大家會喜歡。

jQuery基礎知識小結

本文主要通過jQuery基礎知識、選擇要操作的元素及處理DOM元素3個方面給我們做了下小結，非常的詳盡，推薦給有需要的小伙伴。

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基礎知識小結的相關內容，希望對大家可以有所幫助。