popover组件基础知识及Demo
@keyframes定义和用法
通过 @keyframes 规则，您能够创建动画。
创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。
在动画过程中，您能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。
0% 是动画的开始时间，100% 动画的结束时间。
为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。
animation,语法
animation: name duration timing-function delay iteration-count direction;
| 值 | 描述 |
|---|---|
| animation-name | 规定需要绑定到选择器的 keyframe 名称。。 |
| animation-duration | 规定完成动画所花费的时间，以秒或毫秒计。 |
| animation-timing-function | 规定动画的速度曲线。 |
| animation-delay | 规定在动画开始之前的延迟。 |
| animation-iteration-count | 规定动画应该播放的次数。 |
| animation-direction | 规定是否应该轮流反向播放动画。 |
CSS :visited 选择器
选择已访问的链接，并设置其样式：
a:visited
{
background-color:yellow;
}
CSS text-decoration 属性
| 值 | 描述 |
|---|---|
| none | 默认。定义标准的文本。 |
| underline | 定义文本下的一条线。 |
| overline | 定义文本上的一条线。 |
| line-through | 定义穿过文本下的一条线。 |
| blink | 定义闪烁的文本。 |
| inherit | 规定应该从父元素继承 text-decoration 属性的值。 |
CSS :hover 选择器
选择鼠标指针浮动在其上的元素，并设置其样式：
a:hover
{
background-color:yellow;
}
选择未访问、已访问、悬浮和活动链接，并设置它们的样式：
a:link {color:blue;}
a:visited {color:blue;}
a:hover {color:red;}
a:active {color:yellow;}
CSS3 :nth-child() 选择器
规定属于其父元素的第二个子元素的每个 p 的背景色：
p:nth-child(2)
{
background:#ff0000;
}
如果不给父元素的第一个子元素添加:nth-child(1)那么child(2)就会继承child(1)的CSS属性
CSS cursor 属性
实例
一些不同的光标：
span.crosshair {cursor:crosshair;}
span.help {cursor:help;}
span.wait {cursor:wait;}
| 值 | 描述 |
|---|---|
| url | 需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。 |
| default | 默认光标（通常是一个箭头） |
| auto | 默认。浏览器设置的光标。 |
| crosshair | 光标呈现为十字线。 |
| pointer | 光标呈现为指示链接的指针（一只手） |
| move | 此光标指示某对象可被移动。 |
| e-resize | 此光标指示矩形框的边缘可被向右（东）移动。 |
| ne-resize | 此光标指示矩形框的边缘可被向上及向右移动（北/东）。 |
| nw-resize | 此光标指示矩形框的边缘可被向上及向左移动（北/西）。 |
| n-resize | 此光标指示矩形框的边缘可被向上（北）移动。 |
| se-resize | 此光标指示矩形框的边缘可被向下及向右移动（南/东）。 |
| sw-resize | 此光标指示矩形框的边缘可被向下及向左移动（南/西）。 |
| s-resize | 此光标指示矩形框的边缘可被向下移动（南）。 |
| w-resize | 此光标指示矩形框的边缘可被向左移动（西）。 |
| text | 此光标指示文本。 |
| wait | 此光标指示程序正忙（通常是一只表或沙漏）。 |
| help | 此光标指示可用的帮助（通常是一个问号或一个气球）。 |
CSS :focus 选择器
实例
选择获得焦点的输入字段，并设置其样式：
input:focus
{
background-color:yellow;
}
选择未访问、已访问、悬浮和活动链接，并设置它们的样式：
a:link {color:blue;}
a:visited {color:blue;}
a:hover {color:red;}
a:active {color:yellow;}
文字内容标签
<em>强调文本</em><br>
<strong>加粗文本</strong><br>
<dfn>定义项目</dfn><br>
<code>一段电脑代码</code><br>
<samp>计算机样本</samp><br>
<kbd>键盘输入</kbd><br>
<var>变量</var>
JavaScript相关内容
简单实现点击按钮显示内容再点击同样按钮消失内容，点击document位置消逝内容方法
$('.popover').on('click', 'button', function(e) {
let $button = $(e.currentTarget)
let $popover = $button.parent()
$popover.toggleClass('active')
e.stopPropagation()
})
$(document).on('click',function(e){
$('.popover').removeClass('active')
})
上边方法会给document添加很多监听不是很完美
let close = function (e) {
$popup.removeClass('active')
$popup.siblings('.active').removeClass('active')
$('body').off('click', close)
}
let open = function (e) {
$popup.addClass('active')
$popup.siblings('.active').removeClass('active')
$('body').on('click', close)
}
$('.buttons').on('click', 'a', function (e) {
let $a = $(e.currentTarget)
let $index = $a.index()
let $popup = $a.parent().next().children().eq($index)
if ($popup.hasClass('active')) {
close(e)
} else {
open(e)
e.stopPropagation(e)
}
})
将close和open函数声明在click事件外这样可以避免出现重复多个close和open声明。
toggleClass() 定义和用法
toggleClass() 对设置或移除被选元素的一个或多个类进行切换。
该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。
不过，通过使用 "switch" 参数，您能够规定只删除或只添加类。
语法
$(selector).toggleClass(class,switch)
event.stopPropagation() 组织冒泡
hasClass('active')判断是否有active
通长用法是if(element,hasClass('active')){}来进行使用
jQuery 动画 - animate() 方法
jQuery animate() 方法用于创建自定义动画。
语法：
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
下面的例子演示 animate() 方法的简单应用；它把 <div> 元素移动到左边，直到 left 属性等于 250 像素为止：
假如点击button然后对父容器添加监听body，是先冒泡到body还是先监听body。答案是先监听body
button的display是 inline-block
