jQuery 是一个简洁而快速的 JavaScript 库, 可用于简化事件处理, html 文档遍历, Ajax 交互和动画, 以便快速开发网站.
目的是让开发者更容易地在网站上使用 JavaScript. 它不是一种单独的编程语言, 与 JavaScript 一起工作. 使用 jQuery, 将用更少的资源做更多的事情.
使用 jQuery 能做什么?
jQuery 库为 web 脚本编程提供了通用 (跨浏览器) 的抽象层, 使得它几乎适用于任何脚本编程的情形. jQuery 通常能为我们提供以下功能:
1, 方便快捷获取 DOM 元素
如果使用纯 JavaScript 的方式来遍历 DOM 以及查找 DOM 的某个部分编写很多冗余的代码, 而使用 jQuery 只需要一行代码就足够了. 例如, 找到所有应用了. content class 样式的 div 中所有的 P 标签, 只需要下面的一行代码:
$('div.content').find('p');
2, 动态修改页面样式
使用 jQuery 我们可以动态的修改页面的 CSS 即使在页面呈现以后. jQuery 仍然能够改变文档中某个部分的类或者个别的样式属性. 例如, 找到页面所有的 ul 标签的第一个 li 子标签, 然后为它们增加名为 active 的样式, 代码如下:
$('ul> li:first').addClass('active');
3, 动态改变 DOM 内容
使用 jQuery 我们可以很容易地对页面 DOM 进行修改, 例如, 为 ID 为 "container" 的元素添加一个链接:
$('#container').append('<a href="more.html">more</a>');
4, 响应用户的交互操作
jQuery 提供了截获形形色色的页面事件 (比如用户单击某个链接) 的适当方式, 而不需要使用事件处理程序拆散 HTML 代码. 此外, 它的事件处理 API 也消除了经常困扰 Web 开发人员浏览器的不一致性.
- $('button.show-details').click(function() {
- $('div.details').show();
- });
上面的代码表示: 为使用的. show-details 样式的 button 元素添加一个 click 事件, 事件就是: 显示使用. details 样式的 DIV.
5, 为页面添加动态效果
jQuery 中内置的一批淡入, 擦除之类的效果, 以及制作新效果的工具包, 为此提供了便利.
- $(function () {
- $("#btnShow").click(function () {
- $("#msubject").hide("slow");
- });
- });
6, 统一 Ajax 操作
jQuery 统一了多种浏览器的 Ajax 操作, 使得开发人员更多的专注服务器端开发.
- function (data, type) {
- // 对 Ajax 返回的原始数据进行预处理
- return data // 返回处理后的数据
- }
7, 简化常见的 JavaScript 任务.
除了这些完全针对文档的特性之外, jQuery 也改进了对基本的 JavaScript 数据结构(例如迭代和数组操作等).
- $.each(obj, function(key, value) {
- total += value;
- });
来源: http://www.css88.com/qa/jquery/15425.html