<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> ul{ width:100px; margin:10px auto; } li{ height:30px; background-color:#0d638f; padding:1px; margin:1px 0; line-height:30px; text-align: center; color:#f0ad4e; } li:hover{ cursor:pointer; } </style> <script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="../js/jquery-2.0.0.min.js"></script> </head> <body> <ul id="ulTest"> <li>我是第一个</li> <li>我是第二个</li> <li>我是第三个</li> <li>我是第四个</li> </ul> <script type="text/javascript"> /*$(function(){ $("li").bind("mouseover",function(){ $(this).css("background-color","#fffccc") }); $("li").bind("mouseout",function(){ $(this).css("background-color","#0d638f"); }); })*/ $(function(){ var oldcolor="#0d638f"; $.extend({ "focuse":function(obj,color){ $(obj).mouseover(function(){$(this).css("background",color)}); $(obj).mouseout(function(){$(this).css("background",oldcolor)}); } }); }); $(function(){ $.focuse($("li"),"blue") }) </script> </body> </html>
用来拓展对象的,前面的课讲过
自定义想要的插件啊