window.onload

function 构造函数() { this.属性 };

function HQuery(arg) {
    this.elements = [];
    switch (typeof arg) { // 用switch来判断arg参数
        case  'function':  //函数
            // window.onload=arg;
            bindEvent(window, 'load', arg);
            break;
        case 'string':   //字符串
            switch (arg.charAt(0)) {
                case '#':  //id
                    this.elements.push(document.getElementById(arg.substring(1)));
                    break;
                case '.': //class
                    this.elements=getByClassName(document , arg.substring(1));
                    break;
                default : // 标签
                    this.elements=toArray(document.getElementsByTagName(arg));
                    break;
            }
            break;
        case 'object':
            this.elements.push(arg);
            break;
    }
}

读取html原型

// 选择器的构造函数的原型 构造函数.prototype.方法= function () { }
HQuery.prototype.html = function (str) {
   if(str){
       for (var i = 0; i < this.elements.length; i++) {
           this.elements[i].innerHTML = str;
       }
   }else{
       return this.elements[0].innerHTML;
   }
}

click事件原型

//事件 click
HQuery.prototype.click=function (fn) {
    // for (var i=0;i<this.elements.length;i++){
    //     bindEvent(this.elements[i],'click',fn)
    // }

   this.on('click',fn);
}

mouseover 事件原型

//  onmouseover(鼠标滑入事件)
HQuery.prototype.mouseover=function (fn) {
    // for (var i=0;i<this.elements.length;i++){
    //     bindEvent(this.elements[i],'click',fn)
    // }
   this.on('mouseover',fn)  //调用通过on 绑定事件
}

通过on 绑定事件 原型

//通过on 绑定事件
HQuery.prototype.on=function (event,fn) {
    for (var i=0;i<this.elements.length;i++){
        bindEvent(this.elements[i],event,fn)
    }
}

hide原型

//hide 隐藏
HQuery.prototype.hide=function () {
    for (var i=0;i<this.elements.length;i++){
        this.elements[i].style.display="none"
    }
}

show原型

//show 隐藏
HQuery.prototype.show=function () {
    console.log(this.elements)
    for (var i=0;i<this.elements.length;i++){
        this.elements[i].style.display="block"
        if(arguments==1){
           getStyle(this.elements[i],attr)
           console.log(this.elements[i])
        }
    }

}

hover 原型

//hover 双回调事件函数
HQuery.prototype.hover=function (Fnover,Fnout) {
    this.on('mouseover',Fnover)
    this.on('mouseout',Fnout)
}

css原型

//css
HQuery.prototype.css=function (attr,value) {
   // 设置样式
   if(arguments.length==2){
       for(var i=0;i<this.elements.length;i++){
           this.elements[i].style[attr]=value
       }
   }else if(arguments==1){
       if(typeof arguments[0]=="object"){
           for(var i=0;i<this.elements.length;i++){
               for(var key in arguments[0]){
                   this.elements[i].style[key]=arguments[0][key]
               }
           }
       }else {
           //获取css样式
           return getStyle(this.elements[0],attr);
       }
   }
}

attr原型

//attr() 获取和设置属性
HQuery.prototype.attr=function(attr,value){
    if(arguments.length==2){  //设置属性
        for(var i=0;i<this.elements.length;i++){
            this.elements[i][attr]=value;
        }
    }else{
        if(typeof arguments[0]=="object"){
            for(var i=0;i<this.elements.length;i++){
                for (var key in arguments[0]){
                    this.elements[i][key]=arguments[0][key];
                }
            }
        }else {
            return this.elements[0][attr]; //获取属性
        }
    }
    return this
}

eq原型

//eq
HQuery.prototype.eq=function (index) {
    return $(this.elements[index]);
}

index原型

//index
HQuery.prototype.index=function(){
    return getIndex(this.elements[0]);
}

标准浏览器的兼容与IE浏览器的兼容问题

/*
* 在页面中同时出现两个函数的 alert， 没有以下封装的Jquery ，
* 然后最前 alert 就会被最后alert覆盖掉
 */
function bindEvent(obj, event, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(event, fn, false);
    } else {
        obj.attrachEvent('on' + event, fn);
    }
}

Class函数方法

//Class
function getByClassName(oParent, sClass) { //oParent =obj sClass=string
    var elems = oParent.getElementsByTagName("*");
    var aclass = [];
    for (var i = 0; i < elems.length; i++) {
        if (elems[i].className == sClass) {
            aclass.push(elems[i]);
        }
    }
    return aclass;
}

标签函数方法

//标签 类数组转成真数组
function toArray(elems) {
    var arr=[];
    for(var i=0;i<elems.length;i++){
        arr.push(elems[i]);
    }
    return arr;
}

css函数方法

//css 方法
function getStyle(obj,attr) {
    if(obj.currentStyle){
        return obj.currentStyle[attr]  //行内样式
    }else{
        return getComputedStyle(obj,false)[attr] //嵌入样式，外联样式
    }
}

index函数方法

//index方法
function getIndex(obj){
   for(var i=0;i<obj.parentNode.children.length;i++){
      if(obj.parentNode.children[i]==obj){
        return i;
      }
   }
}

find函数方法

// find() 方法：find选择器
//定义一个小函数，两个数组（元素集合），把两个类数组（html元素集合）合并在一块。
function appendArr(arr1, arr2){
    // var i=0;
    for(var i=0;i<arr2.length;i++){
        arr1.push(arr2[i]);
    }
}

find 原型

HQuery.prototype.find=function(arg){
    var aResult=[];//存放临时数据
    for( var i=0;i<this.elements.length;i++){
        switch(arg.charAt(0)){
            case '.':  //class类
                aResult.concat(getByClass(this.elements[i],arg.substring(1)));//桥接到aResult内。但是
                break;
            default:  //其它标签名(TagName)
                appendArr(aResult,this.elements[i].getElementsByTagName(arg));
                break;
        }
    }
    var newdQuery=new HQuery();
    newdQuery.elements=aResult;
    return newdQuery;//保持可链。
}

架子

// var 对象1 = new 构造函数();
// 对象1.方法();

function $(arg) {
    return new HQuery(arg)
}