Paste_Image.png
jQuery是一个javascript库，它可以方便的选取HTML元素，并改变CSS样式，同时执行酷炫的动画。如何jQuery的设计初衷一样：write less, do more
在学习jQuery之前，需要对HTML、CSS和JavaScript有基本的了解，这不在本文的讨论范围之内，你可以在网上找各种教程和资料来学习。推荐菜鸟教程
01 jQuery选择器
jQuery可以选择HTML元素来改变他们的样式或者增加动画效果。jQuery选择器的基本格式为：$(selector).action()。$(selector)是选中的HTML元素，action是对选中的元素进行的动作。
通过HTML标签选择
比如选择HTML所有标签为p的元素，也就是段落，语法为$("p")
通过类class选择
比如选择类为color的元素，语法为$(".color")
通过id选择
比如选择id为name的元素，语法为$("#name")
此外，$("*")表示选中所有元素，$(this)表示选取当前HTML元素。
$(".button")表示选中button元素和type为button的input元素，而$("button")仅能选中button元素。
02 jQuery事件
jQuery事件是和用户的交互，用户用鼠标或键盘对文档元素做不同的操作，文档会根据操作渲染出不同的视图。主要事件有：
| 鼠标事件 | 键盘事件 | 表单事件 | 文档事件 |
|---|---|---|---|
| click | keypress | submit | load |
| dbclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload |
此外，还有一些比较常用的事件
$(document).ready()
$(document).ready是文档就绪事件，它让我们在文档完全加载完后才能对元素进行操作。
hover
hover事件用于模拟光标悬停事件，光标移动到元素上会发出mouseenter事件，光标离开元素会触发mouseleave事件。
03 jQuery动画
jQuery支持动画效果，可以让你的网页更加生动有趣。
hide / show / toggle
支持元素的隐藏和显示，toggle切换hide和show。都支持可选的参数：hide(speed, callback) show(speed, callback) toggle(speed, callback)。其中speed参数是动画的时间，即隐藏/显示的速度，callback是回调函数。比如$("p").show(1000, foo)的效果是：p元素用1秒的时间显示完成后，执行回调函数foo。
fadeIn / fadeOut / fadeToggle / fadeTo
fadeIn用来淡入已经隐藏的元素，fadeOut用来淡出已经显示的元素，fadeToggle用来切换fadeIn和fadeOut的效果，它们的方法都类似于：fadeIn(speed, callback),参数说明和上一小节类似。
fadeTo则可以指定渐变到哪个透明度，方法为：fadeTo(speed, opacity, callback),opacity的值为0到1之间。
slideUp / slideDown / slideToggle
slideUp用来元素的向上滑动，slideDown用来元素的向下滑动，slideToggle用来在up和down之间切换。方法和参数的说明和上一小节类似：slideUp(speed, callback)
animate
animate用于创建自定义动画。方法为：animate({params}, speed, callback) , 参数speed和callback的意义和之前一样，params定义成动画的CSS属性。你可以在params中定义多个属性：
$("p").animate(
{
left:250px, opacity:0.5, height:250px, width:150px
}
)stop
stop用来停止正在进行的动画和效果。
04 jQuery HTML
jQuery拥有操作DOM的能力，可以读取/修改HTML元素的内容。
读取HTML元素内容
text()获取元素内容
比如$("p").text()获取段落p的内容
html()获取元素的html内容，包括html标签
比如$("p").html()获取段落p的html 内容
val()获取表单内容
比如$("#test").val()获取id为test的表单内容
设置HTML元素内容
很简单，只要在text()或html()或val()括号内填入你要设置的值，就能修改选中元素的内容。比如：$("p").text("Hello world!").那么段落p的内容就变成了 Hello world!
添加 / 删除元素
append / prepend
append用于在选中元素的尾部插入元素
prepend在选中元素的头部插入元素
after / before
after用于选中元素之后插入元素
before在选中元素之前插入元素
append和after的区别在于append是在元素内，而after是在元素外，prepend和before的区别也是如此
remove / empty
remove用于删除被选元素及其子元素
empty从被选元素中删除子元素，保留被选元素
CSS类
addClass / removeClass / toggleClass
addClaass用于在选中元素上添加一个类
removeClass用于在选中元素上删除一个类
toggleClass用于在选中元素上添加和删除类的切换操作
css()
css()方法用于读取或设置选中元素的css样式。
$("p").css("background-color") 返回元素p的背景颜色
$("p").css("background-color", "yellow")设置元素p的背景颜色为黄色
$("p").css("background-color": "yellow", "height": 100px)设置元素p的多个css属性
05 jQuery遍历
jQuery对元素的遍历是根据DOM(文档对象模型)而建立的。
Paste_Image.png
图解：
div是ul的父元素，ul是div的子元素
ul有两个子元素li，两个子元素是同胞
祖先是父、祖父或曾祖父等等
后代是子、孙或曾孙等等
遍历祖先
| 方法 | 说明 |
|---|---|
| parent | 返回该元素的直接父元素 |
| parents | 返回该元素的祖先 |
| parentsUntil | 返回介于两个给定元素之间的祖先 |
遍历后代
| 方法 | 说明 |
|---|---|
| children | 返回该元素的直接子元素 |
| find | find("*")返回该元素的所有后代 |
遍历同胞
| 方法 | 说明 |
|---|---|
| sblings | 返回所有的同胞元素 |
| next | 返回下一个同胞元素 |
| prev | 返回上一个同胞元素 |
| nextAll | 返回接下来所有的同胞元素 |
| prevAll | 返回之前所有的同胞元素 |
| nextUntil | 返回两个给定元素之间的同胞元素 |
| prevUntil | 返回两个给定元素之间的同胞元素 |
遍历过滤
| 方法 | 说明 |
|---|---|
| first | 选中被选所有元素的第一个元素 |
| last | 选中被选所有元素的最后一个元素 |
| eq | eq(1)选中被选所有元素的第二个元素，索引从0开始 |
| filter | 匹配元素，比如filter(".name")选中name class类 |
| not | 不匹配元素，比如not(".name")选中非name class类 |
ENDING
作者：at小宇
链接：https://www.jianshu.com/p/e5660d47cd38