jquery基本知識-第一天
jQuery的選擇符大致分為三類:1、css選擇符。(按我的理解就是三類基本的選擇符:標籤名選擇符、class類選擇符和Id選擇符)eg:$('.odd') 、$('#id')
2、屬性選擇符。([ ]中括號形式表示的) eg: $('img[src='demo.jpg']')
3、自定義選擇符,即以":"開頭的選擇符。(書上叫做自定義選擇符,一開始我還是有點納悶的,因為我的理解是我自己定義的選擇符,其實不然,這些都是jQuery組織自定義的選擇符,具體有那些,在網上或是jQueryAPI文件中都可以找到,這裡我就不一一列出了) eg:$('tr:odd').addClass('odd'); 表格條紋效果
三類基本的選擇符(css選擇符),我覺得沒有什麼特別可總結的,但是對於屬性選擇符和自定義選擇符,我想應該進一步的好好總結一下,首先我們來看屬性選擇符。
我們都知道屬性選擇符的基本寫法就是用一個方括號[],大致的用法有以下幾種:
1、[attribute] 選擇出含有某個屬性的DOM物件。eg: $('td[alt]').click(function () {---}); 給包含有alt屬性的td物件新增單擊事件。
2、[attribute=value] 選擇出屬性值為value的DOM物件。eg: $('td[alt="點選檢視所有比賽"]').click(function () {---});給含有alt屬性且屬性值為'點選檢視所有比賽'的td物件新增單擊事件。
3、[attribute!=value] 屬性值不等於value的DOM物件。
4、[attribute*=value] 屬性值中包含value的DOM物件。
5、[attribute^=value] 屬性值中以value開頭的DOM物件。
6、[attribute$=value] 屬性值以value結尾的DOM物件。
屬性選擇符我覺得大致分為以上6類,接下來我們看看自定義選擇符,凡是用到冒號":"的選擇符我都把它叫做自定義選擇符,主要分為一下幾大類:
1、基本的。(:first :last :not :even :odd :eq :gt :lt :header :animated)具體表示什麼意思,網上或API文件上都可以查得到,且用多了自然就知道都表示什麼意思了。
2、內容方面的。(:contains :empty :has :parent)
3、可見性。(:hidden :visible)
4、子元素。(:first-child :last-child :nth-child :only-child)這裡我想解釋一下各個選擇符所表達的意思,:first-child 匹配第一個子元素,無引數。 :last-child 匹配最後一個子元素,無引數 。:nth-child 匹配其父元素下的第N個子或奇偶元素,有引數 index,index表示要匹配元素的序號,從1開始。具體示例請參考API文件。
5、表單。(:input :checkbox :button :file :hidden :image :radio :reset :password :submit :text)
6、表單物件屬性。(:enabled :disabled :checked :selected)
以上關於選擇符的知識基本上總結的差不多了,其實還有一種選擇符,因為我覺得這類選擇符不屬於以上三大類選擇符,應該歸類為第四大類選擇符,即表示層級的選擇符,下面就來介紹一下表示層級的選擇符:
1、ancestor descendant 表示在給定的祖先元素下匹配所有後代元素,ancestor表示任何有效的選擇器(即前面總結的三大類選擇器),descendant表示用以匹配元素的選擇器,並且它是第一個選擇器的後代元素
2、parent > child parent和child都表示一個有效的選擇器,這個和(ancestor descendant)唯一的區別就是child不僅僅是parent的後代元素,而且是parent的子元素。
3、prev + next prev和 next都表示一個有效的選擇器,用 +號所表示的意思是匹配所有緊接在prev元素後的next元素,prev和next是同級關係,即兄弟關係。
4、prev~siblings 同樣的prev和siblings都表示一個有效的選擇器,用~號所表示的意思是匹配prev 元素之後的所有siblings元素。