1 引言
现在的万维网是一个动态的环境，WEB用户对网站的设计和功能有了跟高的要求。为了构建有吸引力的交互是网站，开发这门借助于像jquery这样的javascript库，实现了常见任务的自动话和复杂任务的简单化。Jquery库的广受欢迎的一个原因，就是功能的丰富多样。它的设计秉承了一致性和对称性原则，大部分概念是从HTML和CSS样式的结构中借来的，所以对我们来说学习起来较容易，就算是对于web设计没有什么经验，也能快速上手。对于我们来说掌握这门技术是比较必须的。
1.1 Jquery可以做什么
Jquery库为为web脚本编程提供了通用的抽象层，使得它几乎适用于任何脚本编程的情形。
内容。Jquery现在也在不断地更新，就其核心特性而言，jquery能够满足下列需求：
l 取得页面的元素
l 修改页面的外观
l 改变页面的内容
l 相应用户的页面操作
l 为页面添加动态效果
l 无需刷新页面即可从服务器获取信息
l 简化常见的javascript库任务
1.2 Jquery为什么受欢迎
Jquery主要采取了如下策略：
l 利用CSS的优势 通过将查找页面元素的机制构建与css选择符之上，jquery继承了简明清晰地表达文档结构的方式。
l 支持扩展 jquery将特殊情况下的用途归入插件当中。
l 抽象浏览器不一致性jquery添加了一个抽象层来标准化常见的任务，从而有效第减少了代码量，同时也极大地简化了这些任务。
l 总是面向集合当要使用jquery查找某一类元素，然后隐藏他们时，不需要循环遍历每一个返回的元素。Jquery中的方法被设计成自动操作对象集合，而不是单独的对象。这种被称为隐士迭代。
l 将多重操作集于一行 为了避免重复变量以及过多代码的重复，jquery采取了一种叫做连缀的编程模式。
这些策略确保了jquery包的小型化—压缩文件约20KB,也是得我们使用jquery时自定的代码简洁。
2 Jquery入门
2.1 第一个jquery文档
使用jquery方式很简单，我们只需要在官方网站上免下载库文件放在项目的合适文件夹中，在要使用jquery的文件中进行引用就可以了。要注意的是引用jquery库文件的语句必须要在引用自定以的js文件之前，否则引用不到。
2.1.1 编写jquery代码
Jquery中的基本操作就是选择文档的一部分，这是通过$（）结构来实现的，该结构需要一个字符串参数，参数中可包含任何css选择表达式。$（）是一个jquery对象的制造工厂，jquery对象中会封装零个或多个DOM元素，并允许我们不同的方式与这些DOM元素进行交互。
控制javascript代码何时执行的传统机制是在事件处理程序中调用代码。在没有jquery的情况下，我们使用onload处理程序，会在页面呈现完成后触发为了在onload事件中执行我们的代码，需要先把代码放在函数中：
function emphasizePoemStanzas（）{
$（’.poem-stantaz’）.addClass（’emphasized’）;
}
然后修改html文件，<body οnlοad=”emphasizePoemStanzas();”>
这种方法存在缺点，这种结构与功能紧密耦合的做法，会导致代码混乱。为了避免这个缺陷，jquery允许我们使用$（document）.ready（）结构预定DOM加载完成后触发的函数调用，在上面函数定义的基础上，我们可以这样编写代码：
$（document）.ready（emphasizePoemStanza）;
这种写法还是有点浪费，仅仅只使用一次。Javascript有一种解决这种低效做法的方式，匿名函数。现在我们把代码改回初始状态：
$（document）.ready（function（）{
$（’.poem-stanza’）.addClass（’emphasized’）;
}）;
通过使用不带函数名得function关键字，我们在实际需要它的地方定义了一个函数。在jquery中习惯使用这种写法，因为很多方法都需要一个几乎不会再重用的函数作为参数。
2.1.2 执行结果
编写好javascript代码后，文档中的文字就会变成斜体。这就是这个简单的jquery示例的效果。
3 选择符-取得你想要的一切
Jquery最强大的方面之一就是它能够简化DOM遍历任务。我们通过各种选择符和方法得到的结果集合实际上都是jquery对象。当我们想实际地操作页面中找到的元素时，通过jquery对象会非常简单。
3.1 工厂函数$
在jquery中，无论使用那种类型的选择符，都要从一个美元符号和一对圆括号开始：$（）。
放在圆括号中的任何元素将自动执行循环遍历，并且会被保存到一个jquery对象中。括号中的 参数基本没有什么限制。常见的用例如下：
l 标签名：$（’p’）取得文档中所有的段落。
l ID: $（’#some-id’）会取得文档中ID对应some-id的一个元素。
l 类：$（’.some-class’）会取得文档中带有some-calss类的元素。
3.2 CSS 选择符
Jquery支持css规范1到规范3中的大多数选择符。以下面的一段网页代码为例：
<ul id=”selected-plays”>
<li>Comedies
<ul>
<li><a href=http://www.baidu.com>as you likeit</a></li>
<li>All’s well that ends well</li>
</ul>
</li>
在样式表中定义一个horizontal类：
. horizontal{
Float:left;
List-style: none;
Margin:10px;
}
我们使用jquery来将这个样式动态地添加给位于顶级的列表项：
$(document).ready(function(){
$(‘#selected-plays>li’).addClass(‘horizontal’);
});
当在jquery代码中使用$(document).ready()结构时，位于其中的所有代码都会在DOM加载后立即执行。以上代码的意思是查找id是selected-plays元素的子元素（>）中所有的列表项（li），之后添加样式horizontal。
3.3 XPath 选择符
Xpath是在xml文档中识别不同元素或者元素值的一种语言，与css在html文档中识别元素的方式类似。Jquery库支持一组基本的xpath选择符，如果愿意也可以将他们与css选择符一起使用。
3.4 自定义选择符
除了css和xpath选择符之外，jquery还添加了自定义的选择符。自定义选择符的语法与css中的伪类选择符相同，即选择符以一个冒号：开头。例如，我们想要从匹配的带有horizontal类的div集合中，选择第2个项，那么应该使用下面的代码：
$（’div.horizontal:eq（1）’）
假设我们用jquery将网页中表格交替显示不同的样式，编写好css样式表之后，我们使用以下代码：
$（document）.ready（function（）{
$（’tr:odd’）.addClass（’odd’）;
$（’tr:even’）.addClass（’even’）;
}）;
3.5 连缀
在jquery中，可以通过一行代码取得多个元素集合并对这些元素集合执行多次操作。而且，为了获得更佳的可读性，也可以把一行代码分成多行。例如下面代码：
$（’td:contains（”Henry”）’）
.parent（）
.find（’td:eq（1）’）
.addClass（’hightlight’）
.end（）
.find（’td:eq（2）’）
.addClass（’highlight’）;
4 事件
Javascript内置了一些对用户的交互和其他事件给予响应的方式，使页面具有动态性和相应能力，jquery在此基础之上扩展并增强了事件处理机制。
4.1 在页面加载后执行任务
4.1.1 代码执行的时机
我们知道$（document）.ready（）是jquery中相应javascript内置的onload事件并执行任务的一种典型的方式。当一个文档完全下载到浏览器中时，会触发window.onload事件。同过$（document）.ready（）注册的事件处理程序则会在DOM就绪并可以使用时调用。当HTML下载完成并解析为DOM树之后，代码就可以运行。
4.1.2 一个页面执行多个脚本
然而window.onload属性一次只能保存对一个函数的引用，不能在现有的基础上再新增行为。
对于这种情况下，通过$（document）.ready（）机制能够很好地处理。每次调用这个方法都会向内部的行为队列中添加一个新函数，当页面加载完成后，又有函数都将得到执行，并且依照顺序。
4.2 .bind()方法
.bind（）方法是jquery中经常使用的事件绑定方法。通过这个方法我们可以指定任何一个javascript事件，并为该事件添加一种行为。例如，事件是click：
$（document）.ready（function（）{
$（’switcher-large’）.bind（’click’,function（）{
$（’body’）.addClass（’large’）;
}）;
}）
当单击按钮时就会运行函数中的代码，这里就是绑定了一个事件。多次调用.bind（）方法也没有问题，即可以按照需要为同一个事件追加更多的行为。当触发任何事件处理程序时，
关键字this引用的都是携带相应行为的DOM元素。通过在事件处理程序中使用$（this）,可以为相应的元素创建一个jquery对象，然后就如同使用CSS选择符找到该元素一样对它操作。我们可以写出下面的代码：
$（this）.addClass（’selected’）;
4.3 简写的事件
鉴于为某个事件绑定处理程序极为常用，jquery提供了一种简化事件操作的方式—简写事件方法，简写事件方法的原理与对应的.bind（）调用相同，但可以简写一定的代码输入量。不使用.bind（）函数，使用click（）函数：
$（document）.ready（function（）{
$（’switcher .button’）.click（function（）{
$（’body’）.removeClass（）;
}）;
});
4.4 事件的旅程
当页面上发生一个事件时，每个层次上的DOM元素都有机会处理这个事件。允许多个元素相应单击事件的一种策略叫做事件捕捉，在事件捕捉的过程中，事件首先会交给最外层元素，接着再交给更具体的元素。
4.5 常用的函数
l .toggle（） 交替地扩展和折叠页面元素。
l .hover（） 突出显示位于鼠标指针下方的页面元素。
l .stopPropagation（）和.preventDefault（）来影响哪个元素能够相应事件。
l .unbind（）移除停用的事件处理程序。
l .trigger（）引发执行绑定的事件处理程序。
5 结束语
以上只是本人根据自己的学习心得总结的一些关于jquery比较常用且基础的知识，大家要向成为jquery专家，还需要花功夫去自习学习相关资料。希望这篇文档能给大家一定的帮助，起到引导作用，能对我们以后做页面开发有较大提升。谢谢关注！
54
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
