>  기사  >  웹 프론트엔드  >  CSSQuery 객체 자바스크립트 스크립트 구현 code_js 객체지향

CSSQuery 객체 자바스크립트 스크립트 구현 code_js 객체지향

WBOY
WBOY원래의
2016-05-16 18:49:381139검색
코드 복사 코드는 다음과 같습니다.

/**
* @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 || 지정된 클래스 속성 저장 Reference
var val=this.replaceStr(selectors[i]); //지정된 ID의 노드 참조를 얻으려면 "#" 및 "." 점을 바꿉니다. if (selectors.length == 1) { //매개변수가 하나만 있는 경우
if (!(/[#.]/g).test(selectors[i])) { //HTML 태그인 경우
return document.getElementsByTagName(selectors[ i]);
}
else { //ID이거나 지정된 클래스 값인 경우
//ID인지 클래스 속성인지 확인
return (this.IDLabel(selectors[i]))? this.$(val) : this.getElementsByClassName(document, "*", val)
}
}
//마지막 ID 또는 selectorStr 문자의 클래스 또는 HTML 태그에 도달했습니다.
else if(i == selectors.length-1){
if (!(/[#.]/g).test(selectors[i])) { //HTML 태그인 경우
return el .getElementsByTagName(selectors[i])
}
else { //ID 또는 클래스 속성인 경우
return (this.IDLabel (selectors[i])) ? this.$(val) : this .getElementsByClassName(el,"*",val)
}
}
else{ //레벨이 2개 이상인 경우 selectorStr의 상위 속성에 현재 노드의 참조를 저장합니다.
if ( !(/[#.]/g).test(selectors[i])) { //HTML 태그인 경우
this.parent = el.getElementsByTagName(selectors[i])[0];
}
else { //ID 또는 클래스 속성인 경우
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 ){ //클래스 속성인지 확인
return ((/./gi).test( selector)) ? true : false;
},
replaceStr:function(a){ //"#" 및 "." 점을 교체하여 지정된 ID의 노드 참조를 가져옵니다.
.replace("#","").replace(".","");
},
getElementsByClassName: function(el, tag, classname){ //다음을 포함하는 요소의 참조를 가져옵니다. 클래스 속성 값을 통한 클래스 속성 값
if (!classname)
return;
var allTagsDom = ((tag == "*") && (elem.all)) ? elem.all : elem.getElementsByTagName(tag);classname = classname.replace(/-/g, "\-"); >var regex = new RegExp("(^|\s*)" 클래스 이름 "(\s*|$)");
var matchElements = new Array()
var 요소; var i = 0; i < allTagsDom.length; i ) {
element = allTagsDom[i];
if (regex.test(element.className)) { //일반 규칙에 따라 클래스 이름 감지
matchElements.push(element);
}
}
return matchElements;
}
}
//호출 메서드: cssQuery.select(selectorString); "#p #b .em",
//HTML 태그, ID 및 클래스의 조합을 수신하고 지정된 selectorString을 반환할 수 있습니다. 참조

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.