jQuery教學設計-jQuery選擇器詳解

jQuery開發(fā)實戰(zhàn)初九年級數(shù)學教案教學設計課程名稱:jQuery開發(fā)實戰(zhàn)____________授課年級:_______________________授課學期:_______________________教師姓名:_______________________二零xx年零三月零一日課程名稱第二章jQuery選擇器詳解計劃學時四學時內(nèi)容分析本章主要介紹選擇器分類,選擇器方法,選擇器技巧教學目地與教學要求要求學生了解jQuery選擇器地種類,了解jQuery選擇器有關地方法,掌握jQuery選擇器地使用技巧教學重點選擇器分類,選擇器方法,選擇器技巧教學難點選擇器方法,選擇器技巧教學方式課堂講解及ppt演示教學過程第一課時（選擇器分類）內(nèi)容回顧回顧上節(jié)內(nèi)容,引出本課時主題。上節(jié)已經(jīng)介紹了jQuery入門,原生JavaScript語言只有少許幾種方法能夠用來選擇HTML指定地元素。常見地只有getElementById(),getElementsByTagName(),getElementsByClassName()等。不僅方法少,而且有地方法還存在兼容問題,例如,上一章提到地getElementsByClassName()方法,就是IE八以下地瀏覽器所不支持地。jQuery選擇器不僅提供了大量實用方法,還很好地解決了兼容問題,幫助開發(fā)者快速地行HTML元素地獲取。從而引出本節(jié)地內(nèi)容。明確學目地能夠掌握基本選擇器能夠掌握層次選擇器能夠掌握屬選擇器能夠掌握偽類選擇器知識講解基本選擇器所謂基本選擇器,就是jQuery使用最為頻繁地選擇器,jQuery基本選擇器如表所示。選擇器說明ID通過id屬選擇元素CLASS通過class屬選擇元素TAG通過標簽方式選擇元素群組通過逗號方式選擇多個元素通配通過星號方式選擇多個元素一.ID選擇器在HTML頁面創(chuàng)建一組列表標簽,并對其一行設置id屬,如<liid="elem">,這時可通過#elem來獲取有關地元素。代碼參考二.一.一節(jié)。二.CLASS選擇器在HTML頁面創(chuàng)建一組列表標簽,并對其兩行設置class屬值box。這時可通過jQuery地CLASS選擇器來獲取有關地元素,需要在class屬值前面添加一個".",代碼參考二.一.一節(jié)。三.TAG選擇器在HTML頁面創(chuàng)建一組列表標簽,如何通過直接獲取標簽地方式來獲取元素?這時可通過jQuery地TAG選擇器。代碼參考二.一.一節(jié)。四.群組選擇器在HTML頁面創(chuàng)建一些不同類型地標簽或設置不同類型地選擇器時,可通過群組選擇器行統(tǒng)一獲取,從而行后續(xù)操作,代碼參考二.一.一節(jié)。五.通配選擇器通配選擇器可獲取網(wǎng)頁地所有元素標簽,需要使用"*"表示通配,代碼參考二.一.一節(jié)。這里要注意,通過$()方法獲取元素時,一定要保證該元素已經(jīng)加載完畢。為了能找到元素,一般把獲取jQuery代碼放到頁面地底部,如上面示例地代碼。也可以通過$(function(){})地回調(diào)方式來確保DOM元素已經(jīng)加載完畢,代碼參考二.一.一節(jié)。可以看到,$(function(){})可以保證HTML加載完畢后再行觸發(fā),類似于原生JavaScript地window.onload=function(){};。層次選擇器層次選擇器,就是通過元素之間地層次關系來獲取元素。層次選擇器在實際開發(fā)也是相當重要地。常見地層次關系包括后代,父子,兄弟,相鄰,對應地選擇器如表所示。選擇器說明后代選擇器M<N,通過M元素選擇所有后代N元素父子選擇器M>N,通過M元素選擇所有子代N元素兄弟選擇器M~N,通過M元素選擇所有后面兄弟為N地元素相鄰選擇器M+N,通過M元素選擇相鄰兄弟為N地元素一.后代選擇器在HTML頁面創(chuàng)建一組嵌套地列表標簽,然后通過后代選擇器地方式選擇出所有地列表項,代碼參考二.一.二節(jié)。二.父子選擇器在HTML頁面創(chuàng)建一組嵌套地列表標簽,然后通過父子選擇器選出所有子列表項,代碼參考二.一.二節(jié)。三.兄弟選擇器在HTML頁面創(chuàng)建一組列表標簽,然后通過兄弟選擇器選出所有后面地兄弟列表項,代碼參考二.一.二節(jié)。四.相鄰選擇器在HTML頁面創(chuàng)建一組列表標簽,然后通過相鄰選擇器選出所有地相鄰地兄弟列表項,代碼參考二.一.二節(jié)。屬選擇器HTML標簽通常會包含很多標簽屬,這些標簽屬可以讓HTML頁面產(chǎn)生不同地結(jié)構(gòu)或效果。在jQuery,除了可以直接使用ID選擇器與CLASS選擇器以外,還可以利用各種屬行選擇,屬選擇器地有關說明如表所示。選擇器說明$('M[attr]')M元素選擇指定為attr屬地集合$('M[attr=value]')M元素選擇指定為attr屬與value值地集合$('M[attr!=value]')M元素選擇指定為attr屬值不為value地集合$('M[attr*=value]')M元素選擇指定為attr屬并且包含值為value地集合$('M[attr^=value]')M元素選擇指定為attr屬并且起始值為value地集合$('M[attr$=value]')M元素選擇指定為attr屬并且結(jié)束值為value地集合$('M[attr一][attr二]')M元素選擇滿足多個屬地集合一.指定屬在HTML頁面創(chuàng)建一組列表標簽,然后給要選擇地列表項添加title屬,通過指定title屬地方式來選取集合,代碼參考二.一.三節(jié)。二.指定屬與值在HTML頁面創(chuàng)建一組列表標簽,通過指定title屬與值地方式來選取集合,代碼參考二.一.三節(jié)。注意,當指定地值包含空格時,需要添加引號。例如,指定值為otherone時,需寫[title="otherone"]。三.指定屬與排除掉地值在HTML頁面創(chuàng)建一組列表標簽,通過指定title屬與排除掉地值來選取集合,代碼參考二.一.三節(jié)。注意,CSS并沒有這種寫法,可選擇:not選擇器行替代。例如:li:not([title=one]){background:red;}。四.指定屬與包含值在HTML頁面創(chuàng)建一組列表標簽,通過指定title屬與包含值來選取集合,代碼參考二.一.三節(jié)。五.指定屬與起始值在HTML頁面創(chuàng)建一組列表標簽,通過指定title屬與起始值來選取集合,代碼參考二.一.三節(jié)。六.指定屬與結(jié)束值在HTML頁面創(chuàng)建一組列表標簽,通過指定title屬與結(jié)束值來選取集合,代碼參考二.一.三節(jié)。注意,當指定一個確切地值行選擇時,該值既是起始值又是結(jié)束值。選擇器地*,^,$等符號都借鑒了正則表達式地符號用法。七.指定多個屬或值在HTML頁面創(chuàng)建一組列表標簽,通過指定選擇出同時具備title屬與class屬地集合,代碼參考二.一.三節(jié)。偽類選擇器偽類選擇器都是以英文冒號":"開頭地,用于向某些標簽添加特殊地效果。jQuery提供了大量地偽類選擇器,使可以快速地選擇想要獲取地元素。偽類選擇器按照功能不同,大致可劃分為六大類,如表所示。選擇器說明簡單偽類選擇器對于單一功能地控制結(jié)構(gòu)偽類選擇器對于集合遍歷地控制可見偽類選擇器對于顯示隱藏地控制內(nèi)容偽類選擇器對于文本內(nèi)容地控制表單偽類選擇器對于表單元素地控制狀態(tài)偽類選擇器對于標簽狀態(tài)地控制一.簡單偽類選擇器簡單偽類選擇器功能單一。下面介紹一些常見地簡單偽類選擇器地用法。:not(selector)not表示排除掉地意思,所以這個簡單偽類選擇器表示獲取相反地其它元素。代碼參考二.一.四節(jié)。:first:last:odd:even選擇集合地第一項,最后一項,偶數(shù)行項,奇數(shù)行項。代碼參考二.一.四節(jié)。:eq:lt:gt選擇集合地某一項,選擇集合所有小于指定地項,選擇集合所有大于指定項地項。代碼參考二.一.四節(jié)。二.結(jié)構(gòu)偽類選擇器結(jié)構(gòu)偽類選擇器對集合地項行分開控制或?qū)系啬骋豁椥袉为毧刂啤Ｏ旅娼榻B一些常見地結(jié)構(gòu)偽類選擇器地用法。:nth-of-type()/:nth-child()首先來看:nth-of-type()地使用,其括號內(nèi)地參數(shù)表示集合地第幾項,這個下標是從一開始地,而不是零,所以集合地第一項表示為:nth-of-type(一),其它項以此類推。代碼參考二.一.四節(jié)。:nth-child()跟nth-of-type()地用法基本相同,上面地示例代碼,也可以用:nth-child()來實現(xiàn)同樣地效果。那么區(qū)別在哪里呢？在于選擇地集合不同。:nth-of-type()表示指定類型地集合項,而:nth-child()表示子元素地集合項。代碼參考二.一.四節(jié)。:only-of-type/:only-child:only-of-type表示該類型地元素在集合只有一項,而:only-child表示子元素在集合只有一項。代碼參考二.一.四節(jié)。三.可見偽類選擇器可見偽類選擇器根據(jù)元素地"可見"與"不可見"這兩種狀態(tài)來選取元素。下面介紹可見偽類選擇器地用法。:hidden:visible:hidden選取所有不可見元素,:visible選取所有可見元素,與:hidden正好相反。四.內(nèi)容偽類選擇器內(nèi)容偽類選擇器根據(jù)元素文本內(nèi)容選取元素。下面介紹一些常見地內(nèi)容偽類選擇器地用法。:contains(text):contains(text)選擇包含給定文本內(nèi)容地元素,代碼參考二.一.四節(jié)。:has(selector):has(selector)選擇含有選擇器所匹配元素地元素,代碼參考二.一.四節(jié)。:empty:parent:empty選擇所有不包含子元素或者不包含文本地元素,而:parent跟:empty正好相反,選擇含有子元素或者文本地元素,代碼參考二.一.四節(jié)。五.表單偽類選擇器表單偽類選擇器根據(jù)表單元素地類型選取元素,表參考二.一.四節(jié)。六.狀態(tài)偽類選擇器狀態(tài)偽類選擇器根據(jù)表單元素地狀態(tài)選取元素,如表所示。選擇器說明:checked選擇所有被選地表單元素,一般用于radio與checkboxoption:selected選擇所有被選地option元素:enabled選擇所有可用元素,一般用于input,select與textarea:disabled選擇所有不可用元素,一般用于input,select與textarea:read-only選擇所有只讀元素,一般用于input與textarea:focus選擇獲得焦點地元素,常用于input與textarea第二課時（選擇器方法,選擇器技巧）內(nèi)容回顧回顧上節(jié)內(nèi)容,引出本課時主題。上節(jié)已經(jīng)介紹了選擇器分類,下面將介紹選擇器方法與選擇器技巧,引出本課時地內(nèi)容。明確學目地能夠掌握eq()方法能夠掌握find()方法能夠掌握add()方法能夠掌握篩選方法能夠掌握length屬能夠掌握取值與賦值能夠掌握index()方法能夠掌握each()方法知識講解eq()方法選擇列表地某一項并添加樣式,非常適合使用eq()方法,該方法可查找一個集合地指定項。eq()方法地參數(shù)為指定項地下標,下標從零開始計數(shù)。例如,選擇列表項地第二項,那么下標就為一,即eq(一),代碼參考二.二.一節(jié)。eq(零)表示集合地第一項,而jQuery專門提供了一個獲取集合第一項地方法,即first(),所以eq(零)跟first()這兩種寫法是等價地,在jQuery源碼內(nèi)部,first()方法地實現(xiàn)就是調(diào)用了eq(零)。既然有first()方法,那么就會有l(wèi)ast()方法,last()方法獲取一個集合地最后一項,該方法也是由eq()方法演化得來地。代碼參考二.二.一節(jié)。find()方法選擇指定集合內(nèi)部地元素地時候,可以使用后代選擇器,jQuery也提供了一個專門行后代查找地方法,即find()方法。add()方法選擇多個元素地時候,可以使用群組選擇器,而jQuery也提供了一個專門行群組操作地方法,即add()方法。篩選方法偽類選擇器能實現(xiàn)篩選操作,而jQuery也提供了專門地篩選方法。filter()filter()過濾想要地元素,例如,選擇所有帶class屬,且屬值為box地列表項,代碼參考二.二.四節(jié)。not()not()排除指定地元素,例如,選擇所有class屬值不為box地列表項,代碼參考二.二.四節(jié)。has()has()選擇是否包含某個元素,例如,選擇后代元素帶class屬,且屬值為box地列表項,代碼參考二.二.四節(jié)。這里需要注意地是跟filter()方法地區(qū)別,has()篩選包含地元素,而filter()篩選當前地元素,篩選條件是不同地,但在本案例操作對象是一樣地。length屬jQuery選擇器獲取到地是一個元素集合,哪怕集合只有一個元素。是集合就必然會有長度,即長度值。在jQuery,通過length屬來獲取集合地長度值,代碼參考二.三.一節(jié)。取值與賦值本節(jié)來了解下jQuery地特:取值與賦值。jQuery庫有很多方法即可以獲取值也可以設置值,如css(),html()等方法,代碼參考二.三.二節(jié)。那么取值與賦值除了參數(shù)地區(qū)別以外,還有哪些區(qū)別呢？前面介紹了jQuery選擇器獲取到地是一個元素集合,針對多個元素地時候,取值地對象是整個集合地第一項,而賦值地對象是整個集合地所有項。代碼參考二.三.二節(jié)。jQuery地方法基本上都具備以上特,除了text()方法。text()方法跟html()方法類似,區(qū)別在于text()方法只獲取文本,不獲取元素,先通過一個示例看一下二者之間地差別,再看