文章阅读
如何在网页中使用JSer?
文章类别: JSer入门教程  更新日期: 2012-02-12 19:36:45.0  点击次数:3850
  前一篇文章,我们讲到了要将网页页HTML和JS代码进行分离。JSer正是基于这种机制,让我们可以专注并高效的进行脚本开发。
在网页中使用JSer是非常容易的事情。
一、使用JSer第一步,引入JSer.js:

  首先,从本站下载最新版本的JSer脚本框架(注意JSer官网下载地址为:http://www.jdiy.org/jser.jsp )。下载后得到一个JSer.js的脚本文件,将这个脚本文件放到您的WEB站点中。然后在您的网页的<head>...</head>标签中引用这个脚本,就像下面这样:

<script type="text/ecmascript" src="JSer.js"></script>
  需要特别注意的是,您网页中的其它脚本代码需要用到JSer,那么您应该将上面这种引用JSer.js的代码放到您编写的脚本代码之前,否则当浏览器在加载到您的脚本代码的时候,由于JSer还没有被网页引用进来,会出现无法找到JSer的脚本错误。

二、使用JSer.exec(fn)主函数包含您的脚本代码
  根据前面一篇文章的说明,我们建议大家尽可能的将HTML和JS代码进行分离,这样做之后,所有的脚本代码都集中在<head>...</head>内部,而由于许多脚本都必须等待网页加载完成之后才可以被执行,因此,我们需要将这些代码放到JSer.exec中去执行,脚本就像下面这样:
JSer.exec(function(){
    //....把编写的脚本都放在这里
});
  这是JSer最重要的一个静态方法,该方法传入一个匿名函数,您应该把所有的脚本代码都放到它里面,以确保这些脚本在浏览器成功载入网页之后才执行。
  通过这两步,就可以在您的网页中使用JSer了。
  当然,如果您没有遵循我们推荐的脚本编写规范(例如您将脚本放在网页的HTML代码底部),由于脚本所调用的网页元素已经被浏览器加载,在这种情况下,JSer.exec方法可以省略掉。但是我们建议您,最好还是加上这段代码,避免后期对网页进行维护,因脚本代码的位置移动,而出现问题。
  下面给出一个JSer使用示例,当网页加载完成后弹出一个alert框;在单击按钮时,弹出一个alert提示,显示文本框中输入的内容:
<html>
<head>
<title>JSer Demo</title>
<script type="text/ecmascript" src="JSer.js"></script>
<script type="text/ecmascript">
JSer.exec(function(){
      alert('网页加载完成!');
      JSer("#btn").click(function(){
            alert( '您输入的内容为:' + JSer("#txt").val());
      });
});
</script>
</head>
<body>
    请输入内容:
    <input type="text" id="txt" value="hello  world. "/>
    <input type="button" id="btn" value="单击按钮" />
</body>
</html>
您可以点击此链接,浏览JSer在线帮助文档:http://www.jdiy.org/jser-doc/
[ 上一篇 如何优化您的网页脚本,让脚本代码和HTML相…   下一篇 用JSer制作表单输入框效果 ]
2011-2014    JDiy网页编程技术站   -   http://www.jdiy.org     All rights reserved     捐助作者


技术支持QQ:39886616 QQ群:7759217
联系JDiy作者: ziquee java/javascript WEB编程
E-mail:ziquee@abcbcd.com http://189.cn
*尊姓大名:

*电子邮箱:

*QQ号码:

*留言内容:
提交留言
取消
loading...
注:带"*"的为必填项。请如实填写您的E-mail或QQ号码以便我们能与您取得联系。