- jQuery從入門到精通 （軟件開發(fā)視頻大講堂）
- 明日科技
- 3364字
- 2020-11-28 23:47:22
4.4 基本選擇器
基本選擇器在實(shí)際應(yīng)用中比較廣泛，建議重點(diǎn)掌握jQuery的基本選擇器，它是其他類型選擇器的基礎(chǔ)，基本選擇器是jQuery選擇器中最為重要的部分。jQuery基本選擇器包括ID選擇器、元素選擇器、類名選擇器、多種匹配條件選擇器和通配符選擇器。下面進(jìn)行詳細(xì)介紹。
4.4.1 ID選擇器（#id）
ID選擇器#id顧名思義就是利用DOM元素的id屬性值來篩選匹配的元素，并以jQuery包裝集的形式返回給對象。這就好像在學(xué)校中每個(gè)學(xué)生都有自己的學(xué)號一樣，學(xué)生的姓名是可以重復(fù)的，但是學(xué)號卻是不能重復(fù)的，因此根據(jù)學(xué)號就可以獲取指定學(xué)生的信息。
ID選擇器的使用方法如下：
$("#id");
其中，id為要查詢元素的ID屬性值。例如，要查詢ID屬性值為user的元素，可以使用下面的jQuery代碼：
$("#user");
注意
如果頁面中出現(xiàn)了兩個(gè)相同的id屬性值，程序運(yùn)行時(shí)頁面會(huì)報(bào)出JS運(yùn)行錯(cuò)誤的對話框，所以在頁面中設(shè)置id屬性值時(shí)要確保該屬性值在頁面中是唯一的。
【例4.1】在頁面中添加一個(gè)ID屬性值為testInput的文本輸入框和一個(gè)按鈕，通過單擊按鈕來獲取在文本輸入框中輸入的值。（實(shí)例位置：光盤\TM\sl\4\1）
（1）創(chuàng)建一個(gè)名稱為index.html的文件，在該文件的<head>標(biāo)記中應(yīng)用下面的語句引入jQuery庫。
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
（2）在頁面的<body>標(biāo)記中，添加一個(gè)ID屬性值為testInput的文本輸入框和一個(gè)按鈕，代碼如下：
<input type="text"id="testInput"name="test"value=""/>
<input type="button"value="輸入的值為"/>
（3）在引入jQuery庫的代碼下方編寫jQuery代碼，實(shí)現(xiàn)單擊按鈕來獲取在文本輸入框中輸入的值，具體代碼如下：
<script type="text/javascript">
$(document).ready(function(){
$("input[type='button']").click(function(){ //為按鈕綁定單擊事件
var inputValue=$("#testInput").val(); //獲取文本輸入框的值
alert(inputValue);
});
});
</script>
在上面的代碼中，第三行使用了jQuery中的屬性選擇器匹配文檔中的按鈕，并且為按鈕綁定單擊事件。
說明
ID選擇器是以“#id”的形式獲取對象的，在這段代碼中用$("#testInput")獲取了一個(gè)id屬性值為testInput的jQuery包裝集，然后調(diào)用包裝集的val()方法取得文本輸入框的值。
在IE瀏覽器中運(yùn)行本示例，在文本框中輸入“仰天大笑出門去，我輩豈是蓬蒿人”詩句，如圖4.2所示，單擊“輸入的值為”按鈕，將彈出提示對話框顯示輸入的文字，如圖4.3所示。
圖4.2 在文本框中輸入文字
圖4.3 彈出的提示對話框
jQuery中的ID選擇器相當(dāng)于傳統(tǒng)的JavaScript中的document.getElementById()方法，jQuery用更簡潔的代碼實(shí)現(xiàn)了相同的功能。雖然兩者都獲取了指定的元素對象，但是兩者調(diào)用的方法是不同的。利用JavaScript獲取的對象是DOM對象，而使用jQuery獲取的對象是jQuery對象，這點(diǎn)要尤為注意。
4.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");
【例4.2】在頁面中添加兩個(gè)<div>標(biāo)記和一個(gè)按鈕，通過單擊按鈕來獲取這兩個(gè)<div>，并修改它們的內(nèi)容。（實(shí)例位置：光盤\TM\sl\4\2）
（1）創(chuàng)建一個(gè)名稱為index.html的文件，在該文件的<head>標(biāo)記中應(yīng)用下面的語句引入jQuery庫。
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
（2）在頁面的<body>標(biāo)記中，添加兩個(gè)<div>標(biāo)記和一個(gè)按鈕，代碼如下：
<div><img src="images/strawberry.jpg"/>這里種植了一棵草莓</div>
<div><img src="images/fish.jpg"/>這里養(yǎng)殖了一條魚</div>
<input type="button" id="button" value="若干年后" />
（3）在引入jQuery庫的代碼下方編寫jQuery代碼，實(shí)現(xiàn)單擊按鈕來獲取全部<div>元素，并修改它們的內(nèi)容，具體代碼如下：
<script type="text/javascript">
$(document).ready(function(){
$("#button").click(function(){ //為按鈕綁定單擊事件
$("div").eq(0).html("<img src='images/strawberry1.jpg'/>這里長出了一片草莓"); //獲取第一個(gè)div元素
$("div").get(1).innerHTML="<img src='images/fish1.jpg'/>這里的魚沒有了"; //獲取第二個(gè)div元素
});
});
</script>
在上面的代碼中，使用元素選擇器獲取了一組div元素的jQuery包裝集，它是一組Object對象，存儲(chǔ)方式為[Object Object]，但是這種方式并不能顯示出單獨(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í)就會(huì)自動(dòng)執(zhí)行程序，自動(dòng)為按鈕綁定單擊事件。
注意
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)行本示例，首先顯示如圖4.4所示的頁面，單擊“若干年后”按鈕，將顯示如圖4.5所示的頁面。
圖4.4 單擊按鈕前
圖4.5 單擊按鈕后
4.4.3 類名選擇器（.class）
類名選擇器是通過元素?fù)碛械腃SS類的名稱查找匹配的DOM元素。在一個(gè)頁面中，一個(gè)元素可以有多個(gè)CSS類，一個(gè)CSS類又可以匹配多個(gè)元素，如果在元素中有一個(gè)匹配的類的名稱就可以被類名選擇器選取到。
類名選擇器很好理解，在大學(xué)的時(shí)候大部分人一定都選過課，可以把CSS類名理解為課程名稱，元素理解成學(xué)生，學(xué)生可以選擇多門課程，而一門課程又可以被多名學(xué)生所選擇。CSS類與元素的關(guān)系既可以是多對多的關(guān)系，也可以是一對多或多對一的關(guān)系。簡單地說類名選擇器就是以元素具有的CSS類名稱查找匹配的元素。
類名選擇器的使用方法如下：
$(".class");
其中，class為要查詢元素所用的CSS類名。例如，要查詢使用CSS類名為word_orange的元素，可以使用下面的jQuery代碼：
$(".word_orange");
【例4.3】在頁面中，首先添加兩個(gè)<div>標(biāo)記，并為其中的一個(gè)設(shè)置CSS類，然后通過jQuery的類名選擇器選取設(shè)置了CSS類的<div>標(biāo)記，并設(shè)置其CSS樣式。（實(shí)例位置：光盤\TM\sl\4\3）
（1）創(chuàng)建一個(gè)名稱為index.html的文件，在該文件的<head>標(biāo)記中應(yīng)用下面的語句引入jQuery庫。
<script type="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類，代碼如下：
<div class="myClass">注意觀察我的樣式</div>
<div>我的樣式是默認(rèn)的</div>
說明
這里添加了兩個(gè)<div>標(biāo)記是為了對比效果，默認(rèn)的背景顏色都是藍(lán)色的，文字顏色都是黑色的。
（3）在引入jQuery庫的代碼下方編寫jQuery代碼，實(shí)現(xiàn)按CSS類名選取DOM元素，并更改其樣式（這里更改了背景顏色和文字顏色），具體代碼如下：
<script type="text/javascript">
$(document).ready(function() {
var$myClass=$(".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è)置為白色。
注意
類名選擇器也可能會(huì)獲取一組jQuery包裝集，因?yàn)槎鄠€(gè)元素可以擁有同一個(gè)CSS樣式。
在IE瀏覽器中運(yùn)行本示例，將顯示如圖4.6所示的頁面。其中，左面的DIV為更改樣式后的效果，右面的DIV為默認(rèn)的樣式。由于使用了$(document).ready()方法，所以選擇元素并更改樣式在DOM元素加載就緒時(shí)就已經(jīng)自動(dòng)執(zhí)行完畢。
圖4.6 通過類名選擇器選擇元素并更改樣式
4.4.4 復(fù)合選擇器（selector1, selector2, selectorN）
復(fù)合選擇器將多個(gè)選擇器（可以是ID選擇器、元素選擇或是類名選擇器）組合在一起，兩個(gè)選擇器之間以逗號“, ”分隔，只要符合其中的任何一個(gè)篩選條件就會(huì)被匹配，返回的是一個(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");
【例4.4】在頁面添加3種不同元素并統(tǒng)一設(shè)置樣式。使用復(fù)合選擇器篩選<div>元素和id屬性值為span的元素，并為它們添加新的樣式。（實(shí)例位置：光盤\TM\sl\4\4）
（1）創(chuàng)建一個(gè)名稱為index.html的文件，在該文件的<head>標(biāo)記中應(yīng)用下面的語句引入jQuery庫。
<script type="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類名，代碼如下：
<p class="default">p元素</p>
<div class="default">div元素</div>
<span class="default" id="span">ID為span的元素</span>
<input type="button" value="為div元素和ID為span的元素?fù)Q膚" />
（3）在引入jQuery庫的代碼下方編寫jQuery代碼，實(shí)現(xiàn)單擊按鈕來獲取全部<div>元素和id屬性值為span的元素，并修改它們的內(nèi)容，具體代碼如下：
<script type="text/javascript">
$(document).ready(function() {
$("input[type=button]").click(function(){ //綁定按鈕的單擊事件
$("div, #span").addClass("change"); //添加所使用的CSS類
});
});
</script>
運(yùn)行本示例，將顯示如圖4.7所示的頁面，單擊“為div元素和ID為span的元素?fù)Q膚”按鈕，將為div元素和ID為span的元素?fù)Q膚，如圖4.8所示。
圖4.7 單擊按鈕前
圖4.8 單擊按鈕后
4.4.5 通配符選擇器（＊）
所謂的通配符，就是指符號“*”，它代表著頁面上的每一個(gè)元素，也是說如果使用$("*")將取得頁面上所有的DOM元素集合的jQuery包裝集。通配符選擇器比較好理解，這里就不再給予示例程序。
- Python程序設(shè)計(jì)教程（第2版）
- 垃圾回收的算法與實(shí)現(xiàn)
- Android Application Development Cookbook（Second Edition）
- Practical Windows Forensics
- 面向?qū)ο蟪绦蛟O(shè)計(jì)(Java版)
- 名師講壇：Java微服務(wù)架構(gòu)實(shí)戰(zhàn)（SpringBoot+SpringCloud+Docker+RabbitMQ）
- Modular Programming in Java 9
- Java Web程序設(shè)計(jì)任務(wù)教程
- C語言程序設(shè)計(jì)實(shí)驗(yàn)指導(dǎo) （第2版）
- Django實(shí)戰(zhàn)：Python Web典型模塊與項(xiàng)目開發(fā)
- Node.js 12實(shí)戰(zhàn)
- UI設(shè)計(jì)基礎(chǔ)培訓(xùn)教程（全彩版）
- Web前端測試與集成：Jasmine/Selenium/Protractor/Jenkins的最佳實(shí)踐
- Python高性能編程（第2版）
- Mastering Python