jQuery作为一个JavaScript函数库，极大地简化了JavaScript 编程。
什么是 jQuery ？
通俗的话来讲的话：jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
它包含但不仅限于以下功能：
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
为什么使用 jQuery ？
目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的扩展。
兼容性
jQuery 版本 2 以上不支持 IE6，7，8 浏览器。如果需要支持 IE6/7/8，可以使用1.9版本。
如何引入jQuery？
只需要在你的代码中，像引入其他js文件一样即可。当然你可以选择下载jQuery文件，然后引入，又或者使用提供的CDN进行引入。
// 本地文件 <head> <script src="jquery-1.10.2.min.js"></script> </head> // 百度CDN <head> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> </head>
其他的静态资源CDN如：
http://cdn.code.baidu.com // 百度的，版本较老 http://www.bootcdn.cn/jquery/ // 国内其他CDN站，版本较新
用CDN的优势时，如果用户访问的其他站点，已经保存了对应的资源，那么访问我们网站就可以直接使用缓存了。
jQuery的使用
鉴于jQuery是一个javascript的类库，它内部封装了很多javascript的操作，接下来的基本使用，会结合这javascript，对javascript不熟的请查看上一篇javascript基础。
在javascript中，我们主要的操作逻辑是查找标签，然后对其做一些函数或者参数的绑定，以及动态效果。所以在javascript存在一个标签的DOM对象，就是我们通过document.getElementXXXX找到的标签对象。
在jQuery中是一样的逻辑，只不过jQuery整体做了一个封装，在页面上，使用jQuery关键字或者使用$,表示使用jQuery对象($ == jQuery)。
// javascript
var tag = document.getElementById('id1')
// jQuery
var tag = $('#id1') 或者 jQuery('#id1')
PS：jQuery是javascript的封装，所以说，它俩是可以互相转换的。
// jQuery --> javascript
$('id1')[0]
// javascript --> jQuery
var d = document.getElemetById('id1')
$(d)
根据上面的例子得知，jQuery查找到的东西，比javascript要更多一些。
标签的查找
可以说jQuery封装的标签查找，和css的标签查找很像，只需要在$()添加选择器即可。
常用的标签查找
$('.class') // 按照class查找
$('#id') // 按照id查找
$('tagname') // 按照标签名查找
$('a,.class') // 组合选择器，只需要用逗号隔开即可
$('#id tagname') // 查找目前标签的子孙中包含，标签类型是tagname的标签
$('#id > child') // 在目标标签中，只查找儿子标签
$('#id + next') // 目标标签的下一个标签
$('#id ~ siblings') // 目标标签的之后的所有兄弟标签(同级)
常用的组合筛选器
$('a:first') // 找到的标签中的第一个
$('a:last') // 找到的a标签的最后一个，前面可以是任意标签选择器
// 根据上面的例子可以得知，筛选器就是在标签后面使用:分割，然后添加一些筛选的功能
:even // 表示奇数的标签
:odd // 表示偶数的标签
:eq(index) // 使用索引进行过滤，索引值从0开始 (有些方法索引并不是从0开始的)
:lt(index) // 索引小于多少的,不包含index本身
:gt(index) // 索引大于多少的，不好含index本身
常用属性选择器
$('[属性]') // 查找所有具有属性名的标签
$("[属性='值']") // 根据属性对应的值进行查找
$("a[属性='值']") // 查找a标签中属性对应的值的标签，可以组合其他类型的选择器
表单选择器
$(':input') // 查找form中 所有的input标签
$(':text') // 其他的类似
$(':password')
$(':radio')
$(':checkbox')
$(':image')
$(':file')
$(':button')
表单对象属性
$(':enabled') // 具有enabled属性的标签，input默认的属性，表示可以编辑
$(':disabled') // 具有disabled属性的标签，input的属性，表示不可以编辑
$(':checked') // 具有ckecked属性的表壳，比如checkbox默认的选中
$(':selected') // 具有selected属性的标签，比如select的默认选中
筛选器
对查找到的标签进行二次筛选等
PS：jQuery支持链式调用，即可以在一行中组合多个筛选器或者赋值操作等。简而言之就是可以一直点下去。
过滤
eq(index|-index) // 筛选索引等于几的标签，和前面说的:eq() 没有实质上的区别，要说有，就是写法不同而已。 first() // 查找出来的第一个标签 last() // 最后一个标签 hasClass(class) // 筛选具有class的标签
例子：
$('.header').last() // last的括号里面不能加额外的选择器
$('.header').first() // 同上
筛选
children([expr]) // 所有的孩子标签 find(e|o|e) // 在孩子中查找某一个标签 next([expr]) // 查找到标签的下一个标签 nextALL([expr]) // 查找到标签的下面的所有标签，同级别 nextUntil([expr]) // 查找到标签的下面直到某个标签 parent([expr]) // 查找到的标签的父亲 parents([expr]) // 嵌套时的所有父亲标签，默认到html parentsUntil([expr]) // 嵌套时的所有父亲标签直到某个标签 prev([expr]) // 查找到标签的上一个标签 prevALL([expr]) // 查找到标签的上面的所有标签，同级别 prevUntil([expr]) // 查找到标签的上面的直到某个标签 siblings([expr]) // 查找到标签的所有兄弟标签
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .menu { 8 border: 1px red solid; 9 width:300px; 10 height: 600px; 11 } 12 a{ 13 display: block; 14 } 15 .header{ 16 background: darkgray; 17 } 18 .hide { 19 display: none; 20 } 21 </style> 22 </head> 23 <body> 24 <div class="menu"> 25 <div class="item"> 26 <div class="header">菜单1</div> 27 <div class="content"> 28 <a href="#">1</a> 29 <a href="#">1</a> 30 <a href="#">1</a> 31 </div> 32 </div> 33 <div class="item"> 34 <div class="header">菜单2</div> 35 <div class="content hide"> 36 <a href="#">2</a> 37 <a href="#">2</a> 38 <a href="#">2</a> 39 </div> 40 </div> 41 <div class="item"> 42 <div class="header">菜单3</div> 43 <div class="content hide"> 44 <a href="#">3</a> 45 <a href="#">3</a> 46 <a href="#">3</a> 47 </div> 48 </div> 49 </div> 50 51 <script src="jquery-3.1.1.js"></script> 52 <script> 53 $('.header').click(function () { // 不用进行循环，jQuery在内部会循环的绑定事件 54 $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide'); // 链式操作 55 }) 56 </script> 57 58 </body> 59 </html>