Home > Web Front-end > JS Tutorial > A cssQuery object javascript script implementation code_js object-oriented

A cssQuery object javascript script implementation code_js object-oriented

WBOY
Release: 2016-05-16 18:49:38
Original
1191 people have browsed it
Copy code The code is as follows:

/**
* @author Supersha
* @QQ:770104121
*/
var cssQuery = {
//parent: used to store a reference to the parent node of the current node
parent: document,
select: function(selectorStr){
var selectors=selectorStr.split(" "); // Separated string
for (var i = 0, len = selectors.length; i < len; i ) {
var el = this.parent || document; //Node used to store specified class attributes Reference
var val=this.replaceStr(selectors[i]); //Replace the "#" and "." dots to obtain the node reference of the specified ID
if (selectors.length == 1) { //If there is only one parameter
if (!(/[#.]/g).test(selectors[i])) { //If it is an HTML tag
return document.getElementsByTagName(selectors[ i]);
}
else { //If it is an ID or a specified class value
//Determine whether it is an ID or a class attribute
return (this.IDLabel(selectors[i]))? this.$(val) : this.getElementsByClassName(document, "*", val);
}
}
//If the last ID or class or HTML tag in the selectorStr character is reached
else if(i == selectors.length-1){
if (!(/[#.]/g).test(selectors[i])) { //If it is an HTML tag
return el .getElementsByTagName(selectors[i]);
}
else { //If it is an ID or class attribute
return (this.IDLabel(selectors[i])) ? this.$(val) : this .getElementsByClassName(el,"*",val);
}
}
else{ //If there are more than two levels of selectorStr, store the reference of the current node in the parent attribute
if ( !(/[#.]/g).test(selectors[i])) { //If it is an HTML tag
this.parent = el.getElementsByTagName(selectors[i])[0];
}
else { //If it is an ID or class attribute
this.parent = ((/#/gi).test(selectors[i])) ? this.$(val) : el;
}
}
}
},
$: function(id){ //Reference used to get the specified ID
return document.getElementById(id);
},
IDLabel: function(selector){ //Determine whether it is an ID attribute
return ((/#/gi).test(selector)) ? true : false;
},
classLabel: function(selector ){ //Determine whether it is a class attribute
return ((/./gi).test(selector)) ? true : false;
},
replaceStr:function(a){ //Replace "#" and "." dots are used to obtain the node reference of the specified ID
return a.replace("#","").replace(".","");
},
getElementsByClassName: function(el, tag, classname){ //Get the reference of the element containing the class attribute value through the class attribute value
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)) { //Detect class names according to regular rules
matchElements.push(element);
}
}
return matchElements;
}
}
//Call method: cssQuery.select(selectorString); selectorString like this: "#p #b .em",
//Can receive a combination of HTML tags, ID, and class, and return the specified selectorString References
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template