看看自定义jQ插件有没有问题？-慕课网

看看自定义jQ插件有没有问题？

来源：4-11 编程挑战

慕神7088389

2018-06-17 15:31

<!DOCTYPE html>
<html lang="zxx" style="scroll-behavior: smooth">
<head>
    <meta charset="UTF-8">
    <title>自定义一个jquery插件:focus</title>
    <script src="https://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
</head>
<style>
 *{
        padding:0;
 margin:0;
 }
    ul{
        margin:10px 0 0 10px;
 width:30%;
 list-style-type:none;
 border:1px solid #ddd;
 border-radius:8px;
 box-shadow:0 0 8px #ddd;
 }
    li{
        font-size:24px;
 line-height:30px;
 color:#000;
 text-indent:10px;
 border-radius:7px;
 }
</style>
<body>
<ul>
    <li>aaaa</li>
    <li>bbbb</li>
    <li>cccc</li>
</ul>
</body>
<script>
 $(function(){
        $.extend({
            //el:元素，bcolor:CSS背景颜色，color:CSS颜色
 'focus':function(el,bcolor,color){
                $.each(el,function(){
                    $(this).mouseenter(function(){
                        $(this).css({'background':bcolor,'color':color})
                    })
                    $(this).mouseleave(function(){
                        $(this).css({'background':'none','color':'#000'})
                    })
                })
            }
        });
 //应用自定义插件focus
 $.focus($('li'),'#b5202b','#fff');
 })
</script>
</html>

写回答关注