Css3

选择器	示例		示例说明						CSS
.class	.intro	选择所有class="intro"的元素	1
#id	#firstname	选择所有id="firstname"的元素	1
*	*	选择所有元素	2
element	p	选择所有<p>元素	1
element,element	div,p	选择所有<div>元素和<p>元素	1
element element	div p	选择<div>元素内的所有<p>元素	1
element>element	div>p	选择所有父级是 <div> 元素的 <p> 元素	2
element+element	div+p	选择所有紧接着<div>元素之后的<p>元素	2
[attribute]	[target]	选择所有带有target属性元素	2
[attribute=value]	[target=-blank]	选择所有使用target="-blank"的元素	2
[attribute~=value]	[title~=flower]	选择标题属性包含单词"flower"的所有元素	2
[attribute|=language]	[lang|=en]	选择 lang 属性以 en 为开头的所有元素	2
:link	a:link	选择所有未访问链接	1
:visited	a:visited	选择所有访问过的链接	1
:active	a:active	选择活动链接	1
:hover	a:hover	选择鼠标在链接上面时	1
:focus	input:focus	选择具有焦点的输入元素	2
:first-letter	p:first-letter	选择每一个<P>元素的第一个字母	1
:first-line	p:first-line	选择每一个<P>元素的第一行	1
:first-child	p:first-child	指定只有当<p>元素是其父级的第一个子级的样式。	2
:before	p:before	在每个<p>元素之前插入内容	2
:after	p:after	在每个<p>元素之后插入内容	2
:lang(language)	p:lang(it)	选择一个lang属性的起始值="it"的所有<p>元素	2
element1~element2	p~ul	选择p元素之后的每一个ul元素	3
[attribute^=value]	a[src^="https"]	选择每一个src属性的值以"https"开头的元素	3
[attribute$=value]	a[src$=".pdf"]	选择每一个src属性的值以".pdf"结尾的元素	3
[attribute*=value]	a[src*="runoob"]	选择每一个src属性的值包含子字符串"runoob"的元素	3
:first-of-type	p:first-of-type	选择每个p元素是其父级的第一个p元素	3
:last-of-type	p:last-of-type	选择每个p元素是其父级的最后一个p元素	3
:only-of-type	p:only-of-type	选择每个p元素是其父级的唯一p元素	3
:only-child	p:only-child	选择每个p元素是其父级的唯一子元素	3
:nth-child(n)	p:nth-child(2)	选择每个p元素是其父级的第二个子元素	3
:nth-last-child(n)	p:nth-last-child(2)	选择每个p元素的是其父级的第二个子元素，从最后一个子项计数	3
:nth-of-type(n)	p:nth-of-type(2)	选择每个p元素是其父级的第二个p元素	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择每个p元素的是其父级的第二个p元素，从最后一个子项计数	3
:last-child	p:last-child	选择每个p元素是其父级的最后一个子级。	3
:root	:root	选择文档的根元素	3
:empty	p:empty	选择每个没有任何子级的p元素（包括文本节点）	3
:target	#news:target	选择当前活动的#news元素（包含该锚名称的点击的URL）	3
:enabled	input:enabled	选择每一个已启用的输入元素	3
:disabled	input:disabled	选择每一个禁用的输入元素	3
:checked	input:checked	选择每个选中的输入元素	3
:not(selector)	:not(p)	选择每个并非p元素的元素	3
::selection	::selection	匹配元素中被用户选中或处于高亮状态的部分	3
:out-of-range	:out-of-range	匹配值在指定区间之外的input元素	3
:in-range	:in-range	匹配值在指定区间之内的input元素	3
:read-write	:read-write	用于匹配可读及可写的元素	3
:read-only	:read-only	用于匹配设置 "readonly"（只读） 属性的元素	3
:optional	:optional	用于匹配可选的输入元素	3
:required	:required	用于匹配设置了 "required" 属性的元素	3
:valid	:valid	用于匹配输入值为合法的元素	3
:invalid	:invalid	用于匹配输入值为非法的元素	3

值			描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。
compact	CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker	CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table	此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table	此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group	此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group	此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group	此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row	此元素会作为一个表格行显示（类似 <tr>）。
table-column-group	此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column	此元素会作为一个单元格列显示（类似 <col>）
table-cell	此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption	此元素会作为一个表格标题显示（类似 <caption>）
inherit	规定应该从父元素继承 display 属性的值。

display:flex

 .box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

nowrap（默认）：不换行。
wrap：换行，第一行在上方。

wrap-reverse：换行，第一行在下方。 ![](http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071009.jpg)

order
flex-grow
flex-shrink
flex-basis
flex
align-self

.card{
width: 300px;
height: 400px;
perspective: 800px;
}

function init(){
    $(".cards").children().each(function (index) {
        $(this).click(function () {
            $(this).toggleClass("card-flipped");
        });
    });
}

.front{
    background: #eaa;
    transform: rotate3d(0,1,0,-180deg);
    z-index: 8;
}
.back{
    background: #966;
    z-index: 10;
}
.card-flipped .back{
    transform: rotate3d(0,1,0,180deg);
    z-index: 8;
}
.card-flipped .front{
    transform: rotate3d(0,1,0,0deg);
    z-index: 10;
}

$('#test').children().eq(1).css({'display':'inline-block'}); 　　

$(".card:nth-child(2)").clone().appendTo(".cards");

值					描述
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom	如果仅指定一个关键字，其他值将会是"center"

x% y%	第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是
100％100％。如果仅指定了一个值，其他值将是50％。 。默认值为：0％0％

xpos ypos	第一个值是水平位置，第二个值是垂直。左上角是0。单位可以
是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是
50％。你可以混合使用％和positions

        var test1=document.getElementById("test1");
        var test2=document.getElementById("test2");
        test1.addEventListener("click", show, false);//给第一个按钮注册了onclick事件
        /*test2.onclick=function(){//解除第一个按钮的onclick事件(方法一)
            test1.removeEventListener("click", show, false);
        }*/
        test2.addEventListener("click", function(){//解除第一个按钮的onclick事件(方法二)
            test1.removeEventListener("click", show, false);
        }, false);
    }

  const BOX_CHANGE_TIME = 1000; //页面动画的过渡时间
  if (window.addEventListener) //FF,火狐浏览器会识别该方法
    window.addEventListener('DOMMouseScroll', slideEvent, false);
  window.onmousewheel = function (event) {
    if (flag) { //  防止多次滚轮滚动多个页面，保证在上个页面动画结束后，发生下一个页面
      flag = false;
      slideEvent(event);
      setTimeout(function () {
        flag = true;
      }, BOX_CHANGE_TIME)
    }
  }
  for (let i = 0; i < list.length; i++) {
    list[i].addEventListener('click', function () {
      index = i - 1
      slideEvent(event)
    })
  }
 
  function slideEvent(event) {
    clearTimeout(timer); //不会一次滚动触发多次事件
    timer = setTimeout(function () {
      e = event || window.event;
      // IE、chrome监听的是wheelDelta,向下滚动其值为-120；向上滚动其值为120
      if (e.wheelDelta) {
        Delta = e.wheelDelta / 120;
        //火狐浏览器监听的是detail,向下滚动其值为3；向上滚动其值为-3
      } else if (e.detail) {
        Delta = -e.detail / 3; //取负数，以保证符号相同
      }
      if (Delta > 0) { //向上
        index = (index === 0 ? 0 : --index);
      } else { //向下
        index = (index === childLength - 1 ? childLength - 1 : ++index);
        if (index > 3) {
          index = 3;
        }
      }
      for (let i = 0; i < childLength; i++) {
        boxChild[i].style.top = (i - index) * 100 + "%";
      }
      for (let i = 0; i < libg.length; i++) {
        libg[i].style.display = 'none';
      }
      libg[index].style.display = 'block'
    }, 100);
  }

属性	描述
accesskey	规定激活元素的快捷键。
class		规定元素的一个或多个类名（引用样式表中的类）。
contenteditable	规定元素内容是否可编辑。
contextmenu	规定元素的上下文菜单。上下文菜单在用户点击元素时显示。
data-*		用于存储页面或应用程序的私有定制数据。
dir			规定元素中内容的文本方向。
draggable	规定元素是否可拖动。
dropzone	规定在拖动被拖动数据时是否进行复制、移动或链接。
hidden		规定元素仍未或不再相关。
id			规定元素的唯一 id。
lang		规定元素内容的语言。
spellcheck	规定是否对元素进行拼写和语法检查。
style		规定元素的行内 CSS 样式。
tabindex	规定元素的 tab 键次序。
title		规定有关元素的额外信息。
translate	规定是否应该翻译元素内容。

选择器	描述
[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。
[attribute~=value]	用于选取属性值中包含指定词汇的元素。
[attribute|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute*=value]	匹配属性值中包含指定值的每个元素。

实例
3 秒（3000 毫秒）后弹出 "Hello" :
setTimeout(function(){ alert("Hello"); }, 3000);

localStorage.setItem("lastScore", cardgame.elapsTime);
 	var lastScore = parseInt(localStorage.getItem("lastScore"));

localStorage["lastScore"]=cardgame.elapsTime;
var lastScore = parseInt(localStorage["lastScore"]);

JSON.stringify(obj);//对象序列化为字条串
var lastScoreObj = JSON.parse(lastScore);//解析对象