首頁(yè)技術(shù)文章正文

jQuery中4種基本選擇器的操作方法【案例演示】

更新時(shí)間:2022-03-31 來(lái)源:黑馬程序員 瀏覽量:

jQuery中基本選擇器是最簡(jiǎn)單直觀的選擇器,包括id選擇器、類(lèi)選擇器、元素選擇器和通配符選擇器,詳細(xì)介紹如表2-1所示。

表2-1基本選擇器

1648697955382_基本選擇器.png

表2-1中,jQuery提供的同時(shí)獲取多個(gè)元素的選擇器,是利用逗號(hào)(,)分割,將每一個(gè)選擇器匹配到的元素合并后一起返回。

為了讀者更好的理解基本選擇器的使用,接下來(lái)通過(guò)一個(gè)案例進(jìn)行演示,HTML代碼片段如demo2-1.html所示。
demo2-1.html

<style>
    div {
        border: 1px solid black;
    }
</style>
<div id="byId">第1個(gè)div元素,id值為byDiv</div>
<p>第1個(gè)p元素</p>
<p class="byClass">第2個(gè)p元素,類(lèi)名為byClass</p>
<div class="byClass">第2個(gè)div元素,類(lèi)名為byClass</div>

上述代碼中,定義了兩個(gè)div元素和兩個(gè)p元素,第1個(gè)div元素的id值為byId,第2個(gè)div元素與第2個(gè)p元素設(shè)置了相同的類(lèi)名byClass。

使用瀏覽器訪問(wèn)demo2-1.html頁(yè)面的初始效果如圖2-2所示。

1648697964012_1.png

圖2-2頁(yè)面默認(rèn)效果下面使用不同的jQuery基本選擇器操作以上的HTML頁(yè)面。

1.id選擇器

與類(lèi)選擇器不同的是,一個(gè)規(guī)范的HTML文檔中不會(huì)出現(xiàn)多個(gè)元素具有相同id值的情況。因此,一個(gè)id選擇器只能獲取一個(gè)元素。

下面為id為byId的元素設(shè)置背景色。在demo2-1.html文件中添加jQuery代碼,如下所示。

$('#byId').css('background', 'pink');

上述代碼中,css()是jQuery提供的方法,用于設(shè)置元素的CSS樣式。其中,background用于設(shè)置背景,pink是背景顏色的值。修改完成后,重新使用瀏覽器訪問(wèn)demo2-1.html,頁(yè)面效果如圖2-3所示。

1648697968775_2.png

2.類(lèi)選擇器

一個(gè)HTML文檔中,可以為不同元素設(shè)置同名的class值,這樣便可以同時(shí)設(shè)置不同元素的相同樣式或行為。

修改(1)中的jQuery代碼,為頁(yè)面中類(lèi)名為byClass的所有元素設(shè)置相同的背景色。如下所示。

$('.byClass').css('background', '#a0edbc');
修改完成后,重新使用瀏覽器訪問(wèn)demo2-1.html,頁(yè)面效果如圖2-4所示。

圖2-4類(lèi)選擇器從圖2-4可以看出,引用了類(lèi)名為byClass的p元素和div元素都被設(shè)置了背景色。

3.元素選擇器

元素選擇器適用于開(kāi)發(fā)中需要為頁(yè)面中的所有匹配元素添加樣式或行為。修改(2)中的jQuery代碼,將p元素中的文本大小設(shè)置為10像素。如下所示。

$('p').css('font-size', '10px');

修改完成后,重新使用瀏覽器訪問(wèn)demo2-1.html,頁(yè)面效果如圖2-5所示。

4.通配符選擇器

在實(shí)際開(kāi)發(fā)中,若需要為頁(yè)面上的所有元素添加相同的樣式或者行為,此時(shí)便可用通配符選擇器“*”一次性獲取頁(yè)面所有元素。修改(3)中的jQuery代碼,將頁(yè)面的背景色設(shè)為yellow。如下所示。

 $('*').css('background', 'yellow');

修改完成后,重新使用瀏覽器訪問(wèn)demo2-1.html,頁(yè)面效果如圖2-6所示。

1648697974590_3.png

圖2-6通配符選擇器

需要注意的是,雖然通配符選擇器可匹配所有的元素,但會(huì)影響網(wǎng)頁(yè)渲染的時(shí)間。因此,實(shí)際開(kāi)發(fā)中應(yīng)盡量避免使用通配符選擇器。取而代之的是,在需要時(shí),可在jQuery的$()中使用逗號(hào),即可同時(shí)獲取多個(gè)元素。

例如,修改以上的jQuery代碼,為class值為byClass和id值為byId的元素設(shè)置背景色,如下所示。

$('.byClass,#byId').css('background', 'yellow');

修改完成后,重新使用瀏覽器訪問(wèn)demo2-1.html,頁(yè)面效果如圖2-7所示。

1648697979452_4.png

圖2-7同時(shí)獲取多個(gè)元素




猜你喜歡:

什么是jQuery選擇器?jQuery選擇器有什么優(yōu)勢(shì)?

jQuery如何修改CSS樣式?

jQuery和vue的區(qū)別是什么?【前端面試題】

jQuery動(dòng)畫(huà)的顯示與隱藏效果

黑馬程序員HTML&js前端與開(kāi)發(fā)培訓(xùn)

分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!