JQuery概述1——JQuery 相关简介

最新推荐文章于 2024-06-07 09:18:52 发布

weixin_30802273

最新推荐文章于 2024-06-07 09:18:52 发布

阅读量76

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yangmingming/archive/2010/02/26/1674225.html

版权

前言：

前一段拜读了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元素

< script src = " jquery-1.2.6.js " type = " text/javascript " >< / script>
     < script type = " text/javascript " language = " javascript " >
     // Description: 通过$函数的创建DOM元素，并插入制定元素后，演示其使用方法

    // CopyRight: http://www.cnblogs.com/yangmingming

    // Notes: 为简便，列举<p>的简单示例，以验证之

      $( function ()
      {
        $( " <p>Hi there!</p> " ).insertAfter( " #followMe " );
      });
     < / script>

< / head>
< body >
     < form id = " form1 " runat = " server " >
     < div >
       < p id = " followMe " > Follow me !< / p>
     < / div>
     < / form>
< / body>
< / html>

浏览器效果为：

综述之，通过对JQuery的基本概念、原理的介绍，对JQuery有了大致的轮廓。至于具体的JQuery细节，将在系列篇的后续内容讲解。

转载于:https://www.cnblogs.com/yangmingming/archive/2010/02/26/1674225.html

weixin_30802273

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery概述1——JQuery 相关简介

前言：前一段拜读了Bear Bibeault 和Yehuda Katz的《 JQuery in Action》（中文译名：JQuery 实战），为了复习之，将其中部分内容摘出，即成此文。作为JavaScript 库的后来者，JQuery是如此的重要，以至于在Visual Studio 2010版本中，其已经作为了正式组成部分。不唐突的Javascript：不唐突的...
复制链接

扫一扫