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

使用prototype操纵check box

阅读更多
prototype中的$F()真是好用,但是在html中的checkbox是可多选的,prototype有没有给我们提供得到选中的checkbox的值的便利的方法呢
我翻了好久没找到,于是写了一个使用Enumerable操纵checkbox的例子
<script>
	function testSelect()
	{
		var chkbox = document.getElementsByName('slt');
		var nodes = $A(chkbox);
		var sltNodes = nodes.select(function(node)
		{
			return node.checked;
		});
		sltNodes.each(function(node)
		{
			alert(node.value);
		});
		
	}
</script>
	<input type="checkbox" name="slt" value="1"/> 1<br/>
	<input type="checkbox" name="slt" value="2"/> 2<br/>
	<input type="checkbox" name="slt" value="3" checked="true"/> 3<br/>
	<input type=button value="test select" onclick="testSelect()">	

魔法发生在 $A,如果去掉
var nodes = $A(chkbox);

改成
		var chkbox = document.getElementsByName('slt');
		
		var sltNodes = chkbox.select(function(node)
		{
			return node.checked;
		});
		sltNodes.each(function(node)
		{
			alert(node.value);
		});

那么js就会报错,说chkbox没有select这个方法,看了一下$A的源码,
var $A = Array.from = function(iterable) {
  if (!iterable) return [];
  if (iterable.toArray) {
    return iterable.toArray();
  } else {
    var results = [];
    for (var i = 0; i < iterable.length; i++)
      results.push(iterable[i]);
    return results;
  }
}

Object.extend(Array.prototype, Enumerable);

Array.from在哪里?没找到?那位大人能够解释一下,$A()的作用?
分享到:
评论
8 楼 Readonly 2007-04-26  
为啥不用$$呢,一行代码就可以搞定的:
<script>
function testSelect() {
    $$('input[type="checkbox"][name="slt"]').select(function(i){return i.checked}).each(function(i){alert(i.value)});
}
</script>
7 楼 过河卒 2007-04-25  
我也想知道怎么在FF里面看相关信息
6 楼 Tin 2007-03-27  
这个好像只是在ie中会出现。注释里面说了ie里面直接获取的element有可能是没有wrap的,这样prototype扩展的方法可能就会没有。此时可以使用$系列方法,再返回的对象就都是wrap过的了,所有prototype定义的方法就都OK了。
5 楼 foxty 2006-10-31  
var chkbox = document.getElementsByName('slt');
alert(chkbox);
var nodes = $A(chkbox);
alert(nodes);

很明显两个对象是不一样的。Array的话,会把其内部的元素都打印出来。
4 楼 IvanLi 2006-10-31  
你是怎么做的?怎么在ff中看?
3 楼 foxty 2006-10-31  
Ivan Li 写道
document.getElementsByName 返回的不也是一个Array吗?
不是,通过ff打印出来的信息可以看出getElementsByName 得到的是 [object HTMLCollectoin]
2 楼 IvanLi 2006-10-31  
document.getElementsByName 返回的不也是一个Array吗?
1 楼 foxty 2006-10-31  
var $A = Array.from = function(iterable)

这里可以理解为 int a = b = 1;

Object.extend(Array.prototype, Enumerable);

这里的Array“继承”了Enumerable的属性集合,再来看看Enumerable对象有哪些属性:

Object.extend(Enumerable, {
  map:     Enumerable.collect,
  find:    Enumerable.detect,
  select:  Enumerable.findAll,
  member:  Enumerable.include,
  entries: Enumerable.toArray
});

就从这里一段代码就可以看到Enumeralbe.select = Enumerable.findAll;

继续深挖:
findAll: function(iterator) {
    var results = [];
    this.each(function(value, index) {
      if (iterator(value, index))
        results.push(value);
    });
    return results;
  },
这是截取了Enumerrable对象的部分定义内容,你可以搜索 findAll查找。

$A就是把一个集合转换成一个标准数组。仔细再ff下面察看了下,通过 document.getElementsByName 得到结果是一个HTMLCollection,经过$A后就被转换成一个Array了。当然这个Array是经过Prototype扩展的。

相关推荐

    使用prototype简化Ajax操作

    在"使用prototype简化Ajax操作"这个主题中,我们将深入探讨Prototype库如何使Ajax变得更加简单易用。 首先,Prototype为Ajax操作提供了一个统一的接口——`Ajax`对象。这个对象下包含了一系列方法,如`Request`、`...

    prototype的使用

    然而,过度使用或不恰当的使用`prototype`可能会导致性能问题,因为每次访问`prototype`上的属性时都需要查找原型链。 总的来说,`prototype`是JavaScript中实现面向对象编程的关键部分,它帮助我们理解和实现对象...

    使用Prototype框架.pdfprototype源码分析.doc

    例解Prototype框架.doc 第21章__使用Prototype框架.pdf Prototype源码注释版.pdf proprototype源码分析.doc totype_1.3_源码解读.txt

    Prototype1.5.1使用手册

    《Prototype 1.5.1使用手册》是针对JavaScript库Prototype的一个详细指南,该库是Web开发中的一个强大工具,尤其在处理DOM操作、Ajax交互和函数增强方面表现卓越。本手册以.chm(Compiled Help Manual)格式提供,...

    prototype使用文档

    《prototype使用文档》 在JavaScript的世界里,Prototype和Script.aculo.us是两个非常重要的库,它们极大地提升了开发者的效率,并且为网页应用带来了丰富的交互效果。Prototype是一个强大的JavaScript框架,而...

    prototype介绍和使用方法

    《prototype介绍和使用方法》 在JavaScript开发中,Prototype是一个重要的库,由Sam Stephenson创建,主要用于提升Web应用程序的交互性和用户体验,特别是在实现Web 2.0特性时。Prototype库的核心理念是通过提供一...

    prototype.js文件使用和讲解

    接下来,你可以开始使用`prototype.js`提供的功能。例如,要使用它的DOM查找功能,可以这样做: ```javascript var element = $$('div.someClass')[0]; // 查找第一个class为'someClass'的div ``` ### 3. `...

    prototype1.6.0prototype1.6.0prototype1.6.0prototype1.6.0

    这个页面可能展示了如何在实际项目中集成和使用Prototype库,或者包含了一系列用例和示例代码,供学习者参考。 "jspage_file"可能是一个文件夹,里面包含与"jsPage.html"相关的资源,如CSS样式表、图像或者其他...

    Prototype_1.4.doc,Prototype_1.5.1.chm 中文版

    Prototype是JavaScript库的一个早期且广泛使用的版本,它提供了许多实用的功能,如对象扩展、事件处理、Ajax操作等,极大地简化了JavaScript开发。"Prototype_1.4.doc"可能是一个关于Prototype 1.4版本的文档,以....

    prototype帮助中文文档

    Prototype 是一个广泛使用的JavaScript库,它为浏览器端的开发提供了许多强大的功能,特别是对于处理DOM操作、Ajax交互以及对象扩展等方面。这个“prototype帮助中文文档”涵盖了Prototype库的核心概念、方法和最佳...

    prototype文件以及使用说明.rar

    本压缩包文件“prototype文件以及使用说明.rar”显然提供了关于如何利用和理解`prototype`的相关资料,下面我们将深入探讨`prototype`的相关知识点。 1. **对象原型与原型链** 每个JavaScript对象都有一个内部属性...

    Prototype-1.6.0 中文版\英文版\Prototype.js

    Prototype.js 是一个广泛使用的JavaScript库,它为JavaScript语言增加了许多实用的功能,使开发Web应用程序变得更加简单。这个压缩包包含了Prototype的1.6.0版本,包括中文版和英文版的文档,以及源代码文件。 首先...

    prototype-1.6.0.3.js+prototype1.4 、1.5中文手册+prototype1.6英文手册

    这个压缩包包含了Prototype库的多个版本的手册和源代码文件,便于开发者理解和使用。 首先,我们来看`prototype-1.6.0.3.js`,这是Prototype库的1.6.0.3版本的源代码文件。在这个版本中,Prototype提供了许多实用的...

    开源JS包Prototype使用指南

    ### 开源JS包Prototype使用指南 #### 1.1 Prototype是什么? Prototype是一个由Sam Stephenson编写的JavaScript库,它提供了一套简洁、高效且易于使用的API来简化Web应用开发过程中的许多常见任务。该库专注于简化...

    Prototype.js 161JS文件和中文说明书.rar

    欢迎使用 Prototype API 参考手册。在左侧的区域中列出了主要的目录,当你点击其中任一目录时, 详细的内容将显示在右方区域中。 我们尽力为你提供最新的、叙述清楚的、样例丰富的文档,最终的目标是:在你阅读这...

    prototype中文帮助文档

    Prototype.js 是一个广泛使用的JavaScript库,它为JavaScript编程提供了许多实用的功能,极大地简化了DOM操作、事件处理、Ajax交互以及对象扩展等任务。这个压缩包包含的“prototype.js”文件就是Prototype.js的核心...

    prototype

    Prototype是一个广泛使用的JavaScript框架,它扩展了JavaScript的核心功能,简化DOM操作,提供了一些实用的工具函数,以及强大的面向对象特性。Prototype库的主要特点包括: 1. **DOM助手(DOM Manipulation)**:...

    prototype_PrototypeJS1.6_

    它通过扩展JavaScript的`Object.prototype`,使得所有JavaScript对象都能直接使用一些方法,如`extend()`、`clone()`等,来实现对象的复制和扩展。 2. **DOM操作**:PrototypeJS提供了一系列便捷的DOM操作方法,如`...

    Prototype中文帮助文档

    Prototype 是一个广泛使用的JavaScript库,它为Web开发提供了强大的工具和功能。这个库的主要目标是简化JavaScript编程,通过提供面向对象的语法、强大的DOM操作以及Ajax功能,来提升开发者的工作效率。 ### 1. ...

    prototype 1.6中文手册 chm+prototype 1.6.js源码 最新版

    在基础概念中,读者可以了解到Prototype如何扩展JavaScript的基本类型,如Array、String和Function,以及如何使用$$选择器来快速选取DOM元素。对象操作部分则讲解了Prototype如何支持面向对象的编程,如Class构造...

Global site tag (gtag.js) - Google Analytics