开始学习prototype-类选择器实现折叠


要学习新知识了prototype

先贴下手册地址:http://prototypejs.org/doc/latest/

中文版:http://blog.51yip.com/manual/prototype/

我应该很开心,尽管他跟jquery的思想相去甚远,开始学吧,优秀的东西也就那么点

刚才看到一个很牛的观点:在选择到底是学习jQuery和prototype时,之所以选择prototype,是因为prototype比jQuery复杂,人家不想学习简单的,果然是牛人。

不过,对于我来说,是先学习jquery的,现在回过头去学prototype,发现真的不够方便,比较我目前仅仅想使用类选择器实现折叠效果,就花了近3个小时。

不过由于查了不少资料,并亲自实践,慢慢觉得prototype没有那么晦涩难懂了。

其实prototype并不是想象中的那么难,直接看代码吧

<!-- prototype-1.7.js文件下载,详见附件-->
<script type="text/javascript" src="prototype-1.7.js"></script>
<script type="text/javascript">
function show1(){
	var _self      = arguments[0];
	var _ancestors = $(_self).ancestors();
	var _parent    = _ancestors[0];//祖先顺序:先内后外
	var _next      = $(_parent).next();
	$(_next).toggleClassName('hide');

	if($(_self).innerHTML=="展开"){
		$(_self).innerHTML = "关闭";
	}else if($(_self).innerHTML=="关闭"){
		$(_self).innerHTML="展开";
	}
}

</script>

<style type="text/css">
.hide{display:none;}
</style>

<div><a href="#" onclick="show1(this)">展开</a></div>
<div class="hide">hahahahah1</div>

<div><a href="#" onclick="show1(this)">展开</a></div>
<div class="hide">hahahahah2</div>

<div><a href="#" onclick="show1(this)">展开</a></div>
<div class="hide">hahahahah3</div>

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>