网易云课堂Nodejs笔记（js Function，css，写法)

CSS

关于css中的常用标签的写法及含义，不定期修改及增加.

position —网页定位

position标签用于对html元素进行网页定位。
position：absolute;left:;top:;right:;bottom:;用于对元素进行绝对定位，相对于static定位以外的第一个父元素进行定位。

h2
  {
  	position:absolute;
  	left:100px;
  	top:150px;
  }

position：fixed；left:;top:;right:;bottom:;用于对元素进行绝对定位，相对于浏览器窗口进行定位。

margin —元素外边距

margin：auto；浏览器自动计算元素外边距（不确定，好像可以得到元素居中效果）
margin：a b c d; 上外边距，左外边距，下外边距，右外边距

外边距的值可以为百分比，使用百分比时是基于父元素的宽度的百分比为外边距

padding —元素内边距

CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。

 h1 
  {
  	padding-top: 10px;
  	padding-right: 0.25em;
  	padding-bottom: 2ex;
  	padding-left: 20%;
   }

可以使用以上方式单独设置元素内边距，或者使用如下方式：

  p
  {
  	padding:2cm 4cm 3cm 4cm;
  }
  h1
  {
    	padding:auto;
  }

auto为自动计算内边距

nth-child()选择器 —document元素选择器

用于选择元素（元素下标从“1”开始），可以选择属于其父元素的某个子元素，与元素类型无关。理解：选择过程只看是第几个元素，而且这个元素是否是需要设置的元素。

p:nth-child(2)
{
background:#ff0000;
} //选择第二个元素，如果第二个元素为P元素，择设置它的背景颜色

p:nth-child(odd)
{
background:#ff0000;
}
//odd为匹配下标为基数的子元素
p:nth-child(even)
{
background:#0000ff;
}
//even为匹配下标为偶数的子元素

p:nth-child(3n+0)
{
background:#ff0000;
}
//这里选择器使用了公式（an+b），n为计数器从0开始，b为偏移值可以为0
//上述公式为选择所有是3的倍数的P元素

nth-os-type()选择器 —根据元素类型进行选择

根据元素类型进行选择。

p:nth-of-type(2)
{
background:#ff0000;
} //选择属于父元素的第二个P元素,如果其下由子元素，样式也会被继承
//这个选择器也有odd和even、an+b关键字，和nth-child（）选择器一样

box-shadow —box的底部阴影

使用box-shadow可以向边框的底部添加一个或多个阴影
语法：box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow与v-shadow为必选值，分别为水平阴影位置，垂直阴影位置，允许负值。blur为模糊距离，spread为阴影尺寸，color为阴影颜色，inset可将外部阴影改为内部阴影。

div
{
box-shadow: 10px 10px 5px #888888;
}

cursor ----光标样式

通过cursor可以修改光标类型或者形状
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 此光标指示可用的帮助（通常是一个问号或一个气球）。

<span style="cursor:pointer">
Pointer</span><br />

float —图像浮动

float属性用于定义元素向什么方向浮动（其实就是定义图像的文本环绕方式，大部分结合图像使用）

img 
{
float:right
}

常用属性除了right还有left（向左浮动）、none（默认，元素不浮动）。

line-height —行高

line-height用于设置行间距离（行高）

p.small {line-height:90%}
p.big {line-height:200%}
//P元素的small样式的行高为正常的90%

主要用于定义具有文本信息的控件，设置文本行高。

list-style —列表属性

这是一个简写属性，涵盖了所有其他列表样式的属性。
可以按顺序设置如下属性：

list-style-type
list-style-position
list-style-image

list-style-type

ul.circle {list-style-type:circle}
ul.square {list-style-type:square}
ol.upper-roman {list-style-type:upper-roman}
ol.lower-alpha {list-style-type:lower-alpha}
/**
	none 	无标记。
disc 	默认。标记是实心圆。
circle 	标记是空心圆。
square 	标记是实心方块。
decimal 	标记是数字。
decimal-leading-zero 	0开头的数字标记。(01, 02, 03, 等。)
lower-roman 	小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman 	大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha 	小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha 	大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek 	小写希腊字母(alpha, beta, gamma, 等。)
lower-latin 	小写拉丁字母(a, b, c, d, e, 等。)
upper-latin 	大写拉丁字母(A, B, C, D, E, 等。)
hebrew 	传统的希伯来编号方式
armenian 	传统的亚美尼亚编号方式
georgian 	传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic 	简单的表意数字
hiragana 	标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）
katakana 	标记是：A, I, U, E, O, KA, KI, 等。（日文片假名）
hiragana-iroha 	标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
katakana-iroha 	标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）
*/

list-style-position

ul
  {
  list-style-position:inside;
  }
  /**
  inside 	列表项目标记放置在文本以内，且环绕文本根据标记对齐。(放在ul内部可以简单缩进)
outside 	默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
inherit 	规定应该从父元素继承 list-style-position 属性的值。
  */

list-style-image

ul 
{
list-style-image: url('/i/eg_arrow.gif')
}
/**
URL 	图像的路径。
none 	默认。无图形被显示。
inherit 	规定应该从父元素继承 list-style-image 属性的值。
*/

z-index —元素堆叠顺序

通过z-index属性设置元素堆叠的顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素前面，z-index可以为负值，同时只能在定位元素上生效。

img
  {
  position:absolute;
  left:0px;
  top:0px;
  z-index:-1;
  }

background-size —背景图像尺寸

background-size可以设置背景图像的尺寸
语法为：
background-size: length|percentage|cover|contain;

div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}
/**
length 	设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 "auto"。

percentage 	以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 "auto"。

cover 	把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。

contain 	把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
*/

perspective —3D元素据视图的距离

（不太会使用）该属性允许改变3D元素查看3D元素的视图，当有元素定义perspective属性时，其子元素会获得透视效果，而不是元素本身。通常与perspective-origin一起使用。
语法：
perspective: number|none;

#div1
{
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding:10px;
border: 1px solid black;
perspective:150;
-webkit-perspective:150; /* Safari and Chrome */
}

perspective-origin —3D元素基点位置

通过perspective-origin属性设置3D元素的基点位置。
目前浏览器都不支持perspective-origin属性，chrome和Safari支持替代的-webkit-perspective-origin属性。
语法：
perspective-origin: x-axis y-axis;

div
{
perspective:150;
perspective-origin: 10% 10%;
-webkit-perspective:150;	/* Safari 和 Chrome */
-webkit-perspective-origin: 10% 10%;	/* Safari 和 Chrome */
/**
默认值：50%。

可能的值：

    left
    center
    right
    length
    %

*/
}

transform —3D元素

transform 属性向元素应用 2D 或 3D 转换。该属性允许对元素进行旋转、缩放、移动或倾斜。

div
{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(9deg);
-ms-transform:rotate(9deg); /* Internet Explorer */
-moz-transform:rotate(9deg); /* Firefox */
-webkit-transform:rotate(9deg); /* Safari 和 Chrome */
-o-transform:rotate(9deg); /* Opera */
}

none 定义不进行转换。
matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y) 定义 2D 转换。
translate3d(x,y,z) 定义 3D 转换。
translateX(x) 定义转换，只是用 X 轴的值。
translateY(y) 定义转换，只是用 Y 轴的值。
translateZ(z) 定义 3D 转换，只是用 Z 轴的值。
scale(x,y) 定义 2D 缩放转换。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle) 定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
perspective(n) 为 3D 转换元素定义透视视图。

transition —过渡效果

用于设置元素高度或宽度形状变更时的过渡效果。
transition 属性是一个简写属性，用于设置四个过渡属性：

transition-property
transition-duration
transition-timing-function
transition-delay

注意：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。

div
{
width:100px;
height:100px;
background:blue;
transition:width 1s;
transition-timing-function:linear;
/* Firefox 4 */
-moz-transition:width 1s;
-moz-transition-timing-function:linear;
/* Safari and Chrome */
-webkit-transition:width 1s;
-webkit-transition-timing-function:linear;
/* Opera */
-o-transition:width 1s;
-o-transition-timing-function:linear;
}

div:hover
{
width:300px;
}
//div的宽度从100px变成300px

transition-property：width/height

transitionDuration:秒/毫秒

transition-timing-function：速度曲线

linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

transition-delay：秒/毫秒（过渡前需要等待的时间）

overflow —元素溢出效果

overflow 属性规定当内容溢出元素框时发生的事情。

overflow可以使用的属性值如下：
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

box-sizing —规定元素盒模型

使用box-sizing属性可以规定页面元素盒子的模型。
目前一般使用来开头：

*,
*:after,
*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

现在box-sizing有三种属性可选
box-sizing: content-box|border-box|inherit;

content-box 这是由 CSS2.1 规定的宽度高度行为。
宽度和高度分别应用到元素的内容框。
在宽度和高度之外绘制元素的内边距和边框。

border-box 为元素设定的宽度和高度决定了元素的边框盒。
就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

inherit 规定应从父元素继承 box-sizing 属性的值。

Function

href=“javascript:;”

javascript：类似于一个伪协议，相当于嵌套js代码到网页中，执行了空来的JavaScript语句，返回空或者false，防止链接或其他形式的跳转。

判断句缩写（三目运算符）

a<b?a:b
上述式子为三目运算符，类似于缩写的判断句，如果a<b成立，则执行或返回a；如果不成立，则执行或返回b

逻辑运算

逻辑与的优先级是高于逻辑或的；

表达式a && 表达式b : 计算表达式a（也可以是函数）的运算结果，
如果为 True, 执行表达式b（或函数），并返回b的结果；
如果为 False，返回a的结果；

表达式a || 表达式b : 计算表达式a（也可以是函数）的运算结果，
如果为 Fasle, 执行表达式b（或函数），并返回b的结果；
如果为 True，返回a的结果；

转换规则:

对象为true；
非零数字为true；

零为false;

非空字符串为true；
空字符串为法false;
其他为false；

JQuery – animate（）方法 —定义动画

animate() 方法执行 CSS 属性集的自定义动画。

该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。
语法为：$(selector).animate(styles,speed,easing,callback)或者：$(selector).animate(styles,options)

$(".btn1").click(function(){
  $("#box").animate({height:"300px"});
});

Arguments对象（函数局部变量）

arguments是一个对应与床底给函数的参数的类数组对象，用来当作接收参数传递的变量，不用定义arguments的大小及个数。
arguments对象是所有（非箭头）函数中都可用的局部变量。你可以使用arguments对象在函数中引用函数的参数。此对象包含传递给函数的每个参数，第一个参数在索引0处。

箭头函数

类似于匿名函数。语法为（parameters）=> ｛statements｝

// 无参数:
() => 3.14

//一个参数
//如果只有一个参数，可以省略括号:
x=>x*x

// 两个参数:
(x, y) => x * x + y * y

// 可变参数:
(x, y, ...rest) => {
    var i, sum = x + y;
    for (i=0; i<rest.length; i++) {
        sum += rest[i];
    }
    return sum;
}

eval() 函数 —转化函数

eval函数可以计算字符串，并且执行其中的JavaScript代码。
eval可以把字符串转化为JSON串

js中把字符串转化成json的三种方式

eval方式

function strToJson(str){ 
var json = eval('(' + str + ')'); //不要忘记字符串前后的括号
return json; 
} 

new Function形式

unction strToJson(str){ 
var json = (new Function("return " + str))(); 
return json; 
} 

JQuery 中的json方法

function strToJson(str){ 
return JSON.parse(str); 
} 

replace（）方法 —字符串替换

replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
使用方法：

var str="Visit Microsoft!"
document.write(str.replace(/Microsoft/, "W3School"))//字符串替换


var str="Welcome to Microsoft! "
str=str + "We are proud to announce that Microsoft has "
str=str + "one of the largest Web Developers sites in the world."

document.write(str.replace(/Microsoft/g, "W3School"))//全局字符串替换

calc（）函数 —div高宽计算

通常使用calc（）函数动态计算长度值，运算符前后都需要保留一个空格。通常用于计算div的高宽。
语法：
calc(100% - 20px);
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 “+”, “-”, “*”, “/” 运算；
calc()函数使用标准的数学运算优先级规则；

split() 函数 —分割字符串

使用某个字符分割字符串，放回分割后的字符串数组
语法：
stringObject.split(separator,howmany)
separator 必需。字符串或正则表达式，从该参数指定的地方分割 stringObject。
howmany 可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参 数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。

"2:3:4:5".split(":")	//将返回["2", "3", "4", "5"]
"|a|b|c".split("|")	//将返回["", "a", "b", "c"]

join()函数 —数组转为字符串

使用某个字符使得数组组合成一个字符串
语法：
arrayObject.join(separator)
separator 可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

["aaa","bbb","ccc"].join();
//输出结果为:aaa,bbb,ccc

ceil()函数 —遇小数进一取整

Math中的运算函数 ，如果ceil中的变量为小数，就会想前取整。

Math.ceil(2.3)  // printf  3
Math.ceil(4.6)  // printf  5

slice()函数 —数组截取函数

使用arr.slice(num1,num2)函数可以截取数组中的某段并生成新的数组，截取方法为从下标num1取到下标为num2的前一个 。

var arr = [1,2,3,4,5,6];
arr.slice(2,4)   //  =>[3,4]

splice() 方法 —数组增加删除函数

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。使用这个函数时会改变原始数组。
参数格式如下：
arrayObject.splice(index,howmany,item1,…,itemX)

index 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany 必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, …, itemX 可选。向数组添加的新项目。

返回值为：
Array 包含被删除项目的新数组，如果有的话。

setInterval()方法 —周期循环函数

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval(()=>{
	/**需要循环的方法*/
},1000);

setInterval(function(){ alert("Hello"); }, 3000);

与之对应的是clearInterval()。
setInterval()方法可以返回一个 ID（数字），可以将这个ID传递给clearInterval()，clearTimeout() 以取消执行。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程</title>
</head>
<body>

<p>显示当前时间:</p>
<p id="demo"></p>

<button onclick="myStopFunction()">停止时间</button>

<script>
var myVar = setInterval(function(){ myTimer() }, 1000);

function myTimer() {
    var d = new Date();
    var t = d.toLocaleTimeString();
    document.getElementById("demo").innerHTML = t;
}

function myStopFunction() {
    clearInterval(myVar);
}
</script>

</body>
</html>