Javascript封裝id、class與元素選擇器方法示例
更新時(shí)間：2017年03月13日 11:03:16 作者：zengzeng91
這篇文章主要給大家介紹了Javascript封裝id、class與元素選擇器的方法，文中給出了詳細(xì)的示例代碼，對(duì)大家的理解和學(xué)習(xí)具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。
由于各個(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')兼容性有問題
}else{
//document.getElementsByTagName('*')+正則表達(dá)式
//\s空白字符 ^開始 $結(jié)束
var reg=new RegExp('^|\\s'+className+'$|\\s');
var elems=document.getElementsByTagName("*");//獲取頁面中所有元素
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é)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
您可能感興趣的文章:
相關(guān)文章
JS實(shí)現(xiàn)的拋物線運(yùn)動(dòng)效果示例
這篇文章主要介紹了JS實(shí)現(xiàn)的拋物線運(yùn)動(dòng)效果,結(jié)合實(shí)例形式分析了javascript拋物線運(yùn)動(dòng)的相關(guān)運(yùn)算與元素動(dòng)態(tài)操作實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-01-01
JS類中定義原型方法的兩種實(shí)現(xiàn)的區(qū)別
JS類中定義原型方法的兩種實(shí)現(xiàn)的區(qū)別...2007-03-03
使用Bootstrap美化按鈕實(shí)例代碼(demo)
這篇文章主要介紹了使用Bootstrap美化按鈕實(shí)例代碼(demo),非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02
javascript中強(qiáng)制執(zhí)行toString()具體實(shí)現(xiàn)
Javascript通常會(huì)根據(jù)方法或運(yùn)算符的需要而自動(dòng)把值轉(zhuǎn)成所需的類型，這可能導(dǎo)致各種錯(cuò)誤，接下來為大家介紹下javascript如何強(qiáng)制執(zhí)行toString()，感興趣的朋友可以參考下哈2013-04-04
ASP中用Join和Array，可以加快字符連接速度的代碼...2007-08-08
這篇文章主要介紹了淺析微信掃碼登錄原理(小結(jié))，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10
相信大家經(jīng)常在一些網(wǎng)站上看到有快捷分享到各大流行網(wǎng)站的按鈕，目前流行的有JiaThis、百度分享、Bshare等，目前用百度分享的居多2013-07-07
淺析JavaScript 函數(shù)防抖和節(jié)流
這篇文章主要介紹了JavaScript 函數(shù)防抖和節(jié)流的相關(guān)資料，文中講解非常細(xì)致，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
JavaScript 通過模式匹配實(shí)現(xiàn)重載
昨天rank同學(xué)向我提出一個(gè)問題，在實(shí)際應(yīng)用中有些接口需要提供類似于函數(shù)重載的功能，以方便開發(fā)者組織代碼邏輯，簡化使用者調(diào)用。2010-08-08
js利用數(shù)組length屬性清空和截短數(shù)組的小例子
這篇文章主要介紹了js利用數(shù)組length屬性清空和截短數(shù)組的小例子，有需要的朋友可以參考一下2014-01-01