原生JS與JQ獲取元素的區(qū)別詳解
這篇文章主要介紹了原生JS與JQ獲取元素的區(qū)別詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
剛學(xué)JQ不久,有時候可能會把JS和JQ獲取元素的方式搞錯,接下來獲取屬性方法什么的就一發(fā)不可收拾了,現(xiàn)在把兩者獲取獲取元素的代碼整理下。
一.原生JS獲取元素。
1.常用的三種方式獲取元素對象(將指定的元素封裝成DOM對象):
(1)通過元素ID獲?。篸ocument.getElementById(),示例如下:
我們在控制臺輸出,結(jié)果如下:
可以看到我們獲取到了id為div1的元素代碼了
(2)通過元素標(biāo)簽名獲?。篸ocument.getElementsByTagName(),它以數(shù)組的形式返回,具體示例如下:
控制臺輸出如下:
是不是我們獲取到了兩個ul中的li,并以數(shù)組的形式顯示;那如果我們想獲取指定的li,比如我就只獲取第一個ul的li怎么辦呢?
這個就得結(jié)合到剛才我們ID獲取元素的方式,具體實例如下:
控制臺輸出如下:
這樣我們就獲取到了第一個ul下的li而不包括第二個ul的li
(3)通過元素類名獲?。篸ocument.getElementByClassName();它返回的也是一個數(shù)組,示例如下:
控制臺輸出:
這樣類名為sp的元素我們就獲取到了
二.JQ獲取元素。
1.JQ獲取元素的代碼語法比原生JS更加簡潔,在上面原生JS獲取元素的代碼我們發(fā)現(xiàn)代碼比較長;
現(xiàn)在JQ提供一個工廠函數(shù):$();通過“$(參數(shù))”的形式我們就可以創(chuàng)建JQ的實例對象(JQ對象);
JQ提供很多的選擇器供我們獲取元素,這里就列舉常見的三種選擇器
(1)ID選擇器(返回一個元素)
控制臺輸出看下:
可以看到div1被封裝成一個JQ對象。
(2)類選擇器(返回的是集合),根據(jù)類名匹配元素;
(3)元素選擇器(返回的是集合),根據(jù)元素名匹配元素;
OK,JS和JQ獲取元素的區(qū)別分享到這了
如果有錯的地方,望大家指出!
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- js jquery 獲取某一元素到瀏覽器頂端的距離實現(xiàn)方法
- JS與jQuery實現(xiàn)子窗口獲取父窗口元素值的方法
- JavaScript與JQUERY獲取元素的寬、高和位置
- 使用jquery/js獲取iframe父子級、同級獲取元素的方法
- JavaScript和jquery獲取父級元素、子級元素、兄弟元素的方法
- js jquery獲取當(dāng)前元素的兄弟級 上一個 下一個元素
- Js與Jq 獲取頁面元素值的方法和差異對比
- js與jquery獲取父級元素,子級元素,兄弟元素的實現(xiàn)方法
- js與jquery獲取父元素,刪除子元素的兩種不同方法
- JS和JQUERY獲取頁面大小,滾動條位置,元素位置(示例代碼)
相關(guān)文章
TypeScript使用函數(shù)重載確定返回類型的實現(xiàn)方法
這篇文章主要介紹了TypeScript使用函數(shù)重載確定返回類型的實現(xiàn)方法,文中通過代碼示例講解的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-03-03WEB泡泡堂2.0(圖形界面+電腦對玩)(javascript)
WEB泡泡堂2.0(圖形界面+電腦對玩)(javascript)2007-01-01深入理解JavaScript系列(7) S.O.L.I.D五大原則之開閉原則OCP
本章我們要講解的是S.O.L.I.D五大原則JavaScript語言實現(xiàn)的第2篇,開閉原則OCP(The Open/Closed Principle )。2012-01-01