澳门新葡萄京官网注册使用CamanJS在Web页面上处理图像的技巧

你可能会想问既然CSS已经有现成的功能可以支持基础的图像操作了,为什么我们还会想要为此使用一个像这样的
JavaScript 库呢。

好吧,除了有浏览器的支持,使用 CamanJS
有许多的好处。它为我们操作图像提供了更多的过滤器和选项。你可以在你的图像中创建高级过滤器,进而控制其中的每一个像素。你可以使用其内置的混合模式和图层系统。而它也能让你进行图像的跨域操作,并可以对操作产生的图像进行保存。

简介

现在,就让我们来开始探索 CamanJS 所提供的特性吧!

jQuery 逐渐从其他 JavaScript 库选择中脱颖而出,并且成为 Web 开发人员的最佳选择。它迅速成为希望简化客户端开发和快速高效地创建富
Internet 应用程序(RIA)的程序员的首选。随着
RIA 的广泛使用,将越来越多地使用 JavaScript 库协助开发。RIA
被定义(松散地)为通过浏览器运行的应用程序,这种浏览器结合使用
CSS/JavaScript/Ajax 创建类似桌面应用程序的外观。Firefox、Internet
Explorer 和 Safari 最新发行版中新增的特性,以及 Google 新
Chrome 浏览器最近的版本,都专注于加快每个浏览器的内部 JavaScript
引擎的速度,其惟一目的是更加适应浏览器制造商为未来设计
RIA。这些公司认为未来的 Web 页面将包含大量 JavaScript 代码,因此首先开发一个成熟的、没有
bug 的库是非常重要的。

引入必要的文件

要开始使用 CamanJS,需要简单的将这个库引入到你的页面中.
我所引用的这个最小化的 CDN
版本除了核心功能之外,所有的插件都被组合到了一个文件中:

因此,随着未来 Web 应用程序不断朝富沉浸式界面(rich and immersive
interface)的方向发展,Web
开发人员不断地寻找可以简化这些工作的工具。现在已经有几个 JavaScript
库,每个库都有各自的优点和缺点,同时也有各自的支持者和反对者。在这里,我不讨论哪个库的特性更好,因为这对最终结果没有多大影响。最重要的是哪个库使用得更多
— 数量才是最重要的。看看下面 4 个最流行的 JavaScript 库的 Google
趋势图。很明显,在过去 6 到 8 个月里,jQuery 成为主导的 JavaScript
库,并且这一趋势仍在上升。

script src=""/script

图 1. 常见的 JavaScript 库的 Google 趋势图
 澳门新葡萄京官网注册 1

从版本3到4,CamanJS
函数的语法发生了一点小小的改变。因此请确保在跟随这个教程进行实际操作时,你所引入的版本在4以上。

就业市场方面也显示出
jQuery 渐渐上升为最多人选择的 JavaScript 库。Monster.com
的一个非科研性结果表明,与 jQuery 相关的职位有 113 个,而 YUI、ExtJS 和
mootools 分别是 67、19 和 13。

通过HTML属性进行图像操作

这个 jQuery 系列文章的第一篇以探索 jQuery 语法开始,同时了解它的函数是如何调用的。本文后面的小节探索这个库的核心函数,以及这个库如何使用它的强大的选择器和过滤器使
DOM 遍历更加简单明了。接下来的文章将阐述 CSS
操作、表单控制、文本更改、Ajax 简单性 和动画(所有人的爱好)。jQuery
的最有趣的特性之一是它的插件架构,它允许很多开发人员添加新的
jQuery 功能。本文的最后一篇文章将介绍许多强大的插件,它们可用于完成
RIA 开发过程。

CamanJS 可以被用来利用 data-caman
属性对图像进行操作。如下代码向你展示了如何将一个亮度为“10”的过滤器,以及一个对比度为“30”的过滤器应用到一张图片上:

本系列文章针对具备 JavaScript 语法、CSS 语法和 DOM
语法知识的读者。如果您需要在阅读本系列文章之前复习一下这些语法,我强烈推荐本文参考资料小节中的
W3Schools 链接。

img data-caman="brightness(10) contrast(30)" src="yourimage.jpg" alt="CamanJS Javascript库 Web页面 图像处理"

基础知识

其它可以用类似的语法加以运用的 18 个过滤器也被打包到了这个库里面。

在深入研究有趣的 jQuery 内容之前,我们先了解一些基础知识 — 如何安装
jQuery,以及如何使其正常运行等。首先从下载小节下载
jQuery 库,然后像链接其他外部 JavaScript 文件一样链接到该库:

例如:

清单 1. 如何在代码中安装 jQuery

img data-caman="love() hazyDays()" src="yourimage.jpg" alt="CamanJS Javascript库 Web页面 图像处理"
<script type="text/javascript" src="jquery.js"></script>

通过 JavaScript 操作图像

由于 jQuery 调用或操作 DOM 对象,因此如果在文档装载完所有页面元素之前,使用
JavaScript
代码直接操作这些对象将会遇到问题。相反,您也不希望等待页面上的所有元素都装载完
— 所有图像、标题广告、解析代码和 YouTube 视频预览 — 才开始调用 jQuery
代码。您可以适当折中,在文档完全装载完页面上的所有元素,但所有的图像、链接和呈现尚未完成之前,以一种安全的、无错误的方式调用
jQuery 代码。再强调一遍,您的所有 jQuery
代码必须在页面上的这个函数中,或在它自己的函数中。如果 jQuery
代码不在一个函数中,则不可将其代码放置在 JavaScript 代码中。

你也可以选择通过写几行 JavaScript 来操作一张图像。使用 JavaScript
操作的结果跟使用 data-caman 属性所产生的结果是一样的。

清单 2. 如何正确调用 jQuery 函数

Caman('#your-image-id', function () { this.brightness(40); this.contrast(-10); this.sinCity(); this.render();});
// Incorrect
<script language=JavaScript>
   $("div").addClass("a");
</script>

// Correct
$(document).ready(function(){
   $("div").addClass("a");
 });

// - or -

$(document).ready(function(){
   myAddClass();
 });

function myAddClass()
{
   $("div").addClass("a");
}

实现一个图像编辑器中的控件

此外,还有一个值得注意的地方:一个页面上可以有任意个 document.ready()
函数,它们将被依次调用。如果您正在使用模块动态地构建页面,并且每个模块有它自己的
jQuery 支持代码(例如,一个由许多很小的 PHP 页面片段构成的
PHP 页面),这是一个不错的方法。

过滤器其实不需要做过多的调整就可以用在按钮点击的触发上. 一些像
vintage(),lomo(), 以及 sinCity() 这样的过滤器不需要参数。其它像
contrast() 和 noise()
过滤器则需要一个整型值作为参数。这个值决定了过滤器的强度。

jQuery 最有趣的特性之一是
“链接性”,它能够将一系列函数集中起来,改善可读性和简化代码的编写。几乎每个
jQuery 函数都返回一个 jQuery
对象,这意味着您仅需在其上反复调用其他函数,就可以将一个完整的 jQuery
命令链接在一起。我将这比作 Java 的 String 类,在其中有几个函数返回一个
String 对象,使您可以将在同一行上的多个函数链接在一起:

复杂的过滤器如 tiltShift(),posterize(), 以及 vignette()
则需要不止一个参数。下面的代码块演示了如果用3个按钮进行3种过滤器操作。针对其它的过滤器也可以像这样写代码。

清单 3. jQuery 的链接性

下面是HTML:

String man = new String("manipulated").toUpperCase().substring(0,5).toLowerCase();

$("div").addClass("a").show().text("manipulated");
canvas /canvasbutton Vintage/buttonbutton Noise/buttonbutton Tilt Shift/button

最后需要记住的是,当使用 jQuery 或任何 JavaScript
库时,它们之间有可能发生冲突。换句话说,在同时使用两个以上的库时,会有一个以上的库同时使用变量
“$”,这意味着在进行 “$”
调用时,引擎将不知道引用哪个库。这种情况的一个很好的例子就是 CakePHP
库,它包含内置的 prototype.js。在这些页面上使用 jQuery
将导致错误。为了解决这个问题,jQuery 提供了一种方法将 “$”
变量映射到另一个变量,例如:

下面是将过滤器应用到按钮点击上的 JavaScript/jQuery 代码:

清单 4. jQuery 解决冲突的办法

var vintage = $('#vintagebtn');var noise = $('#noisebtn');var tiltshift = $('#tiltshiftbtn'); vintage.on('click', function(e) { Caman('#canvas', img, function() { this.vintage(); this.render(); });}); noise.on('click', function(e) { Caman('#canvas', img, function() { this.noise(10); this.render(); });}); tiltshift.on('click', function(e) { Caman('#canvas', img, function() { this.tiltShift({ angle: 90, focusWidth: 600 }).render(); });});
j$ = jQuery.noConflict();
j$("div").addClass("a");
选择jQuery 的根本在于它在页面上选择和操作某些元素的能力。从某种意义上说,需要围绕这些对象才能构建出有效的 jQuery 库。因此,面对一个普通 HTML 页面上提供的大量选项,您需要一种方法来快速高效地选择您需要在页面上使用的元素,只选择需要的元素(不多也不少)。jQuery 如我们所愿地提供了一些强大的选择方法,帮助我们在页面上寻找和选择对象。jQuery 创建了它自己的选择语法,并且这种语法很容易掌握。(以下大部分示例所使用的函数将留在下一篇中讨论,不过它们的功能应该是很直观明了的)。根本上来讲,jQuery 中的选择过程就是一个巨大的过滤过程,页面上的每个元素都经过这个过滤器,它将返回一个匹配的对象,或一个可以遍历的匹配对象的数组。排在前面的 3 个示例是最常用的。它们通过 HTML 标记、ID 或 CLASS 查找对象。HTML要获取一个页面中所有匹配的 HTML 元素的数组,您仅需将 HTML 标记(不带括号)传递到 jQuery 搜索字段。这是查找对象的 “快速但是粗糙” 的方法。如果要将属性附加到通用的 HTML 元素,这种方法是很有用的。
清单 5. HTML 选择

// This will show every <div> tag in the page.  Note that it will show 
// every <div>, not the first matching, or the last matching.  
// Traversing Arrays is discussed later in the article.
$("div").show();

// This will give a red background to every <p> tag in the page.
$("p").css("background", "#ff0000");

tiltshift() 也接受另外的像 startRadiusradius
这样的参数, Factor.vignette()sizestrength
这两个参数,你可以参考 CamanJS 文档 来深入理解所有的过滤器。

ID

实现滑块控件

正确的页面设置要求页面上的每个 ID
都是惟一的,虽然有时并不是这样(有意或无意)。使用 ID 选择时,jQuery
仅返回第一个匹配的元素,因为它要求您遵循正确的页面设计。如果您需要将一个标记附加到同一页面上的几个元素,应当选择使用
CLASS 标记。

brightness, contrast, 和 hue
这样需要相对更精确控制取值的过滤器,使用范围值输入滑块就可以很好的工作。你将会看到,实现滑块控件只比按钮控制有稍微的不同.
你可以使用下面的HTML来创建范围滑块:

清单 6. ID 选择 

form  label for="hue"Hue/label input name="hue" type="range" min="0" max="300" value="0" label for="contrast"Contrast/label input name="contrast" type="range" min="-20" max="20" value="0"/form
                
// This will set the innerHTML of a span element with the id of "sampleText" to "Hi".  
// Note the initial "#" in the command.  This is the syntax used by jQuery to search 
// for IDs, and must be included.  If it is excluded, jQuery will search for the HTML
// tag instead, and with no <sampleText> tags on a page, will ultimately do
// nothing, leading to frustrating and hard-to-find bugs (not that that has ever 
// happened to me of course).

$("#sampleText").html("Hi");

下面的jQuery代码块处理所有了操作:

CLASS

$('input[type=range]').change(applyFilters); function applyFilters() { var hue = parseInt($('#hue').val()); var cntrst = parseInt($('#contrast').val()); Caman('#canvas', 'image.jpg', function() { this.revert(false); this.hue(hue); this.contrast(cntrst); this.render(); });}

CLASS 与 ID
非常相似,不同之处是它可以用于一个页面上的一个或多个元素。因此,尽管受到同一页面的每个元素只有一个
ID 的限制,同一页面上的多个元素仍然可以拥有相同的
CLASS。这使您可以在一个页面上跨多个元素执行函数,并且只需传入一个 CLASS
名称。

applyFilters()
函数在输入范围滑块的值发生改变时都会被调用。这个函数用对应变量存储了所有范围滑块的值。为了对图像进行编辑,这些值随后会被作为参数传递到对应的过滤器。

清单 7. CLASS 选择 

每次我都会在应用这些过滤器时调用this.revet(false),来时的canvas回到其原来的状态。使用revert可以确保过滤器所操作的是原来的图像,而它们的效果不会是混乱的.
传入的false参数值可以避免在图像还原过程中的间断闪烁。

             
// This will create a red background on every element on the page with a CLASS of 
// "redBack".  Notice that it doesn't matter which HTML element this "redBack" 
// CLASS tag is attached to.  Also notice the period in the front of the query
//  term -- this is the jQuery syntax for finding the CLASS names.

$(".redBack").css("background", "#ff0000");

<p class="redBack">This is a paragraph</p>
<div class="redBack">This is a big div</div>
<table class="redBack"><tr><td>Sample table</td></tr></table>

值得一提的另外一个细节是即使我一次只改变了它们其中的一个值,我也会将所有的过滤器应用一遍。
这是因为用户不会希望在他们正调整色相和亮度值时看到对比度被重置。

合并搜索条件

在 CamanJS 中创建定制的过滤器

可以在一个搜索中,将以上的 3
个搜索条件和下面的所有过滤器合并起来。通过使用 “,”
分隔每个搜索条件,搜索将返回与搜索词匹配的一组结果。

这个库的许多其它特性中有一个很酷的特性就是,你可以通过创建你自己的过滤器和插件来对它进行扩展.
有两种方法可以来创建定制的过滤器。你可以用对应的值来组合内置的过滤器,或者也可以从头开始创建你自己的过滤器。

清单 8. 合并搜索

下面是创建你自己的过滤器的 jQuery 代码:

                
// This will hide every <p>, <span>, or <div>.
$("p, span, div").hide();
Caman.Filter.register('oldpaper', function() { this.pinhole(); this.noise(10); this.orangePeel(); this.render();});

更多的过滤器

要从头开始创建过滤器,你需要一些额外的工作,这都是因为存在几个bug,你可以在
GitHub 资源库的开放问题板块 读到有关这个的内容。

虽然在 jQuery 中,这 3
个搜索参数无疑是最常用的,但还有许多其他搜索参数,可以帮助您在一个页面上快速查找所需的元素。这些过滤器以
“:” 开头,表明它们是 jQuery
搜索词中的过滤器。尽管它们也可以作为独立的搜索条件,但是设计它们的目的是将它们和以上
3 个搜索条件一起使用,从而可以调整搜索条件以找到您需要的特定元素。

图层和混合模式

清单 9. 更多的过滤器

除了过滤器,CamanJS
还带来了一个高级的图层系统。这个东西给了你更多的图形操作能力和选择。不想
Photoshop 中的图层,CamanJS
中的层可以嵌套。它使用混合模式来将层应用到他们的上级嵌套层。默认是一般的混合模式。CamanJS
总共有十种混合模式,包含有像 叠加, 排除, 和 覆盖这些常用的。

             
// This will hide every <p> tag on a page
$("p").hide();

// This will hide the first element on a page, no matter its HTML tag
$(":first").hide();

// Notice how these can be used in combination to provide more fine tuning of 
// search criteria.  This will hide only the first <p> tag on a given page.
$("p:first").hide();

如下是使用图层和混合模式创建一个定制过滤器的jQuery代码:

可以将多个过滤器用作搜索元素。虽然在这里我没有列举所有的过滤器(这是 API
页面的任务),但其中一些过滤器在处理页面和搜索元素方面非常方便。

Caman.Filter.register('greenTint', function() { this.brightness(-10); this.newLayer(function() { this.setBlendingMode("overlay"); this.opacity(100); this.fillColor('#689900'); this.filter.brightness(15); this.filter.contrast(10); }); this.render();});

 主要关注 Selection
包中一些非常重要的过滤器,它们就是表单 元素过滤器。如今的富 Internet
应用程序比较关注表单及包含在其内的元素(文本字段、按钮、复选框、单选按钮等),它们从服务器收集和传输信息,或收集信息并传输到服务器。由于它们在
RIA 中的重要作用,在当今的 Web 应用程序中,这些过滤器在处理 jQuery
时非常重要。

过滤器同时被应用到原来的图层和新图层.
此外,你可以为新的图层设置其它一些像不透明度 和 混合模式 这样的属性.
我已经用一个固定的颜色来填充了这一图层,不过你也可以通过调用
this.overlayImage(‘image.jpg’) 来用另外一张图片对它进行填充.

这些过滤器和前面介绍的过滤器的工作原理是一样的,并且也是以 “:”
开头,表明它们是过滤器。同样,它们也可以和其他搜索过滤器一起使用,以细化搜索条件。因此,一个
“:text” 搜索过滤器将返回页面上的每个文本字段,而一个 “.largeFont:text”
搜索过滤器仅返回页面上作为 “largeFont”
类的一部分的文本字段。这允许进一步细化和操作表单元素。

操作跨域图像

表单过滤器也包括元素的每个属性,了解这方面的知识对开发人员有好处。因此像
“:checked”、“:disabled” 和 “:selected”
等搜索过滤器将为特定的搜索进一步细化搜索条件。

如果你需要管理位于不用域名底下的图像,你可以使用 CamanJS 一并提供了的
PHP 代理。为了能使用这个特性,你需要在你的服务器上面放置这个 PHP 脚本 .
该脚本将作为代理向你的浏览器提供来自远程数据源的图像数据,以规避编辑限制。之后你需要在你的JavaScript中添加下面这一行:

遍历

复制代码 代码如下:Caman.remoteProxy =
Caman.IO.useProxy(‘php’);

现在,您已经学会如何搜索和过滤页面上的所有元素,接下来需要一种高效的方法来遍历结果,进一步处理元素。自然,jQuery
提供了几种遍历搜索结果的方法。

保存编辑后的图像

第一个也是最常用的遍历方法是 each() 函数。这和 “for loop”
的功能是一样的,遍历每个元素并通过迭代递增元素。此外,循环中的每个元素的引用可以通过
“this”(用于一般的 JavaScript 语法)或 $(this)(用于 jQuery
命令)来实现。

CamanJS 内置了编辑后保存图像的机制。使用目前的实现,对 this.save(png)
的调用会打开一个文件下载的弹出框,而你将需要对文件重新命名,并添加一个png或者jpg的扩展名.
这是因为在调用这个函数时,浏览器会将图像的编码重定向到
base64,而它们不知道文件的类型. 下面给出的代码块会保存图片:

让我们看看下面的示例。

this.render(function () { this.save('png');}); 

清单 10. each 循环

Demo 跟完整代码

              
// Will loop through each <p> tag on the page.  Notice the use of the
// inline function here -- this is analogous with the anonymous classes in Java.
// You can either call a separate function, or write an inline function like this.

var increment = 1;
$("p").each(function(){

    // now add a paragraph count in front of each of them.  Notice how we use the
    // $(this) variable to reference each of the paragraph elements individually.

    $(this).text(increment + ". " + $(this).text());
    increment++;
});

你可以看一下这个应用了所有特性的图像编辑器样例,截图如下:

因为搜索结果存储在一个数组中,您肯定希望函数遍历该数组,就像处理其他编程语言的数据对象一样。因此,要查找一个给定搜索结果的长度,则可以在该数组上调用
$().length。清单 11
展示了更多的数组遍历函数,可适用于其他编程语言的数组遍历。

CamanJS Javascript库 Web页面 图像处理

清单 11. 其他数组函数 

作为练习,你可以尝试改善下用户体验,如标记下当前图片上应用的滤镜或修改下保存按钮来避免需要重命名的问题。

               
// the eq() function lets you reference an element in the array directly.  
// In this case, it will get the 3rd paragraph (0 referenced of course) and hide it
$("p").eq(2).hide();

// The slice() function lets you input a start and an end index in the array, to 
// create a subset of the array.  This will hide the 3rd through 5th paragraphs on the
// page
$("p").slice(2,5).hide();

就像我们看到的, CamanJS
是一个非常有用的图片操作库,带有很多滤镜,还有不断发展中的功能,而本教程仅仅讲述了一个皮毛。

除了这些数组遍历函数之外,jQuery
还提供了一些函数,使您可以查找嵌套在搜索词周围的元素。为什么这很有用呢?例如,我们常常需要在图片的旁边嵌入一个文本标签,或在表单元素旁边嵌入一个错误消息。使用这些命令可以查找特定的表单元素,然后通过将表单元素放置在下一个元素(span
标记)中,把该错误消息直接放置在表单元素旁边。清单 12
显示了这种设计的一个示例:

以上内容比较长,但是介绍的都很详细,耐心阅读,对学习使用CamanJS在Web页面上处理图像很有帮助。

清单 12. 示例 next() 函数 

                
<input type=text class=validate><span></span>

function validateForm()
{
    $(".validate:text").each(function(){
    if ($(this).val()=="")
    //  We'll loop through each textfield on the page with a class of "validate"
    //  and if they are blank, we will put text in the <span> immediately afterwards
    //  with the error message.

        $(this).next().html("This field cannot be blank");
});
}

综合学到的知识

要了解如何结合使用以上知识,可以查看本文包含的示例应用程序(参见 参考资料 小节)。

现在简单介绍一下示例应用程序。我将在本系列所有文章中使用这个示例应用程序,因为它使用了大量不同的
jQuery 示例,并且几乎所有人都熟悉这个应用程序 — 一个处理 Web 邮件的富
Internet 应用程序。这个示例应用程序是一个简单的邮件客户机,它利用 jQuery
给用户这样的感觉:该电子邮件客户机非常类似于桌面应用程序。在最后一篇文章结束时,您将明白这个简单的应用程序是如何为用户制造这种感觉的,并且明白使用
jQuery 实现这个功能是多么简单。

本文的重点是 “Select All”/“Deselect All” 复选框,它们出现在 Web
邮件表(下面突出显示)的左侧列的顶部。当选中该复选框时,它将选择该列的每个复选框;取消选择该复选框时,它将取消选择该列的所有复选框。

图 2. “Select All” 复选框
 澳门新葡萄京官网注册 2

清单 13. 综合学到的知识

              
<!-- The first step is creating the Select All checkbox itself.
we give it a unique ID on the page -->

<input type=checkbox id=selectall>

<!-- The next step is giving each of the rows their own checkbox.
we put each row's checkbox into the 'selectable' class, since there can be many rows,
and we want each of the rows' checkboxes to have the same behavior. -->

<input type=checkbox class=selectable>

<!-- The final step is bringing it all together with some jQuery code. -->

// remember that all jQuery setup code must be in this document.ready() function, 
// or contained within its own function in order to function correctly.

$(document).ready(function(){
   // We use the jQuery selection syntax to find the selectall checkbox on the page
   // (note the '#' which signifies ID), and we tell jQuery to call the selectAll()
   // function every time someone clicks on the checkbox (we'll get to Events in a
   // future article).

   $("#selectall").click(selectAll);
});

// This function will get called every time someone clicks on the selectall checkbox
function selectAll()
{
    // this line determines if the selectall checkbox is checked or not.  The attr()
    // function, discussed in a future article, simply returns an attribute on the
    // given object.  In this case, it returns a boolean if true, or an undefined if
    // it's not checked.

    var checked = $("#selectall").attr("checked");

    // Now we use the jQuery selection syntax to find all the checkboxes on the page
    // with the selectable class added to them (each row's checkbox).  We get an array
    // of results back from this selection, and we can iterate through them using the
    // each() function, letting us work with each result one at a time.  Inside the
    // each() function, we can use the $(this) variable to reference each individual
    // result.  Thus, inside each loop, it finds the value of each checkbox and matches
    // it to the selectall checkbox.

    $(".selectable").each(function(){
       var subChecked = $(this).attr("checked");
       if (subChecked != checked)
          $(this).click();
    });
}

结束语

jQuery 是 Web 应用程序开发社区中非常受欢迎的 JavaScript 库,并且随着富
Internet
应用程序越来越普及,它将变得更加重要。由于许多公司都在线迁移内部应用程序,并且在线移动日常的桌面应用程序(包括文字处理器和电子表格),能够简化开发并实现跨平台支持的
JavaScript 库将成为设计应用程序架构的必选技术。

这份关于 jQuery 的系列文章的第一篇介绍了 jQuery 语法,如何在您自己的
JavaScript 代码中正确使用
jQuery,以及如何在结合使用其他库时避免冲突。此外,本文还介绍了 jQuery
搜索和选择语法,它们是其他 jQuery
功能的基础。它使您可以简单快捷地找到所需的页面元素。文章也谈到了如何遍历搜索结果,使您可以逐个地处理元素。jQuery
的这两个方面是本系列下一篇文章的基础,同时也是所有 jQuery 代码的基础。

最后介绍了一个演示应用程序,它是一个富客户端 Web
邮件应用程序。在本文,您通过学到的 jQuery 知识创建了 Select All/Deselect
All 复选框,并且仅需几行代码就可以创建一个在许多 Web
站点上都非常常见的小部件。

下一篇文章将把一些交互添加到这个示例 Web
应用程序。您将学习如何处理页面事件(单击元素、按钮点击、组合框选择等),如何从页面上的元素获取值,以及如何修改页面上的标准
CSS 来更改颜色,布局等,而不需重新加载页面。

发表评论

电子邮件地址不会被公开。 必填项已用*标注