JQuery概述1——JQuery 相关简介

前言:

     前一段拜读了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细节,将在系列篇的后续内容讲解。

 

    

     

posted @ 2010-02-26 13:52  Youngman  阅读(2674)  评论(0编辑  收藏  举报