参考资料
引言：不得不承认，麻雀虽小，五脏俱全。jquery库虽然上手非常简单，但是一点也不low。。。正如官方所说，write less，do more。降低编码成本，兼容性也更高。本篇简单说下jquery常用的点及个人的理解和学习方法。
1. How to learn
2. About jquery
- jquery是一个JavaScript库（library）
- jquery极大地简化了JavaScript编程
- jquery解决了很多JavaScript兼容性问题以及常见的需要处理的问题
3. Install
// 文件从官网直接下载
<script src="jquery.js"></script>
// 从www.bootcdn.cn查找引入cdn
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
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);
| 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 + ")";
});
});
| 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 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。
// 遍历父元素
$(document).ready(function(){
$("span").parent();
});
| 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
| 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
