Flash开发者学习jQuery指南（译）

本文翻译自 http://active.tutsplus.com/articles/explanatory/why-bother-with-jquery-a-guide-for-former-flash-developers/

偶然在nettuts+中看到本年度的热门文章，有这篇。想来flash和jQuery都比较熟悉，就翻了下，内容很浅显，但还是有收获。个人觉得，前端无限可能，另外，仅仅是jQuery或许还不够，angularJS是我近期看到的一个好东西……

或许你和大多数flash开发者一样正准备在web应用中使用HTML5，这几乎就免不了碰上jQuery。jQuery是非常风靡的Javascript库，大部分流行的网站都使用它。

背景

如果你了解AS3，基本就已经掌握一些JavaScript了，这两种语言非常相似。这诱使我们迫不及待的想一头扎进去写代码——不过，有几个重要的概念需要提前搞懂，其中之一就是DOM。

当网页加载时，浏览器将单调的HTML转换成一个树状结构，这被称作DOM（Document Object Model）。JavaScript的DOM，像极了ActionScript 的显示列表（Display List），另外如果你还是个Flex的开发者，你还能发现MXML和HTML之间的相似之处。

在Flash中，我们可以通过display list 访问特定的显示对象，像stage.getChildAt(3).getChildAt(0)，不过，这样写有些傻，取而代之的是我们经常赋予显示对象以实例名称（在Flash IDE中的做法），或者将他们的引用存储在变量、数组或者对象属性中，比如dialogBox.okButton = new simpleButton().

在JavaScript中，我们能够完全通过JS构建DOM然后告诉浏览器将其渲染，不过一般我们不这么做，更多的是通过HTML定义DOM，用少量的JS代码进行功能上的增强。因此，Javascript有花样繁多的方法访问DOM中的元素。

这里面最简单的是 document.getElementById()。假如我们有这样一个HTML文件：

<!DOCTYPE html>
<html>
<head>
<title>Example Page</title>
</head>
<body>
<div>
<span id="example"> <!-- 这里 -->
<p>Here's some example text.</p>
</span>
</div>
</body>
</html>

那么，document.getElementById(“example”)将会把注释出来的（PS:木办法，这里高亮不出来）的span从DOM中取出来。然后我们可以像下面这样加上两个p标签：

var newPara = document.createElement("p");
var newTextNode = document.createTextNode("More example text that we created on the fly.");
newPara.appendChild(newTextNode);
document.getElementById("example").appendChild(newPara);

这样，DOM就会更新，这与下面这段HTML代码是等价的：

<!DOCTYPE html>
<html>
<head>
<title>Example Page</title>
</head>
<body>
<div>
<span id="example">
<p>Here's some example text.</p>
<p>More example text that we created on the fly.</p>
</span>
</div>
</body>
</html>

如果要访问这两个p元素怎么办？我们不能直接通过document.getElementById()访问，因为他们没有ID，但我们可以使用document.getElementByTagName(“p”)得到一个包含有他们的数组。

如果我们有了另外一个span，像这样：

<div>
<span id="example1">
<p>Here's some example text.</p> <!-- 这里 --> 
<p>More example text that we created on the fly.</p> <!-- 这里 --> 
</span>
<span id="example2">
<p>A second span.</p>
<p>We don't care about these paragraphs.</p>
</span>
</div>

如果我们只想得到注释中的p标签，就应该使用

document.getElementById(“example1”).getElementsByTagName(“p”)来调用。所有这些DOM都在树状结构中的某一级上运行，就像每个Flash DisplayObjectContainer都有一个getChildAt()方法一样。

有够简单易懂吧！不过，还有些问题。首先，你或许听到也不会感到意外，和IE有关。（那些和IE有关的日子啊，呵呵）

跨浏览器兼容

Impressivewebs.com有一个关于IE的getElementById()问题的略述。基本上是这样的，如果你有一个如下的HTML元素：

<span name="exampleName"></span>

那么，在IE7中，document.getElementById(“exampleName”)将会返回span（其他浏览器使用 document.getElementsByName(“exampleName”)[0]返回）。

这意味着，如果要跨浏览器（假设我们不改变HTML），我们需要如下编码：

var theSpan;
if (usingIE) {    //假定已判断为IE，不解释
var temp = document.getElementById("exampleId");
    //这里会返回有 "exampleId"的元素, 所以必须:
    if (temp.getAttribute("id") == "exampleId") {
        theSpan = temp;
    }
}
else {
    theSpan = document.getElementById("exampleId");
}

更加广泛的做法，我们将其写成一个可复用的函数：

function getElById(id) {
    if (usingIE) {
        var temp = document.getElementById(id);
        if (temp.getAttribute("id") == id) {
            return temp;
        }
    }
    else {
        theSpan = document.getElementById(id);
    }
}

现在好极了！可不幸地是，像这样操蛋的小差异比比皆是。如果你是直接从Flash背景中过来的这可能会惊倒你，在Flash中所谓“兼容问题”仅仅意味着Flash Player在一些平台上会有些小慢而已。

jQuery解决了这些。他用自身的一系列方法堵上了不同浏览器之间的缝隙，IE6以上浏览器用户都可以看到一致的界面。

这还仅仅是jQuery让JavaScript易用的一方面。

简化语法

回头看下这段HTML片段，假设我们要从DOM中获取注释里的p元素

<div>
<span id="example1">
<p>Here's some example text.</p>
<p>More example text that we created on the fly.</p>
</span>
<span id="example2">
<p>A second span.</p>
<p>We don't care about these paragraphs.</p>
</span>
</div>

使用jQuery，我们这么写就行了：

jQuery("#example1 p")

#example1 等于说 “从ID是example1的元素中取元素”，p等于说“从子元素中取出所有的p元素”，它返回一个“jquery对象”，它是一个JavaScript对象，包含JS DOM的两个p元素自身加上一些jQuery特定的属性和方法。

还可以将代码在缩短一些，用$代替jQuery--没啥玄机，$就是一个短的变量名称。和原生的JS代码比较一下：

//regular JS, without cross-browser compatibility:

document.getElementById("example1").getElementsByTagName("p")

//jQuery, with cross-browser compatibility built in:

$("#example1 p")

不光能让代码简洁，jQuery还与CSS保持一致性。我们可以用几乎相同的选择器在jQuery()内部来改变段落的样式：

#example1 p {color:red}

这仅仅是一个简单不过的例子，我也不打算深入下去，我相信你会看到CSS和jQuery使用相同选择器的好处。

选个区就行了

我曾提到，$()有额外的方法和属性来返回jQuery对象，这让编码大大简化。

例如，我们可以给p元素添加上鼠标点击事件侦听器和处理函数。

$("#example1 p").click(function() {

alert("You clicked a paragraph!");

});

或者，让他们不可见

$("#example1 p").hide();

抑或，在上面跑点普通的JavaScript

var allText = "";

$("#example1 p").each(function() {

allText += $(this).text();

});

jQuery提供了一个简单一致的方法，大大提高了效率。

Tweens and Transitions

因为Flash本身就是做动画用的，所以它内置了大量的动画功能--不管是用Flash IDE还是用Tween类，更不用说各种tween的类库了。

Javascript就不一样了，动画性先天不足。不过，少量的动画过渡也是现代web应用值得期待的部分：如果我在帖子里提交了一个新评论，他能滑过来；如果我删除了购物车中的某一项，能够变红再消失。如果没有了这些，web应用也会暗泽无光。

jQuery增添了少量的过渡动画。

例如，我们想让上面的一些段落在被点击时淡出：

$("#example1 p").click(function() {

$(this).fadeOut();

});

如果不想使用默认效果，可以通过一个duration和callback传给fadeOut()方法。

有时想做一个稍微猛一点儿的，可以用animate()方法，本质上是补间动画。

虽然不能像Greensock，但可远远比从头写方便多了。

就说这些。

`UI部件`

HTML只内置了少量的UI组件，比如按钮，文本框。HTML5定义了一少部分新玩意儿，像弹出日历拾取器和颜色拾取器(目前仅支持Opera)。

对于要创建一个丰富、现代的web应用这是远远不够的。没有tabs，没有进度条，甚至没有一个简单的对话窗口（alert和prompt就算了吧）。

jQuery UI，是建立在jQuery之上的一个可选库，增添了这些附加部件，方法和事件与普通的jQuery语法保持一致。把他想象成为Keith Peter的AS3 MinimalComps吧。这里是DEMO。

每个部件都可以自定义主题。

学习资源

1、jQuery for Absolute Beginners

2、More Things I Learned from the jQuery Source （FQ吧，骚年）

3、本人推荐《锋利的jQuery》

posted @ 2012-12-30 00:23 Partoo 阅读(494) 评论(0) 编辑收藏举报

刷新页面返回顶部