How to learn jQuery

参考资料

• jquery官方教程文档
• W3cschool
• 官方API文档
• 案例demo
• 案例demo效果（移动端）

引言：不得不承认，麻雀虽小，五脏俱全。jquery库虽然上手非常简单，但是一点也不low。。。正如官方所说，write less，do more。降低编码成本，兼容性也更高。本篇简单说下jquery常用的点及个人的理解和学习方法。

1. How to learn

• 以上参考资料的 jquery官方教程文档 和 W3cschool入门教程浅显易懂，上手的时候看这两个基本就够了。至于需要用到的API，可以直接查看 官方API文档 。另外，推荐比较热门的入门书籍《锋利的jquery》。

2. About jquery

• jquery是一个JavaScript库（library）
• jquery极大地简化了JavaScript编程
• jquery解决了很多JavaScript兼容性问题以及常见的需要处理的问题

3. Install

• 本地script标签引入

// 文件从官网直接下载
<script src="jquery.js"></script>

• CDN引入

// 从www.bootcdn.cn查找引入cdn
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>

• npm引入

var $ = require("jquery");

4. syntax

$(selector).action().action().action()  // action()可以多个，这便是jQuery的chaining，chaining允许我们在一条语句中运行多个jQuery方法（在相同元素上）

• 美元符号定义jQuery，当然也可以直接使用 jQuery(selector)，这也是避免与其他库全局变量冲突的方法
• 选择符“查询”和“查找”HTML元素
• jQuery的action()执行对元素的操作

5 . API

5.1 jQuery 效果

• 示例代码

// hide()
$(selector).hide(speed,callback);
// show()
$(selector).show(speed,callback);
// toggle()
$(selector).toggle(speed,callback);
// animate()
$(selector).animate({params},speed,callback);

• 参考API表格

5.2 jQuery HTML

• 示例代码

// 回调参数由两个参数：被选元素列表中当前元素的下标，以及原始值
$("#btn1").click(function(){
  $("#test1").text(function(i,origText){
    return "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")";
  });
});

• 参考API表格

5.3 jQuery 遍历

• jQuery 遍历，意为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。

DOM节点树

• 示例代码：

// 遍历父元素
$(document).ready(function(){
  $("span").parent();
});

• 参考API表格：

5.4 jQuery AJAX

• 更多请参考 脚本化http
• 参考API表格：

6. think about jQuery

• jQuery常见面试题
• 建议：查看《JavaScript权威指南》对象、DOM、脚本化http章节