1. 程式人生 > >jquery基本知識-第一天

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元素。