html5能用jquery吗,使用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了。而且想怎么改就怎么改！