element 返回值:Array<Element(s)>
概述
根据给定的元素名匹配所有元素
参数
elementString
一个用于搜索的元素。指向 DOM 节点的标签名。
示例
描述:
查找一个 DIV 元素。
HTML 代码:
<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>
jQuery 代码:
$("div");
结果:
[ <div>DIV1</div>, <div>DIV2</div> ]
...
jQuery(elements)
返回值:jQuery
概述
将一个或多个DOM元素转化为jQuery对象。
这个函数也可以接收XML文档和Window对象(虽然它们不是DOM元素)作为有效的参数。
参数
elementsElement, Array<Element>
用于封装成jQuery对象的DOM元素
示例
描述:
设置页面背景色。
jQuery 代码:
$(document.body).css( "background", "black" );
描述:
隐藏一个表单中所有元素。
jQuery 代码:
$(myForm.elements).hide()
...
Form.Element.Observer
new Form.Element.Observer(element, frequency, callback)
一个针对指定表单控件的定时观察器。
Form.Element.Observer 使用 Form.Element.getValue() 实现 getValue() 方法。关于定时观察器的描述见 Abstract.TimedObserver。
isElement [1.6]
isElement(obj) -> Boolean
如果 obj 是一个 DOM 级别 1 的节点,返回 true,否则返回 false。
样例
Object.isElement(new Element('div'));
//-> true
Object.isElement(document.createElement('div'));
//-> true
Object.isElement($('id_of_an_exiting_element'));
//-> true
Object.isElement(document.createTextNode('foo'));
//-> false
...
serialize
serialize(element) -> string
使用 name=value 的格式创建表单控件的 URL 编码字符串。
该方法返回一个适合于 Ajax 请求的字符串。但是,它仅仅只串行化一个单独的元素——如果需要串行化整个表单,请使用 Form.serialize()。
注意
串行化一个已禁用或是没有名称的控件,总是返回空字符串。
如果只是简单的获取元素的值,而不需要进行 Ajax 请求,请使用 getValue()。
select
select(element) -> HTMLElement
选取文本输入框中包含的文本。
译注:该方法其实并未添加到已扩展的表单控件中,所以 $('inputElement').select() 调用的并不是这个方法,而是 JavaScript 原生的 select() 方法。Form.Element.focus() 方法也存在同样的问题。
样例
设置一些搜索框,当它们获得焦点时,自动选择它们的内容。
$('searchbox').onfocus = function() {
Form.Element.select(this)
// 你也可以使用原生的方法,但是那样的话将不会返回元素!如下:
this.select()
}
获取焦点 + 选择内容:使用 activate!
如果表单控件需要获取焦点并选择当前的文本内容,那么使用 activate 方法是一个...
present
present(element) -> boolean
如果一个文本输入框包含内容,返回 true,否则返回 false。
样例
在常规的表单校验中,这个方法非常有用。尝试提交下面的表单,第一次不要填写任何信息,然后键入一些文本,再次提交:
User Details
Please fill out the following fields:
Username
Email Address
$('example').onsubmit = function(){
var valid, msg = $('msg')
// are both fields present?
valid = $(this.username).present() && $(this.email).present()
...
getValue
getValue(element) -> string | array
返回表单控件当前的值。除多选框会返回一个数组外,其它的控件均返回一个字符串。该方法的全局访问捷径是 $F()。
如何通过 name 属性引用表单中的控件?
该方法与其它的 DOM 扩展方法一致,当传入字符串参数时,必须是元素的 ID,而不是名称。 如果想要通过控件的名称引用控件,首先应采用一般的 JavaScript 代码查找控件,然后使用控件节点作为参数来代替字符串参数。
例如,在一个 ID 为 "contact" 的表单中有一个名称为 "company" 的输入框:
var form = $('contact');
var input = form['company'];
Form.Element.getValue(input);
//...
focus
focus(element) -> HTMLElement
设置键盘焦点到指定的元素。
译注:该方法其实并未添加到已扩展的表单控件中,所以 $('inputElement').focus() 调用的并不是这个方法,而是 JavaScript 原生的 focus() 方法。Form.Element.select() 方法也存在同样的问题。
样例
Form.Element.focus('searchbox')
// 与下面一句基本上是等价的,但是下面的语句不会返回表单元素
// 它调用的是原生的 focus() 方法:
$('searchbox').focus()
译注:在 Prototype 1.6.0.3 的源码中,Form.Element 的 focus 和 select 方法将传入的参数 element 直接返回,并未做任何处理,所以若传入的 element 是一个字符串,则返回值...
enable
enable(element) -> HTMLElement
启用一个先前被禁用的表单控件。
样例
请参阅 Form.disable() 方法。
disable
disable(element) -> HTMLElement
禁用表单控件。控件被禁用后,不能再修改它的值,除非再次启用它。
该方法将元素的原生属性 disable 设为 true。你也可以通过这个属性来检查控件的当前状态。
样例
请参阅 Form.disable() 方法。
注意
被禁用的表单控件永远都不会被串行化。
千万不要将禁用表单控件作为一项安全措施,而放弃在服务器端的校验。只需具有少许 JavaScript 经验的用户就可以在任何浏览器上轻易的启用被禁用的控件。你应该将禁用作为一项增强用户体验的措施—— 用它来指示指定的控件在那段时间内不可修改。
...
clear
clear(element) -> HTMLElement
清除一个文本输入框的内容。
样例
如果文本输入框是第一次获得焦点,则清除文本框的内容:
$('some_field').onfocus = function() {
// 如果已经清除过,则什么都不做
if (this._cleared)
return
// 当代码执行时,"this" 关键字指向控件本身
this.clear()
this._cleared = true
}
activate
activate(element) -> HTMLElement
使表单控件获得焦点,如果控件是一个文本输入框,还会选取输入框中的内容。
该方法其实是获取焦点和选择内容两个步骤的组合,因此,下面的两个语句是等价的(只是前一个语句 不会 返回控件本身):
Form.Element.focus('myelement').select() //译注:注意这里调用的是原生的 select 方法
$('myelement').activate()
猜一下哪种调用方式更好?;)
译注:第一个语句执行时会发生错误,原因在于 Form.Element.focus(element) 方法将传入的参数 element 直接返回,并未做任何处理,所以若传入的 element 是一个字符串,则返回值也是一个字符串。 另外,select 方法也存在同样的问...
这是一个用于协助处理表单控件的方法集合。对于表单控件的焦点、串行化、启用/禁用或是获取当前值,它们均提供了相应的处理方法。
在 Prototype 中,Form.Element 也被称为 Field,并且,对于已被扩展(参见 “Prototype 如何扩展 DOM”)的 INPUT、SELECT 和 TEXTAREA 元素,Form.Element 中的所有方法都可以直接使用。因此,下面的语句是等价的:
Form.Element.activate('myfield')
Field.activate('myfield')
$('myfield').activate()
当然,你应该根据应用的场景选择合适而简捷的写法。为支持链式编程,大多数 Form.Element 的方法都返回元素自身(除非明确指出返回类型)。
方法...
serializeElements
serializeElements(elements[, getHash = false]) -> string | object
串行化表单控件数组为字符串,以适用于 Ajax 请求(默认行为)。若指定可选的参数 getHash 值为 true,则返回一个 Hash 对象,以控件的名称(name 属性)为“键”,控件所代表的数据为“值”。
串行化表单应优先使用 Form.serialize 方法。关于参数 getHash 的更进一步的信息和样例请参阅 Form.serialize 的文档。然而,通过 serializeElement 可以串行化指定的元素, 允许指定表单中所有元素的一个子集来进行串行化。
样例
串行化所有类型为 "text" 的 INPUT 元素:
Form.serializeElemen...
getElements
getElements(formElement) -> array
返回指定表单中所有控件的集合。
注意
元素 OPTION 并不包括在结果集中。结果集中只有它们的父元素 SELECT 控件。