jQuery入门（一）

　　相信学js的人多多少少听过JQuery，JQuery对于前端开发人员来说是不可或缺的，他让开发变得更加简单。那到底什么是JQuery呢？用一句话来说，JQuery就是一个javascript的库。所谓的javascript库也就是一些封装好的常用的方法，我们把它封装到一个单独的js文件中，在要用的时候直接调用就好了。所以，我们学习jQuery就是学习他的方法。

　　我们可以在JQuery官网中直接下载JQuery，以下是他的官网下载网址：

http://jquery.com/download/

　　到目前为止，JQuery有三个大版本，分别是JQuery1.X，JQuery2.X，JQuery3.X。JQuery1.X版本还有着对ie6,7，8的兼容。而在JQuery2.X版本中，他已经对ie8及以下的版本已经不支持了。所以我们在下载的时候要根据实际开发而定，而JQuery3.X版本跟JQuery2.X版本最主要的区别就是他有一个slim版本，他移除了effects ajax模块，让jquery更加的精简。在每个大版本中，又分两个小版本，分别是压缩版和未压缩版。其中压缩版将变量名尽可能的变为单个字母，把注释，换行和空格全部去掉，用以减小体积。而未压缩版则保留了全部注释，并且变量名尽可能的语义化。所以说，在选择JQuery版本的时候，我们就要看我们实际的需求了。一般来说，如果我们要兼容ie8及以下的版本，我们就会选择JQuery1.X，如果不需要兼容的话，我们可以在JQuery2.X或JQuery3.X中任选一个。在实际的开发中，我们会选择未压缩版本的，有助于我们在开发中遇到问题可以及时的查询。而在产品上线的时候，我们会选择吧JQuery换成压缩版本的来减小体积。

　　在下载好JQuery了之后，我们就要把JQuery引入我们的项目中了。一般来说，我们会把下载好的JQuery放到我们的js文件夹中。然后在页面中引入JQuery。这里，要注意把引入的JQuery放在最前面，否则在调用的时候会报错，因为浏览器是从上往下解析的。

　　在引入JQuery包之后，就可以正式开始写js代码了。我们在引入JQuery包的下面写一个script标签来写代码，首先我们要先写一个入口函数。因为在实际开发中，script标签基本上都是放在页面的head标签中的。所以说，我们要等页面加载完成后才能开始执行，否则就会获取不到页面中的元素。在原生的js代码中，我们通常使用的是

window.onload = function () {

};

而在JQuery中，我们通常使用的是

$(document).ready(function () {

});

或者是

$(function () {

})

　　他们有什么区别呢。首先，JQuery跟原生js代码比，前者是在页面DOM树加载完成之后开始执行的，他不会等待图片等资源加载。后者则是等到页面上所有资源加载完成之后才开始执行的。而JQuery的两种写法功能都是相同的，后者只是前者的一种简写形式而已。

在这里，我们看到了有一个$的符号，他又是什么意思呢？在JQuery中，$本质上是一个函数，他根据所给的参数不同，所执行的功能也不同。

首先，如果我们给他传入字符串形式的css选择器的话，它的功能就是获取页面上的元素它的语法是$(selector)。selector指代的就是要获取的选择器。比如：

var $box = $("#box");

　　第二种用法就是传入一个DOM对象，他可以把DOM对象转成JQuery对象。它的语法是$(DOMobj)DOMobj只带的就是DOM对象。比如：

var cloth = document.getElementById("cloth");

var $cloth = $(cloth);

　　第三种用法则是传入一个function。也就是之前提到的入口函数的形式，它的功能就是入口函数。

$(function () {

})

　　在JQuery中有JQuery对象，而在DOM中有DOM对象，他们有什么关系呢？首先，JQuery对象就是通过JQuery方法获取到的元素，也就是用$符号。而DOM对象则是通过js方法获取到的元素。并且，他们之间的方法不能相互使用。JQuery对象其实就是DOM对象的包装集，DOM对象以伪数组的形式存放在JQuery对象中。

　　当然，JQuery对象和DOM对象之间也能相互转换。如果我们想把JQuery对象转换成DOM对象，我们只需要在JQuery对象后面跟一个下标也就是jQueryObj[index]的形式，或者调用JQuery对象中的方法jQueryObj.get(index)这里的jQueryObj值的就是JQuery对象，而index指的则是DOM对象在JQuery对象中所对应的位置。而我们如果想把DOM对象转成JQuery对象就很简单了，我们只需要用$(domObj)的形式就可以了，这里的domObj指的就是DOM对象。

　　在JQuery中，他有很多的选择器，不过它使用的方式跟css选择器的方式很像。这里我就提部分的选择器来说。

　　首先来说说他的基本选择器，跟css中一样，他也有类选择器，id选择器。标签选择器，并集选择器和交集选择器。格式如下：

　　  $(".className")  类选择器

　　 $("#id")  id选择器

　　  $("tagName") 标签选择器

　　  $("selector1,selector2")  并集选择器

　　 $("selector1selector2") 交集选择器

　　除了基础选择器之外，他还有层级选择器，包括后代选择器和子代选择器。格式如下：

　　 后代选择器 $("selector1 selector2")

　　 子代选择器 $("selector1>selector2")

　　然后就是过滤选择器过滤选择器有很多它的格式是：$("selector:filter")。比如以下几个：

　　odd   $("selector:odd")  奇数过滤选择器

　　even  $("selector:even")  偶数过滤选择器

　　eq(index)  $("selector:eq(index)")  序号过滤选择器

　　最后就是筛选选择器了，筛选选择器其实都是方法。比如：

　　 children(selector)选择所有的子代

　　  find(selector)选择所有的后代

　　  next()选择下一个

　　 siblings(selector)选择所有兄弟节点

　　 parent()选择父辈节点

　　如果js基础扎实的话，学习JQuery是不难的。