                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /jQuery
                        
                        /jQuery基礎(chǔ)(五)一Ajax應(yīng)用與常用插件

看看自定義jQ插件有沒(méi)有問(wèn)題？

<!DOCTYPE?html>
<html?lang="zxx"?style="scroll-behavior:?smooth">
<head>
????<meta?charset="UTF-8">
????<title>自定義一個(gè)jquery插件:focus</title>
????<script?src="http://idcbgp.cn/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'})
????????????????????})
????????????????})
????????????}
????????});
?//應(yīng)用自定義插件focus
?$.focus($('li'),'#b5202b','#fff');
?})
</script>
</html>