<!DOCTYPE html>
<html>
<body>
<div id="kk">kk</div>
</body>
</html>
<script>
var $=function(selector){
return new $.fn(selector)
}
$.fn=function(selector){
return $.fn.prototype.getNodes(selector)
}
$.fn.prototype.getNodes=function(selector){
var a=selector.substring(0,1);
if(a=="#")
{
this.elements=document.getElementById(selector.replace(/#/gi,""))
}
return this;
}
$.extend=function(fn){
for(var item in fn)
{
var str="$.fn.prototype.";
str+=item+"=";
str+=fn[item];
eval(str);
}
}
$.addHandler=function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent("on" + type, handler);
}else{
element["on" + type] = handler;
}
}
$.extend({
"echo" : function(a){alert(a);return this;},
"html" : function(a){this.elements.innerHTML=(a);return this;},
"css" : function(css){
var str="";
for(var item in css)
{
str+=item+":";
str+=css[item]+";";
}
this.elements.style.cssText= str;
},
"bind" : function(mouse,fn){
$.addHandler(this.elements,mouse,fn);
}
})
</script>
<script>
//$('#kk').html("啦聖誕節弗拉聖誕");
//$("#kk").css({"font-weight":"bold","color":"red","background-color":"#ccc","text-align":"center","height":"50px","border":"1px #ff0000 solid"});
$("#kk").bind("mouseover",function(){
$(this).html("啦聖誕節弗拉聖誕").css({"font-weight":"bold","color":"red","background-color":"#ccc","text-align":"center","height":"50px","border":"1px #ff0000 solid"});//報錯，如果把$(this)換成$("#kk")就對了
})
</script>
bind方法中function內的$(this)如何指向正確的$("#kk")對象呢
問題已解決
$.fn.prototype.getNodes=function(selector){
if(selector==window)
{
//this.elements=selector;不做任何處理
}
else
{
var a=selector.substring(0,1);
if(a=="#")
{
this.elements=document.getElementById(selector.replace(/#/gi,""))
}
}
return this;
}
