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)
文档就绪处理程序:
先看下列代码,然后解释为什么会出现这样的名词?
<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 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细节,将在系列篇的后续内容讲解。