<!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;
}
我想到了从两个地方入手解决：
1、在选择器中，对this做解析，用一个什么样的办法将this指向#kk。
2、在bind方法中，将function参数内的$(this)整体做解析，按照$(this) -> function -> bind -> #kk的顺序做处理。
结果：
方法1：this 指向的是window对象，传过来没法直接用...
$.fn.prototype.getNodes=function(selector,context)
{
if(selector==window)
{
this.elements=selector;
}
else
{
var a=selector.substring(0,1);
if(a=="#")
{
this.elements=document.getElementById(selector.replace(/#/gi,""))
}
}
return this;
}
方法二、需要解析bind方法中的参数function中的内容，将$(this)整体替换成$("#kk")，这个思路很奇怪也从来没遇到过这样干的。