关于html()和css()方法的完善
在jQuery里，html()方法既能设置内容，还能取回里面的内容。这里我们要完善的就是取回内容的功能。通过arguments这个属性的length属性来判断参数的个数，从而来实现。代码如下:
Tar.prototype.html = function(str) { for(var i = 0; i < this.elements.length; i++) { if(arguments.length == 0) { return this.elements[i].innerHTML; } this.elements[i].innerHTML = str; } return this; }
这里判断参数的个数如果为0个，则返回该节点的内容。否则就设置。
在jQuery里，css()方法和html类似，也是既可以设置，也可以取回css的属性的值。方法也是利用了arguments.length。代码如下:
Tar.prototype.css = function(attr, value) { for(var i = 0; i < this.elements.length; i++) { if(arguments.length == 1) { 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; }
这里判断参数的个数如果为一个，即要取回css属性的属性名，然后判断浏览器支持哪种计算css样式的方法。如果是W3C,比如Chrome，Firefox这些，就将
window.getComputedStyle(this.elements[i], null)[attr];
返回回来。如果是IE的话，就将:
this.elements[i].currentStyle[attr];
返回回来。
根据class取的节点集合的方法——getClass()
首先创建我们的getClass方法:
Tar.prototype.className = function() { }
由于getElementsByClassName的兼容问题(IE8>...)，这里我们取回所有节点，然后通过比较className的值来查找出一个集合。代码如下:
Tar.prototype.className = function(className) { var all = document.getElementsByTagName("*"); for(var i = 0; i < all.length; i++) { this.elements.push(all[i]); } return this; }
在这里我们将所有class为className的元素取到了，可以如果我们要是限定范围，该怎么办？这里我们限定为id内。
Tar.prototype.getClass = function(className, idName) { var node = null; if(arguments.length == 2) { node = document.getElementById(idName); }else{ node = document; } var all = node.getElementsByTagName("*"); for(var i = 0; i < all.length; i++) { if(all[i].className == className) { this.elements.push(all[i]); } } return this; };
这里我们有一个node变量，用于存储搜索是从哪里开始。如果参数的个数为2，即有范围的查询，则确定node为id=idName的元素，否则从全文文档开始。
酱紫我们完成了今天的任务了嘛？没有，如果我想要这些元素中的某一个元素该怎么办？我们来创建一个getElement()方法:
Tar.prototype.getElement = function(num) { }
参数num为查找元素的索引。
实现也很容易，就是将我们要找的元素this.elements[num]赋给一个变量，这里我们创建var element.然后清空数组，再将element通过push()方法或者直接赋值给this.elements[0]添加到数组里。最后返回this对象。
Tar.prototype.getElement = function(num) { var element = this.elements[num]; this.elements = []; this.elements[0] = element; return this; }
因为其他的操作每次都是查询的this.elements这个数组来操作，所以我们通过修改this.elements来实现指定某一个元素。
最后我们将function Tar(){}里内容都解放出来，只留数组在里面，完整代码如下:
//前台调用 var $ = function() { return new Tar(); } //基础库 function Tar() { //存储节点数组 this.elements = []; }; //获取ID节点 Tar.prototype.getId = function(id) { this.elements.push(document.getElementById(id)); return this; }; //获取Name节点 Tar.prototype.getName = function(name) { var names = document.getElemntsByName(name); for(var i = 0; i < names.length; i++) { this.elements.push(names[i]); } return this; }; //获取元素节点 Tar.prototype.getTagName = function(tagName) { var tags = document.getElementsByTagName(tagName); for(var i = 0; i < tags.length; i++) { this.elements.push(tags[i]); } return this; }; //获取Class节点 Tar.prototype.getClass = function(className, idName) { var node = null; if(arguments.length == 2) { node = document.getElementById(idName); }else{ node = document; } var all = node.getElementsByTagName("*"); for(var i = 0; i < all.length; i++) { if(all[i].className == className) { this.elements.push(all[i]); } } return this; }; Tar.prototype.className = function(className) { var all = document.getElementsByTagName("*"); for(var i = 0; i < all.length; i++) { this.elements.push(all[i]); } return this; } //取的某个一个元素 Tar.prototype.getElement = function(num) { var element = this.elements[num]; this.elements = []; this.elements[0] = element; return this; } //css方法 Tar.prototype.css = function(attr, value) { for(var i = 0; i < this.elements.length; i++) { if(arguments.length == 1) { 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; } //html方法 Tar.prototype.html = function(str) { for(var i = 0; i < this.elements.length; i++) { if(arguments.length == 0) { return this.elements[i].innerHTML; } this.elements[i].innerHTML = str; } return this; }
今天就到这里，待续。。。。。
//前台调用var $ = function() { return new Tar();}//基础库function Tar() { //存储节点数组 this.elements = [];};//获取ID节点Tar.prototype.getId = function(id) { this.elements.push(document.getElementById(id)); return this;};//获取Name节点Tar.prototype.getName = function(name) { var names = document.getElemntsByName(name); for(var i = 0; i < names.length; i++) { this.elements.push(names[i]); } return this;};//获取元素节点Tar.prototype.getTagName = function(tagName) { var tags = document.getElementsByTagName(tagName); for(var i = 0; i < tags.length; i++) { this.elements.push(tags[i]); } return this;};//获取Class节点Tar.prototype.getClass = function(className, idName) { var node = null; if(arguments.length == 2) { node = document.getElementById(idName); }else{ node = document; } var all = node.getElementsByTagName("*"); for(var i = 0; i < all.length; i++) { if(all[i].className == className) { this.elements.push(all[i]); } } return this;};Tar.prototype.className = function(className) { var all = document.getElementsByTagName("*"); for(var i = 0; i < all.length; i++) { this.elements.push(all[i]); } return this;}
//取的某个一个元素Tar.prototype.getElement = function(num) { var element = this.elements[num]; this.elements = []; this.elements[0] = element; return this;}//css方法Tar.prototype.css = function(attr, value) { for(var i = 0; i < this.elements.length; i++) { if(arguments.length == 1) { 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;}//html方法Tar.prototype.html = function(str) { for(var i = 0; i < this.elements.length; i++) { if(arguments.length == 0) { return this.elements[i].innerHTML; } this.elements[i].innerHTML = str; } return this;}
一个前端博客（2）——完善css功能，以及通过class获取元素的方法
原文：http://www.cnblogs.com/targeral/p/4908998.html