用JavaScript封装一个简单的jQuery库

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

mouseover 事件原型

//  onmouseover(鼠标滑入事件)
HQuery.prototype.mouseover=function (fn) {
    // for (var i=0;i

通过on 绑定事件 原型

//通过on 绑定事件
HQuery.prototype.on=function (event,fn) {
    for (var i=0;i

hide原型

//hide 隐藏
HQuery.prototype.hide=function () {
    for (var i=0;i

show原型

//show 隐藏
HQuery.prototype.show=function () {
    console.log(this.elements)
    for (var i=0;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

attr原型

//attr() 获取和设置属性
HQuery.prototype.attr=function(attr,value){
    if(arguments.length==2){  //设置属性
        for(var i=0;i

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

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

find函数方法

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

find 原型

HQuery.prototype.find=function(arg){
    var aResult=[];//存放临时数据
    for( var i=0;i

架子

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

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