jQuery概念

jQuery是什么？

jQuery是一个JavaScript库，是由John Resig创建于2006年1月的开源项目，jQuery凭借着简介的语法和跨平台的兼容性，极大简化了JavaScript开发人员遍历HTML文档，操作DOM、处理事件、执行动画和开发ajax的操作。其独特而又优雅的代码风格改变JavaScript程序员的设计思路和编写程序的方式。简单地来说：

• jQuery是一个优秀的JavaScript库。
• jQuery极大地简化了JavaScript编程。
• jQuery很容易学习。

jQuery的优点

jQuery强调的理念是“写得少，做的多”jQuery独特的选择器、链式操作、事件处理机制和封装完善的ajax都是JavaScript望尘莫及的。总结有以下优点：

• 轻量级。jQuery非常轻巧，经过最好的压缩工具UglifyJS压缩之后,大小保持在30KB左右。
• 强大的选择器。jQuery支持CSS1到CSS3几乎所有的选择器，以及jQuery独创的高级而复杂的选择器。
• 出色的DOM操作的封装。jQuery封装了大量常用的DOM操作，使开发者在编写DOM操作相关程序时能够得心应手。
• 可靠地事件处理机制。jQuery的事件处理机制吸收了Javascript事件处理函数的精华，使jQuery在处理事件绑定的时候相当可靠。
• 完善的Ajax。jQuery将所有的Ajax操作封装到一个函数$.ajax()里，使得开发者处理Ajax时能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。
• 不污染顶级变量。jQuery 只建立一个名为jQuery 的对象，所有的函数方法都在这个对象之下。
• 出色的浏览器兼容性。jQuery 几乎支持所有的主流浏览器，同时jQuery 还修复了一些浏览器之间的差异。
• 链式操作方式。jQuery 最具有特色的莫过于他的链式操作方式——即同时发生在同一个jQuery 对象的一组动作，可以直接连写而无需重复获取对象。
• 隐式迭代。当用jQuery 找到带有“.myClass”类的全部元素，然后隐藏他们时，无需循环遍历每一个返回的元素。相反，jQuery 里的方法都被设计成自动操作对象集合，这使得大量的循环结构变得不再必要，从而大量的减少了代码量。
• 行为层和结构层的分离。开发者可以使用jQuery 选择器选中元素，然后直接给元素添加事件。这种将行为层和结构层完全分离的思想，可以使jQuery 开发人员和HTML或者其他页面开发人员各司其职。同时，后期维护也非常方便。
• 丰富的插件支持。jQuery 的易扩张性，吸引了来自全球的开发者来编写jQuery 的扩展插件。目前已经有成百上千的官方插件支持，而且还不断地有新的插件面世。

配置jQuery环境

1.获取jQuery最新版本
进入jQuery的官方网站：http://jQuery.com/，可下载最新的jQuery库文件。
2.jQuery库类型
jQuery库的类型分为两种，分别是生产版（最小化和压缩版）和开发版（未压缩版），他们的区别如下：

名称	大小	说明
jQuery.js	约229KB	完整无压缩版本，主要用于测试、学习和开发
jQuery.min.js	约31KB	经过工具压缩，主要应用与产品和项目
jQuery-vsdoc.js	——	相当于js库提供的方法的说明库，主要用于第三方js自动提示的功能

3.jQuery环境配置
将下载好的jQuery.js文件放到网站上的一个公共的位置，想要在某个页面使用jQuery时，只需要在相关的HTML文档中引入该库文件的位置即可。
4.在页面中引入jQuery

<script src="scripts/jQuery.js" type="text/javascrip"></script>

书写要求

1.对于同一个对象不超过3个操作的，可以直接写成一行。eg:
$(“li”).show().bind(“click”);
2.对于同一个对象的较多操作，建议每行写一个操作。eg:
$(this).removeClass(“change”)
.addClass(“add”)
.stop()
.fadeTo()
.bind()
.show();
3.对于多个对象的少量操作，可以每个对象写一行，如果涉及子元素，可以考虑适当的缩进。eg:
$(this).addClass(“highLight”)
.children(“li”).show().end()
.siblings().removeClass(“highLight”)
.children(“li”).hide();

总结

• jQuery是一个优秀的JavaScript库
• jQuery的优势：
  • 轻量级
  • 强大的选择器
  • 出色的DOM操作的封装
  • 可靠地事件处理机制
  • 完善的ajax
  • 不污染顶级变量
  • 出色的浏览器兼容性
  • 链式操作方式
  • 隐式迭代
  • 行为层和结构层的分离
  • 丰富的插件支持
• 配置jQuery环境并在页面中引入jQuery库文件
• 编写简单的jQuery代码，注意$(document).ready()函数的用法