欧美亚洲在线,尤物在线网址,日韩精品99

jQuery �?prototype 共存

SIMONE — Mon, 25 Jun 2007 09:48:00 GMT

�Ҏ��一�Q?/p>

�Ҏ��二：

�Ҏ��三：

SIMONE 2007-06-25 17:48 发表评论

推荐--jQuery使用手册

SIMONE — Mon, 25 Jun 2007 09:36:00 GMT

摘要: ��译整理�Q�Young.J官方�|�站�Q�http://jquery.com jQuery是一�Ƒ֐�prototype一样优�U�js开发库�c�，特别是对css和XPath的支持，使我们写js变得更加方便�Q�如果你不是个js高手又想写出�?�U�的js效果�Q�jQuery可以帮你辑ֈ�目的�Q?nbsp; 下蝲地址�Q�Starterkit �Q�http://jquery.bassi... 阅读全文

SIMONE 2007-06-25 17:36 发表评论

SIMONE — Mon, 25 Jun 2007 09:34:00 GMT

jQuery中文入门指南�Q�翻译加实例�Q�jQuery的�v�Ҏ��E?/h1>

中文版译者：Keel

此文以实例�ؓ基础一步步说明了jQuery的工作方式。现以中文翻译（��d��我的补充说明�Q�如下。如有相��x��见或��请麻烦到我的 BLOG 写个回复或�?EMAIL 告知�?/p>

英文原版�Q?a >http://jquery.bassistance.de/jquery-getting-started.html �Q�感谢原文作�?Jörn Zaefferer

本文发布已征求原作者同意�?/strong>

另外我认为在学习�q�程�?有两个API文档你要打开随时查看:

http://jquery.com/api/
http://visualjquery.com/

以下部分为原文翻�?

jQuery入门指南教程

�q�个指南是一个对jQuery库的说明�Q�要求读者了解HTML(DOM)和CSS的一些常识。它包括了一个简单的Hello World的例子，选择器和事�g基础�Q�AJAX、FX的用法，以及如何制作jQuery的插件�?�q�个指南包括了很多代码，你可以copy它们�Q��ƈ试着修改它们�Q�看看��生的效果�?

内容提要

安装
Hello jQuery
Find me:使用选择器和事�g
Rate me:使用AJAX
Animate me(让我生动��h��):使用FX
Sort me(��我有序�?:使用tablesorter插�g(表格排序)
Plug me:制作您自��q��插�g
Next steps(下一�?

安装

一开�?我们需要一个jQuery的库,最新的下蝲可以�?a >�q�里扑ֈ�。这个指南提供一个基本包含实例的包供下蝲.

下蝲�Q?a class=download >jQuery Starterkit

(译者Keel�?一定要下蝲�q�个包，光看文章不实践肯定是不行的�?

下蝲后解压羃�Q�然后用你最喜欢的文本编辑器打开starterkit.html和custom.js�q�两个文件�?span class=log>(译者Keel�?�q�两个就是例子文�?所有的例子都用�q�两个例子作�?custom.js写jQuery代码,starterkit.html观察效果.��用editPlus打开)

现在,我们��已�l�做好了一切准备来�q�行�q�个著名�?Hello world"例子.

本章的相关链�?

Starterkit
jQuery Downloads

Hello jQuery

在做所有事情之�?我们要让jQuery��d��和处理文档的DOM,必须��可能快地在DOM载入后开始执行事�?所�?我们用一个ready事�g作�ؓ处理HTML文档的开�?看看我们打开的custom.js�q�个文�g,里面已经准备好了:

$(document).ready(function() {
// do stuff when DOM is ready
});

放一个简单的alert事�g在需要等DOM完成载入,所以我们把��d��E�稍变复杂一�?在点��M�Q何一个链接时昄��一个alert.

$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});

�q�样在你点击��面的一个链接时都会触发�q�个"Hello world"的提�C��?/p>
(译者Keel�?��L��此代码修改custom.js�q�保�?然后用浏览器打开starterkit.html观察效果�?

让我们看一下这些修�Ҏ��什么含义�?("a") 是一个jQuery选择�?selector),在这里，它选择所有的a标签�Q�译者Keel注：�?lt;a>�Q?/span>�Q? ��h�� jQuery “�c?#8221;(jQuery "class")的一个别�U�ͼ�因此$()构造了一个新的jQuery 对象(jQuery object)。函�?click() 是这个jQuery对象的一个方法，它绑定了一个单��M��件到所有选中的标�{?�q�里是所有的a标签),�q�在事�g触发时执行了它所提供的alert�Ҏ��.

�q�里有一个拟行相似功能的代码:

Link

不同之处很明�?用jQuery不需要在每个a标签上写onclick事�g,所以我们拥有了一个整�z�的�l�构文��(HTML)和一个行为文�?JS),辑ֈ�了将�l�构与行为分开的目�?��像我们使用CSS�q�求的一�?

下面我们会更多地了解到选择器与事�g.

本章的相关链�?

jQuery Base
jQuery Expressions
jQuery Basic Events

Find me:使用选择器和事�g

jQuery提供两种方式来选择html�?elements�Q�第一�U�是用CSS和Xpath选择器联合�v来�Ş成一个字�W�串来传送到jQuery的构造器�Q�如�Q?("div > ul a")�Q�；�W�二�U�是用jQuery对象的几个methods(�Ҏ��)。这两种方式�q�可以联合�v来�؜合��用�?/p>
��Z��试一下这些选择器，我们来试着在我们starterkit.html中选择�q�修改第一个ordered list.

一开始，我们需要选择�q�个list本��n�Q�这个list有一个ID�?#8220;orderedlist”�Q�通常的javascript写法是document.getElementById("orderedlist").在jQuery中，我们�q�样做：

$(document).ready(function() {
$("#orderedlist").addClass("red");
});

�q�里��starterkit中的一个CSS样式red附加��C��orderedlist�?span class=log>(译者Keel注：参考测试包中的css目录下的core.css�Q�其中定义了red样式)。因此，在你��h��了starterkit.html后，你将会看到第一个有序列�?ordered list )背景色变成了�U�色�Q�而第二个有序列表没有变化.

现在�Q�让我们��d��一些新的样式到list的子节点.

$(document).ready(function() {
$("#orderedlist > li").addClass("blue");
});

�q�样�Q�所有orderedlist中的li都附加了样式"blue"�?/p>
现在我们再做个复杂一点的�Q�当把鼠标放在li对象上面和移开时进行样式切换，但只在list的最后一个element上生效�?/p>
$(document).ready(function() {
$("#orderedlist li:last").hover(function() {
$(this).addClass("green");
}, function() {
$(this).removeClass("green");
});
});

�q�有大量的类似的CSS�?a class=doc title="Documentation for XPath selectors" >XPath例子�Q�更多的例子和列表可以在�q�里扑ֈ��?span class=log>�Q�译者Keel注：入门看此文，修行在个人，要想在入门之后懂更多�Q�所以这�D�话的几个链接迟早是要必看的�Q�不会又要翻译吧...^_^!�Q?/span>

每一个onXXX事�g都有效，如onclick,onchange,onsubmit�{�，都有jQuery�{��h表示�Ҏ��Q�译者Keel注：jQuery不喜�ƢonXXX�Q�所以都�Ҏ��了XXX�Q�去掉了on�Q?/span>�?a class=doc title="Documentation for advanced events" >其他的一些事�?/a>�Q�如ready和hover,也提供了相应的方法�?/p>
你可以在Visual jQuery扑ֈ�全部的事件列表，在Events栏目�?

用这些选择器和事�g你已�l�可以做很多的事情了�Q�但�q�里有一个更强的好东东！

$(document).ready(function() {
$("#orderedlist").find("li").each(function(i) {
$(this).html( $(this).html() + " BAM! " + i );
});
});

find() 让你在已�l�选择的element中作条�g查找,因此 $("#orderedlist).find("li") ��像 $("#orderedlist li"). each()一栯��P代了所有的li�Q��ƈ可以在此基础上作更多的处理�?大部分的�Ҏ��,如addClass(), 都可以用它们自己�?each() 。在�q�个例子�? html()用来获取每个li的html文本, �q�加一些文字，�q�将之设�|��ؓli的html文本�?span class=log>�Q�译者Keel注：从这个例子可以看�?html()�Ҏ��是获取对象的html代码�Q��?html('xxx')是设�|?xxx'为对象的html代码�Q?/span>

另一个经常碰到的��d��是在没有被jQuery覆盖的DOM元素上call一些方法，惛_��一个在你用AJAX方式成功提交后的reset�Q?/p>
$(document).ready(function() {
// use this to reset a single form
$("#reset").click(function() {
$("#form")[0].reset();
});
});

�Q�译者Keel注：�q�里作者将form的id也写成了form�Q�源文�g�?lt;form id="form">�Q�这是非�怸�好的写法�Q�你可以��这个ID�Ҏ��form1或者testForm�Q�然后用$("#form1")或�? ("#testForm")来表�C�它�Q�再�q�行��试。）

�q�个代码选择了所有ID�?form"的元素，�q�在其第一个上call了一个reset()。如果你有一个以上的form�Q�你可以�q�样做：

$(document).ready(function() {
// use this to reset several forms at once
$("#reset").click(function() {
$("form").each(function() {
this.reset();
});
});
});

�Q�译者Keel注：��h��意一定要亲自��这些代码写在custom.js中�ƈ在starterkit.html上测试效果才能有所体会�Q�必要时要观察starterkit.html的html代码�Q?/p>
�q�样你在点击Reset链接后，��选择了文��中所有的form元素�Q��ƈ对它们都执行了一�ơreset()�?/p>
�q?有一个你可能要面对的问题是不希望某些特定的元素被选择。jQuery 提供了filter() 和not() �Ҏ��来解册��个问题�?filter()以过滤表辑ּ�来减��不�W�合的被选择��? not()则用来取消所有符合过滤表辑ּ�的被选择��? 考虑一个无序的list�Q�你惌��选择所有的没有ul子元素的li元素�?/p>
$(document).ready(function() {
$("li").not("[ul]").css("border", "1px solid black");
});

�q�个代码选择了所有的li元素�Q�然后去除了没有ul子元素的li元素。刷新浏览器后，所有的li元素都有了一个边框，只有ul子元素的那个li元素例外�?/p>
�Q�译者Keel注：��h��意体会方便之极的css()�Ҏ��Q��ƈ再次提醒请务必实际测试观察效果，比方说换个CSS样式呢？再加一个CSS样式呢？像这��P��$ ("li").not("[ul]").css("border", "1px solid black").css("color","red");�Q?/p>
上面代码中的[expression] 语法是从XPath而来�Q�可以在子元素和属�?elements and attributes)上用作过滤器�Q�比如你可能想选择所有的带有name属性的链接:

$(document).ready(function() {
$("a[@name]").background("#eee");
});

�q�个代码�l�所有带有name属性的链接加了一个背景色�?span class=log>�Q�译者Keel注：�q�个颜色太不明显了，��写成$("a[@name]").background("red");�Q?/span>

更常见的情况是以name来选择链接�Q�你可能需要选择一个有特点href属性的链接�Q�这在不同的��览器下对href的理解可能会不一��_��所以我们的部分匚w��("*=")的方式来代替完全匚w��("=")�Q?/p>
$(document).ready(function() {
$("a[@href*=/content/gallery]").click(function() {
// do something with all links that point somewhere to /content/gallery
});
});

到现在�ؓ止，选择器都用来选择子元素或者是�q��o元素。另外还有一�U�情冉|��选择上一个或者下一个元素，比如一个FAQ的页面，�{�案首先会隐藏，当问题点��L��Q�答案显�C�出来，jQuery代码如下�Q?/p>
$(document).ready(function() {
$('#faq').find('dd').hide().end().find('dt').click(function() {
var answer = $(this).next();
if (answer.is(':visible')) {
answer.slideUp();
} else {
answer.slideDown();
}
});
});

�q?里我们用了一些链式表达法来减��代码量�Q�而且看上��L��直观更容易理解。像'#faq' 只选择了一�ơ，利用end()�Ҏ��Q�第一�ơfind()�Ҏ��会结�?undone)�Q�所以我们可以接着在后面��l�find('dt')�Q�而不需要再�? ('#faq').find('dt')�?/p>
在点��M��件中的，我们�?$(this).next() 来找到dt下面紧接的一个dd元素�Q�这让我们可以快速地选择在被点击问题下面的答案�?/p>
�Q�译者Keel注：�q�个例子真是太酷了，FAQ中的�{�案可以收羃�Q�从利用next()的思�\到实现这些效果都有很多地斚w��要我们消化，注意 if (answer.is(':visible'))用法�Q�注意answer.slideUp();不懂的地方赶紧查我在最开始提到的两个必看API文档�Q?/p>
除了选择同��别的元素外，你也可以选择父��的元素。可能你惛_��用户鼠标�U�d��文章某段的某个链接时�Q�它的父�U�元�?-也就是文章的�q�一�D늪�出显�C�，试试�q�个�Q?/p>
$(document).ready(function() {
$("a").hover(function() {
$(this).parents("p").addClass("highlight");
}, function() {
$(this).parents("p").removeClass("highlight");
});
});

��试效果可以看到�Q�移到文章某�D늚�链接�Ӟ��它所在的�D�全用上highlight样式�Q�移��C��后又恢复原样�?/p> �Q�译者Keel注：highlight是core.css中定义的样式�Q�你也可以改变它�Q�注意这里有�W�二个function()�q�是hover�Ҏ��的特点，请在API文��中查阅hover�Q�上面也有例子说明）
在我们��l�之前我们先来看看这一步： jQuery会让代码变得更短从而更�Ҏ��理解和维护，下面�?(document).ready(callback)的羃写法�Q?/p>
$(function() {
// code to execute when the DOM is ready
});

应用到我们的Hello world例子中，可以�q�样:

$(function() {
$("a").click(function() {
alert("Hello world!");
});
});

现在�Q�我们手上有了这些基��的知识，我们可以更进一步的探烦其它斚w��的东西，��׃��AJAX开始！

本章的相关链�?

jQuery API documentation
Visual jQuery - A categorized browsable API documentation
jQuery Expressions: CSS
jQuery Expressions: XPath
jQuery Expressions: Custom
jQuery Special Events
jQuery DOM Traversing

Rate me:使用AJAX

在这一部分我们写了一个小��的AJAX应用�Q�它能够rate一些东�?span class=log>�Q�译Keel注：��是�Ҏ��些东西投��）�Q�就像在youtube.com上面看到的一栗��?/p>
首先我们需要一些服务器端代码，�q�个例子中用��C��一个PHP文�g�Q�读取rating参数然后�q�回rating��L��和��^均数。看一�?a >rate.php代码.

虽然�q�些例子也可以不使用AJAX来实玎ͼ�但显�C�我们不会那么做�Q�我们用jQuery生成一个DIV容器�Q�ID�?rating".

$(document).ready(function() {
// generate markup
var ratingMarkup = ["Please rate: "];
for(var i=1; i <= 5; i++) {
ratingMarkup[ratingMarkup.length] = "" + i + " ";
}
// add markup to container and applier click handlers to anchors
$("#rating").append( ratingMarkup.join('') ).find("a").click(function(e) {
e.preventDefault();
// send requests
$.post("rate.php", {rating: $(this).html()}, function(xml) {
// format result
var result = [
"Thanks for rating, current average: ",
$("average", xml).text(),
", number of votes: ",
$("count", xml).text()
];
// output result
$("#rating").html(result.join(''));
} );
});
});

�q�段代码生成�?个链接，�q�将它们�q�加到id�?rating"容器中，当其中一个链接被点击�Ӟ��该链接标明的分数��׃��以rating参数形式发送到rate.php�Q�然后，�l�果��以XML形式会从服务器端传回来，��d��到容器中�Q�替代这些链接�?/p>
如果你没有一个安装过PHP的webserver�Q�你可以看看�q�个在线的例�?/a>.

不��用javascript实现的例子可以访�?softonic.de 点击 "Kurz bewerten!"

更多的AJAX�Ҏ��可以�?a class=doc title="Documentation for AJAX methods" >�q�里扑ֈ��Q�或者看�?a >API文�� 下面的AJAX filed under AJAX.

�Q�译者Keel注：�q�个在线实例从国内访问还是比较慢的，点击后要�{�一会儿才能看到�l�果�Q�可以考虑对它�q�行修改�Q�比如加上loading�Q�投��后加上再投��的�q�回链接�{�。此外，�q�个例子中还是有很多需要进一步消化的地方�Q�看不懂的地方请参考API文��。）

一个在使用AJAX载入内容时经常发生的问题是：当蝲入一个事件句柄到一个HTML文��Ӟ��q�需要在载入内容上应用这些事�Ӟ��你不得不在内容加载完成后应用�q�些事�g句柄�Q��ؓ了防止代码重复执行，你可能用到如下一个function:

// lets use the shortcut
$(function() {
var addClickHandlers = function() {
$("a.clickMeToLoadContent").click(function() {
$("#target").load(this.href, addClickHandlers);
});
};
addClickHandlers();
});

现在�Q�addClickHandlers只在DOM载入完成后执行一�ơ，�q�是在用��h��ơ点��d��有clickMeToLoadContent �q�个样式的链接�ƈ且内容加载完成后.

��h��意addClickHandlers函数是作��Z��个局部变量定义的�Q�而不是全局变量(如：function addClickHandlers() {...})�Q�这样做是�ؓ了防止与其他的全局变量或者函数相冲突.

另一个常见的问题是关于回�?callback)的参数。你可以通过一个额外的参数指定回调的方法，��单的办法是将�q�个回调�Ҏ��包含在一个其它的function�?

// get some data
var foobar = ...;
// specify handler, it needs data as a paramter
var handler = function(data) {
...
};
// add click handler and pass foobar!
$('a').click( function(event) { handler(foobar); } );

// if you need the context of the original handler, use apply:
$('a').click( function(event) { handler.apply(this, [foobar]); } );

用到��单的AJAX后，我们可以认�ؓ已经非常�?#8220;web2.0”了，但是到现在�ؓ止，我们�q�缺��一些酷炫的效果。下一节将会谈到这些效�?

本章的相关链�?

jQuery AJAX Module
jQuery API: Contains description and examples for append and all other jQuery methods
ThickBox: A jQuery plugin that uses jQuery to enhance the famous lightbox

Animate me(让我生动��h��):使用FX

一些动态的效果可以使用 show() �?hide()来表�?

$(document).ready(function() {
$("a").toggle(function() {
$(".stuff").hide('slow');
}, function() {
$(".stuff").show('fast');
});
});

你可以与 animate()联合��h��创徏一些效�?如一个带渐显的滑动效�?

$(document).ready(function() {
$("a").toggle(function() {
$(".stuff").animate({
height: 'hide',
opacity: 'hide'
}, 'slow');
}, function() {
$(".stuff").animate({
height: 'show',
opacity: 'show'
}, 'slow');
});
});

很多不错的效果可以访�?a >interface plugin collection. �q�个站点提供了很多demos和文�?/p>
�q�些效果插�g是位于jQuery插�g列表的前面的�Q�当然也有很多其他的插�g�Q�比如我们下一章讲到的表格排序插�g�?/p>
本章的相关链�?

jQuery FX Module
Interface plugin

Sort me(��我有序�?:使用tablesorter插�g(表格排序)

�q�个表格排序插�g能让我们在客��L��按某一列进行排序，引入jQuery和这个插件的js文�g�Q�然后告诉插件你惌��哪个表格拥有排序功能�?/p>
要测试这个例子，先在starterkit.html中加上像下面�q�一行的代码�Q?/p>

然后可以�q�样调用不着:

$(document).ready(function() {
$("#large").tableSorter();
});

现在点击表格的第一行head区域�Q�你可以看到排序的效果，再次点击会按倒过来的��序�q�行排列�?/p>
�q�个表格�q�可以加一些突出显�C�的效果�Q�我们可以做�q�样一个隔行背景色�Q�斑马线�Q�效�?

$(document).ready(function() {
$("#large").tableSorter({
stripingRowClass: ['odd','even'], // Class names for striping supplyed as a array.
stripRowsOnStartUp: true // Strip rows on tableSorter init.
});
});

关于�q�个插�g的更多例子和文��可以�?tablesorter首页扑ֈ�.

几乎所有的特�g都是�q�样用的:先include插�g的js文�g,然后在某些元素上使用插�g定义的方�?当然也有一些参数选项是可以配�|�的

�l�常更新的插件列表可以从jQuery官方�?on the jQuery site扑ֈ�.

当你更经常地使用jQuery�?你会发现��你自己的代码打包成插�g是很有用处的,它能方便地让你的公司或者其他�h�q�行重用.下一章我们将谈到如何构徏一个自��q��插�g.

本章的相关链�?

Plugins for jQuery
Tablesorter Plugin

Plug me:制作自己的插�?/h2>
写一个自��q��jQuery插�g是非常容易的,如果你按照下面的原则来做,可以让其他�h也容易地�l�合使用你的插�g.

��Z��的插件取一个名�?在这个例子里面我们叫�?foobar".
创徏一个像�q�样的文�?jquery.[yourpluginname].js,比如我们创徏一个jquery.foobar.js
创徏一个或更多的插件方�?使用�l�承jQuery对象的方�?�?
jQuery.fn.foobar = function() {
// do something
};

可选的:创徏一个用于帮助说明的函数,�?
jQuery.fooBar = {
height: 5,
calculateBar = function() { ... },
checkDependencies = function() { ... }
};

你现在可以在你的插�g中��用这些帮助函��C��:

jQuery.fn.foobar = function() {
// do something
jQuery.foobar.checkDependencies(value);
// do something else
};

可选的l:创徏一个默认的初始参数配置,�q�些配置也可以由用户自行讑֮�,�?
jQuery.fn.foobar = function(options) {
var settings = {
value: 5,
name: "pete",
bar: 655
};
if(options) {
jQuery.extend(settings, options);
}
};

现在可以无需做�Q何配�|�地使用插�g�?默认的参数在此时生效:

$("...").foobar();

或者加入这些参数定�?

$("...").foobar({
value: 123,
bar: 9
});

如果你release你的插�g, 你还应该提供一些例子和文��,大部分的插�g都具备这些良好的参考文�?

现在你应该有了写一个插件的基础,让我们试着用这些知识写一个自��q��插�g.

很多��着控制所有的radio或者checkbox是否被选中,比如:

$("input[@type='checkbox']").each(function() {
this.checked = true;
// or, to uncheck
this.checked = false;
// or, to toggle
this.checked = !this.checked;
});

无论何时候，当你的代码出现each�Ӟ��你应该重写上面的代码来构造一个插�?很直接地:

$.fn.check = function() {
return this.each(function() {
this.checked = true;
});
};

�q�个插�g现在可以�q�样�?

$("input[@type='checkbox']").check();

现在你应该还可以写出uncheck()和toggleCheck()�?但是先停一�?让我们的插�g接收一些参�?

$.fn.check = function(mode) {
var mode = mode || 'on'; // if mode is undefined, use 'on' as default
return this.each(function() {
switch(mode) {
case 'on':
this.checked = true;
break;
case 'off':
this.checked = false;
break;
case 'toggle':
this.checked = !this.checked;
break;
}
});
};

�q�里我们讄��了默认的参数,所以将"on"参数省略也是可以�?当然也可以加�?on","off", �?"toggle",�?

$("input[@type='checkbox']").check();
$("input[@type='checkbox']").check('on');
$("input[@type='checkbox']").check('off');
$("input[@type='checkbox']").check('toggle');

如果有多于一个的参数讄��会稍�E�有点复�?在��用时如果只想讄��W�二个参�?则要在第一个参��C��|�写入null.

从上一章的tablesorter插�g用法我们可以看到,既可以省略所有参数来使用或者通过一�?key/value �Ҏ��重新讄��每个参数.

作�ؓ一个练�?你可以试着��?�W�四�?/a> 的功能重写�ؓ一个插�?�q�个插�g的骨架应该是像这��L��:

$.fn.rateMe = function(options) {
var container = this; // instead of selecting a static container with $("#rating"), we now use the jQuery context

var settings = {
url: "rate.php"
// put more defaults here
// remember to put a comma (",") after each pair, but not after the last one!
};

if(options) { // check if options are present before extending the settings
$.extend(settings, options);
}

// ...
// rest of the code
// ...

return this; // if possible, return "this" to not break the chain
});

Next steps(下一�?

如果你想做更好的javascript开�?��你��用一个叫 FireBug的firefox插�g. 它提供了断点调试(比alert强多�?、观察DOM变化�{�很多漂亮的功能

如果你还有未解决的问题，或者新的想法与��Q�你可以使用jQuery的邮件列�?jQuery mailing list.

关于�q�个指南的�Q何事情，你可以写mail�l�作者或者发表评论在他的日志�Q?a >blog.

关于�q�个指南的翻译�Q何事情，你可以写mail�l�我或者发表评论在我的日志�Q?a >blog.

�q�有什�?..

大大感谢John Resig创造了�q�么好的library! 感谢jQuery community 为John提供了如此多的咖啡和其他的一�?

© 2006, Jörn Zaefferer - last update: 2006-09-12

中文版翻�?Keel - 最后更�? 2006-12-13

SIMONE 2007-06-25 17:34 发表评论

ajax�~�存问题

SIMONE — Thu, 08 Feb 2007 01:15:00 GMT

使用Ajax中遇到的一个问题，手动��h��面�Ӟ��没有提交到后台处理，��L��C�第一�ơ蝲入的数据�?br />��头已加入防�~�存讄��Q?br />

可结果依旧�?br />baidu了一下，扑ֈ�相关资料�?br />解决�Ҏ��Q�让提交的URL每次都向服务器端发送请求，而不是��用缓存�?br />�Ҏ��一�Q�加旉��?var url = BaseURL + "&timeStamp=" + new Date().getTime();
�Ҏ��二：加随机数 var url = BaseURL + "&r=" + Math.random();
�Ҏ��三：自已惟뀂。�?/p>

SIMONE 2007-02-08 09:15 发表评论

无尽的�Q�?JSON

SIMONE — Thu, 04 Jan 2007 03:03:00 GMT

技术饭�q�真是不好吃,今天��Z��搞定��g��q�个��N��,选择了Ajax.在看Ajax的时候看��C��Json.�q�个东西看着不错,好吧,上网去down个用.

打开�|�站开始寻找我的目�?发现�q�个东西居然有好多版�?比如

JSON in ActionScript:
ActionScript1.
ActionScript2.
ActionScript3.

JSON in C.
JSON_checker.

JSON in C++:
jsoncpp.
zoolib.

JSON in C#:
Jayrock.
Newtonsoft Json.NET.

JSON in Cold Fusion.
CFJSON.
JSON Serializer.

JSON in Delphi.

JSON in E.

JSON in Erlang.

JSON in Java:
org.json.
Json-lib.
JSON Tools.
org.json.simple.
Stringtree.

JSON in JavaScript.

JSON in Lisp:
Common Lisp.
Emacs Lisp.
Chicken Scheme.
MZScheme.

JSON in Lua.

JSON in ML and Ruby.

JSON in Objective C.

JSON in Objective CAML.

JSON in OpenLaszlo.

JSON in Perl.

JSON in PHP:
Zend_JSON
JSON-PHP.
PHP-JSON.
Services_JSON.
JSON PHP.

JSON in Python.

JSON in Rebol.

JSON in Ruby.

JSON in Squeak.
说实�?看到�q�些玩意,心里面顿时是凉了半截.
好多名词!!!
.看着�q�些东西感觉自己特别无知.�q�好大多脸熟,心里面的虚荣心还没有跌倒低�?
点击一个链�?比现在多一倍的新链接出现在眼前,每一个链接代表一个知识点.��面呈现的一瞬间理智立刻崩溃�?只是一个名不见�l�传的json��有如此之多的知�?那么其他�?......面对无穷无尽的知识�v�z?不由理解了知识是学不完这句话.
在知识爆炸的今天,也许只有"现用现学"是解册��U�情�늚�最好办�?
可是面对�q�些东西,开始觉得那�?"现用现学"是多么恐怖的一�U�境�?�q�种东西现学了能马上会用,用不是问�?问题是用�q�些��C��西还能算出工�E�进�?�q�能�~�出可以�l�护的代�?如果再能保证代码的健壮�?�?.......
�q�里不由惛_��另一个问�?��Z��么现用现学还能用�?如果是全新的东西,快速的学习肯定��仙也做不了.所以看��h��全新的知识应该有相应的共通点.
是不是因为面向对象的思想�?个�h猜测,可能性比较大,因�ؓ一旦变成对象了,��可以不��他们的实现方式,一律归到已有的面向对象的思�\中来,无非是多了几个新元素要记而已.要是�q�样,真应该感谢面向对�?

SIMONE 2007-01-04 11:03 发表评论

关于W3C DOM

SIMONE — Sun, 31 Dec 2006 08:59:00 GMT
     摘要: W3C   DOM 文档对象模型 (DOM) 是与�q�_��和语�a�无关的接口，允许�E�序和脚本动态地讉K��和更新文��的内容�Q�结构和样式。文��可以进一步处理，处理的结果可以放回到所提供的页面中�? ...  阅读全文

SIMONE 2006-12-31 16:59 发表评论

Ajax中��用JSON

SIMONE — Sun, 31 Dec 2006 08:52:00 GMT
提交数据使用json代替xml
    ��面�Q�jsonExample.jsp
<%@ page contentType="text/html; charset=GBK" %>

<br />JSON�C�Z��<br />

服务器响应：

    服务器：JSONExample.java
package ajaxbook.chap4;
import java.io.*;
import java.net.*;
import java.text.ParseException;
import javax.servlet.*;
import javax.servlet.http.*;
import org.json.JSONObject;
public class JSONExample
    extends HttpServlet {
//处理Post�Ҏ��
protected void doPost(HttpServletRequest request,
                        HttpServletResponse response) throws ServletException,
      IOException {
    String json = readJSONStringFromRequestBody(request);
    //使用JSON�l�字Ajax对象
    JSONObject jsonObject = null;
    try {
      jsonObject = new JSONObject(json);
    }
    catch (ParseException pe) {
      System.out.println("ParseException: " + pe.toString());
    }
    //�q�回输出�l�果
    String responseText = "You have a " + jsonObject.getInt("year") + " "
        + jsonObject.getString("make") + " " + jsonObject.getString("model")
        + " " + " that is " + jsonObject.getString("color") + " in color.";
    response.setContentType("text/xml");
    response.getWriter().print(responseText);
}
//得到参数
private String readJSONStringFromRequestBody(HttpServletRequest request) {
    StringBuffer json = new StringBuffer();
    String line = null;
    try {
      BufferedReader reader = request.getReader();
      while ( (line = reader.readLine()) != null) {
        json.append(line);
      }
    }
    catch (Exception e) {
      System.out.println("Error reading JSON string: " + e.toString());
    }
    return json.toString();
}
}

注意�Q�要引入json.js和json的源文�g�Q��用json.jar不行�Q�源文�g参见书籍源代码第三章
参考：Ajax基础教程作笔记吧

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=975204

SIMONE 2006-12-31 16:52 发表评论

AJAX+jsp无刷新验证码实例

SIMONE — Mon, 11 Dec 2006 06:55:00 GMT

【导诅R��本文通过实例�Q�介�l�在做验证码的时候�ؓ了给用户很好的体验，需要在原有验证方式基础之上增加一�D�js�Q�通过xmlhttp来获取返回��|��以此来验证是否有效。同�Ӟ��本例�q�特别适合��验用户名是否有效�?/font>

1、我们在做验证码的时候往往�׃��要反作弊�Q�验证有时故意加入多的干扰因素，�q�时验证码显�C�Z��很清楚，用户�l�常输入错误。这样不但要重新��h��面�Q�导致用��h��有看清楚验证码而重填而不是修改，而且如果没有用session保存下用戯��入的其它数据的话(如姓�?�Q�用户刚刚输入的内容也不存在了，�q�样�l�用户造成不好的体验�?

2、本例在原有验证方式基础之上增加一�D�js�Q�通过xmlhttp来获取返回��|��以此来验证是否有效，�q�样即��用户��览器不支持js�Q�也不会影响他的正常使用了�?

3、�ؓ了防止作弊，当用戯��?�ơ输入错误时则重载一下图片，�q�样也利于用户因为图片上的验证码辨认不清而��其终无法输入正确�?

4、本例还特别适合��验用户名是否有效�Q�只要从后台做个sql查询�Q�返回一个值或是xml卛_��?�q�种例子太多 �Q�就在此不赘�q�C��)�?

5、本例的优点在于非常方便用户输入�Q�而且减少�Ҏ��务器端的��h��Q�可以说既改善用户体验而且略会节省带宽成本�Q�但相应地要在页面上增加一�D�JavaScript代码�Q�在目前�|�速越来越快�h们要求便捯��适的今天�Q�似乎我们更应注意提供给用户良好的��用感受�?

代码如下�Q?/p>
1、img.jsp,输入主页�?/strong>

<%@ page contentType="text/html; charset=GBK" language="java"

import="java.sql.*" errorPage="" pageEncoding="GBK"%>

<%

//set Chinese Char

//Cody by JarryLi@gmail.com;

//homepage:jiarry.126.com

request.setCharacterEncoding("GBK");

response.setCharacterEncoding("GBK");

response.setContentType("text/html; charset=GBK");

%>

囄��验证

AJAX(无刷新及时提�C?验证码实例！cody by jarry

<%

String num=request.getParameter("num");

String random=(String)session.getAttribute("random");

String name=request.getParameter("name");

if(num!=null&&random!=null&&name!=null)

{

if(num.equals(random))

{

out.println("

恭喜您，验证码输入成功，�q�里是提交结果页面，可以写入数据库了�Q?lt;/font>

�q�回再测�?lt;/a>
");

out.println("您的名字是："+name);

out.println("
");

out.println("您输入的是："+num);

out.println("验证码是�Q?+random);

out.println("");

return;//javascript:history.go(-1)

}

}

%>

onsubmit="return validata(this);">

您的姓名�Q?lt;input type="text" name="name" size=10> (��Z��更好地说明此例，特加姓名一��?

�?�?码：

验证码看不清

2、num.jsp,反馈xmlhttp��h��的页�?/strong>

<%@ page contentType="text/html; charset=GBK" language="java"

import="java.sql.*" errorPage="" pageEncoding="GBK"%>

<%

//set Chinese Char

//Cody by JarryLi@gmail.com;

//homepage:jiarry.126.com

request.setCharacterEncoding("GBK");

response.setCharacterEncoding("GBK");

response.setContentType("text/html; charset=GBK");

%>

<%

String num=request.getParameter("num");

String random=(String)session.getAttribute("random");

if(num!=null&&random!=null)

{

if(!num.equals(random))

{

/*

out.println("");

out.println("");

//response.sendRedirect("img.jsp");

*/

out.print("validate_failed:"+random);

}

else

{

//out.println("
验证成功�Q?lt;/center>");

out.print("validate_successful:"+random);

}

}

%>

3、random.jsp,生成验证码图片的��面

com.sun.image.codec.jpeg.*,java.util.*" %>]]>

<%@ page autoFlush="false" import="java.util.*,java.awt.*,

java.awt.image.*,com.sun.image.codec.jpeg.*,java.util.*" %>

<%

//set Chinese Char

//Cody by JarryLi@gmail.com;

//homepage:jiarry.126.com

request.setCharacterEncoding("GBK");

response.setCharacterEncoding("GBK");

response.setContentType("text/html; charset=GBK");

%>

<%

String chose="0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";

char display[]={'0',' ','0',' ','0',' ','0'},ran[]={'0','0','0','0'},temp;

Random rand=new Random();

for(int i=0;i<4;i++)

{

temp=chose.charAt(rand.nextInt(chose.length()));

display[i*2]=temp;

ran[i]=temp;

}

String random=String.valueOf(display);

session.setAttribute("random",String.valueOf(ran));

%>

<%

out.clear();

response.setContentType("image/jpeg");

response.addHeader("pragma","NO-cache");

response.addHeader("Cache-Control","no-cache");

response.addDateHeader("Expries",0);

int width=80, height=30;

BufferedImage image = new BufferedImage(width, height,

BufferedImage.TYPE_INT_RGB);

Graphics g = image.getGraphics();

//以下填充背景颜色

g.setColor(Color.GREEN);

g.fillRect(0, 0, width, height);

//讄��字体颜色

g.setColor(Color.RED);

Font font=new Font("Arial",Font.PLAIN,20);

g.setFont(font);

//g.drawString(random,5,14);

g.drawString(random,5,20);

g.dispose();

ServletOutputStream outStream = response.getOutputStream();

JPEGImageEncoder encoder =JPEGCodec.createJPEGEncoder(outStream);

encoder.encode(image);

outStream.close();

%>

4、net.js,��装好的xmlhttp对象�Q�可以很方便的调�?/strong>

/* namespacing object */

var net=new Object();

net.READY_STATE_UNINITIALIZED=0;

net.READY_STATE_LOADING=1;

net.READY_STATE_LOADED=2;

net.READY_STATE_INTERACTIVE=3;

net.READY_STATE_COMPLETE=4;

/*--- content loader object for cross-browser requests ---*/

net.ContentLoader=function(url,on_load,on_error,method,params,contentType){

this.req=null;

this.on_load=on_load;

this.on_error=(on_error) ? on_error : this.defaultError;

this.loadXMLDoc(url,method,params,contentType);

}

net.ContentLoader.prototype.loadXMLDoc=function(url,method,params,contentType){

if (!method)

{

method="GET";

}

if (!contentType && method=="POST")

{

contentType='application/x-www-form-urlencoded';

}

if (window.XMLHttpRequest)

{

this.req=new XMLHttpRequest();

}

else if (window.ActiveXObject)

{

//add try catch;

try {

this.req = new ActiveXObject("Msxml2.XMLHTTP");

}catch (e1){

try {

this.req = new ActiveXObject("Microsoft.XMLHTTP");

} catch (e2){

}

}

//

//this.req=new ActiveXObject("Microsoft.XMLHTTP");

}

if (this.req)

{

try

{

var loader=this;

this.req.onreadystatechange=function()

{

net.ContentLoader.onReadyState.call(loader);

}

this.req.open(method,url,true);

if (contentType)

{

this.req.setRequestHeader('Content-Type', contentType);

}

this.req.send(params);

}

catch (err)

{

this.on_error.call(this);

}

}

}

net.ContentLoader.onReadyState=function(){

var req=this.req;

var ready=req.readyState;

if (ready==net.READY_STATE_COMPLETE){

var httpStatus=req.status;

if (httpStatus==200 || httpStatus==0){

this.on_load.call(this);

}else{

this.on_error.call(this);

}

}

}

net.ContentLoader.prototype.defaultError=function(){

alert("error fetching data!"

+"\n\nreadyState:"+this.req.readyState

+"\nstatus: "+this.req.status

+"\nheaders: "+this.req.getAllResponseHeaders());

}

�Q�责�ȝ��?火凤�?sunsj@51cto.com TEL�Q�（010�Q?8476636-8007�Q?br />

SIMONE 2006-12-11 14:55 发表评论

prototype.js　1.4版开发者手�?强烈推荐)

SIMONE — Thu, 23 Nov 2006 03:31:00 GMT
     摘要: http://wiki.script.aculo.us/scriptaculous/show/Prototype �q�是一个很好的�|�站�Q�很值得一看！�Q�！�Q�！�Q�！�Q�！�Q�！�Q�！�Q�！�Q�！�Q�！�Q�！看到一个很好的东西在国内没有被很多��Z��用�v来，实在是不爽，所以花了很大功夫把�q�个手册��译成中文，�׃��q�篇文章很长�Q�所以，��译的工作量很大而且有些地方英文版也没有说清楚，虽得查看源代码，好在不是坚持做完...  阅读全文

SIMONE 2006-11-23 11:31 发表评论

Struts AjaxTags

SIMONE — Wed, 22 Nov 2006 06:10:00 GMT
2005�q?strong>Frank W. Zammetti扩展了Struts的Tag库，使Struts具备了AJAX功能�?
      �Q�注�Q�下面的代码引用�?strong>Frank W. Zammetti 的ajaxtags包）

      Tag库的扩展
      1、FormTag
           增加了refAjax属性以及setter和getter�Ҏ��Q?/div>
      2、BaseHandlerTag
           增加了refAjax属性以及setter和getter�Ҏ��Q?/div>
           同时扩展了prepare×××Events�Ҏ��Q��其加载Ajax属性，如：
           if (getOnkeydown() != null) {
                  ......
           }
           /* Frank W. Zammetti */
           else {
                  prepareAjax("onkeydown", handlers);
           }
           /* Frank W. Zammetti */
      3、Struts-Html.tld
           增加了refAjax属性；

      应用
      1、ajax-config.xml
           ......




                            //发送请求的讄��

                                 example1.do
                                 firstName=firstName,lastName=lastName

                            //回调函数�Q�方法）及回写区域的讄��

                                 example1_resultLayer




           ......
      2、struts-config.xml
           ......
           //与其它Action的区别是�Q�Ajax调用的Action没有input和forward

                            type="com.omnytex.ajaxtags.Example1Action" />
           ......
           //Ajax Tag Plugin

           ......
      3、Jsp客户界面
           ......
           //对应于ajax-config.xml中的form ajaxRef

                ......
                //对应于ajax-config.xml中的Element ajaxRef


           Result:
           //对应于ajax-config.xml中的responseHandler

           ......
           //启用Ajax�Q�应该放在Jsp的最后）

           ......
      4、Action
           ......
          public ActionForward execute( ...... ) throws Exception {
                try {
                    ......
                    //Ajax的Action需要输出内容到out
                    PrintWriter out = response.getWriter();
                    out.println(......);
                    out.flush();
                    out.close();
                } catch (Exception e) {
                    System.err.println("Exception in Example1Action.execute(): " + e);
                }
                //�׃��Ajax的Action输出的内容由��面的区域接�Ӟ��不需要蟩转到其它��面
                //所以，�q�回null
                return null;
           }
           ......

      Struts Ajax Tag工作原理
      1、Struts启动�Q�加载AjaxInit�Q?/div>
      2、AjaxInit解析ajax-config.xml�Q?/div>
      3、Struts加蝲AjaxEnabled的Jsp�Q?/div>
      4、Struts-AjaxTag�Ҏ��Form ajaxRef和elment ajaxRef扑ֈ�ajax-config的设�|�；
      5、输出AjaxEnabled的Html�Q�Tag库加入了Ajax需要的Script�Q�如�Q�XMLHttpRequest�Q�；
      6、用戯��入数据，提交数据�Q�异步模式提交后�Q�用户可以��l�其它操作）�Q?/div>
      7、XMLHttpRequest对象接管提交数据�Q��ƈ向Struts提交do及参敎ͼ�
      8、Struts ActionServlet加蝲FormBean�Q�和相应的Action�Q?/div>
      9、Struts Action执行相应逻辑�Q�得到返回的数据�Q�通过out输出�Q?/div>
      10、XMLHttpRequest得到Struts�q�回的数据；
      11、XMLHttpRequest调用讄��的回调函敎ͼ��Ҏ��Q�，输出数据到指定的区域�Q?/div>

SIMONE 2006-11-22 14:10 发表评论

Ajax跨域��h��解决�Ҏ��之Modello��?

SIMONE — Thu, 26 Oct 2006 05:05:00 GMT

Modello 是一个允许�ƈ且鼓�׃��?JavaScript 来编写类的框�Ӟ��?a target="_blank">Modello.ajax则是利用此框架达到Ajax跨域��h��的一个Ajax��装�c�R�?/p>
对于跨域调用�Q�Modello.ajax 采用在本域服务器讄��一个中�?proxy 的方式。��?proxy 方式可以不用对个别浏览器�q�行�Ҏ��讄��Q�不用依赖具体的服务器，�q�且具备扩展能力�{�优炏V��随 Modello.ajax 工具集提供的 proxy �?php 写成�Q�可�q�行 php 的服务器都可以安装。（以上内容转自《Ajax Wing: 跨域Ajax工具: Modello.ajax�?/a>�Q?/p>
使用Modello的代码如下：

代码实例

SIMONE 2006-10-26 13:05 发表评论

SIMONE — Thu, 30 Mar 2006 07:02:00 GMT
�|�上看了很多资料�Q�但好象很少��到跨域读取XML文档的问题，有些论坛或BLOG关于XML跨域��d��的问题，实现��h��非法复杂。�?br />在这里我介绍一下XMLHTTP跨域��d��面数据的问题，以JS��Z��

一、读取数据�?br />
//建立对象
var xml = new ActiveXObject("Microsoft.XMLHTTP")

//�q�里的abc.xml是被��d��的文�Ӟ��当然也可以换成别的文�Ӟ��false表示非异步传输，async是asynchronism��写�?br />xml.open("get","http://www.mydomain.com/abc.xml",false)
xml.send()

二、在被读取数据的域根下（上例是在www.mydomain.com/下）�Q�徏立一个XML �{�略文�g�Q�名字一定要是crossdomain.xml�?br />
在策略文件中加入以下代码

     //domain属性的值就是被允许从本站读取数据的来源域名

�q�样��完成了跨域��d��数据�q�不会出现跨域的安全提示信息�?br />

SIMONE 2006-03-30 15:02 发表评论

欧美亚洲在线,尤物在线网址,日韩精品99

jQuery �?prototype 共存

推荐--jQuery使用手册

中文版译者：Keel

以下部分为原文翻�?

jQuery入门指南教程

内容提要

安装

本章的相关链�?

Hello jQuery

本章的相关链�?

Find me:使用选择器和事�g

本章的相关链�?

Rate me:使用AJAX

本章的相关链�?

Animate me(让我生动��h��):使用FX

本章的相关链�?

Sort me(���我有序�?:使用tablesorter插�g(表格排序)

本章的相关链�?

Next steps(下一�?

�q�有什�?..

© 2006, Jörn Zaefferer - last update: 2006-09-12

中文版翻�?Keel - 最后更�? 2006-12-13

ajax�~�存问题

无尽的�Q�?JSON

关于W3C DOM

Ajax中��用JSON

服务器响应：

AJAX+jsp无刷新验证码实例

prototype.js 1.4版开发者手�?强烈推荐)

Struts AjaxTags

Ajax跨域��h��解决�Ҏ��之Modello��?

Sort me(��我有序�?:使用tablesorter插�g(表格排序)

prototype.js　1.4版开发者手�?强烈推荐)