教育行業(yè)A股IPO第一股(股票代碼 003032)

全國(guó)咨詢/投訴熱線:400-618-4000

jQuery選擇器基本語(yǔ)法格式和jQuery選擇器的優(yōu)勢(shì)

更新時(shí)間:2021年06月21日17時(shí)05分 來(lái)源:傳智教育 瀏覽次數(shù):

好口碑IT培訓(xùn)

通過(guò)CSS選擇器獲取元素的方式是非常靈活的,但是CSS選擇器獲取元素后只能操作該元素的樣式,要想為元素添加行為(如處理單擊事件),還需要通過(guò)JavaScript代碼來(lái)實(shí)現(xiàn)。為此,jQuery 模仿CSS選擇器實(shí)現(xiàn)了jQuery選擇器,通過(guò)jQuery選擇器來(lái)獲取元素,不僅讓獲取元素的方式更加多樣化,而且可以在獲取元素后為元素添加行為。

jQuery選擇器的基本語(yǔ)法格式如下所示。

$(selector);

上述代碼中,selector代表jQuery選擇器,代碼執(zhí)行后,返回一個(gè)jQuery對(duì)象。

接下來(lái)通過(guò)與CSS選擇器對(duì)比的方式演示jQuery選擇器的基本用法。具體操作步驟如下所示。

(1)準(zhǔn)備頁(yè)面結(jié)構(gòu)

<div id="myDiv">我是一個(gè)div</div>


(2)通過(guò)CSS添加樣式

#myDiv {
    border: 1px solid black;
}

上述代碼中,使用CSS選擇器獲取id值為myDiv的div元素,并為div元素添加樣式,頁(yè)面效果如下圖所示。

1624265976885_添加樣式的div.png


(3)通過(guò)jQuery添加樣式

在不使用CSS代碼的情況下,使用jQuery代碼也可以實(shí)現(xiàn)和上圖相同的效果,如下所示。

$('#myDiv').css('border', '1px solid black');

上述代碼中,使用jQuery選擇器獲取id值為myDiv的div元素,然后調(diào)用jQuery的css()方法為該元素添加樣式。 需要注意的是,使用jQuery選擇器獲取元素后,由于返回的是jQuery對(duì)象,所以不僅能為元素添加樣式,而且支持為元素添加行為。例如,為元素綁定事件、操作元素屬性等操作。此處只要了解jQuery選擇器的使用即可。

jQuery選擇器的優(yōu)勢(shì)

不使用jQuery選擇器的情況下,開(kāi)發(fā)者經(jīng)常通過(guò)JavaScript來(lái)獲取DOM元素,示例代碼如下所示。

// 根據(jù)id值獲取元素
document.getElementById('id的值');
// 根據(jù)元素的名稱獲取元素
document.getElementsByTagName('元素的名稱');

與上述代碼不同的是,jQuery 選擇器獲取元素對(duì)象的方式更加簡(jiǎn)潔,如下所示。

// 根據(jù)id值獲取元素
$('#id的值');
// 根據(jù)元素的名稱獲取元素
$('元素的名稱');

實(shí)際上jQuery選擇器的出現(xiàn)不僅是為了簡(jiǎn)化JavaScript的寫(xiě)法,也是由于JavaScript提供的選擇DOM的方式較少,難以滿足實(shí)際開(kāi)發(fā)的眾多需求。因此,jQuery 選擇器中提供了更多選擇DOM的方式,支持從CSS1到CSS3所有的選擇器以及其他常用的選擇器。

0 分享到:
和我們?cè)诰€交談!