                        课程
                    
                        /前端开发
                        
                            /jQuery
                        
                        /jQuery基础课程

不出效果,求指导啊

<!DOCTYPE html>
<html>
    <head>
    <link href="style.css" rel="stylesheet" type="text/css" />
        <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
    </head>
    
    <body>
    <span class="tip"></span>
    <ul>
        <li>
        水果
    </li>
       <li>
       蔬菜
    </li>
        <li>
        零食
    </li>
        <li>
        饰品
    </li>   
    </ul>
    <script type="text/javascript">
    (function($){
        $.extend({
            "li-color": function(){
                
            $("li").bind("mouseover",function(){
                $(this).css("background","green");
            })
            $("li").bind("mouseout",function(){
                $(this).css("background","white");
            })
            return $(this);
            
            }
        }) ;  
        })(jQuery);
    $(function(){
   
         $.li-color();
        });
    </script>
    
    </body>
</html>

TCG_killer

2015-11-01

源自：jQuery基础课程 11-11

关注问题我要回答

265

操作

收起

1 回答

pardon110 回答被采纳 +3 积分
2015-11-02

存在两个错误。一个是jQuery方法不允许用-符号(该符号主要用于子元素过滤如 :last-child)，使用会报语法错误。第二个是jQuery对象返回，内部已处理过（使用会出现重复循环，即表现加载的时候不停的转），所以勿需重复使用return $(this);故你的js代码部分可以改成如下所示：

    (function($){
        $.extend({
            "licolor": function(){
                 
                $("li").bind("mouseover",function(){
                    $(this).css("background","green");
                })
                $("li").bind("mouseout",function(){
                    $(this).css("background","white");
                })
            }
        }) ;  
        })(jQuery);
    $(function(){ 
         $.licolor();
    });