- [Javascript] Very Small/Light Weight JQuery Clone
- 10 Apr 2014 12:43:06 pm
- Last edited by spud2451 on 10 Apr 2014 04:36:42 pm; edited 1 time in total
Hey everyone, Spud again! As of late I've been getting more into web development (I even did a job shadow at a web development company last week). And as I've been doing my thing, I've realized the ease of JQuery, but along with it being easy its also pretty heavy weight. So I built a small light weight clone of it for your sites. It's pretty limited but it has some of the key features in it so it should be good for most things. So here you go here's the code. Feel free to do whatever you want with it.
Code:
EDIT: added support for plugins!
Plugin Example:
Code:
Plugin Call Example:
$("#3D").plugin("make3D",[255,100,100]);
PS. I'm not going to explain the commands. If you know Javascript you should be able to find them yourself.
Code:
function $(tag){
if(tag.slice(0,1) == "#"){
this.results = [document.getElementById(tag.slice(1,tag.length))];
}else if(tag.slice(0,1) == "."){
this.results = document.getElementsByClassName(tag.slice(1,tag.length));
}else{
this.results = document.getElementsByTagName(tag);
}
return new SQueryObject(results);
}
function SQPlugin(){
this.plugins = {}
this.addPlugin = function (name,func){
this.plugins[name] = func;
}
}
var SQPlugins = new SQPlugin;
function SQueryObject(results){
this.results = results;
this.css = function(csstag,cssdata){
for (i=0;i < this.results.length; i++){
this.results[i].style[csstag] = cssdata;
}
return results;
}
this.append = function(data){
for(i=0;i < this.results.length; i++){
this.results[i].innerHTML += data;
}
return results;
}
this.html = function(data){
for(i=0;i < this.results.length; i++){
this.results[i].innerHTML = data;
}
return results;
}
this.value = function(data){
for(i=0;i < this.results.length; i++){
this.results[i].value = data;
}
return results;
}
this.hide = function(){
for(i=0;i < this.results.length; i++){
this.results[i].style.visibility = "hidden";
}
return results;
}
this.show = function(){
for(i=0;i < this.results.length; i++){
this.results[i].style.visibility = "visible";
}
return results;
}
this.plugin = function(func,params){
SQPlugins.plugins[func](this.results,params);
}
}EDIT: added support for plugins!
Plugin Example:
Code:
function plugFunc(results,params){
r = params[0];
g = params[1];
b = params[2];
for(i=0;i < results.length; i++){
res = results[i];
res.style.backgroundColor = "rgba("+r+","+g+","+b+",1)";
res.style.borderRadius = "5px";
res.style.border = "1px solid rgba("+(r+40).toString()+","+(g+40).toString()+","+(b+40).toString()+",1)";
res.style.boxShadow = "0px 5px 0px rgba("+(r-40).toString()+","+(g-40).toString()+","+(b-40).toString()+",1)";
console.log("0px 5px 0px rgba("+(r-40).toString()+","+(g-40).toString()+","+(b-40).toString()+",1)");
}
return results;
}
SQPlugins.addPlugin("make3D",plugFunc);Plugin Call Example:
$("#3D").plugin("make3D",[255,100,100]);
PS. I'm not going to explain the commands. If you know Javascript you should be able to find them yourself.
Life is really simple, but we insist on making it complicated. -confucius
