`
zccst
  • 浏览: 3315973 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

开始学习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>
分享到:
评论

相关推荐

    Prototype 手风琴实例 展开折叠的DIV层.zip

    1. **选择器**:使用Prototype的选择器选取需要控制的DOM元素,如`$$('div.accordion')`来选取所有类名为`accordion`的div元素。 2. **事件监听**:使用`Event.observe()`方法来监听用户的点击事件,例如`Event....

    prototype

    - **getElementsBySelector**:根据选择器获取元素。 #### 四、结论 Prototype框架通过提供丰富的API和工具,极大地简化了Web开发过程中的复杂性,尤其是处理DOM和执行Ajax请求方面。对于希望快速构建交互式Web...

    Ajax实战:Prototype与Scriptaculous篇pdf

    5. **Selectors**:Prototype引入了类似CSS的选择器,如`$$()`,可以方便地根据CSS选择器选取DOM元素。 ### Scriptaculous Scriptaculous是在Prototype基础上构建的一个JavaScript特效库,它提供了丰富的动画效果...

    jQuery权威指南-源代码

    其次详细讲解了jQuery的各种选择器、jQuery操作DOM的方法、jQuery中的事件与应用、jQuery中的动画和特效、Ajax在jQuery中的应用,以及各种常用的jQuery插件的使用方法和技巧,所有这些知识点都配有完整的示例(包括...

    scriptaculous-js-1.8.2教程与开发库

    总结来说,Scriptaculous是一个强大的JavaScript库,结合Prototype,能够帮助开发者实现丰富的交互效果,提升网站的用户体验。通过学习和实践,开发者可以轻松掌握这个工具,为自己的项目增添更多活力。

    js树形菜单,完全兼容

    - IE老版本兼容:由于IE5到IE8对某些JavaScript特性支持不足,如DOM操作、事件处理、CSS选择器等,我们需要使用像`document.getElementById`、`appendChild`等老式API,并注意使用`attachEvent`而非`...

    JQuery实现table行折叠效果以JSON做数据源

    这里,我们还可以添加一个额外的行(tr)作为折叠按钮,通过设置CSS样式和事件监听器来实现折叠功能。例如,当点击这个按钮时,可以隐藏或显示包含详细信息的子行。 ```javascript $(function() { var jsonData = ...

    实用Javascipt源码----下拉式菜单的搜索.rar_下拉式菜单

    本文将深入探讨JavaScript实现下拉式菜单的搜索功能,通过分析提供的源码,我们可以学习到如何创建一个既实用又高效的交互组件。 首先,让我们了解下拉式菜单的基本结构。一个简单的下拉菜单通常由一个触发按钮和一...

    Axure7.0教程第一章 1.1 部件 Widgets精讲

    - 动态面板(Dynamic panel):用于创建可扩展和折叠的组件。 - 内部框架(Inline Frame):嵌入其他页面或资源。 - 中继器(Repeater):用于创建可重复的模板组件。 - 表格(Table)、菜单(Menu)和其他表单...

    script.aculo.us

    - **Slider**: 创建可滑动的范围选择器。 - **Sortable**: 使列表或表格元素可以排序。 - **Autocompleter**: 自动完成输入框,常用于搜索或数据输入场景。 - **Visual Effects**: 提供高级的动画效果库,如Fade、...

    js一般方法改写成面向对象方法的无限级折叠菜单示例代码

    // 假设$是jQuery或其他库的选择器 this.init(); } TreeMenu.prototype = { init: function() { this.traverseAndAddHandlers(); // 遍历菜单并添加事件处理器 }, traverseAndAddHandlers: function() { var...

    50个精彩JQuery插件案例

    1. **jQuery插件的原理**:jQuery插件是基于jQuery核心功能扩展的功能模块,通过$.fn.extend()方法,将新方法添加到jQuery对象的prototype上,使得所有jQuery选择器都能调用这些新方法。 2. **DOM操作**:jQuery...

    下拉树形列表

    它将复杂的层级关系以折叠和展开的形式展现,用户只需通过点击节点来展开或隐藏子级,使得选择过程更加直观和便捷。 在描述中提到,这个下拉树形菜单是基于dtree改造的。dtree是一个JavaScript实现的树形控件,它...

    jQuery前端开发实战教程.pdf

    14. jQuery 选择器:`$('input[name$=user]')`选择器会找到所有name属性值以“user”结尾的`input`标签。 15. jQuery EasyUI TreeGrid:在创建TreeGrid组件时,`url`参数指定获取数据的API地址,`method`是请求类型...

    jquery相关插件js

    例如,使用jQuery选择器可以快速定位HTML元素,一句`$('selector')`即可完成原生JavaScript中多行代码的工作。同时,jQuery提供了`.click()`, `.fadeIn()`, `.load()`等方法,使得处理事件和动画变得轻而易举。 二...

    jQuery前端开发实战教程.docx

    《jQuery 前端开发实战教程》主要涵盖了jQuery的基础知识和高级特性,包括选择器、DOM操作、事件处理、动画效果、Ajax以及jQuery Mobile等移动设备应用。以下是一些关键知识点的详细说明: 1. jQuery Mobile选择...

    js代码-数组求和多种方法

    JavaScript的`reduce()`函数是数组中用于将所有元素折叠成一个单一值的利器。它可以接受一个回调函数,该函数有两个参数:累积器(accumulator)和当前值(currentValue)。累积器会随着遍历数组而逐渐累加,最后...

    《JavaScript实例精通》[源代码]

    18_4.htm jQuery的选择器之变态演示。 18_5.htm 让链接打开一个新窗口。 18_6.htm 键盘控制选择表格并编辑。 18_7.htm 下拉框的值同时给文本框和文本域。 18_8.htm 基于jQuery的折叠菜单。 18_9.htm 可...

    JavaScript实例精通

    18_4.htm jQuery的选择器之变态演示。 18_5.htm 让链接打开一个新窗口。 18_6.htm 键盘控制选择表格并编辑。 18_7.htm 下拉框的值同时给文本框和文本域。 18_8.htm 基于jQuery的折叠菜单。 18_9.htm 可...

Global site tag (gtag.js) - Google Analytics