第1章
基礎實例

001　以淡入淡出的效果顯示或隱藏元素

本例主要采用fadeIn（）和fadeOut（）方法實現了以淡入淡出的顯示效果顯示或隱藏元素。在瀏覽器中顯示該頁面時，單擊“淡出隱藏百度窗口”按鈕，則該窗口將逐漸從頁面中消失；單擊“淡入顯示百度窗口”按鈕，則該窗口將逐漸從頁面中顯現出來，如圖001-1所示。

主要代碼如下所示：

上面有底紋的代碼是本例的核心代碼。在該部分代碼中，fadeIn（）方法用于以淡入效果顯示已隱藏的元素，該方法的語法聲明如下：

＄（selector）.fadeIn（speed,callback）;

其中，參數speed是一個可選參數，它可以取slow、fast或毫秒值。參數callback也是一個可選參數，表示動作完成后所執行的方法名稱。

fadeOut（）方法用于以淡出效果隱藏當前的可見元素，該方法的語法聲明如下：

＄（selector）.fadeOut（speed,callback）;

其中，參數speed是一個可選參數，規定效果的時長，它可以取slow、fast或毫秒值。參數callback也是一個可選參數，表示動作完成后所執行的方法名稱。

本例的源文件名是HtmlPageC025.html。

002　以卷簾效果展開或收縮被選擇的元素

本例主要采用slideUp（）和slideDown（）方法實現了以卷簾方式展開或收縮元素。在瀏覽器中顯示該頁面時，單擊第一個“收縮內容”按鈕，如圖002-1所示，則將下面的標題文字以卷簾方式從下到上慢慢收縮，如圖002-2所示，此時第一個“收縮內容”按鈕變為“展開內容”按鈕；單擊“展開內容”按鈕，則將從上至下慢慢展開標題文字。第二個“收縮內容”按鈕和第三個“展開內容”按鈕只能實現按鈕標題所示的單一功能，第一個按鈕則集成了這兩個按鈕的功能。主要代碼如下所示：

上面有底紋的代碼是本例的核心代碼。在該部分代碼中，如果元素已顯示，slideUp（）方法則以卷簾式的滑動效果隱藏被選元素。slideUp（）方法的語法聲明如下：

＄（selector）.slideUp（speed,callback）

其中，參數speed是一個可選參數，該參數規定元素從可見到隱藏的速度，默認值為normal，可能的值包括毫秒值（比如1500）、slow、normal、fast等，在設置速度的情況下，元素從可見到隱藏的過程中，會逐漸地改變其高度，這樣會創造滑動效果。參數callback也是一個可選參數，表示slideUp（）方法在執行完之后，將要執行的方法。除非設置了speed參數，否則不能設置該參數。

slideDown（）方法用于使用卷簾式的滑動效果顯示已經隱藏的被選元素。slideDown（）方法的語法聲明如下：

＄（selector）.slideDown（speed,callback）

其中，參數speed是一個可選參數，該參數規定元素從隱藏到可見的速度，默認值為normal，可能的值包括毫秒值（比如1500）、slow、normal、fast等，在設置速度的情況下，元素從隱藏到可見的過程中，會逐漸地改變其高度。參數callback也是一個可選參數，表示slideDown（）方法執行完成之后要執行的方法；除非設置了speed參數，否則不能設置該參數；如果元素已經是完全可見，則該效果不產生任何變化，除非規定了callback函數。

slideToggle（）方法通過使用高度變化的滑動效果來切換元素的可見狀態，如果被選元素是可見的，則隱藏這些元素，如果被選元素是隱藏的，則顯示這些元素，關于slideToggle（）方法的更多說明請參考本書的其他部分。

本例的源文件名是HtmlPageC096.html。

003　根據可見狀態確定是否顯示或隱藏元素

本例主要采用toggle（）方法實現根據元素的可見狀態確定是否顯示或隱藏元素。在瀏覽器中顯示該頁面時，單擊第一個“隱藏圖片”按鈕，如圖003-1所示，則將隱藏下面的圖片，如圖003-2所示，此時第一個“隱藏圖片”按鈕變為“顯示圖片”按鈕；單擊“顯示圖片”按鈕，則將重新顯示剛才隱藏的圖片。第二個“隱藏圖片”按鈕和第三個“顯示圖片”按鈕則只能實現按鈕標題所示的單一功能，第一個按鈕則集成了這兩個按鈕的功能。

主要代碼如下所示：

上面有底紋的代碼是本例的核心代碼。在該部分代碼中，如果被選的元素已被顯示，調用hide（）方法則隱藏該元素，hide（）方法的語法聲明如下：

＄（selector）.hide（speed,callback）

其中，參數speed是一個可選參數，該參數規定元素從可見到隱藏的速度，默認值為0，可能的值包括毫秒值（如1500）、slow、normal、fast等，在設置速度的情況下，元素從可見到隱藏的過程中，會逐漸地改變其高度、寬度、外邊距、內邊距和透明度。參數callback也是一個可選參數，它表示hide（）方法在執行完成之后將要執行的方法；除非設置了speed參數，否則不能設置該參數。注意：如果元素已經是完全隱藏，則不產生任何變化，除非規定了callback函數。

如果被選元素已被隱藏，調用show（）方法則顯示這些元素，show（）方法的語法聲明如下：

＄（selector）.show（speed,callback）

其中，參數speed是一個可選參數，規定元素從隱藏到完全可見的速度，默認值為0，可能的值包括毫秒值（如1500）、slow、normal、fast等，在設置速度的情況下，元素從隱藏到完全可見的過程中，會逐漸地改變其高度、寬度、外邊距、內邊距和透明度。參數callback也是一個可選參數，表示show（）方法在執行完成之后將要執行的方法；除非設置了speed參數，否則不能設置該參數。注意：如果元素已經是完全可見，則不產生任何變化，除非規定了callback函數。

toggle（）方法用于切換元素的可見狀態，如果被選元素是可見的，則隱藏這些元素；如果被選元素是隱藏的，則顯示這些元素。toggle（）方法的語法聲明如下：

＄（selector）.toggle（speed,callback,switch）

其中，參數speed是一個可選參數，該參數規定元素從可見到隱藏的速度（或者相反），默認值為0，可能的值包括：毫秒值（比如1500）、slow、normal、fast等，在設置速度的情況下，元素從可見到隱藏的過程中，會逐漸地改變其高度、寬度、外邊距、內邊距和透明度；如果設置此參數，則無法使用switch參數。參數callback是一個可選參數，表示toggle（）方法在執行完成之后將要執行的方法；除非設置了speed參數，否則不能設置該參數。參數switch是一個可選參數，類型為布爾值，該參數規定toggle（）方法是否隱藏或顯示所有被選元素；True表示顯示所有元素，False表示隱藏所有元素，如果設置此參數，則無法使用speed和callback參數。

本例的源文件名是HtmlPageC095.html。

004　根據狀態確定是否滑入或滑出被選元素

本例主要采用slideToggle（）方法實現以一行代碼同時實現以展開（滑入）或收縮（滑出）的方式顯示或隱藏被選元素。在瀏覽器中顯示該頁面時，單擊“收縮百度窗口”按鈕，則這個元素窗口將逐漸收縮直到消失，“收縮百度窗口”按鈕標題被修改為“展開百度窗口”按鈕；單擊“展開百度窗口”按鈕，則這個元素窗口將逐漸展開，直到全部呈現，“展開百度窗口”按鈕標題則被重置為“收縮百度窗口”按鈕，如圖004-1所示。

主要代碼如下所示：

上面有底紋的代碼是本例的核心代碼。在該部分代碼中，slideToggle（）方法通過使用高度變化的滑動效果來切換元素的可見狀態，如果被選元素是可見的，則隱藏這些元素，如果被選元素是隱藏的，則顯示這些元素。slideToggle（）方法的語法聲明如下：

＄（selector）.slideToggle（speed,callback）

其中，參數speed是一個可選參數，該參數規定元素從隱藏到可見的速度（或者相反），默認值為normal，可能值包括slow、normal、fast和毫秒值，在設置速度的情況下，元素在切換過程中，會逐漸地改變其高度創造滑動效果。參數callback也是一個可選參數，它是在slideToggle（）方法函數執行完之后要執行的回調函數；除非設置了speed參數，否則不能設置該回調函數。

本例的源文件名是HtmlPageC028.html。

005　自動確定是否淡入淡出地顯示或隱藏元素

本例主要采用fadeToggle（）方法實現根據可見狀態自動確定是否以淡入淡出的效果來顯示或隱藏元素。在瀏覽器中顯示該頁面時，單擊“淡出隱藏三個矩形”按鈕，則這三個矩形將逐漸從頁面中消失，“淡出隱藏三個矩形”按鈕被修改為“淡入顯示三個矩形”按鈕；單擊“淡入顯示三個矩形”按鈕，則這三個矩形將逐漸顯示在頁面中，“淡入顯示三個矩形”按鈕被重置為“淡出隱藏三個矩形”按鈕，如圖005-1所示。主要代碼如下所示：

上面有底紋的代碼是本例的核心代碼。在該部分代碼中，fadeToggle（）方法用于在fadeIn（）與fadeOut（）這兩個方法之間進行切換。如果元素已經淡出，則執行fadeToggle（）方法將向元素添加淡入效果；如果元素已經淡入，則執行fadeToggle（）方法將會向元素添加淡出效果。fadeToggle（）方法的語法聲明如下：

＄（selector）.fadeToggle（speed,callback）;

其中，參數speed是一個可選參數，用于規定效果的時長，它可以取slow、fast或毫秒值。參數callback也是一個可選參數，用于設置在動作完成后所執行的方法名稱。

本例的源文件名是HtmlPageC026.html。

006　在指定的時間內完成元素的顯示或隱藏

本例主要通過在show（）、hide（）和toggle（）方法中設置時間值從而實現在指定的時間內完成元素的顯示或隱藏。在瀏覽器中顯示該頁面時，單擊“延時顯示”按鈕，則div塊將在5秒內逐漸顯示出來；單擊“延時隱藏”按鈕，則div塊將在10秒內逐漸完成隱藏；單擊“自動切換”按鈕，則div塊將在8秒內自動完成顯示或隱藏的過程，如圖006-1所示。

主要代碼如下所示：

上面有底紋的代碼是本例的核心代碼。在這部分代碼中，show（）、hide（）和toggle（）方法中的參數表示毫秒數，1秒等于1000毫秒，該參數也支持slow、normal、fast等單詞。此實例的源文件名是HtmlPageC188.html。

007　查找并顯示在頁面中被隱藏的元素

本例主要調用可見性過濾器＄（"：hidden"）實現選取所有不可見的元素。在瀏覽器中顯示該頁面時，單擊“隱藏DIV塊”按鈕，則在該DIV塊中的圖片將隱藏；單擊“顯示DIV塊”按鈕，則將查找在該DIV塊中被隱藏的圖片并顯示出來，如圖007-1所示。

主要代碼如下所示：

上面有底紋的代碼是jQuery實現此功能的核心代碼。在該部分代碼中，可見性過濾器＄（"：hidden"）用于選取所有不可見的元素，包括<input type="hidden"/>、<div style="display：none"></div>和<div style="visibility：hidden"></div>等元素。＄（"div：visible"）用于選取所有可見的<div>元素。

此實例的源文件名是HtmlPageC176.html。

008　以動畫效果改變塊內多個元素的不同屬性

本例主要實現了使用animate（）方法實現以動畫漸進改變的效果同步改變塊內多個元素的不同屬性。在瀏覽器中顯示該頁面時，單擊“放大并移動下面的文字塊”按鈕，則這些文字將逐漸放大并向右移動，如圖008-1所示。

主要代碼如下所示：

上面有底紋的代碼是本例的核心代碼。在該部分代碼中，＄（"＃myblock"）.animate（｛width："150%"，fontSize："10em"｝，1000）用于以動畫方式同步改變塊內多個元素的不同屬性。animate（）方法的語法聲明如下：

＄（selector）.animate（styles,options）

其中，參數styles規定產生動畫效果的CSS樣式及值，可能的CSS樣式值包括backgroundPosition、borderWidth、borderBottomWidth、borderLeftWidth、lineHeight、borderRightWidth、borderTopWidth、borderSpacing、margin、marginBottom、marginLeft、marginRight、marginTop、outlineWidth、padding、paddingBottom、paddingLeft、paddingRight、paddingTop、height、width、maxHeight、maxWidth、minHeight、minWidth、font、fontSize、bottom、left、right、top、letterSpacing、wordSpacing、textIndent。參數options規定動畫的額外選項，可能的值包括speed（設置動畫的速度）、easing（規定要使用的easing函數）、callback（規定動畫完成之后要執行的函數）、step（規定動畫的每一步在完成之后要執行的函數）、queue（布爾值，指示是否在效果隊列中放置動畫。如果為false，則動畫將立即開始）、specialEasing（來自styles參數的一個或多個CSS屬性的映射以及它們的對應easing函數）。

本例的源文件名是HtmlPageC060.html。

009　使用分組選擇器操作不同元素的相同屬性

本例主要實現了使用分組選擇器操作不同元素的相同屬性。在瀏覽器中顯示該頁面時，單擊“設置輸入框和選擇框的背景顏色”按鈕，將使用分組選擇器同時選擇輸入框和選擇框，并設置其背景顏色為灰色，如圖009-1所示。

主要代碼如下所示：

上面有底紋的代碼是本例的核心代碼。在這部分代碼中，分組選擇器＄（".myClass，input"）能夠選擇匹配類名為“myClass”的元素和所有的“input”元素，兩個選擇器之間要用逗號分隔。

本例的源文件名是HtmlPageC360.html。

010　判斷指定的元素是否嵌套在父元素里面

本例主要通過調用parents（）方法判斷指定的元素是否嵌套在父元素里面。在瀏覽器中顯示該頁面時，將彈出一個消息框顯示判斷結果，即子元素“渝北區”是否在父元素“重慶市”里面，如圖010-1所示。

主要代碼如下所示：

上面有底紋的代碼是本例的核心代碼。在這部分代碼中，parents（）方法用于獲得當前匹配元素集合中每個元素的父元素，使用選擇器進行篩選是可選的。通過選擇器判斷元素是否嵌套一般是獲取元素對象的父級元素，然后通過判斷父級元素的length屬性是否等于1來確定是否嵌套。如果給定一個表示DOM元素集合的jQuery對象，.parents（）方法允許在DOM樹中搜索這些元素的祖先元素，并用從最近的父元素向上的順序排列的匹配元素構造一個新的jQuery對象。元素是按照從最近的父元素向外的順序被返回的。.parents（）和.parent（）方法類似，不同的是后者沿DOM樹向上遍歷單一層級。該方法接受可選的選擇器表達式，與向＄（）方法中傳遞的參數類型相同。如果應用這個選擇器，則將通過檢測元素是否匹配該選擇器對元素進行篩選。parents（）方法的語法聲明如下：

.parents（selector）

其中，參數selector包含用于匹配元素的選擇器表達式。

本例的源文件名是HtmlPageC113.html。

011　獲取指定元素在同類元素中的索引位置

本例主要通過調用index（）方法獲取指定元素在同類元素中的索引位置。在瀏覽器中顯示該頁面時，單擊“獲取元素在同類中的索引位置”按鈕，則將在彈出的消息框中顯示指定的兩個元素在整個類別中的索引位置，如圖011-1所示。這種技術主要針對HTML中的樹、列表、組合框等控件，如果需要對這些控件進行插入、刪除或替換等操作，通常需要獲取其中某個元素的索引值，再根據獲得的索引值進行操作。

主要代碼如下所示：

上面有底紋的代碼是本例的核心代碼。在這部分代碼中，index（）方法用于獲取指定元素相對于其他指定元素的index位置，這些元素可通過jQuery選擇器或DOM元素來指定。如果未找到元素，index（）方法將返回—1。index（）方法的語法聲明如下：

＄（selector）.index（element）

其中，參數element是一個可選參數，規定要獲得index位置的元素，可以是DOM元素或jQuery選擇器。

本例的源文件名是HtmlPageC112.html。

012　將指定的事件和方法綁定到指定的元素

本例主要通過調用bind（）方法實現將指定的事件和方法綁定到指定的元素（此實例即是顯示的圖片）。jQuery框架的優勢之一就是可以將事件和函數綁定到HTML元素上，這樣既簡化了傳統JavaScript代碼冗長的編寫方式，又美化了jQuery代碼的書寫效果，可謂一舉兩得。在瀏覽器中顯示該頁面時，單擊圖片，則將在彈出的消息框中顯示相關的信息，如圖012-1所示。

主要代碼如下所示：

上面有底紋的代碼是本例的核心代碼。在該部分代碼中，bind（）方法用于為被選元素添加一個或多個事件處理程序，并規定事件發生時運行的函數。bind（）方法的語法聲明如下：

＄（selector）.bind（event,data,function）

其中，參數event規定添加到元素的一個或多個事件，可以由空格分隔多個事件，但必須是有效的事件。參數data規定傳遞到函數的額外數據。參數function規定當事件發生時運行的函數。

本例的源文件名是HtmlPageC120.html。

013　將多個事件和方法同時綁定到指定元素

本例主要通過調用bind（）方法實現將多個指定的事件和方法同時綁定到指定的元素（顯示的圖片）。在瀏覽器中顯示該頁面時，如果把鼠標放在圖片上，則下面的文字呈現紅色，如圖013-1的左邊所示；如果鼠標離開圖片，則下面的文字呈現藍色；如果使用鼠標單擊圖片，則下面的文字根據當前狀態自動收縮或展開，如圖013-1的右邊所示。

主要代碼如下所示：

上面有底紋的代碼是本例的核心代碼。在該部分代碼中，bind（）方法用于為被選元素添加一個或多個事件處理程序，并規定事件發生時運行的函數。bind（）方法的基本語法是＄（selector）.bind（event，data，function），但它還有一個替代語法，即本例采用的語法，該語法的聲明如下：

＄（selector）.bind（｛event:function, event:function, ...｝）

其中，參數｛event：function，event：function，...｝規定事件映射，其中包含一個或多個添加到元素的事件，以及當事件發生時運行的函數。

本例的源文件名是HtmlPageC121.html。

014　為元素同時綁定多個事件及其響應方法

本例主要使用on（）方法為li元素同時綁定mouseover和mouseout事件從而實現單行選擇的效果。在瀏覽器中顯示該頁面時，當使用鼠標在列表項li元素上滑動時，該列表項背景呈現綠色；當鼠標離開列表項時，該列表項背景呈現白色，如圖014-1所示，這樣就給用戶產生了單行選擇的效果。

主要代碼如下所示：

上面有底紋的代碼是本例的核心代碼。在這部分代碼中，on（）方法用于為指定元素的一個或多個事件綁定事件處理函數。從jQuery 1.7開始，on（）方法提供了綁定事件處理程序所需的所有功能，用于統一取代以前的bind（）、delegate（）、live（）等事件函數。on（）方法支持直接在目標元素上綁定事件，也支持在目標元素的祖輩元素上委托綁定。在事件委托綁定模式下，即使是執行on（）方法之后新添加的元素，只要它符合條件，綁定的事件處理方法也對其有效。該方法在為同一元素、同一事件類型綁定多個事件處理方法，在觸發事件時，jQuery將按照綁定的先后順序依次執行綁定的事件處理方法。on（）方法的語法聲明如下：

on（ events［, selector ］［, data ］, handler ）

其中，參數events表示一個或多個用空格分隔的事件類型和可選的命名空間，如click等。參數selector是可選的，用于指定哪些后代元素可以觸發綁定的事件，如果該參數為null或被省略，則表示當前元素自身綁定事件（實際觸發者也可能是后代元素，只要事件流能到達當前元素即可）。參數data是可選的，在任意類型觸發事件時，需要通過event.data傳遞給事件處理函數的任意數據。參數handler是指定的事件處理函數（方法）。

本例的源文件名是HtmlPageC074.html。

015　為同類元素添加相同的事件響應方法

本例主要使用delegate（）方法為指定的超鏈接添加事件響應方法從而實現在新窗口中打開超鏈接所指向的網頁。在瀏覽器中顯示該頁面時，單擊“鳳凰網”超鏈接，則將在新窗口中打開鳳凰網，單擊其他幾個超鏈接也將打開獨立的瀏覽器窗口，如圖015-1所示。主要代碼如下所示：

上面有底紋的代碼是本例的核心代碼。在這部分代碼中，delegate（）方法用于為指定的元素（屬于被選元素的子元素）添加一個或多個事件處理程序，并規定當這些事件發生時運行的函數。使用delegate（）方法的事件處理程序適用于當前或未來的元素（比如由腳本創建的新元素）。delegate（）方法的語法聲明如下：

＄（selector）.delegate（childSelector,event,data,function）

其中，參數childSelector規定要附加事件處理程序的一個或多個子元素。參數event規定附加到元素的一個或多個事件，由空格分隔多個事件值，必須是有效的事件。參數data是一個可選參數，規定傳遞到函數的額外數據。參數function規定當事件發生時運行的函數。

本例的源文件名是HtmlPageC128.html。

016　為匹配元素的事件綁定一次性響應方法

本例主要調用one（）方法實現為匹配元素的一個或多個事件綁定一次性事件響應方法（函數）。在瀏覽器中顯示該頁面時，單擊“測試僅響應一次的單擊按鈕事件處理函數”按鈕，則將在下面顯示響應的提示信息，如圖016-1所示。以后再單擊“測試僅響應一次的單擊按鈕事件處理函數”按鈕，將不響應。

主要代碼如下所示：

上面有底紋的代碼是jQuery實現此功能的核心代碼。在這部分代碼中，one（）方法用于為每個匹配元素的一個或多個事件綁定一次性事件響應方法。通過one（）方法綁定的事件處理方法都是一次性的，只有首次觸發事件時才會執行該事件的響應方法；在觸發之后，jQuery就會移除當前事件綁定。可以為同一元素、同一事件類型綁定多個一次性的事件響應方法，在觸發事件時，jQuery會按照綁定的先后順序依次執行綁定的事件響應方法。

此實例的源文件名是HtmlPageC167.html。

017　為動態生成的元素綁定其事件響應方法

本例主要通過調用on（）方法實現為動態產生的元素的相關事件綁定響應方法。在瀏覽器中顯示該頁面時，單擊“單擊此按鈕就會在下面新增一行文字”按鈕，則將在下面顯示一行文字，如圖017-1所示。單擊動態新增的這行文字，則這行文字將會自動消失。

主要代碼如下所示：

上面有底紋的代碼是本例的核心代碼。在這部分代碼中，on（）方法用于在被選元素及子元素上添加一個或多個事件處理程序。on（）方法的語法聲明如下：

＄（selector）.on（event,childSelector,data,function,map）

其中，參數event規定被選元素的一個或多個事件或命名空間，由空格分隔多個事件值，必須是有效的事件。參數childSelector是可選參數，規定只能添加到指定的子元素上的事件處理程序。參數data是可選參數，規定傳遞到方法的額外數據。參數function是可選方法，規定當事件發生時運行的方法。參數map規定事件映射（｛event：function，event：function，...｝），包含要添加到元素的一個或多個事件，以及當事件發生時運行的函數。

使用on（）方法添加的事件處理程序適用于當前及未來動態創建的元素（比如由腳本創建的新元素）。如需移除事件處理程序，應使用off（）方法。

本例的源文件名是HtmlPageC168.html。

018　處理在容器中的指定元素事件是否冒泡

本例主要通過調用event.stopPropagation（）函數實現是否允許或禁止在容器中的指定元素的事件冒泡。事件冒泡就是單擊子節點，會向上觸發父節點、祖先節點的單擊事件。在瀏覽器中顯示該頁面時，body容器中包含“外層div元素”，“外層div元素”容器包含“內層span元素”；單擊“允許span元素的事件冒泡”按鈕，再單擊“內層span元素”，由于三個元素是嵌套的，因此單擊最上層的“內層span元素”會導致三個元素都產生被單擊了的效果，如圖018-1的左邊所示；單擊“禁止span元素的事件冒泡”按鈕，再單擊“內層span元素”，此時只顯示“內層span元素”被單擊了，如圖018-1的右邊所示。

主要代碼如下所示：

上面有底紋的代碼是本例的核心代碼。在這部分代碼中，stopPropagation（）函數用于阻止當前事件在DOM樹上冒泡。根據DOM事件流機制，在元素上觸發的大多數事件都會冒泡傳遞到該元素的所有祖輩元素上，如果這些祖輩元素上也綁定了相應的事件處理方法，就會觸發執行這些方法。使用stopPropagation（）函數可以阻止當前事件向祖輩元素的冒泡傳遞，也就是說該事件不會觸發執行當前元素的任何祖輩元素的任何事件處理方法。該函數只阻止事件向祖輩元素的傳播，不會阻止該元素自身綁定的其他事件處理方法的函數。但是，event.stopImmediatePropagation（）不僅會阻止事件向祖輩元素的傳播，還會阻止該元素綁定的其他（尚未執行的）事件處理方法的執行。

本例的源文件名是HtmlPageC179.html。

019　為document綁定或解綁相關鼠標事件

本例主要使用bind（）和unbind（）方法實現為document綁定鼠標事件和解綁鼠標事件。在瀏覽器中顯示該頁面時，單擊藍色的div塊，即可在頁面上使用鼠標任意拖動該div塊，松開鼠標則該div塊將被放置在新位置，如圖019-1所示。

主要代碼如下所示：

上面有底紋的代碼是本例的核心代碼。在這部分代碼中，bind（）方法用于為被選元素綁定一個或多個事件處理程序，并規定事件發生時運行的方法，關于該方法的語法聲明請參考本書的其他部分。unbind（）方法用于解綁被選元素的事件響應方法，該方法能夠移除所有的或被選的事件響應方法，或者當事件發生時終止指定方法的運行。unbind（）方法適用于任何通過jQuery綁定的事件響應方法。如果沒有規定參數，unbind（）方法會刪除指定元素的所有事件響應方法。unbind（）方法的語法聲明如下：

＄（selector）.unbind（event,function）

其中，參數event是可選參數，規定刪除（解綁）元素的一個或多個事件，由空格分隔多個事件值，如果只規定了該參數，則會刪除綁定到指定事件的所有函數。參數function也是可選參數，規定從元素的指定事件取消綁定的方法名稱。

本例的源文件名是HtmlPageC218.html。

020　創建刪除動態生成的元素及自身的按鈕

本例主要通過為動態生成的按鈕綁定事件響應方法從而實現刪除動態生成的元素及刪除按鈕自身。在瀏覽器中顯示該頁面時，單擊“增加”按鈕，則將在下面另起一行增加一個“瀏覽”和“刪除”按鈕，單擊動態生成的“刪除”按鈕，則將刪除剛才動態生成的“瀏覽”和“刪除”按鈕，如圖020-1所示。

主要代碼如下所示：

上面有底紋的代碼是本例的核心代碼。在這部分代碼中，after（）方法用于在被選元素后插入指定的內容。remove（）方法用于移除被選元素，包括所有文本和子節點。bind（）方法用于為被選元素添加一個或多個事件處理程序，并規定事件發生時運行的響應方法。關于這些方法的語法聲明請參考本書的其他部分。

本例的源文件名是HtmlPageC232.html。

021　設置元素屬性創建只能單擊一次的按鈕

本例主要通過設置元素的disabled屬性實現在用戶單擊按鈕后使按鈕變成不可用狀態。在瀏覽器中顯示該頁面時，單擊“禁止此按鈕”按鈕，將彈出一個消息框，此時按鈕已經被禁止；再次單擊“禁止此按鈕”按鈕，將無反應，如圖021-1所示。這種場景主要出現在客戶端（瀏覽器）向服務器提交數據的時候，如果用戶不斷地連續單擊按鈕提交數據，會嚴重影響服務器的資源，所以一般用Ajax或者表單提交的時候，都會在首次單擊按鈕后將按鈕變成灰色不可再次單擊。

主要代碼如下所示：

上面有底紋的代碼是jQuery實現此功能的核心代碼。在這部分代碼中，＄（this）.attr（"disabled"，"true"）用于設置按鈕為禁止狀態，addClass（"mydisabled"）用于設置按鈕在被禁止后的樣式。

本例的源文件名是HtmlPageC038.html。

022　在指定元素的后面補充相同類型的內容

本例主要通過調用appendTo（）方法實現在指定元素的后面補充相同類型的內容。在瀏覽器中顯示該頁面時，如圖022-1的左邊所示，“商品名稱：”是空白；單擊“為下面這張圖片添加商品名稱”按鈕，則將在“商品名稱：”后面補充內容，如圖022-1的右邊所示。

主要代碼如下所示：

上面有底紋的代碼是本例的核心代碼。在這部分代碼中，appendTo（）方法用于在被選元素的結尾（仍然在內部）插入指定內容。appendTo（）方法的語法聲明如下：

＄（content）.appendTo（selector）

其中，參數content規定要插入的內容（可包含HTML標簽）。參數selector規定把內容追加到哪個元素上。需要說明的是：append（）方法和appendTo（）方法執行的任務相同，不同之處在于：內容和選擇器的位置，以及append（）能夠使用函數來附加內容。

本例的源文件名是HtmlPageC114.html。

023　在被選元素的開始位置插入指定的內容

本例主要通過調用prependTo（）方法實現在指定元素的前面插入新的HTML元素。在瀏覽器中顯示該頁面時，將顯示如圖023-1的左邊所示的一幅圖片；單擊“在此按鈕的上面插入一幅圖片”按鈕，則將在此按鈕的上面插入一幅圖片，如圖023-1的右邊所示。

主要代碼如下所示：

上面有底紋的代碼是本例的核心代碼。在這部分代碼中，prependTo（）方法用于在被選元素的開頭（仍位于內部）插入指定內容。prependTo（）方法的語法聲明如下：

＄（content）.prependTo（selector）

其中，參數content規定要插入的內容（可包含HTML標簽）。參數selector規定在何處插入內容。需要說明的是：prepend（）和prependTo（）方法作用相同，差異在于語法，即內容和選擇器的位置，以及prepend（）能夠使用函數來插入內容。

本例的源文件名是HtmlPageC115.html。

024　在被選元素的前邊插入新的HTML標記

本例主要使用insertBefore（）方法實現在某HTML標記的前邊插入新的HTML標記。在瀏覽器中顯示該頁面時，在未插入新圖片之前如圖024-1的左邊所示；單擊“在下面這張圖片的前邊插入新圖片”按鈕，則將在該圖片的前邊新插入一張圖片，如圖024-1的右邊所示。

主要代碼如下所示：

上面有底紋的代碼是本例的核心代碼。在這部分代碼中，insertBefore（）方法用于在被選元素之前插入HTML標記或已有的元素，如果該方法用于已有元素，這些元素會被從當前位置移走，然后被添加到被選元素之前。insertBefore（）方法的語法聲明如下：

＄（content）.insertBefore（selector）

其中，參數content規定要插入的內容，可能的值包括選擇器表達式和HTML標記。參數selector規定在何處插入被選元素。

此實例的源文件名是HtmlPageC089.html。

025　在被選元素的末尾添加新的HTML標記

本例主要使用append（）方法實現在一段HTML標記的后面添加新的HTML標記。在瀏覽器中顯示該頁面時，在未新增加圖片之前如圖025-1的左邊所示；單擊“在下面這張圖片的后面新增一張圖片”按鈕，則將在那張圖片的后面添加一張圖片，如圖025-1的右邊所示。

主要代碼如下所示：

上面有底紋的代碼是本例的核心代碼。在這部分代碼中，append（）方法用于在被選元素的結尾（仍然在內部）插入指定內容，append（）方法和appendTo（）方法執行的任務相同，不同之處在于內容的位置和選擇器。append（）方法的語法聲明如下：

＄（selector）.append（content）

其中，參數content規定要插入的內容（可包含HTML標簽）。

本例的源文件名是HtmlPageC090.html。

026　清除元素的HTML標記同時保留元素內容

本例主要使用正則表達式結合each（）方法實現在已經存在的元素中清除元素的HTML標簽同時保留元素內容。在瀏覽器中顯示該頁面時，表格在未清除表格線之前的效果如圖026-1所示；單擊“清空所有的表格線”按鈕，則表格將僅保留文字內容，如圖026-2所示。

主要代碼如下所示：

上面有底紋的代碼是本例的核心代碼。在該部分代碼中，each（）方法用于為每個匹配元素規定運行的函數，當使用each（）方法遍歷函數時，如果需要提前終止遍歷操作，可以通過返回false值來終止。replace（）方法用于執行正則表達式的替換操作。關于這些方法的語法聲明請參考本書的其他部分。

本例的源文件名是HtmlPageC122.html。

027　判斷某個指定ID的HTML標記是否存在

本例主要通過判斷對象的length屬性是否大于0來確定該對象是否已經存在。在jQuery里，如果要判斷某個指定ID的HTML標記，比如ID為myimage的標記是否已經存在，可能有很多人會像下面這樣來判斷：

if（＄（"＃myimage"））｛alert（"存在ID為myimage的標簽"）;｝

但是，上面的這種方法是錯誤的！親自測試一下就會明白，因為＄（"＃myimage"）不管對象是否存在都會返回一個object對象。正確的方法應該是下面這樣：

if（＄（"＃myimage"）.length>0）｛alert（"存在ID為myimage的標簽"）;｝

在瀏覽器中顯示該頁面時，將在彈出的消息框中顯示“不存在ID為myimage的標簽”，如圖027-1所示。如果采用被注釋的代碼進行測試，將沒有任何反應。

主要代碼如下所示：

上面有底紋的代碼是本例的核心代碼。在此實例中，length屬性用于獲取在jQuery對象中元素的數目。

本例的源文件名是HtmlPageC085.html。

028　獲取outerHTML整個節點的HTML內容

本例主要使用prop（）方法實現獲取outerHTML整個節點的HTML內容和文本，包括節點自身。當在瀏覽器中顯示該頁面時，將在彈出的消息框中顯示獲取的頁面HTML內容，如圖028-1所示。主要代碼如下所示：

上面有底紋的代碼是本例的核心代碼。在這部分代碼中，outerHTML可以用來更改或獲取元素內所有的HTML和文本內容，包含引用該方法元素自身的標簽。prop（）方法用于設置或獲取當前jQuery對象所匹配的元素的屬性值。在進行節點復制時，通常需要對節點的HTML內容進行讀取和判斷，jQuery.html（）只能獲取當前節點下的HTML代碼，并不包含節點本身的代碼，因此常常需要通過jQuery.prop（"outerHTML"）的方式來解決這一問題。

本例的源文件名是HtmlPageC129.html。

029　修改無序列表ul的首項末項及其指定項

本例主要實現了修改無序列表ul的首項、末項和任意指定項的顯示內容。在瀏覽器中顯示該頁面時，修改前的無序列表ul的內容如圖029-1所示；單擊“修改首項”、“修改末項”、“修改第3項”按鈕，則將實現按鈕標題所示的功能，修改后的無序列表ul的內容如圖029-2所示。主要代碼如下所示：

上面有底紋的代碼為jQuery實現此功能的核心代碼。在該部分代碼中，“＄（"＃myul li：first"）”用于獲取無序列表ul的首項；“＄（"＃myul li：last"）”用于獲取無序列表ul的末項；“＄（"＃myul li"）.eq（2）”用于獲取無序列表ul的第3項；“html（"3、中山市"）”用于設置元素的HTML內容。

本例的源文件名是HtmlPageC023.html。

030　根據指定條件刪除無序列表ul的節點

本例主要調用了remove（）方法實現根據指定的條件刪除無序列表的節點元素。在瀏覽器中顯示該頁面時，“超大城市”中的“北京”如圖030-1的左邊所示；單擊“在超大城市中刪除北京”按鈕，則將從“超大城市”中刪除“北京”，如圖030-1的右邊所示。單擊其他按鈕則會實現按鈕標題所示的功能。主要代碼如下所示：

上面有底紋的代碼是本例的核心代碼。在該部分代碼中，remove（）方法用于移除被選元素，包括所有文本和子節點。append（）方法用于在被選元素的結尾（仍然在內部）插入指定內容。empty（）方法則從被選元素中移除所有內容，包括所有文本和子節點。remove（）方法的語法聲明如下：

jQueryObject.remove（ ［ selector ］ ）

其中，參數selector是可選參數，它是String類型指定的選擇器字符串，用于篩選符合該選擇器的元素。如果沒有指定selector參數，則移除當前匹配元素中的所有元素。

本例的源文件名是HtmlPageC119.html。

031　在相同結構的無序列表ul之間移動節點

本例主要通過調用clone（）等方法實現在兩個相同結構的無序列表間移動節點。在瀏覽器中顯示該頁面時，節點分布如圖031-1的左邊所示；單擊“杭州”節點，則“杭州”節點將從“特大城市：”移動到“超大城市：”，如圖031-1的右邊所示，反之亦然。主要代碼如下所示：

上面有底紋的代碼是本例的核心代碼。在該部分代碼中，remove（）方法用于移除被選元素，包括所有文本和子節點，該方法不會把匹配的元素從jQuery對象中刪除，因而可以在將來再使用這些匹配的元素。但除了這個元素本身得以保留之外，remove（）不會保留元素的jQuery數據，其他的比如綁定的事件、附加的數據等都會被移除。clone（）方法用于生成被選元素的副本，包含子節點、文本和屬性，注意只是副本。appendTo（）方法用于在被選元素的結尾插入指定內容。關于這些方法的語法聲明請參考本書的其他部分。

本例的源文件名是HtmlPageC117.html。

032　獲取在無序列表ul中任意位置的li元素

本例主要使用html（）方法實現獲取并修改ul中首個li元素或者任意位置的li元素的內容。在瀏覽器中顯示該頁面時，無序列表ul中的首個li元素是一張酒店圖片，如圖032-1所示；在文檔加載完成后，該無序列表ul中的首個li元素所展示的酒店圖片將被修改為一張人物照片，如圖032-2所示。

主要代碼如下所示：

上面有底紋的代碼為jQuery實現此功能的核心代碼。在這部分代碼中，“＄（"＃myul li"）.eq（0）”用于獲取在ul中的首個li元素。html（）方法用于設置該元素的內容（inner HTML），如果該方法未設置參數，則返回被選元素的當前內容。eq（）方法用于獲取當前jQuery對象所匹配的元素中指定索引的元素，并返回封裝該元素的jQuery對象。eq（）方法的語法聲明如下：

jQueryObject.eq（index）

其中，參數index表示Number類型的索引值，從0開始計數。jQuery 1.4新增支持參數index可以為負數。如果index為負數，則將其視作length+index，這里的length指的是匹配到的元素的個數（負數的index也可理解為從后往前計數）。

本例的源文件名是HtmlPageC087.html。

033　獲取無序列表ul指定位置的節點內容

本例主要通過細化jQuery的選擇器表達式的元素索引值獲取無序列表ul指定位置的節點及其內容。在瀏覽器中顯示該頁面時，單擊“顯示第二種書名”按鈕，則將獲取無序列表ul的第二個節點內容，并將結果顯示在消息框中，如圖033-1所示。主要代碼如下所示：

上面有底紋的代碼是本例的核心代碼。在這部分代碼中，“＄（"ul li：eq（1）"）”用于獲取無序列表ul的第二個節點。jQuery使用CSS選擇器來選取HTML元素的格式有下列3種：

（1）＄（"p"）選取<p>元素。

（2）＄（"p.intro"）選取所有class="intro"的<p>元素。

（3）＄（"p＃demo"）選取所有id="demo"的<p>元素。

jQuery使用XPath表達式來選擇帶有給定屬性的元素的格式有下列4種：

（1）＄（"［href］"）選取所有帶有href屬性的元素。

（2）＄（"［href='＃'］"）選取所有帶有href值等于"＃"的元素。

（3）＄（"［href！='＃'］"）選取所有帶有href值不等于"＃"的元素。

（4）＄（"［href＄='.jpg'］"）選取所有href值以".jpg"結尾的元素。

其他常用的jQuery選擇器實例如表033-1所示。

eq（）方法用于獲取指定索引位置的元素。text（）方法用于設置或獲取被選元素的文本內容，當該方法用于獲取一個值時，它會返回所有匹配元素的組合的文本內容（會刪除HTML標記），當該方法用于設置值時，它會覆蓋被選元素的所有內容，其語法聲明如下：

＄（selector）.text（content）

其中，參數content規定被選元素的新文本內容，特殊字符將會被編碼。

本例的源文件名是HtmlPageC130.html。

034　獲取和設置在無序列表ul中的節點樣式

本例主要通過調用find（）方法和css（）方法實現查找無序列表ul中指定類型的子節點并設置其樣式。在瀏覽器中顯示該頁面時，無序列表ul的子節點在未設置背景前的樣式如圖034-1的左邊所示，單擊“設置子節點背景顏色”按鈕，則將設置無序列表的兩級子節點的背景顏色，如圖034-1的右邊所示。

主要代碼如下所示：

上面有底紋的代碼是jQuery實現此功能的核心代碼。在這部分代碼中，“＄（'li'）.find（'.level-1'）”用于獲取CSS樣式類型為“level-1”的子節點（li元素）。在jQuery中，find（）方法用于獲得當前元素集合中每個元素的后代，通過選擇器、jQuery對象或元素來篩選。如果給定一個表示DOM元素集合的jQuery對象，find（）方法允許在DOM樹中搜索這些元素的后代，并用匹配元素來構造一個新的jQuery對象。find（）與children（）方法類似，不同的是后者僅沿著DOM樹向下遍歷單一層級。find（）方法第一個明顯特征是：其接受的選擇器表達式與向＄（）函數傳遞的表達式的類型相同，將通過測試這些元素是否匹配該表達式來對元素進行過濾。find（）方法的語法聲明如下：

find（selector）

其中，參數selector包含供匹配當前元素集合的選擇器表達式。

css（）方法用于設置或返回被選元素的一個或多個樣式屬性。如需獲取指定的CSS屬性的值，應使用如下語法：css（"propertyname"）；如需設置指定的CSS屬性，應使用如下語法：css（"propertyname"，"value"）。

本例的源文件名是HtmlPageC131.html。

035　根據父元素篩選并設置無序列表ul的節點

本例主要通過調用parent（）方法實現根據父元素指定的條件篩選無序列表ul的節點并設置其樣式。在瀏覽器中顯示該頁面時，無序列表ul的長壽區及其街道節點在未設置顏色和字體大小前的樣式如圖035-1的左邊所示，單擊“設置長壽區的街道為紅色”按鈕，則將設置長壽區的兩級子節點的文本顏色為紅色，并將字體大小設置為超大號，如圖035-1的右邊所示。

主要代碼如下所示：

上面有底紋的代碼是本例的核心代碼。在這部分代碼中，parent（）方法用于獲得當前匹配元素集合中每個元素的父元素，使用選擇器進行篩選是可選的。如果給定一個表示DOM元素集合的jQuery對象，parent（）方法允許在DOM樹中搜索這些元素的父元素，并用匹配元素構造一個新的jQuery對象。parents（）和parent（）方法類似，不同的是后者沿DOM樹向上遍歷單一層級。該方法接受可選的選擇器表達式，與向＄（）函數中傳遞的參數類型相同。如果應用這個選擇器，則將通過檢測元素是否匹配該選擇器對元素進行篩選。parent（）方法的語法聲明如下：

parent（selector）

其中，參數selector包含用于匹配元素的選擇器表達式。

本例的源文件名是HtmlPageC132.html。

036　在樹結構中查找離當前節點最近的父節點

本例主要使用closest（）方法實現在樹結構中查找離當前節點最近的父節點。在瀏覽器中顯示該頁面時，兩張圖片的說明文字背景顏色暫無，如圖036-1的左邊所示；分別單擊兩張圖片，則兩張圖片的說明文字背景顏色將分別呈現淺綠色和淺藍色，如圖036-1的右邊所示，即分別設置兩張圖片的父節點div塊的背景顏色。有關此實例的主要代碼如下所示：

上面有底紋的代碼是本例的核心代碼。在這部分代碼中，closest（）方法用于獲得匹配選擇器的第一個父元素，從當前元素開始沿DOM樹向上。如果給定表示DOM元素集合的jQuery對象，closest（）方法允許檢索DOM樹中的這些元素以及它們的父元素，并用匹配元素構造新的jQuery對象。parents（）和closest（）方法都是沿DOM樹向上遍歷，二者之間的差異如表036-1所示。

此實例的源文件名是HtmlPageC146.html。

037　判斷鼠標是否單擊了無序列表ul的節點

本例主要實現了調用is（）方法判斷鼠標是否單擊了無序列表ul的節點（列表項）。在瀏覽器中顯示該頁面時，單擊無序列表ul的某個節點，則該節點的背景將呈現綠色；單擊無序列表ul的非節點部分，則該無序列表ul的背景將呈現紅色，如圖037-1所示。主要代碼如下所示：

上面有底紋的代碼是本例的核心代碼。在該部分代碼中，is（）方法用于根據選擇器、元素或jQuery對象來檢測匹配元素集合，如果這些元素中至少有一個元素匹配給定的參數，則返回true。與其他篩選方法不同，is（）方法不創建新的jQuery對象。相反，它允許在不修改jQuery對象內容的情況下對其進行檢測。這在callback內部通常比較有用，比如事件處理程序。is（）方法的語法聲明如下：

is（selector）

其中，參數selector包含匹配元素的選擇器表達式。

本例的源文件名是HtmlPageC143.html。

038　獲取在無序列表ul中的li元素的個數

本例主要使用size（）方法獲取在無序列表ul中的li元素個數。在瀏覽器中顯示該頁面時，單擊“獲取無序列表ul的li元素個數”按鈕，則將在下面以粗體字顯示無序列表ul的li元素個數，如圖038-1所示。主要代碼如下所示：

上面有底紋的代碼是本例的核心代碼。在這部分代碼中，size（）方法用于獲取被jQuery選擇器匹配的元素的數量。size（）是jQuery提供的方法，而length是屬性（不帶括號），這兩者在使用上類似。

本例的源文件名是HtmlPageC157.html。

039　在無序列表ul中篩選有子級的li元素

本例主要通過調用has（）方法實現在無序列表ul中篩選有子級的li元素。在瀏覽器中顯示該頁面時，有子級的li元素未設置背景之前如圖039-1的左邊所示，單擊“設置有ul子級的li元素背景為淺藍色”按鈕，則將篩選該無序列表ul中有子級的li元素并設置其背景為淺藍色，如圖039-1的右邊所示。

主要代碼如下所示：

上面有底紋的代碼是本例的核心代碼。在這部分代碼中，has（）方法用于將匹配元素集合縮減為擁有匹配指定選擇器或DOM元素的后代的子集。如果給定一個表示DOM元素集合的jQuery對象，has（）方法用匹配元素的子集來構造一個新的jQuery對象，所使用的選擇器用于檢測匹配元素的后代；如果任何后代元素匹配該選擇器，該元素將被包含在結果中。has（）方法的語法聲明如下：

has（selector）

其中，參數selector包含匹配元素的選擇器表達式。

本例的源文件名是HtmlPageC161.html。

040　篩選無序列表ul的奇數或偶數行的li元素

本例主要通過調用filter（）方法實現在無序列表ul中篩選奇數行或偶數行的li元素。在瀏覽器中顯示該頁面時，單擊“設置偶數行li元素背景顏色”按鈕，則將篩選該無序列表ul中偶數行的li元素并設置其背景為淺藍色，如圖040-1的左邊所示；單擊“設置奇數行li元素背景顏色”按鈕，則將篩選該無序列表ul中奇數行的li元素并設置其背景為淺綠色，如圖040-1的右邊所示。

主要代碼如下所示：

上面有底紋的代碼是本例的核心代碼。在這部分代碼中，filter（）方法用于將匹配元素集合縮減為匹配指定選擇器的元素。如果給定表示DOM元素集合的jQuery對象，filter（）方法會用匹配元素的子集構造一個新的jQuery對象。所使用的選擇器會測試每個元素；所有匹配該選擇器的元素都會包含在結果中。filter（）方法的語法聲明如下：

filter（selector）

其中，參數selector包含供匹配當前元素集合的選擇器表達式。

filter（）方法的另一種形式是：通過函數而不是選擇器來篩選元素。對于每個元素，如果該函數返回true，則元素會被包含在已篩選集合中，否則會排除這個元素。注意：無序列表ul的列表項的索引以0開始。

本例的源文件名是HtmlPageC162.html。

041　篩選無序列表ul的某行之前或之后的li元素

本例主要通過調用：gt選擇器和：lt選擇器實現在無序列表ul中篩選某行之前或之后的li元素。在瀏覽器中顯示該頁面時，單擊“設置第3行之后li元素背景顏色”按鈕，則將篩選該無序列表ul中第3行之后的li元素并設置其背景為淺藍色，如圖041-1的左邊所示；單擊“設置第3行之前li元素背景顏色”按鈕，則將篩選該無序列表ul中第3行之前的li元素并設置其背景為淺綠色，如圖041-1的右邊所示。主要代碼如下所示：

上面有底紋的代碼是本例的核心代碼。在這部分代碼中，：gt選擇器用于選取index值高于指定數的元素。index值從0開始。此選擇器經常與其他元素／選擇器一起使用，來選擇指定的組中特定序號之后的元素。：gt選擇器的語法聲明如下：

＄（":gt（index）"）

其中，參數index規定要選擇的元素。

：lt選擇器用于選取小于指定index值的元素。index值從0開始。該選擇器經常與其他元素／選擇器一起使用，來選擇指定的組中特定序號之前的元素。：lt選擇器的語法聲明如下：

＄（":lt（index）"）

其中，參數index規定要選擇的元素。

本例的源文件名是HtmlPageC174.html。

042　在無序列表ul中實現根據內容篩選li元素

本例主要通過調用：contains（）選擇器實現根據內容篩選在無序列表ul中符合條件的li元素。在瀏覽器中顯示該頁面時，單擊“篩選無序列表中的牛肉商品”按鈕，則將篩選該無序列表ul中包含牛肉商品的li元素并設置其背景為淺藍色，如圖042-1所示。

主要代碼如下所示：

上面有底紋的代碼是本例的核心代碼。在這部分代碼中，：contains（）選擇器用于選取包含指定字符串的元素。該字符串可以是直接包含在元素中的文本，或者被包含于子元素中。此選擇器經常與其他元素／選擇器一起使用，來選擇指定的組中包含指定文本的元素。：contains（）選擇器的語法聲明如下：

＄（":contains（text）"）

其中，參數text規定要查找的文本。

本例的源文件名是HtmlPageC175.html。

043　在無序列表ul中倒序查找符合條件的li元素

本例主要通過調用子元素過濾選擇器：nth-last-child（n）選取每個父元素下的倒數第n個子元素或者符合特定順序規則的元素并設置這些li元素的背景顏色。在瀏覽器中顯示該頁面時，單擊“查找每個無序列表的倒數第3個li元素”按鈕，則將在三個無序列表中設置倒數第3行li元素的背景顏色為淺藍色，如圖043-1所示。

主要代碼如下所示：

上面有底紋的代碼是本例的核心代碼。在這部分代碼中，：nth-last-child（n）選擇器用于匹配作為父元素下的倒數第n個子元素或符合特定順序規則的元素，將其封裝為jQuery對象并返回。與該選擇器相對的是：nth-child（n）選擇器，用于匹配作為父元素下的第n個子元素或符合特定順序規則的元素。：nth-last-child（n）選擇器的語法聲明如下：

＄（"selector:nth-last-child（n）"）

其中，參數selector表示一個有效的選擇器。參數n表示指定的序號，從1開始計數。參數n一般是一個自然數，表示作為父元素下的倒數第n個子元素。例如：：nth-last-child（2）表示作為父元素的倒數第2個子元素。參數n也可以為特定的表達式（表達式中只能使用字母n表示自然數，大小寫均可）。例如：：nth-last-child（odd）表示匹配作為父元素倒數順序的奇數（第1，3，5，7，…）子元素的元素；：nth-last-child（even）表示匹配作為父元素倒數順序的偶數（第2，4，6，8，…）子元素的元素；：nth-last-child（3n）表示匹配作為父元素倒數順序的第3n個子元素的元素（n表示包括0在內的自然數，下同）；：nth-last-child（3n+1）表示匹配作為父元素倒數順序的第3n+1個子元素的元素；：nth-last-child（3n+2）表示匹配作為父元素倒數順序的第3n+2個子元素的元素。

本例的源文件名是HtmlPageC178.html。

044　選擇無序列表ul某個li元素之前（后）的元素

本例主要使用prevAll（）和nextAll（）等方法實現選擇在無序列表ul中某個li元素之前（或之后）的所有元素。在瀏覽器中顯示該頁面時，單擊“設置第三項之后的所有選項顏色”按鈕，則出現如圖044-1所示的效果；單擊“設置第三項之前的所有選項顏色”按鈕，則出現如圖044-2所示的效果。

主要代碼如下所示：

上面有底紋的代碼是本例的核心代碼。在這部分代碼中，prevAll（）方法用于獲得當前匹配元素集合中每個元素的前面的同胞元素，使用選擇器進行篩選是可選的。如果應用這個選擇器，則將通過檢測元素是否匹配該選擇器對元素進行篩選。prevAll（）方法的語法聲明如下：

prevAll（selector）

其中，參數selector包含用于匹配元素的選擇器表達式。

nextAll（）方法用于獲得匹配元素集合中每個元素的所有跟隨的同胞元素，由選擇器篩選是可選的。如果應用選擇器，則將通過檢測元素是否匹配來對它們進行篩選。nextAll（）方法的語法聲明如下：

nextAll（selector）

其中，參數selector包含用于匹配元素的選擇器表達式。

本例的源文件名是HtmlPageC251.html。

045　選擇無序列表ul指定范圍內的多個li元素

本例主要使用slice（）方法實現選擇無序列表ul指定范圍內的多個li元素。在瀏覽器中顯示該頁面時，單擊“設置第三項后的所有選項顏色”按鈕，效果如圖045-1所示；單擊“設置最后四項的選項顏色”按鈕，效果如圖045-2所示。

主要代碼如下所示：

上面有底紋的代碼是本例的核心代碼。在這部分代碼中，＄（'ul li'）.slice（2）用于選擇無序列表從第三項開始之后的所有選項，因為基數是0，所以該參數是2。＄（'ul li'）.slice（-4）用于選擇無序列表的最后四個選項。slice（）方法通常有兩個參數，如果兩個參數都指定，則表示選擇指定范圍內的選項。slice（）方法的語法聲明如下：

slice（startIndex［，endIndex］）

其中，參數startIndex用于指定選取的起始索引，從0開始算起。參數endIndex是可選參數，用于指定結束索引（不包括該索引位置的元素）。如果startIndex為負數，則表示startIndex+length，length表示匹配的元素個數（也可理解為從后向前計數）。如果endIndex為負數，則表示endIndex+length，length表示匹配的元素個數（也可理解為從后向前計數）。如果省略endIndex參數，則一直選取到集合末尾。

本例的源文件名是HtmlPageC245.html。

046　根據輸入字符智能匹配符合要求的li元素

本例主要使用jquery.fastLiveFilter.js插件來實現根據輸入字符智能匹配符合要求的li元素。在瀏覽器中顯示該頁面時，如果在輸入框中輸入s，則將在下面顯示無序列表中包含s的li元素，如圖046-1的左邊所示；如果在輸入框中輸入b，則將在下面顯示無序列表中包含b的li元素，如圖046-1的右邊所示；即它會根據輸入的字符智能匹配符合要求的li元素并自動列出來。

主要代碼如下所示：

上面有底紋的代碼是本例的核心代碼。在這部分代碼中，fastLiveFilter（）方法即是jquery.fastLiveFilter.js插件的主要內容，使用時只要按照下列格式進行調用即可：＄（'＃search_input'）.fastLiveFilter（'＃search_list'）。

本例的源文件名是HtmlPageC369.html。

047　在無序列表ul中每隔3行設置li元素的背景色

本例主要通過調用子元素過濾選擇器：nth-child（index／even／odd）選取每個父元素下的第index個子元素或者奇偶元素，從而實現在無序列表ul中每隔3行設置li元素的背景顏色。在瀏覽器中顯示該頁面時，單擊“每隔3行設置li元素的背景顏色”按鈕，則將在該無序列表ul中每隔3行設置li元素的背景顏色為淺藍色，如圖047-1所示。主要代碼如下所示：

上面有底紋的代碼是本例的核心代碼。在這部分代碼中，：nth-child（index／even／odd）用于選取每個父元素下的第index個子元素或者奇偶元素。與該選擇器相對的是：nth-last-child（n）選擇器，用于匹配作為父元素下的倒數第n個（或符合特定倒數順序的）子元素。：nth-child（n）選擇器與：eq（index）選擇器的不同之處在于，：eq（index）選擇器只匹配一個元素，并且是所有匹配到的元素中的第index+1個元素（索引index從0開始算起）；：nth-child（n）選擇器則需要判斷匹配到的元素是否是其父元素的第n個子元素或符合其他特定要求（序號n從1開始算起），如果是就保留，否則將被舍棄。：nth-child（n）選擇器的語法聲明如下：

＄（"selector:nth-child（n）"）

其中，參數selector代表一個有效的選擇器。參數n指定序號，從1開始計數。參數n一般是一個自然數，表示作為父元素下的第n個子元素。例如：：nth-child（2）表示作為父元素的第2個子元素。參數n也可以為特定的表達式（表達式中只能使用字母n表示自然數，大小寫均可）。例如，：nth-child（odd）表示匹配作為父元素的奇數（第1、3、5、7、…個）子元素的元素；：nth-child（even）表示匹配作為父元素的偶數（第2、4、6、8、…個）子元素的元素；：nth-child（3n）表示匹配作為父元素的第3n個子元素的元素（n表示包括0在內的自然數，下同）；：nth-child（3n+1）表示匹配作為父元素的第3n+1個子元素的元素；：nth-child（3n+2）表示匹配作為父元素的第3n+2個子元素的元素。

本例的源文件名是HtmlPageC177.html。

048　為指定的元素添加或移除指定的CSS樣式

本例主要調用addClass（）和removeClass（）方法實現為指定的元素添加或移除指定的CSS樣式。在瀏覽器中顯示該頁面時，如果文本輸入框獲得焦點，將以紅字樣式顯示內容；如果文本輸入框失去焦點，將以黑字樣式顯示內容，如圖048-1所示。

主要代碼如下所示：

上面有底紋的代碼是本例的核心代碼。在這部分代碼中，addClass（）方法用于向被選元素添加一個或多個CSS類。如果需要添加多個類，應使用空格分隔類名。該方法不會移除已存在的class屬性，僅僅添加一個或多個class屬性。addClass（）方法的語法聲明如下：

＄（selector）.addClass（class）

其中，參數class規定一個或多個class名稱。

removeClass（）方法用于從被選元素移除一個或多個類。removeClass（）方法的語法聲明如下：

＄（selector）.removeClass（class）

其中，參數class是一個可選參數，該參數規定要移除的class名稱。如需移除若干類，應使用空格來分隔類名。如果不設置該參數，則會移除所有類。

本例的源文件名是HtmlPageC166.html。

049　在兩種不同風格的CSS樣式之間自動切換

本例主要調用了toggleClass（）方法實現在兩種不同風格的CSS樣式之間自動切換。在瀏覽器中顯示該頁面時，表格的文字顏色是黑色，如圖049-1所示，單擊“改變表格的文字顏色”按鈕，則表格的文字顏色變成藍色，如圖049-2所示。再次單擊“改變表格的文字顏色”按鈕，則表格的文字顏色又從藍色變成黑色，如圖049-1所示。

主要代碼如下所示：

上面有底紋的代碼是本例的核心代碼。在該部分代碼中，toggleClass（）方法對添加和移除被選元素的一個或多個類進行切換。該方法檢查每個元素中指定的類。如果不存在則添加類，如果已設置則刪除之，即所謂的切換效果。toggleClass（）方法的語法聲明如下：

＄（selector）.toggleClass（classname,function（index,currentclass）,switch）

其中，參數classname規定添加或移除的一個或多個類名，如需規定若干個類，應使用空格分隔類名。參數function（index，currentclass）是可選參數，該參數規定返回需要添加／刪除的一個或多個類名的函數。參數index返回集合中元素的index位置。參數currentclass返回被選元素的當前類名。參數switch是可選參數，它是一個布爾值，規定是否僅僅添加（true）或移除（false）類。

本例的源文件名是HtmlPageC172.html。