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

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

页面上某个版块，里面有几条新闻，当鼠标移动到某一条新闻上的时候，这条新闻文字颜色改变为另一种颜色，并且这条新闻的背景色也随之改变成另一种颜色。用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），谢谢。