各種第2章jquery選擇器的使用_第1頁
各種第2章jquery選擇器的使用_第2頁
各種第2章jquery選擇器的使用_第3頁
各種第2章jquery選擇器的使用_第4頁
各種第2章jquery選擇器的使用_第5頁
免費(fèi)預(yù)覽已結(jié)束，剩余40頁可下載查看

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

2.4.2元素選擇器（element）

元素選擇器是根據(jù)元素名稱匹配相應(yīng)的元素。元素選擇器指向的是DOM元素的標(biāo)記名，也就是說元素選擇器是根據(jù)元素的標(biāo)記名選擇的?？梢园言氐臉?biāo)記名理解成學(xué)生的姓名，在一個(gè)學(xué)校中可能有多個(gè)姓名為“劉偉”的學(xué)生，但是姓名為“吳語”的學(xué)生也許只有一個(gè)，因此通過元素選擇器匹配到的元素是可能有多個(gè)的，也可能只有一個(gè)。多數(shù)情況下，元素選擇器匹配的是一組元素。元素選擇器的使用方法如下：

$("element");其中，element是要獲取的元素的標(biāo)記名。例如，要獲取全部div元素，可以使用下面的jQuery代碼：

$("div");【例2-2】在頁面中添加兩個(gè)<div>標(biāo)記和一個(gè)按鈕，通過單擊按鈕來獲取這兩個(gè)<div>，并修改它們的內(nèi)容。（1）創(chuàng)建一個(gè)名稱為index.html的文件，在該文件的<head>標(biāo)記中應(yīng)用下面的語句引入jQuery庫。<scripttype="text/javascript"src="../js/jquery-1.11.1.min.js"></script>（2）在頁面的<body>標(biāo)記中，添加兩個(gè)<div>標(biāo)記和一個(gè)按鈕，代碼如下：<div><imgsrc="images/strawberry.jpg"/>這里種植了一棵草莓</div><div><imgsrc="images/fish.jpg"/>這里養(yǎng)殖了一條魚</div><inputtype="button"id="button"value="若干年后"/>（3）在引入jQuery庫的代碼下方編寫jQuery代碼，實(shí)現(xiàn)單擊按鈕來獲取全部<div>元素，并修改它們的內(nèi)容，具體代碼如下：<scripttype="text/javascript"> $(document).ready(function(){ $("#button").click(function(){ //為按鈕綁定單擊事件$("div").eq(0).html("<imgsrc='images/strawberry1.jpg'/>這里長出了一片草莓");//獲取第一個(gè)div元素$("div").get(1).innerHTML="<imgsrc='images/fish1.jpg'/>這里的魚沒有了";//獲取第二個(gè)div元素

}); });</script>在上面的代碼中，使用元素選擇器獲取了一組div元素的jQuery包裝集，它是一組Object對象，存儲方式為[ObjectObject]，但是這種方式并不能顯示出單獨(dú)元素的文本信息，需要通過索引器來確定要選取哪個(gè)div元素，在這里分別使用了兩個(gè)不同的索引器eq()和get()。這里的索引器類似于房間的門牌號，所不同的是，門牌號是從1開始計(jì)數(shù)的，而索引器是從0開始計(jì)數(shù)的。說明：在本實(shí)例中使用了兩種方法設(shè)置元素的文本內(nèi)容，html()方法是jQuery的方法，innerHTML方法是DOM對象的方法。這里使用了$(document).ready()方法，當(dāng)頁面元素載入就緒時(shí)就會自動執(zhí)行程序，自動為按鈕綁定單擊事件。

注意：eq()方法返回的是一個(gè)jQuery包裝集，所以它只能調(diào)用jQuery的方法，而get()方法返回的是一個(gè)DOM對象，所以它只能用DOM對象的方法。eq()方法與get()方法默認(rèn)都是從0開始計(jì)數(shù)。$("#test").get(0)等效于$("#test")[0]。在IE瀏覽器中運(yùn)行本示例，首先顯示如圖2-4所示的頁面；單擊“若干年后”按鈕，將顯示如圖2-5所示的頁面。圖2-4單擊按鈕前

圖2-5單擊按鈕后

2.4.3類名選擇器（.class）類名選擇器是通過元素?fù)碛械腃SS類的名稱查找匹配的DOM元素。在一個(gè)頁面中，一個(gè)元素可以有多個(gè)CSS類，一個(gè)CSS類又可以匹配多個(gè)元素，如果有元素中有一個(gè)匹配的類的名稱就可以被類名選擇器選取到。單地說類名選擇器就是以元素具有的CSS類名稱查找匹配的元素。類名選擇器的使用方法如下：

$(".class");其中，class為要查詢元素所用的CSS類名。例如，要查詢使用CSS類名為word_orange的元素，可以使用下面的jQuery代碼：

$(".word_orange");【例2-3】

在頁面中，首先添加兩個(gè)<div>標(biāo)記，并為其中的一個(gè)設(shè)置CSS類，然后通過jQuery的類名選擇器選取設(shè)置了CSS類的<div>標(biāo)記，并設(shè)置其CSS樣式。（1）創(chuàng)建一個(gè)名稱為index.html的文件，在該文件的<head>標(biāo)記中應(yīng)用下面的語句引入jQuery庫。<scripttype="text/javascript"src="../js/jquery-1.11.1.min.js"></script>（2）在頁面的<body>標(biāo)記中，添加兩個(gè)<div>標(biāo)記，一個(gè)使用CSS類myClass，另一個(gè)不設(shè)置CSS類，代碼如下：<divclass="myClass">注意觀察我的樣式</div><div>我的樣式是默認(rèn)的</div>說明：這里添加了兩個(gè)<div>標(biāo)記是為了對比效果，默認(rèn)的背景顏色都是藍(lán)色的，文字顏色都是黑色的。

（3）在引入jQuery庫的代碼下方編寫jQuery代碼，實(shí)現(xiàn)按CSS類名選取DOM元素，并更改其樣式（這里更改了背景顏色和文字顏色），具體代碼如下：<scripttype="text/javascript"> $(document).ready(function(){ varmyClass=$(".myClass"); //選取DOM元素

myClass.css("background-color","#C50210"); //為選取的DOM元素設(shè)置背景顏色

myClass.css("color","#FFF"); //為選取的DOM元素設(shè)置文字顏色

});</script>在上面的代碼中，只為其中的一個(gè)<div>標(biāo)記設(shè)置了CSS類名稱，但是由于程序中并沒有名稱為myClass的CSS類，所以這個(gè)類是沒有任何屬性的。類名選擇器將返回一個(gè)名為myClass的jQuery包裝集，利用css()方法可以為對應(yīng)的div元素設(shè)定CSS屬性值，這里將元素的背景顏色設(shè)置為深紅色，文字顏色設(shè)置為白色。注意：類名選擇器也可能會獲取一組jQuery包裝集，因?yàn)槎鄠€(gè)元素可以擁有同一個(gè)CSS樣式。

在IE瀏覽器中運(yùn)行本示例，將顯示如圖2-6所示的頁面。其中，左面的DIV為更改樣式后的效果，右面的DIV為默認(rèn)的樣式。由于使用了$(document).ready()方法，所以選擇元素并更改樣式在DOM元素加載就緒時(shí)就已經(jīng)自動執(zhí)行完畢。圖2-6通過類名選擇器選擇元素并更改樣式2.4.4復(fù)合選擇器（selector1，selector2，selectorN）

復(fù)合選擇器將多個(gè)選擇器（可以是ID選擇器、元素選擇或是類名選擇器）組合在一起，兩個(gè)選擇器之間以逗號“，”分隔，只要符合其中的任何一個(gè)篩選條件就會被匹配，返回的是一個(gè)集合形式的jQuery包裝集，利用jQuery索引器可以取得集合中的jQuery對象。

注意：多種匹配條件的選擇器并不是匹配同時(shí)滿足這幾個(gè)選擇器的匹配條件的元素，而是將每個(gè)選擇器匹配的元素合并后一起返回。

復(fù)合選擇器的使用方法如下：

$("selector1,selector2,selectorN");selector1：一個(gè)有效的選擇器，可以是ID選擇器、元素選擇器或是類名選擇器等。selector1：另一個(gè)有效的選擇器，可以是ID選擇器、元素選擇器或是類名選擇器等。selectorN：（可選擇）任意多個(gè)選擇器，可以是ID選擇器、元素選擇器或是類名選擇器等。例如，要查詢文檔中的全部的<span>標(biāo)記和使用CSS類myClass的<div>標(biāo)記，可以使用下面的jQuery代碼：

$("span,div.myClass");【例2-4】

在頁面添加3種不同元素并統(tǒng)一設(shè)置樣式。使用復(fù)合選擇器篩選<div>元素和id屬性值為span的元素，并為它們添加新的樣式。（1）創(chuàng)建一個(gè)名稱為index.html的文件，在該文件的<head>標(biāo)記中應(yīng)用下面的語句引入jQuery庫。<scripttype="text/javascript"src="../js/jquery-1.11.1.min.js"></script>（2）在頁面的<body>標(biāo)記中，添加一個(gè)<p>標(biāo)記、一個(gè)<div>標(biāo)記、一個(gè)ID為span的<span>標(biāo)記和一個(gè)按鈕，并為除按鈕以為外的3個(gè)標(biāo)記指定CSS類名，代碼如下：<pclass="default">p元素</p><divclass="default">div元素</div><spanclass="default"id="span">ID為span的元素</span><inputtype="button"value="為div元素和ID為span的元素?fù)Q膚"/>（3）在引入jQuery庫的代碼下方編寫jQuery代碼，實(shí)現(xiàn)單擊按鈕來獲取全部<div>元素和id屬性值為“span”的元素，并修改它們的內(nèi)容，具體代碼如下：<scripttype="text/javascript">$(document).ready(function(){ $("input[type=button]").click(function(){ //綁定按鈕的單擊事件

$("div,#span").addClass("change"); //添加所使用的CSS類

});});</script>運(yùn)行本示例，將顯示如圖2-7所示的頁面，單擊“為div元素和ID為span的元素?fù)Q膚”按鈕，將為div元素和ID為span的元素?fù)Q膚，如圖2-8所示。

圖2-7單擊按鈕前

圖2-8單擊按鈕后

2.4.5通配符選擇器（*）通配符，就是指符號“*”，它代表著頁面上的每一個(gè)元素，也是說如果使用$(“*")將取得頁面上所有的DOM元素集合的jQuery包裝集。2.5層次選擇器

2.5.1ancestordescendant選擇器2.5.2parent>child選擇器2.5.3prev+next選擇器2.5.4prev~siblings選擇器2.5.1ancestordescendant選擇器

ancestordescendant選擇器中的ancestor代表祖先，descendant代表子孫，用于在給定的祖先元素下匹配所有的后代元素。ancestordescendant選擇器的使用方法如下：

$("ancestordescendant");ancestor是指任何有效的選擇器。descendant是用以匹配元素的選擇器，并且它是ancestor所指定元素的后代元素。

例如，要匹配ul元素下的全部li元素，可以使用下面的jQuery代碼：

$("ulli");【例2-6】通過jQuery為版權(quán)列表設(shè)置樣式。（1）創(chuàng)建一個(gè)名稱為index.html的文件，在該文件的<head>標(biāo)記中應(yīng)用下面的語句引入jQuery庫。<scripttype="text/javascript"src="../js/jquery-1.11.1.min.js"></script>（2）在頁面的<body>標(biāo)記中，首先添加一個(gè)<div>標(biāo)記，并在該<div>標(biāo)記內(nèi)添加一個(gè)<ul>標(biāo)記及其子標(biāo)記<li>，然后在<div>標(biāo)記的后面再添加一個(gè)<ul>標(biāo)記及其子標(biāo)記<li>，代碼如下：<divid="bottom"><ul> <li>技術(shù)服務(wù)熱線：傳真：企業(yè)郵箱：</li> <li>Copyright©AllRightsReserved!</li></ul></div><ul> <li>技術(shù)服務(wù)熱線：傳真：企業(yè)郵箱：</li> <li>Copyright©AllRightsReserved!</li></ul>（3）編寫CSS樣式，通過ID選擇符設(shè)置<div>標(biāo)記的樣式，并且編寫一個(gè)類選擇符copyright，用于設(shè)置<div>標(biāo)記內(nèi)的版權(quán)列表的樣式，關(guān)鍵代碼如下：<styletype="text/css">#bottom{ background-image:url(images/bg_bottom.jpg); /*設(shè)置背景*/ width:800px; /*設(shè)置寬度*/ height:58px; /*設(shè)置高度*/ clear:both; /*設(shè)置左右兩側(cè)無浮動內(nèi)容*/ text-align:center; /*設(shè)置居中對齊*/ padding-top:10px; /*設(shè)置頂邊距*/ font-size:9pt; /*設(shè)置字體大小*/}.copyright{ color:#FFFFFF; /*設(shè)置文字顏色*/ list-style:none; /*不顯示項(xiàng)目符號*/ line-height:20px; /*設(shè)置行高*/}</style>（4）在引入jQuery庫的代碼下方編寫jQuery代碼，匹配div元素的子元素ul，并為其添加CSS樣式，具體代碼如下：<scripttype="text/javascript">$(document).ready(function(){$("divul").addClass("copyright"); //為div元素的子元素ul添加樣式});</script>運(yùn)行本示例，將顯示如圖2-13所示的效果，其中上面的版權(quán)信息是通過jQuery添加樣式的效果，下面的版權(quán)信息為默認(rèn)的效果。圖2-13通過jQuery為版權(quán)列表設(shè)置樣式2.5.2parent>child選擇器

parent>child選擇器中的parent代表父元素，child代表子元素，用于在給定的父元素下匹配所有的子元素。使用該選擇器只能選擇父元素的直接子元素。parent>child選擇器的使用方法如下：

$("parent>child");parent是指任何有效的選擇器。child是用以匹配元素的選擇器，并且它是parent元素的子元素。例如，要匹配表單中所有的子元素input，可以使用下面的jQuery代碼：

$("form>input");【例2-7】

為表單的直接子元素input換膚。（1）創(chuàng)建一個(gè)名稱為index.html的文件，在該文件的<head>標(biāo)記中應(yīng)用下面的語句引入jQuery庫。<scripttype="text/javascript"src="../js/jquery-1.11.1.min.js"></script>（2）在頁面的<body>標(biāo)記中，添加一個(gè)表單，并在該表單中添加6個(gè)input元素，并且將“換膚”按鈕用<span>標(biāo)記括起來，關(guān)鍵代碼如下：<formid="form1"name="form1"method="post"action="">

姓

名：<inputtype="text"name="name"id="name"/><br/>

籍

貫：<inputname="native"type="text"id="native"/><br/>

生

日：<inputtype="text"name="birthday"id="birthday"/><br/>E-mail：<inputtype="text"name="email"id="email"/><br/><span><inputtype="button"name="change"id="change"value="換膚"/></span><inputtype="button"name="default"id="default"value="恢復(fù)默認(rèn)"/><br/></form>（3）編寫CSS樣式，用于指定input元素的默認(rèn)樣式，并且添加一個(gè)用于改變input元素樣式的CSS類具體代碼如下：<styletype="text/css">input{ margin:5px; /*設(shè)置input元素的外邊距為5像素*/}.input{ font-size:12pt; /*設(shè)置文字大小*/ color:#333333; /*設(shè)置文字顏色*/ background-color:#cef; /*設(shè)置背景顏色*/ border:1pxsolid#000000; /*設(shè)置邊框*/}</style>（4）在引入jQuery庫的代碼下方編寫jQuery代碼，實(shí)現(xiàn)匹配表單元素的直接子元素并為其添加和移除CSS樣式，具體代碼如下：<scripttype="text/javascript">$(document).ready(function(){ $("#change").click(function(){ //綁定"換膚"按鈕的單擊事件

$("form>input").addClass("input");//為表單元素的直接子元素input添加樣式

}); $("#default").click(function(){ //綁定“恢復(fù)默認(rèn)”按鈕的單擊事件

$("form>input").removeClass("input"); //移除為表單元素的直接子元素input添加的樣式

});});</script>說明：在上面的代碼中，addClass()方法用于為元素添加CSS類，removeClass()方法用于移除為元素添加的CSS類。

運(yùn)行本實(shí)例，將顯示如圖2-14所示的效果，單擊“換膚”按鈕，將顯示如圖2-15所示的效果，單擊“恢復(fù)默認(rèn)”按鈕，將再次顯示如圖2-14所示的效果。圖2-14默認(rèn)的效果

圖2-15單擊“換膚”按鈕之后的效果

在圖2-15中，雖然“換膚”按鈕也是form元素的子元素input，但由于該元素不是form元素的直接子元素，所以在執(zhí)行換膚操作時(shí)，該按鈕的樣式并沒有改變。如果將步驟（4）中的第4行和第7行的代碼中的$("form>input")修改為$("forminput")，那么單擊“換膚”按鈕后，將顯示如圖2-16所示的效果，即“換膚”按鈕也將被添加CSS類。這也就是parent>child選擇器和ancestordescendant選擇器的區(qū)別。圖2-16為“換膚”按鈕添加CSS類的效果2.6過濾選擇器

2.6.1簡單過濾器2.6.2內(nèi)容過濾器2.6.3可見性過濾器2.6.4表單對象的屬性過濾器2.6.5子元素過濾器

2.6.1簡單過濾器

簡單過濾器是指以冒號開頭，通常用于實(shí)現(xiàn)簡單過濾效果的過濾器。例如，匹配找到的第一個(gè)元素等。jQuery提供的過濾器如表2-1所示。過濾器說明示例:first匹配找到的第一個(gè)元素，它是與選擇器結(jié)合使用的$("tr:first")//匹配表格的第一行:last匹配找到的最后一個(gè)元素，它是與選擇器結(jié)合使用的$("tr:last")//匹配表格的最后一行:even匹配所有索引值為偶數(shù)的元素，索引值從0開始計(jì)數(shù)$("tr:even")//匹配索引值為偶數(shù)的行:odd匹配所有索引值為奇數(shù)的元素，索引從0開始計(jì)數(shù)$("tr:odd")//匹配索引值為奇數(shù)的行:eq(index)匹配一個(gè)給定索引值的元素$("div:eq(1)")//匹配第二個(gè)div元素:gt(index)匹配所有大于給定索引值的元素$("span:gt(0)")//匹配索引大于1的span元素（注：大于0，而不包括0）:lt(index)匹配所有小于給定索引值的元素$("div:lt(2)")//匹配索引小于2的div元素（注：小于2，而不包括2）:header匹配如h1,h2,h3……之類的標(biāo)題元素$(":header")//匹配全部的標(biāo)題元素:not(selector)去除所有與給定選擇器匹配的元素$("input:not(:checked)")//匹配沒有被選中的input元素:animated匹配所有正在執(zhí)行動畫效果的元素$("div:animated")//匹配正在執(zhí)行的動畫的div元素【例2-10】

實(shí)現(xiàn)一個(gè)帶表頭的雙色表格（1）創(chuàng)建一個(gè)名稱為index.html的文件，在該文件的<head>標(biāo)記中應(yīng)用下面的語句引入jQuery庫。<scripttype="text/javascript"src="../js/jquery-1.11.1.min.js"></script>（2）在頁面的<body>標(biāo)記中，添加一個(gè)5行5列的表格，關(guān)鍵代碼如下：

<tablewidth="98%"border="0"align="center"cellpadding="0"cellspacing="1"bgcolor="#3F873B"><tr><tdwidth="11%"height="27">編號</td><tdwidth="14%">祝福對象</td><tdwidth="12%">祝福者</td><tdwidth="33%">字條內(nèi)容</td><tdwidth="30%">發(fā)送時(shí)間</td></tr><tr><tdheight="27">1</td><td>琦琦</td><td>媽媽</td><td>愿你健康快樂的成長！</td><td>2014-08-1513:06:06</td></tr>…… <!--此處省略了其他行的代碼--></table>（3）編寫CSS樣式，通過元素選擇符設(shè)置單元格的樣式，并且編寫th、even和odd3個(gè)類選擇符，用于控制表格中相應(yīng)行的樣式，具體代碼如下：<styletype="text/css"> td{ font-size:12px; /*設(shè)置單元格的樣式*/ padding:3px; /*設(shè)置內(nèi)邊距*/ } .th{ background-color:#B6DF48; /*設(shè)置背景顏色*/ font-weight:bold; /*設(shè)置文字加粗顯示*/ text-align:center; /*文字居中對齊*/ } .even{ background-color:#E8F3D1; /*設(shè)置偶數(shù)行的背景顏色*/ } .odd{ background-color:#F9FCEF; /*設(shè)置奇數(shù)行的背景顏色*/ }</style>（4）在引入jQuery庫的代碼下方編寫jQuery代碼，分別設(shè)置表格奇數(shù)行與偶數(shù)行的樣式，并且單獨(dú)為第一行添加名為“th”樣式，具體代碼如下：<scripttype="text/javascript"> $(document).ready(function(){ $("tr:even").addClass("even"); //設(shè)置奇數(shù)行所用的CSS類

$("tr:odd").addClass("odd"); //設(shè)置偶數(shù)行所用的CSS類

$("tr:first").removeClass("even"); //移除even類

$("tr:first").addClass("th"); //添加th類

});</script>在上面的代碼中，為表格的第一行添加th類時(shí)，需要先將該行應(yīng)用的even類移除，然后再進(jìn)行添加，否則，新添加的CSS類將不起作用。運(yùn)行本實(shí)例，將顯示如圖2-19所示的效果。其中，第一行為表頭，編號為1和3的行采用的是偶數(shù)行樣式，編號為2和4的行采用的是奇數(shù)行的樣式。圖2-19帶表頭的雙色表格2.6.3可見性過濾器

元素的可見狀態(tài)有兩種，分別是隱藏狀態(tài)和顯示狀態(tài)?？梢娦赃^濾器就是利用元素的可見狀態(tài)匹配元素的。因此，可見性過濾器也有兩種，一種是匹配所有可見元素的:visible過濾器，另一種是匹配所有不可見元素的:hidden過濾器。

說明：在應(yīng)用:hidden過濾器時(shí)，display屬性是none以及input元素的type屬性為hidden的元素都會被匹配到。

【例2-12】

獲取頁面上隱藏和顯示的input元素的值。（1）創(chuàng)建一個(gè)名稱為index.html的文件，在該文件的<head>標(biāo)記中應(yīng)用下面的語句引入jQuery庫。<scripttype="text/javascript"src="../js/jquery-1.11.1.min.js"></script>（2）在頁面的<body>標(biāo)記中，添加3個(gè)input元素，其中第一個(gè)為顯示的文本框，第二個(gè)為不顯示的文本框，第3個(gè)為隱藏域，關(guān)鍵代碼如下：<inputtype="text"value="顯示的input元素"><inputtype="text"value="我是不顯示的input元素"style="display:none"><inputtype="hidden"value="我是隱藏域">（3）在引入jQuery庫的代碼下方編寫jQuery代碼，獲取頁面上隱藏和顯示的input元素的值，具體代碼如下：<scripttype="text/javascript"> $(document).ready(function(){ varvisibleVal=$("input:visible").val(); //取得顯示的input的值

varhiddenVal1=$("input:hidden:eq(0)").val(); //取得隱藏的文本框的值

varhiddenVal2=$("input:hidden:eq(1)").val(); //取得隱藏域的值

alert(visibleVal+"\n\r"+hiddenVal1+"\n\r"+hiddenVal2);//彈出取得的信息

});</script>

運(yùn)行本實(shí)例將顯示如圖2-21所示的效果。圖2-21彈出隱藏和顯示的input元素的值2.6.4表單對象的屬性過濾器

表單對象的屬性過濾器通過表單元素的狀態(tài)屬性（例如選中、不可用等狀態(tài)）匹配元素，包括:checked過濾器、:disabled過濾器、:enabled過濾器和:selected過濾器4種，如表2-3所示。

過濾器說明示例:checked匹配所有選中的被選中元素$("input:checked")//匹配所有被選中的input元素:disabled匹配所有不可用元素$("input:disabled")//匹配所有不可用的input元素:enabled匹配所有可用的元素$("input:enabled")//匹配所有可用的input元素:selected匹配所有選中的option元素$("selectoption:selected")//匹配所有被選中的選項(xiàng)元素【例2-13】

利用表單過濾器匹配表單中相應(yīng)的元素。（1）創(chuàng)建一個(gè)名稱為index.html的文件，在該文件的<head>標(biāo)記中應(yīng)用下面的語句引入jQuery庫。<scripttype="text/javascript"src="../js/jquery-1.11.1.min.js"></script>（2）在頁面的<body>標(biāo)記中，添加一個(gè)表單，并在該表單中添加3個(gè)復(fù)選框、一個(gè)不可用按鈕和一個(gè)下拉列表框，其中，前兩個(gè)復(fù)選框?yàn)檫x中狀態(tài)，關(guān)鍵代碼如下：<form>

復(fù)選框1：<inputtype="checkbox"checked="checked"value="復(fù)選框1"/>

復(fù)選框2：<inputtype="checkbox"checked="checked"value="復(fù)選框2"/>

復(fù)選框3：<inputtype="checkbox"value="復(fù)選框3"/><br/>

不可用按鈕：<inputtype="button"value="不可用按鈕"disabled><br/>

下拉列表框：

<selectonchange="selectVal()"><optionvalue="列表項(xiàng)1">列表項(xiàng)1</option><optionvalue="列表項(xiàng)2">列表項(xiàng)2</option><optionvalue="列表項(xiàng)3">列表項(xiàng)3</option></select></form>（3）在引入jQuery庫的代碼下方編寫jQuery代碼，實(shí)現(xiàn)匹配表單中的被選中的checkbox元素、不可用元素和被選中的option元素的值，具體代碼如下：<scripttype="text/javascript"> $(document).ready(function(){ $("input:checked").css("background-color","red");//設(shè)置選中的復(fù)選框的背景顏色

$("input:disabled").val("我是不可用的"); //為灰色不可用按鈕賦值

}) functionselectVal(){ //下拉列表框變化時(shí)執(zhí)行的方法

alert($("selectoption:selected").val()); //顯示選中的值

}</script>運(yùn)行本實(shí)例，選中下拉列表框中的列表項(xiàng)3，將彈出提示對話框顯示選中列表項(xiàng)的值，如圖2-22所示。在該圖中，選中的兩個(gè)復(fù)選框的背景為紅色，另外的一個(gè)復(fù)選框沒有設(shè)置背景顏色，不可用按鈕的value值被修改為“我是不可用的”。

圖2-22利用表單過濾器匹配表單中相應(yīng)的元素2.6.5子元素過濾器

子元素選擇器就是篩選給定某個(gè)元素的子元素，具體的過濾條件由選擇器的種類而定。jQuery提供的子無素選擇器如表2-4所示。選擇器說明示例:first-child匹配所有給定元素的第一個(gè)子元素$("ulli:first-child")//匹配ul元素中的第一個(gè)子元素li:last-child匹配所有給定元素的最后一個(gè)子元素$("ulli:last-child")//匹配ul元素中的最后一個(gè)子元素li:only-child如果某個(gè)元素是它父元素中唯一的子元素，那么將會被匹配。如果父元素中含有其他元素，則不會被匹配$("ulli:only-child")//匹配只含有一個(gè)li元素的ul元素中的li:nth-child(index/even/odd/equation)匹配每個(gè)父元素下的第index個(gè)子或奇偶元素，index從1開始，而不是從0開始$("ulli:nth-child(even)")//匹配ul中索引值為偶數(shù)的li元素$("ulli:nth-child(3)")//匹配ul中第3個(gè)li元素2.7屬性選擇器

屬性選擇器就是通過元素的屬性作為過濾條件進(jìn)行篩選對象。jQuery提供的屬性選器如表2-5所示。選擇器說明示例[attribute]匹配包含給定屬性的元素$("div[name]")//匹配含有name屬性的div元素[attribute=value]匹配屬性值為value的元素$("div[name='test']")//匹配name屬性是test的div元素[attribute!=value]匹配屬性值不等于value的元素$("div[name!='test']")//匹配name屬性不是test的div元素[attribute*=value]匹配屬性值含有value的元素$("div[name*='test']")//匹配name屬性中含有test值的div元素[attribute^=value]匹配屬性值以value開始的元素$("div[name^='test']")//匹配name屬性以test開頭的div元素[attribute$=value]匹配屬性值是以value結(jié)束的元素$("div[name$='test']")//匹配name屬性以test結(jié)尾的div元素[selector1][selector2][selectorN]復(fù)合屬性選擇器，需要同時(shí)滿足多個(gè)條件時(shí)使用$("div[id][name^='test']")//匹配具有id屬性并且name屬性是以test開頭的div元素2.8表單選擇器

表單選擇器是匹配經(jīng)常在表單內(nèi)出現(xiàn)的元素。但是匹配的元素不一定在表單中。jQuery提供的表單選擇器如表2-6所示。選擇器說明示例:input匹配所有的input元素$(":input")//匹配所有的input元素$("form:input")//匹配<form>標(biāo)記中的所有input元素，需要注意，在form和:之間有一個(gè)空格:button匹配所有的普通按鈕，即type="button"的input元素$(":button")//匹配所有的普通按鈕:checkbox匹配所有的復(fù)選框$(":checkbox")//匹配所有的復(fù)選框:file匹配所有的文件域$(":file")//匹配所有的文件域:hidden匹配所有的不可見元素，或者type為hidden的元素$(":hidden")//匹配所有的隱藏域:image匹配所有的圖像域$(":image")//匹配所有的圖像域:password匹配所有的密碼域$(":password")//匹配所有的密碼域:radio匹配所有的單選按鈕$(":radio")//匹配所有的單選按鈕:reset匹配所有的重置按鈕，即type="reset"的input元素$(":reset")//匹配所有的重置按鈕:submit匹配所有的提交按鈕，即type="submit"的input元素$(":reset")//匹配所有的提交按鈕:text匹配所有的單行文本框$(":text")//匹配所有的單行文本框2.9選擇器中的一些注意事項(xiàng)3.9.1選擇器中含有特殊符號的注意事項(xiàng)3.9.2選擇器中含有空格的注意事項(xiàng)2.9.1選擇器中含有特殊符號的注意事項(xiàng)

選擇器中含有“.”、“#”、“(”或“]”等特殊字符根據(jù)W3C規(guī)定，屬性值中是不能包含這些特殊字符的,但在實(shí)際項(xiàng)目應(yīng)用中偶爾也會遇到這種表達(dá)式中含有“#”和“]”等特殊字符的情況。這時(shí)，如果按照普通方式去處理的話就會出現(xiàn)錯(cuò)誤。解決這類錯(cuò)誤的方法是使用轉(zhuǎn)義符號將其轉(zhuǎn)義。例如，有如下HTML代碼：

<divid=”mr#soft”>明日科技</div>

<divid=”mrbook(1)”>明日圖書</div>如果按照普通方式來獲取，例如：

$("#mr#soft");

$("#mrbook(1)");這樣是不能正確獲取到元素的，正確的寫法如下：

$("#mr\\#soft");

$("#mrbook\\(1\\)");屬性選擇器的@符號問題在jQuery升級版本過程中，jQuery在1.3.1版本中徹底放棄了1.1.0版本遺留下的@符號，假如我們使用1.3.1以上的版本，那么不需要在屬性前添加@符號，例如如下代碼：

$("div[@name='mingri']");正確的寫法是將@符號去掉，即改為如下形式：

$("div[name='mingri']");2.9.2選擇器中含有空格的注意事項(xiàng)

在實(shí)際應(yīng)用當(dāng)中，選擇器中含有空格也是不容忽視的，多一個(gè)空格或者少一個(gè)空格也會得到截然不同的結(jié)果。請看如下實(shí)例代碼：<divclass="name"><divstyle="display:none;">

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論