Javascript封裝id、class與元素選擇器方法示例
更新時(shí)間：2017年03月13日 11:03:16 作者：zengzeng91
這篇文章主要給大家介紹了Javascript封裝id、class與元素選擇器的方法，文中給出了詳細(xì)的示例代碼，對(duì)大家的理解和學(xué)習(xí)具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。
由于各個(gè)瀏覽器都支持的選擇方法只有如下三種：
1、document.getElementById()
2、document.getElementsByName()
3、document.getElementsByTagName()
所以在封裝選擇器的時(shí)候要考慮瀏覽器的兼容性。
示例代碼如下：
<script>//封裝id選擇器
function $(selector){
var c=selector.substring(0,1);//獲取第一個(gè)字符
if(c=="#"){
return document.getElementById(selector.substring(1,selector.length));//返回相應(yīng)的元素
}
}
//封裝class選擇器
function $(selector){
var className=selector.substring(1);//從索引為1的元素往后取
//判斷瀏覽器是否支持getElementsByClassName
if(document.getElementsByClassName){
return document.getElementsByClassName(className)
//document.querySelectorAll('.cls')兼容性有問(wèn)題
}else{
//document.getElementsByTagName('*')+正則表達(dá)式
//\s空白字符 ^開(kāi)始 $結(jié)束
var reg=new RegExp('^|\\s'+className+'$|\\s');
var elems=document.getElementsByTagName("*");//獲取頁(yè)面中所有元素
var arr=[];//保存獲取到的指定className的元素
for(var i=0;i<elems.length;i++){
if(reg.test(elems[i].className)){//如果和模式匹配上
arr.push(elem[i]);
}
}
return arr;
}
}
//封裝標(biāo)簽選擇器
function $(element){
return document.getElementsByTagName(element);
}
</script>
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義膠囊樣式，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)單放大鏡特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
javascript自啟動(dòng)函數(shù)的問(wèn)題探討
自啟動(dòng)函數(shù)想必大家并不陌生吧，在本文將為大家詳細(xì)探討下，感興趣的朋友可不要錯(cuò)過(guò)2013-10-10
這篇文章主要介紹了微信小程序防止重復(fù)點(diǎn)擊按鈕的示例代碼,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-10-10
bootstrap table分頁(yè)模板和獲取表中的ID方法
這篇文章主要介紹了bootstrap table分頁(yè)模板和獲取表中的ID方法,需要的朋友可以參考下2017-01-01
Javascript表格翻頁(yè)效果實(shí)現(xiàn)思路及代碼
表格翻頁(yè)的實(shí)現(xiàn)方式有很多，下面以js為例為大家詳細(xì)介紹下表格翻頁(yè)效果的具體實(shí)現(xiàn)，感興趣的朋友可以參考下2013-08-08
JS如何實(shí)現(xiàn)基于websocket的多端橋接平臺(tái)
我們?cè)谡{(diào)試過(guò)程使用的工具有：modheader,postman等，但這些工具都會(huì)存在的問(wèn)題：缺少客戶端里相應(yīng)的設(shè)備信息；即使將cookie信息復(fù)制出來(lái)，也是存在過(guò)期的問(wèn)題；多個(gè)設(shè)備之間切換時(shí)不方便；針對(duì)這些存在的問(wèn)題，我基于websocket雙向通信的特點(diǎn)，實(shí)現(xiàn)了多端橋接管理平臺(tái)2021-05-05
為了避免用戶鼠標(biāo)無(wú)意識(shí)劃過(guò)，而觸發(fā)事件。浪費(fèi)客戶端資源。2010-05-05
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)炫酷的煙花效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
js實(shí)現(xiàn)動(dòng)態(tài)添加上傳文件頁(yè)面
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)動(dòng)態(tài)添加上傳文件頁(yè)面，如何動(dòng)態(tài)創(chuàng)建一個(gè)input標(biāo)簽示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-10-10