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标签引入

// 文件从官网直接下载

• CDN引入

// 从www.bootcdn.cn查找引入cdn

• 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表格

method	description
animate()	对被选元素应用“自定义”的动画
clearQueue()	对被选元素移除所有排队的函数（仍未运行的）
delay()	对被选元素的所有排队函数（仍未运行的）设置延迟
dequeue()	运行被选元素的下一个排队函数
fadeIn()	逐渐改变被选元素的不透明度，从隐藏到可见
fadeOut()	逐渐改变被选元素的不透明度，从可见到隐藏
fadeTo()	把被选元素逐渐改变至给定的不透明度
hide()	隐藏被选的元素
queue()	显示被选元素的排队函数
show()	显示被选的元素
slideDown	通过调整高度来滑动显示被选元素
slideToggle()	对被选元素进行滑动隐藏和滑动显示的切换
slideUp()	通过调整高度来滑动隐藏被选元素
stop()	停止被选元素上运行动画
toggle()	对被选元素进行隐藏和显示的切换

5.2 jQuery HTML

• 示例代码

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

• 参考API表格

method	description
addClass()	向匹配的元素添加指定的类名
after()	在匹配元素之后插入内容
append()	向匹配元素集合中的每个元素结尾插入由参数指定的内容
appendTo()	向目标结尾插入匹配元素集合中的每个元素
attr()	设置或返回匹配元素的属性和值
before()	在每个匹配的元素之前插入内容
clone()	创建匹配元素集合的副本
detach()	从DOM中移除匹配元素集合
empty()	删除匹配的元素集合中所有的子节点
hasClass()	检查匹配的元素是否拥有指定的类
html()	设置或返回匹配的元素集合中的HTML内容
insertAfter()	把匹配的元素插入到另一个指定的元素集合的后面
insertBefore()	把匹配的元素插入到另一个指定的元素
prepend()	向匹配元素集合中的每个元素开头插入由参数指定的内容
prependTo()	向目标开头插入匹配元素集合中的每个元素
remove()	移除所有匹配的元素
removeAttr()	从所有匹配的元素中移除指定的属性
removeClass()	从所有匹配的元素中删除全部或指定的类
replaceAll()	用匹配的元素替换所有匹配到的元素
replaceWith()	用新内容替换匹配的元素
text()	设置或返回匹配元素的内容
toggleClass()	从匹配的元素中添加或删除一个类
unwrap()	移除并替换指定元素的父元素
val()	设置或返回匹配元素的值
wrap()	把匹配的元素用指定的内容或元素包裹起来
wrapAll()	把所有匹配的元素用指定的内容或元素包裹起来
wrapinner()	将每一个匹配的元素的子内容用指定的内容或元素包裹起来
css()	设置或返回匹配元素的样式属性
height()	设置或返回匹配元素的高度
offset()	返回第一个匹配元素相对于文档的位置
offsetParent()	返回最近的定位祖先元素
position()	返回第一个匹配元素相对于父元素的位置
scrollLeft()	设置或返回匹配元素相对滚动条左侧的偏移
scrollTop()	设置或返回匹配元素相对滚动条顶部的偏移
width()	设置或返回匹配元素的宽度

5.3 jQuery 遍历

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

DOM节点树

• 示例代码：

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

• 参考API表格：

function	description
add()	将元素添加到匹配元素的集合中
andSelf()	把堆栈中之前的元素集添加到当前集合中
children()	获得匹配元素集合中每个元素的所有子元素
closest()	从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素
contents()	获得匹配元素集合中每个元素的子元素，包括文本和注释节点
each()	对jQuery对象进行迭代，为每个匹配元素执行函数
end()	结束当前链中最近的一次筛选操作，并将匹配元素集合返回到前一次的状态
eq()	将匹配元素集合缩减为位于指定索引的新元素
filter()	将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素
find()	获得当前匹配元素集合中每个元素的后代，由选择器进行筛选。
first()	将匹配元素集合缩减为集合中的第一个元素
has()	将匹配元素集合缩减为包含特定元素的后代的集合
is()	根据选择器检查当前匹配元素集合，如果存在至少一个匹配元素，则返回true
last()	将匹配元素集合缩减为集合中的最后一个元素
map()	把当前匹配集合中每个元素传递给函数，产生包含返回值的新jQuery对象
next()	获得匹配元素集合中每个元素紧邻的同辈元素
nextAll()	获得匹配元素集合中每个元素之后的所有同辈元素，由选择器进行筛选
nextUntil()	获得每个元素之后所有的同辈元素，直到遇到匹配选择器的元素为止。
not()	从匹配元素集合中删除元素
offsetParent()	获得用于定位的第一个父元素
parent()	获得当前匹配元素集合中每个元素的父元素，由选择器筛选（可选）
parents()	获得当前匹配元素集合中每个元素的祖先元素，由选择器筛选（可选）
parentsUntil()	获得当前匹配元素集合中每个元素的祖先元素，直到遇到匹配选择器的元素为止
prev()	获得匹配元素集合中每个元素紧邻的前一个同辈元素，由选择器筛选（可选）
prevAll()	获得匹配元素集合中每个元素之前的所有同辈元素，由选择器进行筛选（可选）
prevUntil()	获得每个元素之前所有的同辈元素，直到遇到匹配选择器的元素为止
siblings()	获得匹配元素集合中所有元素的同辈元素，由选择器筛选（可选）
slice()	将匹配元素集合缩减为指定范围的子集

5.4 jQuery AJAX

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

function	description
jQuery.ajax()	执行异步HTTP（Ajax）请求
.ajaxComplete()	当Ajax请求完成时注册要调用的处理程序，这是一个Ajax事件
.ajaxError()	当Ajax请求完成时出现错误时注册要调用的处理程序
.ajaxSend()	当Ajax请求发送之前显示一条信息
jQuery.ajaxSetup()	设置将来的Ajax请求的默认值
.ajaxStart()	当首个Ajax请求完成开始时注册要调用的处理程序，这是一个Ajax事件
.ajaxStop()	当所有Ajax请求完成时注册要调用的处理程序，这是一个Ajax事件
.ajaxSuccess()	当Ajax请求成功完成时显示一条消息
jQuery.get()	使用HTTP GET请求从服务器加载数据
jQuery.getJSON()	使用HTTP GET请求从服务器加载JSON编码数据
jQuery.getScript()	使用HTTP GET请求从服务器加载JavaScript文件，然后执行该文件
.load()	从服务器加载数据，然后把返回到HTML放入匹配元素
jQuery.param()	创建数据或对象的序列化表示，适合在URL查询字符串或Ajax请求中使用
jQuery.post()	使用HTTP POST 请求从服务器加载数据
.serialize()	将表单内容序列化为字符串
.serializeArray()	序列化表单元素，返回JSON数据结构数据

6. think about jQuery

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