文章存档 » 十一月 2011

初识jQuery

初步了解JavaScript后,其实对于新手来说,很难写出兼容性良好的JavaScript代码。 这里对上述的兼容性,做一点补充:对于相同的一段JavaScript代码,不同的浏览器可能会给出不一样的解释与运行结果。如果你想了解一些兼容性的例子,可以看看这篇文章《IE和Firefox的Javascript兼容性总结》

不过,如果依靠一些JavaScript框架,就能很容易构建出适应各种浏览器的代码。比较流行的JavaScript框架有jQuery,YUI等等。它们的使用都很简单,只要在页面中引入框架的js脚本文件,就能在接下来的编程中使用框架中提供的各种方法了。

1.什么是DOM (DOM——HTML与JavaScript的桥梁)

DOM是Document Object Model的缩写,从字面翻译看,叫做“文档对象模型”

以下是我对它的理解:

    1.一种抽象的树形结构(将文档中的各个对象通过树形结构链接起来) 2.一种抽象的编程接口 (通过DOM我们可以访问文档的API)
总的来说,DOM将文档文件解析成为一种树形结构,树的结点是文档中的元素,然后我们可以通过这颗树的节点选取文档中的元素,通过文档元素的属性、方法和事件来掌控、操纵和创建动态的html元素。

我们可以将HTML文档理解为一座大楼,文档中的的房间、物品等相当于HTML文档中的对象,JavaScript看做是一个在大楼外面的人,DOM看做是大楼所有入口的集合。大楼外的人是无法访问大楼内部的事物的,除非这个人会穿墙术,当然这是不可能的,作为大楼的HTML为了让大楼外的人可以访问、修改它内部的东西,提供了许多入口,人通过入口进入大楼后,就可以对大楼内部经行操作了。

2.JavaScript对象和jQuery对象的区别

JavaScript对象 = 通过JavaScript方法获得的DOM元素的对象 jQuery对象 = 通过jQuery选择器取得的DOM元素的对象

其实对于同一个DOM元素,我们既可以通过JavaScript选取它,也可以通过jQuery选取它。

他们的区别是:

  • 对于JavaScript对象我们只能使用JavaScript里的方法
  • 对于jQuery对象我们只能使用jQuery里的方法
  • 如果非要使用对方的方法,我们可以先将其转换为对方对象

3.如何为页面元素绑定事件(点击,鼠标移入,鼠标移除,失去焦点等事件)

  • 用JavaScript绑定
    • 方法一:调用addEventListenr()方法 例子:element.addEventListenr(“click”,function(){},true)
    • 方法二:直接绑定 例子:element.onclick=function(){}
    • 方法三:调用attachEvent()(IE的绑定模式) 例子:element.attachEvent(“onclick”,function(){})
  • 用jQuery绑定
    • 方法一:调用bind()方法 例子:$(“#div1”).bind(“click”,function(){})
    • 方法二:使用快捷事件 例子:$(“#div1”).click(function(){})
注:用jQuery绑定事件是多浏览器兼容的,因此可以忽略浏览器对于绑定事件的差异

4.如何使用简单的动画效果(淡入,淡出,滑动等)

jQuery的动画效果函数主要有:animate() fadeIn() fadeOut() fadeTo() 通过调用这些函数,就可以实现相应的动画效果 具体用法:《jQuery 参考手册 – 效果》

5.一个小动画页面示例(采用jQuery框架)

演示地址:jQuery小动画示例

动画效果说明: 第一个按钮:以滑动效果出现一个白色黑边框的正方形 第二个按钮:正方形变成红色 第三个按钮:正方形淡出消失 第四个按钮:点击依次循环执行上述三个按钮的功能

HTML代码

<button id="one">淡入</button>
<button id="two">变红</button>
<button id="three">消失</button>
<button id="four">只点我</button>

Javascript代码

$(document).ready(function() 
{
    var count = 0;

    $("#one").bind("click",function(){
        $("#block").css("left","100");
        $("#block").css("opacity","0");
        $("#block").css("background-color","white");
        $("#block").animate({opacity: "1",left: "200px"},1500)
    });

    $("#two").bind("click",function(){
        $("#block").css("opacity","0")
        $("#block").css("background-color", "red")
        $("#block").animate({opacity: "1"}, 1000)
    });

    $("#three").click(function(){
        $("#block").animate({opacity: "0"}, 1000)
    });

    $("#four").click(function(){
        count++;
        count = count % 3;
        if( count == 1 ){
            $("#block").css("left","100");
            $("#block").css("opacity","0");
            $("#block").css("background-color","white");
            $("#block").animate({opacity: "1",left: "200px"},1500)
        }
        if( count == 2 ){
            $("#block").css("opacity","0")
            $("#block").css("background-color", "red")
            $("#block").animate({opacity: "1"}, 1000)
        }
        if( count == 0 ){
            $("#block").animate({opacity: "0"}, 1000)
        }
    });
});

Html5新特性概览

  • 主讲人 : 李洪祥
  • 时间 : 2011-11-06

注意:本文中的所有测试页面请使用Google chrome或其他对html5兼容较好的浏览器测试,避免可能的浏览器兼容问题对测试结果产生的影响。

Html的简单历史

  • 超文本置标语言(第一版)——在1993年6月作为互联网工程工作小组(IETF)工作草案发布(并非标准)
  • HTML 2.0——1995年11月作为RFC 1866发布,在RFC 2854于2000年6月发布之后被宣布已经过时
  • HTML 3.2——1996年1月14日,W3C推荐标准
  • HTML 4.0——1997年12月18日,W3C推荐标准
  • HTML 4.01——1999年12月24日,W3C推荐标准

HTML 5——在Html 4问世七年之后,因为当时W3C的工作目标是制定并推行XHtml语言,于是还没有开发下一代HTML的工作组,W3C内部的一些人就开始想做点什么了, 于是,在2004年W3C成员内部的一次研讨会上,当时Opera公司的代表伊恩·希克森(Ian Hickson)提出了一个扩展和 改进HTML的建议,他建议新任务组可以跟XHTML 2并行,但是在已有HTML的基础上开展工作,目标是对HTML进行扩展。但W3C投票表决的结果是——”反对”,因为他们认为HTML已经死了,XHTML 2才是未来的方向。然后,Opera、Apple等浏览器厂商,以及其他一些成员说:”那好吧,不指望他们了,我们自已一样可以做这件事,我们脱离W3C。”于是他们成立了Web Hypertext Applications Technology Working Group(Web超文本应用技术工作组,WHATWG) ,WHATWG决定完全脱离W3C,在HTML的基础上开展工作,向其中添加一些新东西。这个工作组的成员里有浏览器厂商,因此他们不仅可以说加就加,而且还能够一一实现。结果,大家不断提出一些好点子,并且逐一做到了浏览器中。

WHATWG的工作效率很高,不久就初见成效。在此期间,W3C的XHTML 2没有什么实质性的进展。特别是,如果从实现的角度来说,用原地踏步形容似乎也不为过。等到2006年W3C认识到xhtml 2并不符合当前的发展实际,同时他们认识到了html5的重要性,于是在2007年他们又投了一次票,同意成立html5开发小组,”在WHATWG工作成果的基础上继续开展工作”并与WHATWG并肩工作,于是逐渐有了我们现在讨论的HTML5问世。

浏览器对html5 的支持情况

目前,对 HTML5 支持最好的是 Chrome,Safari 次之,Firefox 和 Opera 旗鼓相当,IE从IE9终于开始拥抱标准。鉴于这种情况,假如你想使用Html5创建一个先锋体验式站点,现在的 HTML5 可以让你实现,假如你想大规模应用于实际项目,现在还为时过早。

主流浏览器对HTML5 图形和内嵌内容支持情况:

主流浏览器对HTML5 图形和内嵌内容支持情况

主流浏览器对HTML5 Web 应用程序的支持情况:

主流浏览器对HTML5 Web 应用程序的支持情况

Html5移除的元素

Html语言的作用是标记文本的结构,而非用于网页表现,所以用于网页表现的<front><center>等可以用CSS达到同样目的的元素被移除,其他被移除的元素还有:font, center, strike, big, s, u, acronym, applet, dir等。此外还有一些无用或者不被使用的元素属性被移除,例如link的traget属性,这个属性几乎不被浏览器支持。还有<script>的language属性,html4.01推荐使用type属性替代language属性,该属性将被废弃使用,所以language属性没有存在的价值,还有其他的一些属性例如link和a元素的rev属性,body元素的alink,link,text和vlink属性等因为类似的原因被移除。

Html5的基本布局(语义化的标记)

Html是用来描述网页的一种语言,它是一种标记语言,标记语言就是一套标记标签,比如用来描述一段文字是标题的<h1>,标记一个图像的<image>等。html4中使用没有任何语义的<div>用于内容分块,所以html4的网页基本布局是这样的,许多div加上用于命名区块的class或者id,

<div id="wrapper">
    <div id="header"></div>
    <div id="main">
        <div id="sidebar"></div>
        <div id="content"></div>
    </div>
    <div id="footer"></div>
</div>

在html5中,这种情况将被改变,html5新增了若干个明确语义化的标签,在html5中,<div id="header">将会被简洁的<header>代替,如下:

<article>
    <header></header>
    <section></section>
    <section></section>
    <aside></aside>
    <footer></footer>
</article>

其中的<section><article>标签值得注意,<section>标签用来分组相类似的信息,而<article>标签则应该是用来放置诸如一篇文章或是博客一类的信息,你可以在<artile>中嵌入<header><section><footer>等内容。<article>标签,正如它的名称所暗示的那样,提供了一个完整的信息包。相比之下,<section>标签包含的是有关联的信息,但这些信息自身不能被放置到不同的上下文中,因为这样的话其所代表的含义就会丢失。

一个普通的Html 5页面结构会如下所示:

<!DOCTYPE html>
<html>
    <title>标题</title>
    <body>
        <header></header>
        <nav>导航</nav>
        <article>
            <section>区块</section>
        </article>
        <aside>侧边栏</aside>
        <footer>页脚</footer>
    </body>
</html>

Html5对表单的支持

Html5新增了多个控件类型,如输入网址的url类型,输入电子邮箱地址的email类型,用于输入日期的date类型,更有用于输入颜色的color类型等等。更为神奇的是这些类型还内建表单验证,如required属性就说明该表项不能为空,max属性提供了该表项输入允许的最大值,当然在html4中这些功能也可以通过javascript来实现,但是的内建在html5中的表单验证优越性不言而喻。需要注意的是,现在Html5的输入类型还没有被所有浏览器所支持。

测试代码:

<form>
    Email:<input type="email" required /></br>
    Number:<input type="number" max="10" /></br>
    Date :<input type="date"></br>
    File:<input type="file" accept="image/png" /></br>
    <input type="submit">
</form>

实例页面:input.html

Html5中的Media

Html5 的另一大特点就是不借助其他插件就可播放视频和音频文件,在网页中添加如下代码就可以用一个宽度为320像素、高度为240像素的带控制条的浏览器内置播放器来播放”movie.mp4″视频文件,而不再需要使用Adobe Flash播放器。效果就像这样:video.html

<video src="movie.mp4" width="320" height="240" controls="controls">
    Your browser does not support the video tag.
</video>

当然这种直接使用视频源文件的方法会牵扯到视频文件格式的版权问题,所以各主流浏览器都做不到对所有的视频格式都完全支持,这时就需要使用如下的代码来实现视频播放:

<video>
    <source src="movie.mp4">
    <source src="movie.ogv">
    <object data="movie.swf">
        <a href="movie.mp4">Download</a>
    </object>
</video>

<video></video> 之间插入的内容是供不支持 video 元素的浏览器显示的,由于视频格式的版权问题,不同的浏览器支持不同的视频格式,所以video 元素含有允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式。在上面的那个程序里:

  1. 如果浏览器支持video元素,也支持H264(mp4格式),那么就使用第一个视频;
  2. 如果浏览器支持video元素,不支持H264(mp4格式)但支持Ogg,那么用第二个视频;
  3. 如果浏览器不支持video元素,那么就播放Flash;
  4. 如果浏览器不支持video元素,也不支持Flash,那么就给出了下载链接,这下就该没有问题了吧。

不得不提,html5的支持媒体播放的特性会冲击adobe flash在网络媒体中的地位,Adobe公司已经深刻意识到了这个问题,更多信息参见关于Adobe最新的Flash/HTML5策略的问答

动画元素Canvas

HTML5 的 canvas 元素可以使用 JavaScript 直接在网页上绘制图像。在canvas中,画布是一个很重要的概念,画布是一个矩形区域,利用canvas可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

创建 Canvas 元素十分简单,只需要向 HTML5 页面添加 canvas 元素,规定元素的 id、宽度和高度:

<canvas id="myCanvas" width="200" height="100"></canvas>

然后通过 JavaScript 来绘制,canvas 元素本身是没有绘图能力的,因此所有的绘制工作必须在 JavaScript 内部完成:

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);

JavaScript 使用 id 来寻找 canvas 元素:

var c=document.getElementById("myCanvas");

然后,创建 context 对象:

var cxt=c.getContext("2d");

getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

下面的两行代码绘制一个红色的矩形:

cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);

fillStyle 方法将其染成红色,fillRect 方法规定了形状、位置和尺寸。fillRect 方法拥有参数 (0,0,150,75)。意思是:在画布从左上角开始 (0,0)绘制一个 150×75 的矩形,很简单吧。上面的例子是最简单的例子,canvas是十分强大的,现在大多数html5的Demon页面都是在展示html5强大的动画能力,通过canvas完全可以实现与flash动画相媲美的页面,下面的几个网页供大家惊叹:

Drag&Drop

HTML5为元素新增了用于拖拽的属性draggable,这个属性决定了元素是否能被拖拽, 如果draggable=”true”,则元素可被拖拽,否则只能选择元素的文本。下面几行简单的代码可以简单的说明Html5的Drag&Drop特性:

<section>
    <p draggable="true" ondragstart="dragstartHandler(event)">
    Drag me!Drag me!!</p>
    <p draggable="false">Don’t drag me!!</p>
</section>

Section区块中包含两行文本,第一行文本的draggable = true,即可拖拽的,且声明了发生dragstart事件是调用的函数;第二行文本draggable = false,即不可拖拽的。下面的<script>实现了发生dragstart事件时调用的函数,显示一个提示框。

function dragstartHandler(e)
    {alert('dragstart');}

实例页面:drag.html

运行这段代码可以发现,当拖拽第一行文本时会弹出一个提示框,而拖拽第二行文本时除了复制文本以外没有任何反应,这是因为当拖拽第一行文本时会触发ondragstart事件,从而调用相应的处理函数产生一个提示框。同样的定义其他拖拽事件如ondragenter、ondragover、ondragover、ondrop等的动作函数就可以完成一个完整的拖拽动作,实现想要实现的目的。

下面是一个网络上的demon供大家尝鲜:

把本地文件直接拖拽上传

Html 5的Application Cache

现在,web应用的火爆已经是不折不扣的现实,并且相对传统的应用,web应用不需要安装,所占空间小的特性使其具备传统软件应用所不具备的优势,然而,目前制约web应用最大的问题在于网络连接不能够无时无处。在飞机上,汽车上,火车上,有很多地方都无法被网络信号所覆盖,因此web应用也就无法使用。

HTML5的离线存储使得这个问题迎刃而解。HTML5的web storage API 采用了离线缓存,会生成一个清单文件(manifest file),这个清单文件实质就是一系列的URL列表文件,这些URL分别指向页面当中的HTML,CSS,Javascrpit,图片等相关内容。

一个Mainfest file实例:

–  CACHE MANIFEST
   /demo/test/style.css
   /demo/test/jquery.min.js
   /demo/test/test.html

当使用离线应用时,应用会引入这一清单文件,浏览器读取这一文件,下载相应的文件,并将其缓存到本地。使得这些web应用能够脱离网络使用,而用户在离线时的更改也同样会映射到清单文件中,并在重新连线之后将更改返回应用,工作方式与我们现在所使用的网盘有着异曲同工之处。

Local storge

Web应用的发展,使得客户端存储使用得也越来越多,而实现客户端存储的方式则是多种多样。最简单而且兼容性最佳的方案是Cookie,但是作为真正的客户端存储,Cookie则存在很多致命伤。此外,在IE6及以上版本中还可以使用userData Behavior、在Firefox下可以使用globalStorage、在有Flash插件的环境中可以使用Flash Local Storage,但是这几种方式都存在兼容性方面的局限性,因此真正使用起来并不理想。针对以上情况,HTML5中给出了更加理想的解决方案:假如你需要存储复杂的数据则可以使用Web Database,可以像客户端程序一样使用SQL(不过Web Database标准当前正陷于僵局之中,而且目前已经实现的浏览器很有限);假如你需要存储的只是简单的数据则可以使用Web Storage。

Web Storage实际上由两部分组成:sessionStorage与localStorage。

sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。

localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

下面一段代码同时包含sessionStorage和localStorage用于统计页面的访问次数:


if (sessionStorage.pagecount){
    sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}else{
    sessionStorage.pagecount=1;
}
document.write("Visits "+ sessionStorage.pagecount + " time(s).");
if (localStorage.pagecount){
    localStorage.pagecount=Number(localStorage.pagecount) +1;
}else{
    localStorage.pagecount=1;
}
document.write("Visits "+ localStorage.pagecount + " time(s).");

多次刷新页面locaStorage.html可以发现,两种计数每刷新一次就增加1,如果把页面关闭然后再打开,那么sessionStorage计数将会从0开始重新计数,而localStorage仍然继续上次的计数。这正是因为sessionStorage仅仅存储本次会话中的数据,而localStorage则会持久的存储数据。

Html 5 相关网页

参考资料

欢迎PureWeber开发组新成员

2011年10月29日,5名新同学正式加入PureWeber开发组,他们是:

  • 朱柯军
  • 黄靖文
  • 代东
  • 李东朋
  • 李洪祥
  • 骆飞