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

成都創(chuàng)新互聯(lián)長(zhǎng)期為1000多家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為雙塔企業(yè)提供專業(yè)的網(wǎng)站設(shè)計(jì)制作、網(wǎng)站制作，雙塔網(wǎng)站改版等技術(shù)服務(wù)。擁有10多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

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

一.原生JS獲取元素。

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

（1）通過(guò)元素ID獲取：document.getElementById()，示例如下：

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

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

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

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

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

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

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

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

控制臺(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提供很多的選擇器供我們獲取元素，這里就列舉常見的三種選擇器

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

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

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

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

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

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

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

分享文章：原生JS與JQ獲取元素的區(qū)別詳解-創(chuàng)新互聯(lián)
文章分享：http://www.chinadenli.net/article0/dccdoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、Google、域名注冊(cè)、網(wǎng)站收錄、標(biāo)簽優(yōu)化、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)