Ja jeg har faktisk set en hel del på jQuery, jeg har tilmed læst en stor del af frameworket, jeg kan bare ikke rigtig gøre op med mig selv om det er noget jeg skal benytte.
Jeg har i mellemtiden forsøgt mig jQuery, og må da sige at det gør mange ting letter, der er dog også nogle aspekter hvor der ikke bliver gjort brug af DOM men innerHTML. Det er ikke fordi jeg har noget imod innerHTML, men jeg syntes det har det med at give nogle problemer for mig fordi jeg ikke kan se nogen logik i at HTML skal behandles som tekst stænge.
Hvis nogen skulle været interesseret så er her en udvidelse til mit "framework" med en sammenligning til jQuery.
<!DOCTYPE html>
<html>
<head>
<title>Framework test</title>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
(function (window) {
var EVA = {};
EVA.DOM = function( selector ) {
return new EVA.DOM.fn.init( selector );
};
EVA.DOM.fn = EVA.DOM.prototype = {
selector: "",
length: 0,
nodes : [],
init : function (selector) {
this.selector = selector;
this.nodes = [];
this.length = 0;
if (typeof selector === 'undefined') {
return this;
} else if (typeof selector === 'string') {
if (selector.match(/<[a-z]+>/)) {
return this.create(selector.replace('<','').replace('>',''));
}
}
return this.push(selector);
},
concat : function (arr) {
for (var i=0;i<arr.length;i++) {
this.nodes.push(arr[i]);
this.length++;
}
return this;
},
push : function (selector) {
this.concat(this._select(selector));
return this;
},
_select : function (selector) {
var i,s,nodes=[];
if (typeof selector === 'string') {
selector = [selector];
}
if (typeof selector === 'object' && selector instanceof Array) {
for (i=0;i<selector.length;i++) {
if (typeof selector[i] === 'string') {
selector[i] = document.querySelectorAll(selector[i]);
for (s=0;s<selector[i].length;s++) {
nodes.push(selector[i][s]);
}
} else {
nodes.push(selector[i]);
}
}
}
return nodes;
},
run : function (func,parms) {
for (var i=0;i<this.length;i++) {
func(this.nodes[i],parms,this);
}
return this;
},
create : function (element) {
this.nodes.push(document.createElement(element));
this.length++;
return this;
},
attr : function (name, value) {
for (var i=0;i<this.length;i++) {
this.nodes[i].setAttribute(name,value);
}
return this;
},
css : function (name, value) {
var o = {}, n, i;
if (typeof name === 'string') {
o[name] = value;
name = o;
}
for (n in name) {
for (i=0;i<this.length;i++) {
if (typeof this.css.browserSupport[n] === 'function') {
this.css.browserSupport[n](this.nodes[i],name[n]);
} else {
this.nodes[i].style[n] = name[n];
}
}
}
return this;
},
appendTo : function (selector) {
var nodes = this._select(selector),i,s;
for (i=0;i<this.length;i++) {
for (s=0;s<nodes.length;s++) {
nodes[s].appendChild(this.nodes[i]);
}
}
return this;
},
text : function (text) {
for (i=0;i<this.length;i++) {
this.nodes[i].appendChild(document.createTextNode(text));
}
return this;
},
clear : function () {
for (i=0;i<this.length;i++) {
while (this.nodes[i].firstChild) {
this.nodes[i].removeChild(this.nodes[i].firstChild);
}
}
return this;
},
};
EVA.DOM.fn.css.browserSupport = {
float : function (ele,val) {
ele.style[document.all ? 'styleFloat' : 'cssFloat'] = val;
}
};
// installere funktioner i construktoren
EVA.DOM.fn.init.prototype = EVA.DOM.fn;
// Sender EVA ud til window.
window.EVA = EVA;
})(window);
</script>
<style type="text/css">
div.test {
float: left;
width: 200px;
height: 200px;
margin: 5px;
border: 20px solid #AAA;
}
</style>
</head>
<body>
<div id="foo1" class="test"></div>
<div id="foo2" class="test"></div>
<div id="bar1" class="test"></div>
<div id="bar2" class="test"></div>
<script type="text/javascript">
EVA.DOM('#foo1, #foo2').run(function (element) {
element.style.backgroundColor = '#F00';
}).text('DOM modificeret rød').css('color','#FFF');
var test = EVA.DOM('#bar1').run(function (element) {
element.style.backgroundColor = '#0F0';
}).text('DOM modificeret grøn');
EVA.DOM('#bar2').run(function (element) {
element.style.backgroundColor = '#00F';
}).text('DOM modificeret blå').css('color','#FFF');
test.push('#foo1').run(function (element) {
element.style.backgroundColor = '#0F0';
}).clear().text('DOM modificeret grøn');
EVA.DOM('<div>').css({
float : 'left',
width : '200px',
height : '200px',
margin : '5px',
border : '20px solid #AAA',
backgroundColor : '#FF0'
}).text('DOM indsat med EVA gul').appendTo('body');
$('<div>')
.css('float','left')
.css('width','200px')
.css('height','200px')
.css('margin','5px')
.css('border','20px solid #AAA')
.css('background-color','#F0F')
.text('indsat med jQuery lilla')
.appendTo('body');
$('<div>').css({
float : 'left',
width : '200px',
height : '200px',
margin : '5px',
border : '20px solid #AAA',
backgroundColor : '#0FF'
}).text('indsat med jQuery lysblå').appendTo('body');
</script>
</body>
</html>
