JQuery概述1——JQuery 相关简介

现在的位置: 首页 > 综合 > 正文

JQuery概述1——JQuery 相关简介

2012年10月27日 ⁄ 综合 ⁄ 共 2363字 ⁄ 字号小中大 ⁄ 评论关闭

前言：

前一段拜读了Bear Bibeault 和Yehuda Katz的《 JQuery in Action》（中文译名：JQuery 实战），为了复习之，将其中部分内容摘出，即成此文。

作为JavaScript 库的后来者，JQuery是如此的重要，以至于在Visual Studio 2010版本中，其已经作为了正式组成部分。

不唐突的Javascript：

不唐突的JavaScript（英文为：Unobtrusive JavaScript），意思即为：行为与结构相分离。其主旨认为：嵌入在HTML页面的<body>里的JavaScript表达式或语句，不管是作为HTML元素的特性（比如：onclick），还是嵌入在页面中的脚本JavaScript，都是不正确的。这样做的的理由主要基于低耦合，或者叫做分离的思想，这完全雷同于在HTML中把样式，通过CSS从结构中分离出来。对于CSS样式的应用，所带来的好处，在此不再鳌述。

不管是基于样式，还是行为，它们所实现的与结构的分离的，最显而易见的好处即是：可以通过某一语句，实现对所选定的元素的样式，或行为的统一，而无需针对某一个逐个改变！（关于不唐突的JavaScript的例子，在下面会举出：）。

JQuery 基本原理：

其核心，JQuery重点放在从HTML页面里获取元素并对其进行操作。这时CSS样式的选择器（selector）发挥极大威力。其基本样式为：

$(selector)

可举例：$("p a")。这种构造称为包装器（wrapper），亦即将满足条件的匹配元素包装。而包装集（wrapper set）：指能够在其上用JQuery定义的方法去操作的、匹配元素集合。

$的广泛应用：

$()函数，是其作为包装器的最常用用法之一，而$的另一个应用为：工具函数。这里简要提及：例如删除字符串前后空格的实用工具函数为：

$.trim(something)

文档就绪处理程序：

先看下列代码，然后解释为什么会出现这样的名词？

// i)Windows 的onload处理函数
    <script type ="text/javascript" language ="javascript" >
        window .onload =function ()
        {
           $("table tr:nth-child(even)").addClass("even");
        }
    </script>

    //  ii）文档就绪函数
    <script type ="text/javascript" language ="javascript" >
        $(document).ready(function()
        {
           $("table tr:nth-child(even)").addClass("even");
        });
    </script>
    // iii)文档就绪函数的“正式语法”
    <script type ="text/javascript" language ="javascript" >
        $(function()
        {
           $("table tr:nth-child(even)").addClass("even");
        });
    </script>

三种函数分析：

在i）中Windows的onload处理函数中，只有当：构造完DOM树，也是在所有图像和其他外部资源都完整的加载进页面以后，才执行onload处理函数。其缺点是：若需加载的资源很多，则浏览器可能无限期延迟onload函数的执行，所以这样做的效率是相当低的！

在ii）中，只要浏览器将HTML代码转变为DOM元素时，即执行脚本使行为生效（而不是外部资源加载完毕。）。

在iii）中，其形式上，较ii）简略，而它们的意思是相同的。它被称作“正式语法”，这是从用法频繁，而做的简化形式。

这样，我们对JQuery中的最常见形式，即有了意义上的理解了，呵呵~

附：$函数功能续——创建DOM元素