jQuery自学教程（一）

JQuery是一个优秀的Javascript库，顾名思义，也就是JavaScript和查询（Query），即是辅助JavaScript开发的库。。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。

jQuery核心理念是write less,do more(写得更少,做得更多)。jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。

//**********************************************************************************************************基本介绍已完结**********************************************

有了js和html等基础知识的支持，jQuery上手并不难。因此直接开始使用。在使用的过程中不断学习。

首先在html中将jQuery的js文件包含进去：（我这里用到的是jquery-easyui包，仅做示范使用）

<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.min.js"></script>

之后便可以在自己的js文件中使用jQuery定义了。

一、代码风格

使用jQuery，不管是页面元素的选择、内置的功能函数，都是美元符号“$”起始的。“$”就是jQuery中最重要且独有的对象：jQuery对象，所以在页面元素选择或执行功能函数时有如下格式：

$(funcion (){});

$('#id'); (其中"$"可用“jQuery”代替)

提到了jQuery对象，就顺便继续说一下jQuery中的链式结构。jQuery中的功能函数（比如css()等）返回的都是jQuery对象，因此可以连缀式调用一系列的功能函数。

二、加载模式

在使用jQuery过程中，一直使用$(function (){});对代码进行首尾包裹。原因很简单，比如我们要求对网页上某个dom进行操作，而jQuery库文件是在body元素之前加载的，必须等待所有的dom元素加载后，延迟对DOM的操作，否则无法获取事件。

在这里有两种方式：

window.onload=function (){};
$(document).ready(function (){});

三、对象转换

在实际中，我们常常也会调用一些jQuery库中没有的方法来进行，因此会用到jQuery对象和原生Dom对象进行转换。

1、jQuery→DOM

$('#id').get(0); 获得的jQuery对象是一个数组的形式，get方法获得其中的单个元素。同样可以看出，jQuery是可以批量处理DOM的，因此这样使得在循环遍历等问题上处理得会更加方便。

2、DOM→jQuery

$(document.getElementById('id')); 即可。