框架封装进阶.pdfVIP

1.1教学目标

1.2Jquery原理

1.2.1古老的方式

//古老的时代--原生时代

varbutton=document.getElementById(button)

vardiv=document.getElementById(div)

button.onclick=function(){

div.style.background=red

}

1.2.2通过函数封装

function$id(id){

returndocument.getElementById(id)

}

$id(button).onclick=function(){

}

1.2.3实现$(‘div’)的第式

var$=function(id){

/*因为这个函数返回的是dom对象，而dom对象里面没

有hide方法*/

returndocument.getElementById(id);

/*HTMLElement*/

};

/*functionhide(dom){

dom.style.display=none

}

*/

$(button1).onclick=function(){

$(image1).hide();

};

$(button2).onclick=function(){

$(image1).show();

};

HTMLElement.prototype.hide=function(){

this.style.display=none

}

HTMLElement.prototype.show=function(){

this.style.display=block

}