jQuery 简介
jQuery是目前应用最为广泛,最为优秀的Ajax/JavaScript开源框架之一,有数以千万记的用户,更有多不胜数的技术文档与之相关,在一定程度上,jQuery 如其所宣扬的那样,改变了人们编写 JavaScript 的方式。
jQuery 通过提供 CSS 标准的选择器来对页面元素进行选择,然后对这些元素组成的 一个列表进行某些操作,参与过页面开发的人员都知道,基于 WEB 的 UI 实际上要做的事情就是:
- 找到页面上的某个/某些元素
- 改变这些元素的属性或者样式
- 绑定一些事件处理程序在这些元素上
为了对开发者更友好,jQuery 使用了独特的链式操作,使得可以使用尽可能的代码来 完成尽可能多的任务。就个人而言,jQuery 是我个人最喜欢的 JavaScript 框架。我们可以通过一些例子来看看 jQuery 是怎样工作的。
假设我们有一个 table,如果给 table 加上斑马线的话,用户可以更清晰的看清楚每一 行,整个页面也更有层次感,但是问题是我们的页面已经做好了,我不想再对页面做修改!
图 修改前的表格
这样单调的一种颜色很容易使用户的视觉产生疲劳,我们应该为偶数行添加浅绿色的背景,像这样:
图 修改后的表格
这样效果就好多了,要做成这种效果,用 jQuery 需要多少代码呢?一行!我们来看看 如何用一行代码完成这样的效果:首先,我们找到这个 table,然后告诉 jQuery,给这个 table 中的所有偶数行都添加一个 css 伪类:
$("div#informationTable table tr:nth-child(even)")
.addClass("striped");
div#informationTable table tr:nth-child(even)
为一个 CSS 标准的选择器,表示在一个 id 为 informationTable 的 div 的孩子中,找到所有的 table,tr 是 table 的孩子,并使行,nth-child(even)
表示为偶数的孩子。
完整的代码如下:
$(document).ready(function(){
$("div#informationTable table tr:nth-child(even)")
.addClass("striped");
});
这段代码表示,当文档加载完成后($(document).ready()
),调用一个匿名的函数,这个函数的函数体为我们上面分析过的,找到 table 的所有偶数列,为这些列添加背景色(通 过使用 css 类”striped”)。
事实上,jQuery 深受开发人员青睐的更深层次的原因可能要归功于贯穿于其中的编程思想,如果仔细审视 jQuery 的代码,你应该会发现,其中的集合的概念以及对集合的各 种操作,与函数式语言 lisp 是不谋而合的,比如 map,filter,以及 grep 等等。
我们可以来看看这样几个简单示例:
jQuery.grep 对列表进行过滤,并返回过滤后的列表。我们来看一个例子,首先定义一个人员列表,每个条目包含 name 和 age 字段,现在要找出所有 age 大于 24 岁的人员,并以列表的形式返回:
$(document).ready(function(){
var person = [
{name : "jack", age : 26},
{name : "johb", age : 23},
{name : "smith", age : 20},
{name : "abruzzi", age : 26},
{name : "juntao", age : 25},
{name : "jim", age : 24},
{name : "bob", age : 24}
];
var gt23s = $.grep(person, function(item){
return item.age > 24;
});
console.dir(gt23s);
});
jQuery 的工具方法定义在 jQuery 对象上,类似于 Java 中的静态方法。console.dir 是 Firefox 或者 Chrome 的调试助手,在 chrome 下的结果如下:
图 chrome 开发人员工具中 console.dir 的效果示意($.grep) 再来看一下 map 的例子:
$(document).ready(function(){
var person = [
{name : "jack", age : 26},
{name : "johb", age : 23},
{name : "smith", age : 20},
{name : "abruzzi", age : 26},
{name : "juntao", age : 25},
{name : "jim", age : 24},
{name : "bob", age : 24}
];
var mapped = $.map(person, function(item){
return item.name = item.name.toUpperCase();
});
console.dir(person);//原始的person列表已被修改
});
我们将 person 列表中的每一个元素的 name 字段的值转换为大写。Map 的修改是直接体现在原始列表上的,结果如下:
图 chrome 开发人员工具中 console.dir 的效果示意($.map)
jQuery 本身不如 ExtJs 那样可以轻松而快速的开发出华丽的 UI,但是 jQuery 本身提 供的插件机制为使用 jQuery 方式快速开发华丽的 UI 提供了可能,比如 jQuery-UI, EasyUI 等插件的出现,使得用户可以向使用 jQuery 那样,快速的生成 UI,提高开发速度。
{$ activeFileHint $}