当前位置:asp编程网>技术教程>Javascript教程>  正文

mootools实例:添加class和移除class的方法

1970-01-01 08:00:00   来源:www.aspbc.com    作者:wangsdong   浏览量:2412   收藏

这种情况经常出现在这样的地方:

页面上某个版块,里面有几条新闻,当鼠标移动到某一条新闻上的时候,这条新闻文字颜色改变为另一种颜色,并且这条新闻的背景色也随之改变成另一种颜色。用mootools实现的方法如下:

<style type="text/css">
.a{font-size:12px; color:#FFF; background-color:#00F;}
.b{font-size:12px; color:#000; background-color:#0F0;}
ul{ list-style-type:none; width:500px; padding:0px; }
li{ height:30px; line-height:30px; border-bottom:1px solid #eee; cursor:pointer; padding-left:20px; }
</style>
<script type="text/javascript" src="http://www.aspbc.com/js/mootools.js"></script>
<script type="text/javascript">
window.addEvent("domready",function(){
	$$("li").addClass("b");
	$$("li").addEvent("mouseover",function(){
		$(this).removeClass("b");
		$(this).addClass("a");		
	}).addEvent("mouseout",function(){
		$(this).removeClass("a");
		$(this).addClass("b");
	}).addEvent("click",function(){
		alert($(this).get('html'));
	});
});
</script>
<ul>
    <li>新闻11111111111111111111</li>
    <li>新闻22222222222222222222</li>
    <li>新闻333333333333333333333</li>
    <li>新闻444444444444444444444</li>
</ul>
(鼠标移到代码上去,在代码的顶部会出现四个图标,第一个是查看源代码,第二个是复制代码,第三个是打印代码,第四个是帮助)


总结一下这个例子的知识点:

1、window.addEvent("domready",function(){……});  页面加载完执行代码

2、$$("li").addClass("b"); 给某所有的li添加class,注意这里的$$和$的区别。
     $函数是MooTools中基本的选择器。你可以通过它来根据一个ID选择DOM元素。
     $$函数可以可以让你快速选择多个元素,并组成一个数组。你可以通过标签名(如div、a、img等)、或者ID或者是他们的各种组合来选择多个元素

3、给li添加mouseover,mouseout,click事件。

$$("li").addEvent("mouseover",function(){
    $(this).removeClass("b");
    $(this).addClass("a");		
}).addEvent("mouseout",function(){
    $(this).removeClass("a");
    $(this).addClass("b");
 }).addEvent("click",function(){
    alert($(this).get('html'));
 });
(鼠标移到代码上去,在代码的顶部会出现四个图标,第一个是查看源代码,第二个是复制代码,第三个是打印代码,第四个是帮助)
上面是简写,正常的写法是
$$("li").addEvent("mouseover",function(){
	$(this).removeClass("b");
	$(this).addClass("a");		
});
$$("li").addEvent("mouseout",function(){
	$(this).removeClass("a");
	$(this).addClass("b");
	});
$$("li").addEvent("click",function(){
	alert($(this).get('html'));
});
(鼠标移到代码上去,在代码的顶部会出现四个图标,第一个是查看源代码,第二个是复制代码,第三个是打印代码,第四个是帮助)
至于你喜欢哪一种写法,根据个人习惯来选择。

4、获取页面的html内容方法: .get('html');

原创文章,转载请注明来源:asp编程网(www.aspbc.com),谢谢。




关于我们-广告合作-联系我们-积分规则-网站地图

Copyright(C)2013-2017版权所属asp编程网