使用HTML5简单实现一个JQuery

　　最近在做一个Android平台的几个WebApp，一开始使用JQuery类库，在后来性能优化的时候发现有些问题：一是JQuery类库有点大，在网络加载的时候有点慢，二是加载类库执行有点慢；后来就可以是否应该用JQuery。大部分是用JQuery的时候，用的最多的也就是JQuery对DOM操作方便和Ajax方便；JQuery的开发代码有9000多行，而且很多功能我们是用不到的；加上开发平台是Android，浏览器当然固定是webkit内核了，所以兼容性的代码要去掉好大一部分。所以我开始考虑来写一个简单使用的代码库，这样就可以不用使用JQuery了。

　　JQuery最强大的地方莫过于她的选择器，要写个类库要满足这个功能；HTML5就提供了这个标准：document.querySelector、document.querySelectorAll！

　　document.querySelector返回的是DOM对象，document.querySelectorAll返回的是DOM数组，那么就可以这样来实现我们需要的JQuery功能了。

(function (global){
var Query = {
Insert : function (param) {
var object = document.createElement(param.type);
if(param.id) object.id = param.id;
if(param.class) object.className = param.class;
if(param.html) object.innerHTML = param.html;
if(param.parent) {
param.parent.append(object);
}
else{
document.body.appendChild(object);
}
},

Get : function (obj){
var ele = null;
if(typeof(obj) == 'string'){
ele = document.querySelectorAll(obj);
}
else{
ele = [obj];
}
var query = {
element : ele,

eq : function (i) {
if(this.element && this.element.length > 0){
return $$(this.element[i]);
}
return null;
},

get : function (i) {
var _ = this.eq(i);
return _ ? _.element[0] : null;
},

html : function (html){
if(this.element && this.element.length > 0){
if(arguments.length == 1){
for (var i = 0; i < this.element.length; i++) {
this.element[i].innerHTML = html;
};
}
else{
return this.element[0].innerHTML;
}
}
},

css : function (name, value){
if(this.element && this.element.length > 0){
if(arguments.length == 2) {
this.element[0].style[name] = value;
}
else{
return this.element[0].style[name];
}
}
},

append : function (object){
if(this.element && this.element.length > 0){
for (var i = 0; i < this.element.length; i++) {
this.element[i].appendChild(object);
}
}
},

remove : function (object){
if(this.element && this.element.length > 0){
for (var i = 0; i < this.element.length; i++) {
if(this.element[i].parentNode){
this.element[i].parentNode.removeChild(this.element[i]);
}
else{
document.body.removeChild(this.element[i]);
}
};
}
},

insert : function (param){
if(this.element && this.element.length > 0){
for (var i = 0; i < this.element.length; i++) {
var object = document.createElement(param.type);
if(param.id) object.id = param.id;
if(param.class) object.className = param.class;
if(param.html) object.innerHTML = param.html;
this.element[i].appendChild(object);
}
}
},

click : function (fn){
this.bind('click', fn);
},

bind : function(type, fn){
if(this.element && this.element.length > 0){
for (var i = 0; i < this.element.length; i++) {
this.element[i].addEventListener(type, fn);
}
}
},

attr : function(name){
if(this.element && this.element.length > 0){
var attr = this.element[0].attributes[name];
if(attr){
return attr.value;
}
}
return null;
}
}
return query;
},

ajax : function(p) {
var xhr = new XMLHttpRequest();
if(p.url){
if(p.type && p.type.toUpperCase() == 'POST') {
p.type = 'POST';
}
else{
p.type = 'GET';
}
if(p.async){
p.async = true;
}
else{
p.async = false;
}
xhr.onerror = p.error;
xhr.open(p.type, p.url, p.async);
xhr.onreadystatechange = function () {
if(xhr.readyState === 1){
if(p.beforeSend) {
p.beforeSend();
}
}
else if(xhr.readyState === 4){
if(xhr.status == 200) {
p.success && p.success(xhr.responseText);
}
else{
console.log(p.url, xhr.status);
p.error && p.error( xhr.status, xhr );
}
p.complete && p.complete();
}
}
xhr.send( p.data || null );
}
this.abort = function (){
xhr.abort();
};
}
};
global.Query = global.$ = Query;
global.$$ = Query.Get;
})(window);

一百多行代码，很方便，不用在去加载那几百K的JQuery了。而且想怎么改就怎么改！