当前位置:首页 > 开发教程 > js/jQuery教程 >

JavaScript (基本教程)(12)

时间:2013-04-25 10:39 来源:网络整理 作者:采集侠 收藏

匹配模式的过程被看成是逐字匹配的,同时使用正则表达式还能匹配特殊字符或特殊格式的字符串 (左边的符号是匹配模式中使用的特殊格式): a* - 匹配零个或零个以上的字符 a。 a+ - 匹配一个或一个以上的字符 a。 . -

匹配模式的过程被看成是逐字匹配的,同时使用正则表达式还能匹配特殊字符或特殊格式的字符串 (左边的符号是匹配模式中使用的特殊格式):

  • a* - 匹配零个或零个以上的字符 a。
  • a+ - 匹配一个或一个以上的字符 a。
  • . - 匹配任何字符。
  • a|b - 匹配字符 a 或者 b。
  • a{ n } - 匹配 n 个连续的字符 a。
  • [abc] - 匹配一个字符,这个字符是方括号“[]”中的任何一个字符,使用 [0-9] 匹配 0 到 9 的任何数字,使用 [a-z] 匹配字母 a, b, ... , z 中的任何小写字母,大写字母使用 [A-Z]。
  • \b - 匹配一个不以英文字母或数字为边界的字符串。
  • \s - 匹配一个空白的字符 (包括空格、Tab、换行等等)。
  • \w - 匹配一个任何英文或者数字的字符,和 [0-9a-zA-Z] 是等同的。
  • 由于 '*' 是特殊字符,它的作用是匹配零个或零个以上的 '*' 前边的字符,所以如果想匹配字符 '*',需要在此字符前加一个反斜杠 '\' 字符。因此 '\*' 是匹配一个字符 '*'。你可以到 Netscape's JavaScript Reference 中去看一下有关正则表达式的细节。

    标记可以是下边的值:

  • i - 忽略大小写。
  • g - 全局匹配,匹配所有符合匹配模式的字符,而不只是匹配第一个符合匹配模式的字符。
  • test() 方法用来比较已知的字符串,如果匹配则返回“真”值 (true)。可以看一下这个 ,在这个例子中,使用了正则表达式来判断用户的输入是否符合电子邮件 (Email) 地址的格式:userid@domain.net。

    动态HTML [DHTML]

    动态 HTML (Dynamic HTML 或 DHTML) 给 HTML 增加了几个新的标记,同时也增加了几个 JavaScript 的对象。动态 HTML 的一个主要特性是充分利用网页中的层 (layer) 和位置 (position)。

    在这里我们再次声明,Netscape 和 IE 在应用上是有所不同的,Netscape 增加了支持“级联样式单” (Cascading Style Sheets 或 CCS) 的 <LAYER> 标记用来定位网页中的元素,而 IE 却支持更多的样式单,这些样式单都是居于 World Wide Web 联盟标准的 (可以参见第六部分的 DHTML 相关链接)。

    【给页面的内容定位】

    虽然 Netscape 对 CSS 的支持比较有限,但是我们还是可以很容易地使用 <LAYER> 标记来创建被定位的内容。下边的代码在两种浏览器中可以产生相同的效果:

    Netscape IE 显示的文本。
    </div> 正如你所看到的,我们可以对被定位的内容块 (在上边例子中的内容块是“显示的文本”,也即是在 <layer>....</layer> 或 <div>....</div> 标记对之间的内容) 定义几个特性,例如背景颜色、字体颜色等等。top 和 left 的值用来告诉浏览器这一块内容在网页中的位置,top 是距离浏览器窗口顶部的长度,left 则是距离浏览器窗口左边框架的长度,它们的单位都是象素 (pixel)。

    <layer bgcolor="#ffffcc" left=150 top=200 width=200 height=20>
    显示的文本。
    </layer>

     

    <div>

     

    为了让代码在两种浏览器中都能实现相同的效果,我们可以使用前边讲过的方法首先探测一下浏览器的类型,然后再分别使用 document.writeln() 输出适用于两种浏览器的代码参见 。

    【文档对象模型DOM】

    现在我们已经可以给网页中的内容定位了,但我们怎样才能熟练巧妙地使用这种方法使它成为 DHTML 技术的一部分呢?“文档对象模型” (简称 DOM) 是一个很流行的名字,它指的是在网页中的 JavaScript 分级对象。DHTML 为层与样式单增加了一些新的对象,你可以像使用 JavaScript 中其它对象那样使用这些对象。

    当然,Netscape 和 IE 在 DOM 上的应用也有所不同,但是我们还是可以像上边的例子那样使用相应的代码来实现相同的效果。

    你可以将一个内容块从一个地方移动 (重新定位) 到另一个地方,可以让它从看得见变成看不见。为了实现这些目的,你要针对不同的浏览器正确地处理好 JavaScript 对象。

    让我们重新写一下上边的代码,并且在代码中给内容块加上名字,这样我们才能在程序代码中引用这些内容块作为对象来使用 (这其实就是 DOM 的一部分):

    Netscape IE

    <layer bgcolor="#ffffcc" left=150 top=200 width=200 height=20>
    Some text to display.
    </layer>

     

    <div>
    Some text to display.
    </div>

    现在我们将内容块放在 JavaScript 函数中当作对象来使用,同时返回此内容块对象本身:

    function getBlock(name) { 正如你所看到的,Netscape 使用 document.layers 数组来存储块对象,而 IE 则是创建名为 document.all.块名字.style 的对象来表示块。上边的函数返回了块对象,于是我们就可以使用这个返回值来访问块的属性或执行块的方法了。

    // For Netscape.

    if (document.layers)
    return(document.layers[name]);

    // For IE.

    else if (document.all) {
    layer = eval('document.all.' + name + '.style');
    return(layer);
    }

    // 以上都不是,则返回 null.

    else
    return(null);
    }

     

    现在让我们来看一下 是如何移动一个块的。对于 Netscape 来说,我们只要设置块对象的 left 和 top 属性的值就可以达到移动块的目的,在 IE 中则是使用 pixelLeft 和 pixelTop 属性。在下边的函数 moveBlockBy 中将会改变这些属性的值:

    function moveBlockBy(x, y) {

    var block = getBlock("block1");

    if (document.layers) {
    block.left += x;
    block.top += y;
    }
    else if (document.all) {
    block.pixelLeft += x;
    block.pixelTop += y;
    }
    }

    参数 x 和 y 是块在水平和垂直方向上的移动增量。

    【处理浏览器的兼容性问题】

    正如你所看到的,两种浏览器在 DOM 上的运用也有很多不同之处,这样就给你在网页中实现 动态 HTML 效果带来了挑战,所以在编写代码的时候应该尽量避免使用不兼容的属性、方法等。

    当然,你也可以只设计谋一种浏览器的代码,例如只设计 IE 浏览器可执行的代码,而不考虑 Netscape,但是这样你就将会失去 Netscape 的用户群。或者你也可以设计多套网页或网站,让它们分别支持各种浏览器,但是这样将会给维护网页或网站带来很大的麻烦,增加复杂性。


    js/jQuery教程阅读排行

    最新文章