這篇文章主要介紹了原生JS與JQ獲取元素的區(qū)別詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

剛學(xué)JQ不久，有時(shí)候可能會(huì)把JS和JQ獲取元素的方式搞錯(cuò)，接下來(lái)獲取屬性方法什么的就一發(fā)不可收拾了，現(xiàn)在把兩者獲取獲取元素的代碼整理下。

一.原生JS獲取元素。

1.常用的三種方式獲取元素對(duì)象（將指定的元素封裝成DOM對(duì)象）：

（1）通過(guò)元素ID獲?。篸ocument.getElementById()，示例如下：

我們?cè)诳刂婆_(tái)輸出，結(jié)果如下：

可以看到我們獲取到了id為div1的元素代碼了

（2）通過(guò)元素標(biāo)簽名獲?。篸ocument.getElementsByTagName()，它以數(shù)組的形式返回，具體示例如下：

控制臺(tái)輸出如下：

是不是我們獲取到了兩個(gè)ul中的li，并以數(shù)組的形式顯示；那如果我們想獲取指定的li，比如我就只獲取第一個(gè)ul的li怎么辦呢？

這個(gè)就得結(jié)合到剛才我們ID獲取元素的方式，具體實(shí)例如下：

控制臺(tái)輸出如下：

這樣我們就獲取到了第一個(gè)ul下的li而不包括第二個(gè)ul的li

（3）通過(guò)元素類名獲?。篸ocument.getElementByClassName()；它返回的也是一個(gè)數(shù)組，示例如下：

控制臺(tái)輸出：

這樣類名為sp的元素我們就獲取到了

二.JQ獲取元素。

1.JQ獲取元素的代碼語(yǔ)法比原生JS更加簡(jiǎn)潔，在上面原生JS獲取元素的代碼我們發(fā)現(xiàn)代碼比較長(zhǎng)；

現(xiàn)在JQ提供一個(gè)工廠函數(shù)：$()；通過(guò)“$(參數(shù))”的形式我們就可以創(chuàng)建JQ的實(shí)例對(duì)象（JQ對(duì)象）；

JQ提供很多的選擇器供我們獲取元素，這里就列舉常見(jiàn)的三種選擇器

（1）ID選擇器（返回一個(gè)元素）

控制臺(tái)輸出看下：

可以看到div1被封裝成一個(gè)JQ對(duì)象。

（2）類選擇器（返回的是集合），根據(jù)類名匹配元素；

（3）元素選擇器(返回的是集合)，根據(jù)元素名匹配元素；

OK,JS和JQ獲取元素的區(qū)別分享到這了

如果有錯(cuò)的地方，望大家指出！

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論