在ajax应用中,通常一个页面要同时发送多个请求,如果只有一个XMLHttpRequest对象,前面的请求还未完成,后面的就会把前面的覆盖掉,如果每次都创建一个新的XMLHttpRequest对象,也会造成浪费。解决的办法就是创建一个XMLHttpRequset的对象池,如果池里有空闲的对象,则使用此对象,否则将创建一个新的对象。 下面是我最近写的一个简单的类: /** * XMLHttpRequest Object Pool * * @author legend <
[email protected]> * @link http://www.ugia.cn/?p=...
在AJAX编程中离不开对XMLHttpRequest对象的使用。XMLHttpRequest对象代表了浏览器和服务器之间的通讯,并可采用异步模式。浏览器通过XMLHttpRequest在后台发起请求,然后通过其属性onreadystatechange注册的回调函数来异步处理应答。编程步骤如下:
1. 创建XMLHttpRequest对象xhr;
2. 调用xhr的open方法打开资源;
3. 通过xhr的属性onreadystatechange注册回调函数;
4. 通过xhr的方法setRequestHeader设置相应请求头;
5. 调用xhr的send方法发起请求。
从上我们可以看到,编程步骤固定,在某些步骤中有些许的变化。由此我们可以联想到模板(template)和回调(callback)编程模式。在此处的回调依赖于xhr的状...
设计AJAX时使用的一个重要的技术(工具)就是XMLHTTPRequest对象了。XMLHttpRequest对象是当今所有AJAX和Web 2.0应用程序的技术基础。尽管软件经销商和开源社团现在都在提供各种AJAX框架以进一步简化XMLHttpRequest对象的使用;但是,我们仍然很有必要理解这个对象的的属性和方法简介。1、XMLHTTPRequest对象什么是?最通用的定义为:XmlHttp是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。(这个功能正是AJAX的一大特点之一)来自MSDN的解释:XmlHtt...
<pre> 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。<pre> 标签的一个常见应用就是用来表示计算机的源代码。而我们经常碰到的一个问题是如果一个代码上碰到有图片或者网页地址就会使代码很长,结果会造成页面撑开或者代码超出边界。非常难受,如果用overflow:hidden那么会将原来的代码隐藏掉,用overflow:auto则会出现滚动条,代码也不方便阅读。今天折腾了一个晚上终于搞定<pre>的内容自动换行的问题:1.先尝试使用:word-wrap: break-word;将内容自动换行,IE,OP,Chrome,Safari都可以,FF就悲剧了。2.查看了pre的浏览器默认样式:
xmp, pre, plainte...
keypress(fn) 返回值:jQuery概述在每一个匹配元素的keypress事件中绑定一个处理函数。keypress事件会在敲击按键时触发。 敲击按键的定义为按下并抬起同一个按键。这几个事件发生的顺序是:keydownkeypresskeyup参数fn Function在每一个匹配元素的keypress事件中绑定的处理函数。
keypress() 返回值:jQuery概述触发每一个匹配元素的keypress事件T这个函数会调用执行绑定到keydown事件的所有函数,包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。keydown事件会在键盘按下时触发
prependTo(content) 返回值:jQuery
概述
把所有匹配的元素前置到另一个、指定的元素元素集合中。
实际上,使用这个方法是颠倒了常规的$(A).prepend(B)的操作,即不是把B前置到A中,而是把A前置到B中。
在jQuery 1.3.2中,appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作,要选择先前选中的元素,需要使用end()方法,参见 appendTo 方法的例二。
参数
contentString
用于匹配元素的jQuery表达式
示例
描述:
把所有段落追加到ID值为foo的元素中。
HTML 代码:
<p>I would like to say: </p><div i...
prepend(content) 返回值:jQuery
概述
向每个匹配的元素内部前置内容。
这是向所有匹配元素内部的开始处插入内容的最佳方式。
参数
contentString, Element, jQuery
要插入到目标元素内部前端的内容
示例
描述:
向所有段落中前置一些HTML标记代码。
HTML 代码:
<p>I would like to say: </p>
jQuery 代码:
$("p").prepend("<b>Hello</b>");
结果:
[ <p><b>Hello</b>I would like to say: </p> ]
描述:
将一个DOM元素前置入所有段落
HTML 代码:
<p>I would like to say: &...
prevAll([expr]) 返回值:jQuery
概述
查找当前元素之前所有的同辈元素
可以用表达式过滤。
参数
expr (可选)String
用于过滤的表达式
示例
描述:
给最后一个之前的所有div加上一个类
HTML 代码:
<div></div><div></div><div></div><div></div>
jQuery 代码:
$("div:last").prevAll().addClass("before");
结果:
[ <div class="before"></div>, <div class="before"></div>, <div class="before"></div> ]
...
prev([expr]) 返回值:jQuery
概述
取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到,而不是前面所有的同辈元素。
参数
expr (可选)String
用于筛选前一个同辈元素的表达式
示例
描述:
找到每个段落紧邻的前一个同辈元素。
HTML 代码:
<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
jQuery 代码:
$("p").prev()
结果:
[ <div><span>Hello Again</span></div> ]
描述...
prev ~ siblings 返回值:Array<Element(s)>
概述
匹配 prev 元素之后的所有 siblings 元素
参数
prevSelector
任何有效选择器
siblingsSelector
一个选择器,并且它作为第一个选择器的同辈
示例
描述:
找到所有与表单同辈的 input 元素
HTML 代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码:...
prev + next 返回值:Array<Element(s)>
概述
匹配所有紧接在 prev 元素后的 next 元素
参数
prevSelector
任何有效选择器
nextSelector
一个有效选择器并且紧接着第一个选择器
示例
描述:
匹配所有跟在 label 后面的 input 元素
HTML 代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码:
$(&qu...
jQuery(expression, [context])
概述
这个函数接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素。
jQuery 的核心功能都是通过这个函数实现的。 jQuery中的一切都基于这个函数,或者说都是在以某种方式使用这个函数。这个函数最基本的用法就是向它传递一个表达式(通常由 CSS 选择器组成),然后根据这个表达式来查找所有匹配的元素。
默认情况下, 如果没有指定context参数,$()将在当前的 HTML document中查找 DOM 元素;如果指定了 context 参数,如一个 DOM 元素集或 jQuery 对象,那就会在这个 context 中查找。在jQuery 1.3.2以后,其返回的元素顺序等同于在context中出现的先后顺序。
参考文...
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()
...
previousSiblings
previousSiblings(element) -> [HTMLElement...]
返回 element 的所有前导兄弟节点,结果为一个数组,数组元素已经过 扩展。
如果两个元素有相同的父节点,则认为它们是兄弟节点,因此在样例中,head 和 body 是兄弟节点(它们的父节点都是 html)。前导兄弟节点可简单的看作文档中排在 elemnet 之前的兄弟节点。
返回的数组成员按照元素在页面中的顺序 反序 进行排列(例如:索引 0 表示距 element 最近的前导兄弟节点)。
注意:所有 Prototype 的 DOM 扩展方法均忽略文本节点,仅返回元素节点。
样例
<ul>
<li id="golden-delicious">Golden Delicious</li>
&...
previous
previous(element[, cssRule][, index = 0]) -> HTMLElement | undefined
返回匹配 cssRule 指定规则的 element 的前一个兄弟节点(如果指定 index 参数,则返回第 index 个)。如果未指定 cssRule 参数,则默认匹配所有前导兄弟节点。 如果没有符合条件的节点,返回 undefined。
Element.previous 方法是 Prototype 最基本的 DOM 遍历工具之一(其余的还有 Element.up、 Element.down 和 Element.next,这些方法体现了 Prototype 良好的编程风格)。它允许基于索引和/或 CSS 规则对元素的前导兄弟节点进行精确选择。 (注意:如果两个元素有相同的父节点,则认为它们是兄弟节点,因此在样例中,head 和...