目的:有一个html,要达到的目的是:当鼠标进入某一个 li 时,它自动为它添加一个class=“co“,然后再为这个co写一个点击事件;
<body>
<div id="aaa">
<ul>
<li id="menu1">中华人民共和国</li>
<li id="menu2">在哪挑花盛开的地方</li>
</ul>
</div>
</body>
理想是:$(".co").clock(function(){});就可以了,但理想很丰满,现实很骨感!这样达不到目的。通过网上查询,给出这样的公式:
$(".box").on('click','.boxchild',function(){
console.log("aaaa");
});
它的要求是:在网页中必须有一个静态的.box,所谓静态的就是必须是写成<div class="box"></div>,这样的形式,不能用程序求出来的一个 .box;
按照这个要求,我的程序就要写成这样:
<script type="text/javascript">
$(function(){
$("#aaa ul li").hover(function(){ //当鼠标移入时
$(this).addClass("co");
},function(){
$(this).removeClass("co"); //当鼠标移出时
});
$(“li").on("click",".co",function(){
alert($(this).html());
});
});
</script>
但现实很“骨感",因为在body中,li 不是唯一的,虽然它是真正的存在,但还是没有点击的效果。此时很郁闷!
后来,又在网上找到,将
中的$("li")改为$(document),实验成功。参考文章:https://blog.csdn.net/golden_wheat/article/details/76085153
完整代码是: 代码后面还有更精彩的,请往下看
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/index.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<!--<script type="text/javascript" src="js/index.js"></script>-->
<script type="text/javascript">
$(function(){
$("#aaa ul li").hover(function(){
$(this).addClass("co");
},function(){
$(this).removeClass("co");
});
$(document).on("click",".co",function(){ //为了防止document中有与你的co类名重名,你可以把co改成一个很奇葩的名字:)
alert($(this).html());
});
});
</script>
<style type="text/css">
</style>
</head>
<body>
<div id="aaa">
<ul>
<li id="menu1">中华人民共和国</li>
<li id="menu2">在哪挑花盛开的地方</li>
</ul>
</div>
</body>
</html>
=====================
现在要把它改成分离的形式:
把 <!--<script type="text/javascript" src="js/index.js"></script>-->这一句的注释拿掉
然后再把
$(function(){
$("#aaa ul li").hover(function(){
$(this).addClass("co");
},function(){
$(this).removeClass("co");
});
$(document).on("click",".co",function(){ //注意 co的前面不要少了点哦!不然没有效果; 这里的document如果换成其它的一定要是“唯一”的标签,你如果用li之类就不行,因为它不是唯一的,光是静态的不行哦!不然你就哭吧!
alert($(this).html());
});
});
这一段代码剪切到js/index.js就可以。
===========================================
现在要让这个程序通用起来,把它写成一个jQuery的插件
第一步:写html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/index.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
$(function(){
$("#aaa ul li").menuAddClassHover(this);
$("#aaa ul li").menuAddClassClick();
});
</script>
<style type="text/css">
</style>
</head>
<body>
<div id="aaa">
<ul>
<li id="menu1">中华人民共和国</li>
<li id="menu2">在哪挑花盛开的地方</li>
</ul>
</div>
</body>
</html>
第二步:写css文件,文件名与html的文件名是一样的,只是后缀为.css, 以后要养成这样的习惯,为谁写css就与它一样。
.cocococcococ{
background: #ff00ff;
color: red;
width:50%;
}
这个css文件就这样几句
第三步:写jQuery的插件:文件名index.js ,插件的写法请参考相关的资料
;
(function($){
$.fn.extend({
"menuAddClassHover":function(element){
$(this).hover(function(element){
$(this).addClass("cocococcococ");
},function(){
$(this).removeClass("cocococcococ");
});
},
"menuAddClassClick":function(){
$(document).on("click",".cocococcococ",function(){
alert($(this).html());
})
}
});
})(jQuery);
这样就可以运行了!完美!!!!! 你可以把这个方法用于菜单之中。