欢迎光临
我们一直在努力

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

建站超值云服务器,限时71元/月

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

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

赞(0)
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com 特别注意:本站所有转载文章言论不代表本站观点! 本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。未经允许不得转载:IDC资讯中心 » mootools实例:添加class和移除class的方法
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址