一個cssQuery對象 javascript指令碼實現代碼

來源:互聯網
上載者:User

複製代碼 代碼如下:/**
* @author Supersha
* @QQ:770104121
*/
var cssQuery = {
//parent:用於儲存當前節點的父節點的引用
parent: document,
select: function(selectorStr){
var selectors=selectorStr.split(" "); //分隔字串
for (var i = 0, len = selectors.length; i < len; i++) {
var el = this.parent || document; //用於儲存指定class屬性的節點引用
var val=this.replaceStr(selectors[i]); //代替掉"#"和"."點號,用於擷取指定的ID的節點引用
if (selectors.length == 1) { //如果只有一個參數
if (!(/[#.]/g).test(selectors[i])) { //如果是HTML標籤
return document.getElementsByTagName(selectors[i]);
}
else { //如果是ID或者指定的class值
//判斷是ID還是class屬性
return (this.IDLabel(selectors[i])) ? this.$(val) : this.getElementsByClassName(document, "*", val);
}
}
//如果達到selectorStr字元號中最後的那個ID或者class或者HTML標籤
else if(i == selectors.length-1){
if (!(/[#.]/g).test(selectors[i])) { //如果是HTML標籤
return el.getElementsByTagName(selectors[i]);
}
else { //如果是ID或者class屬性
return (this.IDLabel(selectors[i])) ? this.$(val) : this.getElementsByClassName(el,"*",val);
}
}
else{ //如果存在兩級以上的selectorStr,則儲存當前節點的引用到parent屬性中
if (!(/[#.]/g).test(selectors[i])) { //如果是HTML標籤
this.parent = el.getElementsByTagName(selectors[i])[0];
}
else { //如果是ID或者class屬性
this.parent = ((/#/gi).test(selectors[i])) ? this.$(val) : el;
}
}
}
},
$: function(id){ //用於得到指定ID的引用
return document.getElementById(id);
},
IDLabel: function(selector){ //判斷是否是ID屬性
return ((/#/gi).test(selector)) ? true : false;
},
classLabel: function(selector){ //判斷是否是class屬性
return ((/\./gi).test(selector)) ? true : false;
},
replaceStr:function(a){ //替換掉"#"和"."點號,用於擷取指定的ID的節點引用
return a.replace("#","").replace(".","");
},
getElementsByClassName: function(el, tag, classname){ //通過class屬性值擷取含有class屬性值的元素的引用
var elem = el || document;
if (!classname)
return;
tag = tag || "*";
var allTagsDom = ((tag == "*") && (elem.all)) ? elem.all : elem.getElementsByTagName(tag);
classname = classname.replace(/\-/g, "\\-");
var regex = new RegExp("(^|\\s*)" + classname + "(\\s*|$)");
var matchElements = new Array();
var element;
for (var i = 0; i < allTagsDom.length; i++) {
element = allTagsDom[i];
if (regex.test(element.className)) { //根據正則來檢測類名
matchElements.push(element);
}
}
return matchElements;
}
}
//調用方法:cssQuery.select(selectorString); selectorString 像這種:"#p #b .em",
//可以接收HTML標籤和ID、class的組合,返回指定的selectorString的引用
相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.