一篇文章教会你jQuery应用

一 认识jQuery

jQuery是篇文JavaScript Query的缩写形式。jQuery是章教一款非常优秀的JavaScript库，即便是应用MVVM框架盛行的今天，也有超过半数的篇文网页及应用直接或间接的使用了jQuery。jQuery的章教设计理念是“Write Less, Do More“，即写的应用更少，做的篇文更多！使用jQuery可以大大简化我们的章教JS代码，从而提高开发效率。应用

jQuery现在有3个大的篇文版本，分别是章教1.x，2.x，应用3.x。篇文你可以从jQuery官方网站下载需要的章教版本，然后从本地引入到自己的应用项目，也可以使用CDN引入。在你下载jQuery时一般有两个可选的云服务器版本，一个是压缩版（不包含换行和空格，体积更小，多用于实际项目开发），另一个是未压缩版（包含换行和空格，体积稍大，多用于学习和测试）。

<script src="jquery-1.12.4.js"></script> <!--本地引入--> <script src="//code.jquery.com/jquery-1.12.4.js"></script> <!--CDN引入--> 

另外，jQuery从第二个大的版本开始，为了优化网络响应和使语法更加简洁，抛弃了对IE6、7、8的支持，并且从2.1.0开始，压缩版本的文件中也不再包含注释信息了。为了获得更好的兼容性，我们这里使用的jQuery文件版本号是1.12.4。

二 jQuery核心

1，$符号

jQuery实际上是一个函数对象。事实上，jQuery通过全局变量jQuery引用该函数对象，$符号是jQuery变量的一个别名，云服务器提供商为了写的更少，我们通常都使用$符号表示该对象。

window.jQuery === window.$; //true jQuery === $;// true typeof($);// function 

如果你还使用了其他框架，或自定义了$变量，那么有可能和jQuery的$符号造成冲突。

jQuery.noConflict(); 

在使用jQuery编程之前，首先调用noConflict()方法，解除jQuery对$符号的占用，这样就可以解决这一问题了。但往后就只能通过变量jQuery来使用jQuery的所有功能了。

2，参数

$核心函数可以接收3种类型的参数，分别是函数引用、字符串、DOM对象。

a) 接收一个函数

$(function(){  //some code }); //这种方式的完整写法应该是： //$(document).ready(function(){ some code}); 

这种方式类似原生JS的window.DOMContentLoaded方法，只要HTML文档解析完毕并生成DOM tree就会触发该事件。但是在jQuery中可以同时存在多个该方法。

b) 接收字符串

var box1 = $(div); //接收css选择器字符串，可以拿到DOM tree中相应的DOM元素，并把它包装成jQuery对象 var box2 = $(<div></div>); //接收HTML代码片段，可以创建相应的高防服务器DOM元素，并把它包装秤jQuery对象 

c) 接收DOM元素

var box = document.getElementById(#box); var jBox = $(box);//jQuery obj 

如果核心函数接收一个DOM元素，那么它会把该DOM元素包装成一个jQuery对象，并返回。

jQuery对象事实上是一个类数组，保存了获取到的DOM元素。只有通过jQuery对象才可以访问jQuery提供的属性和方法。

3，静态方法

jQuery提供了一些静态方法，例如遍历数组，字符串去空格，判断数据类型等等，这些方法在ES5之前都是很实用的方法，但ES5之后，原生JS就已经实现了这类似的方法，所以这里就不再详细讲解了，有兴趣可以自行查看官方文档。jQuery把ajax相关操作也封装为静态方法，稍后会专门讲解。这里要讲的只有holdReady方法。

$.holdReady(true); $(function(){  //some code }); $.joldReady(false); //参数true，暂停ready方法的执行，参数false，恢复ready方法的执行 

三 jQuery 属性和节点

1，选择器

选择器是jQuery的核心功能。绝大多数css支持的选择器都可以在jQuery得到支持。

$(p);//标签选择器 $(.class);//类选择器 $(#id);//id选择器 $([type=text]);//属性选择器 $(input[type=email]);//组合选择器 $(#id p);//后代选择器 $(#id p:first-child);//筛选选择器 //... 

通过核心函数获取到的DOM元素都被包装成jQuery对象，以类数组的形式存储。我们可以通过eq方法获取其中某一个，还可以通过get方法获取DOM对象。1

var divList = $(div);//获取所有div var domDiv = divList.get(0);//获取第一个Dom元素，如果有的话 var jqDiv = divList.eq(0);//获取第一个jq对象，如果有的话 var another = $(domDiv);//把Dom元素转化成jq对象 

另外jQuery还提供了一些通过层级结构查找元素的方法。

$(div).find(span);//查找div内部的span，等同于$(div span) $(li).first();//获取匹配的元素中的第一个 $(li).last();//获取匹配的元素中的最后一个 $(div).next();//获取所有匹配到的div的下一个兄弟元素的集合 $(div).prev();//获取所欲匹配到的div的上一个兄弟元素的集合 $(div).parent();//获取匹配到的div的共同父元素 $(div).children();//获取div的子元素集合 $(div).siblings();//获取div的兄弟元素集合 //... 

2，属性操作

获取DOM元素之后，jQuery把它们包装成jq对象，然后你就可以通过jQuery提供的方法修改相应的DOM元素了，包括CSS，文本，属性节点，HTML结构等等。

属性及属性节点相关：

$(div).attr(name,test);//设置属性名：name，属性值：test $(div).attr(name);//获取属性name的值 $(div).removeAttr(name);//删除属性name