<pre>
// JavaScript Document
//前臺調用
var $ = function() {
return new Base();
};
//基礎類
function Base() {
//創建一個類
//創建一個數組來獲取一個節點和節點數組
this.elements = [];
}
</pre>
<pre>
//創建一個數組來獲取一個節點和節點數組
//Base.prototype.elements=[];這是是在類外面定義的，所以要把它放在類里面進行私有化
Base.prototype.getId = function(id) {
this.elements.push(document.getElementById(id));
return this;
};
</pre>
<pre>
//獲取元素節點
Base.prototype.getTagName = function(tag) {
var tags = document.getElementsByTagName(tag);
for (var i = 0; i < tags.length; i++) {
this.elements.push(tags[i]);
}
return this;
};
</pre>
<pre>
//獲取Class節點的信息
Base.prototype.getClass = function(className) {
var all = document.getElementsByTagName('*');
for (var i = 0; i < all.length; i++) {
if (all[i].className == className) {
this.elements.push(all[i]);
}
}
return this;
};
</pre>
<pre>
//獲取某一個節點
Base.prototype.getElement = function(num) {
var element = this.elements[num];
this.elements = [];
this.elements[0] = element;
return this;
};
</pre>
<pre>
//設置CSS
Base.prototype.css = function(attr, value) { //這里的參數是兩個
for (var i = 0; i < this.elements.length; i++) {
if (arguments.length == 1) { //當傳入的參數的長度等于1的時候（只傳入屬性），就返回這個元素的style
//這個只能獲取行內樣式，不能獲取css中的樣式
//return this.elements[i].style[attr];
//Dom中getComputedStyle方法可用來獲取元素中所有可用的css屬性列表，以數組形式返回，并且是readonly的。
//IE中則用currentStyle代替。
// 語法：arr_style=window.getComputedStyle(elem_id,ov)
if (typeof window.getComputedStyle != 'undefined') { //W3C
return window.getComputedStyle(this.elements[i], null)[attr];
} else if (typeof this.elements[i].currentStyle != 'undefined') { //IE
return this.elements[i].currentStyle[attr];
}
}
this.elements[i].style[attr] = value;
}
return this;
};
</pre>
<pre>
//設置innerHTML
Base.prototype.html = function(str) {
for (var i = 0; i < this.elements.length; i++) {
//這里判斷傳入的參數是否為0個，如果是0個則獲取這個的innerHTML
if (arguments.length == 0) {
return this.elements[i].innerHTML; //一旦這么設置就不能實現連綴了
}
this.elements[i].innerHTML = str;
}
return this;
};
</pre>
<pre>
//添加class屬性
Base.prototype.addClass = function(className) {
//先循環一下，看有多少個顏色
for (var i = 0; i < this.elements.length; i++) {
if (!this.elements[i].className.match(new RegExp(('//s|^') + className + '(//s|$)'))) {
//查看傳進來的屬性原來是否存在
this.elements[i].className += ' ' + className;
}
}
return this;
};
</pre>
<pre>
//刪除class屬性
Base.prototype.removeClass = function(className) {
for (var i = 0; i < this.elements.length; i++) {
if (!this.elements[i].className.match(new RegExp(('//s|^') + className + '(//s|$'))) { //查看傳進來的屬性原來是否存在
this.elements[i].className = this.elements[i].className.replace(new RegExp(('//s|^') + className + '(//s|$)'), ' ');
}
}
return this;
};
</pre>

<pre>
//添加link或style的CSS規則
Base.prototype.addRule = function(num, selectorText, cssText, position) {
var sheet = document.styleSheets[num];
if (typeof sheet.insertRule != 'undefined') { //w3c
sheet.insertRule(selectorText + '{' + cssText + '}', position);
} else if (typeof sheet.addRule != 'undefined') { //ie
sheet.addRule(selectorText, cssText, position);
}
return this; //返回this才能實行連綴功能
};
</pre>
<pre>
//刪除link或style的CSS規則
Base.prototype.removeRule = function(num, index) {
var sheet = document.styleSheets[num];
if (typeof sheet.deleteRule != 'undefined') { //W3C
sheet.deleteRule(index);
} else if (typeof sheet.removeRule != 'undefined') { //IE
sheet.removeRule(index);
}
return this;
};
</pre>
<pre>
//設置點擊事件
Base.prototype.click = function(fn) {
for (var i = 0; i < this.elements.length; i++) {
this.elements[i].onclick = fn;
}
return this;
};
</pre>
<pre>
// JavaScript Document
window.onload = function() {
//因為在base里面，返回的是一個base對象，而他本身也沒有設置html對象
//這里這么設置也是不需要實現連綴功能的
$().getId('box').html();

// 獲取class為red的第二個元素并設置css
$().getClass('red').getElement(2).css('color', 'green');

// 設置顏色
$().getId('box').css('color','red');

// 增加class
$().getId('pox').addClass('a').addClass('b');

// 增加/刪除class
$().getId('pox').addClass('a').addClass('b').removeClass('a');
$().addRule(0,'body','background:green',0).addRule(0,'div','font-size:150px',0);
$().removeRule(0,0);

}
</pre>