前言:

《 JQuery in Action》(中文译名:JQuery 实战),为了复习之,将其中部分内容摘出,即成此文。

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

 

不唐突的Javascript:

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

好处即是:可以通过某一语句,实现对所选定的元素的样式,或行为的统一,而无需针对某一个逐个改变! (关于不唐突的JavaScript的例子,在下面会举出:)。

 

JQuery 基本原理:

选择器(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元素,并插入制定元素后,演示其使用方法

   //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 怎么给action 重新赋值 jquery in action_javascript

 

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

jquery 怎么给action 重新赋值 jquery in action_CSS_02