----------------------------学习工作点滴记录----------------------
一、IE分别针对IE6、7、8样式表达
1、IE6：_height:20px;
2、IE7：*height:20px;
3、IE8:height:20px\9;
二、强制整型：parseInt(); 浮点：parseFloat();
三、
1、伪类，清楚浮动：.wrapfix:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
2、添加标签清空浮动 <div class="claerfox"></div>
3、在父容器中加 overflow:hidden;
4、<html dir="rtl">|<body dir="rtl" >：从右到左布局，dir="ltr":从左到右
四、解决 IE6下双倍间距：display:inline;
五、媒体查询：
引用外界样式文件：<link rel="stylesheet" type="text/css" media="screen and（min-width:600px） and(max-width:900px）" href="css/css.css" />
1、大于600px 小于900px :@media screen and(min-width:600px) and (max-width:900px){ 选择器{属性：属性值；} }
2、小于600px :@media screen and(max-width:600px){ 选择器{属性：属性值；} }
3、大于600px :@media screen and(min-width:600px){ 选择器{属性：属性值；} }
六、1、盒模型：
.box{display:box; display:-moz-box; display:-webkit-box; display:-o-box;} //父容器声明属性
.child1{box-flex:1; -moz-box-flex:1; -webkit-box-flex:1; -o-box-flex:1;width:0%; } //子容器声明在父容器占有空间大小 box-flex:比率,解决容器比率失调加：width:0%;
2、多栏多列布局：.box{display:flex;flex-flow:row|column;}//flex-flow:row;从左往右一栏布局，flex-flow:column;从上往下一列布局
.child1{flex:1;}//父容器总宽-child2宽度，的1/3
.child2{width:60%;}//父容器宽度的60%；
.child3{flex:2;}//父容器总宽-child2宽度，的2/3（是child1宽度的2倍）
七、设置背景图片大小：background-size:10px 10px; //长、宽为10px;
八、文字投影：text-shadow:5px 5px 2px red; //分别为x轴投影、y轴投影、模度、投影颜色
十、强行换行：word-wrap:break-word; word-break:break-all; 限制换行：white-space:nowrap; 文字间距：letter-spacing:8px;
一行显示，多出省略号：overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
十一、2D转换：
A、transition:
1、property:规定应用过渡的 CSS 属性的名称
2、duration:定义过渡效果花费的时间。默认是 0
3、timing-function：规定过渡效果的时间曲线。默认是 "ease"
4、delay:规定过渡效果何时开始。默认是 0
B、transform:
1、transform：rotate(30deg);//顺时针旋转30度
2、transform:translate(30px,60px);//从当前位置移动，根据给定的left(x位置)和top（y位置）位置参数
3、transform:scale(1,2);//把宽度转换为原始尺寸的 1 倍，把高度转换为原始高度的 2 倍
4、transform:skew(30deg,20deg);围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度
5:
div
{
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}
div:hover
{
width:200px;height:200px;transform:rotate(360deg);transform:rotate(360deg);-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg); //当鼠标移上div，在2s内，宽度变为200px,高度变为200px,并旋转360度；鼠标移出，恢复原来状态
}
十二、动画：
1、css3 @keyframes 规则：
@keyframes name{
0%{}
100%{}
} //样式改变从0%到100%
2 、animation:
①name:规定 @keyframes 动画的名称
②duration:规定动画完成一个周期所花费的秒或毫秒。默认是 0
③timing-function:规定动画的速度曲线。默认是 "ease"
④delay:规定动画何时开始。默认是 0
⑤iteration-count:规定动画被播放的次数。默认是 1
⑥direction:规定动画是否在下一周期逆向地播放。默认是 "normal"
⑦play-state:规定动画是否正在运行或暂停。默认是 "running"
⑧fill-mode:规定对象动画时间之外的状态
十三、@import url(css文件路径);
十四、$(this).index();//获取元素下标
十五、谷歌、火狐浏览器设置背景颜色渐变：
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ce2e10), to(#961c11));
background: -moz-linear-gradient(top, #ce2e10, #961c11);
十六、访问本机域名：http://www.molink.net:3535/ 192.168.0.37
十七、兼容IE6透明写法： filter:alpha(opacity:0); 兼容IE7样式：.css{width:100px!important;}
十八、英文首字母大写：text-transform:capitalize;
十九、white-space：nowrap; //表示文本不会换行，在同一行继续，直到遇到标签为止；
overflow：hidden; //不显示超过对象尺寸的内容，就是把超出的部分隐藏了；
text-overflow：ellipsis; //当文本对象溢出是显示...，当然也可是设置属性为clip不显示点点点；
<link rel="shortcut icon" type="image/png" href="images/icon/logo_com2.png"/> //网页标题栏添加图标
二十、释放IP：ipconfig/release 重获IP：ipconfig/renew
本地网关：192.168.100.1 DNS：202.96.134.133
二十一、.name{width:npx !important;}//!important 样式优先级最高
二十二、1、国际化常量：{：L（"key"）}
2、国际化变量（js）：lang_objct.key
3、定义： 'LIVE_SHOW_TITLE':'{$hostName}的hallostar视频直播间，聊天室'
使用：{:L('LIVE_SHOW_TITLE',array('hostName'=>'小美女'))}
定义:'LIVE_SHOW_DESCRIPTION'：'欢迎来到{$hostTitle}，我是{$hostName}（{$hostId}）'
使用：{:L('LIVE_SHOW_DESCRIPTION',array('hostTitle'=>'小美女的直播间'，'hostName'=>'小美女'，'hostId'=>'210558'))}
二十三、jquery常用属性、方法：
1.Math.round(num);//四舍五入，取整 Math.random()//返回0-1之间的随机数 Math.max(1,10)//返回10，两数最大的 Math.min(1,10)//返回1，两数最小的 Math.floor(x) //小于等于 x，且与 x 最接近的整数
2.windown.location="http://www.hao123.com";//当前页面跳转到www.hao123.com网站
3.windown.open("http://www.hao123.com");//重新打开页面，到www.hao123.com
4.<body onload="name()">//打开页面，即调用方法
jQuery有3种针对文档加载的方法
$(document).ready(function() {
// ...代码...
})
//document ready 简写
$(function() {
// ...代码...
})
$(document).load(function() {
// ...代码...
})
5、push():往数组里添加元素 delete array[n]：删除数组中的元素 delete obj[key]:删除对象中的值
6、jquery获取html元素的绝对位置坐标和相对父元素的位置坐标方法：
绝对位置坐标：$("#elem").offset().top； $("#elem").offset().left；
相对父元素的位置坐标：$("#elem").position().top； $("#elem").position().left；
7、在input标签加入代码，使之失去和获得焦点显示提示语： onfocus="this.value=''" onblur="if(!value){value=defaultValue;}"
type="text" value="请输入关键字"
alert('浏览器名称：' + navigator.appName);
alert('浏览器版本：' + navigator.appVersion);
alert('浏览器用户代理字符串：' + navigator.userAgent);
alert('浏览器所在的系统：' + navigator.platform);
8、判断元素是否为隐藏：if($("#id").is(":visible") == false){alert("hidden");}
9、input text输入框:placeholder="value" 没输前，提示value,输入后显示输入后的内容
10、去除input自带样式：input{-webkit-appearance:none;}
二十四、网页标题添加小图标：<link rel="icon" type="images/loading" href="images/pic.png">
二十五、IE背景透明设置：_filter: progid: DXImageTransform.Microsoft.Alpha(style=0, opacity=30);
opacity: .3;
filter: alpha(opacity=30);
-moz-opacity: .3;
-webkit-opacity: .3;
不懂技术的人不要对懂技术的人说这很容易实现：
http://www.vaikan.com/im-sure-it-will-only-take-you-a-few-days-to-code/
二十六、CSS3:
1、box-sizing:border-box; 规定内边距和边框算在宽、高里面
旧主播房间：
title:{:L('system_home_title')}
inline-blcok:http://ued.taobao.org/blog/2012/08/inline-block/
二十七、1、direction: rtl;//从右往左布局 2、letter-spacing：10px;//字符间距
二十八、font简写：
1、简写时，font-size和line-height只能通过斜杠/组成一个值，不能分开写。
2、顺序不能改变.这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight, font-style, 以及 font-varient ，他们会使用缺省值
二十九、书签链接：
1、<a name="menu">目录</a> <a href="#menu">文字</a>//通过点击文字，跳转到“目录”位置
2、<a href="链接文件地址#书签名称">链接文字</a>//链接到其他页面书签
3、当使用绝对定位，设置a标签宽高，标签无内容，在IE浏览器无法点击，添加属性：background:url(about:blank)或background:url(#)
三十、 1、table:border="0" cellspacing="0" cellpadding="0" //初始化表格边框，边距为0， table-layout:fixed; //table添加改样。td不会随内容大小改变 border-collapse:collapse;合并边框为一条
2、colspan:单元格水平跨度 rowspan:单元格垂直跨度 align:left/center/right //单元格对齐方式 valign:top/middle/bottom //单元格垂直对齐方式
3,当第一行合并单元格，为使第二行单元格能设置宽度不受第一行影响，得在表格第一行添加一下代码：
<colgroup>
<col width="80"></col>
<col ></col>
</colgroup>
三十一、1、滚动文字：<marquee onmouseover="this.stop()" onmouseout="this.start()">滚动文字</marquee>
behavior:scroll/slide/alternate //滚动方式 direction:up/left/right/bottom //滚动方向
2、背景音乐：<bgsound src="背景音乐地址" loop="循环次数" /> //无限循环
3、<ol start="5">内容</ol>//从5开始编号
三十二、1、video:a、psoter="can.jpg" //当视频无法播放时，显示图片
<video>
<source src="" type="vudeo/ogg">
</video>
//播放source视频文件，播放支持的
2、canvas //默认宽高：300x150
三十三、阻止冒泡事件：event.stopPropagation();
function stopEvent(){ //阻止冒泡事件
//取消事件冒泡
var e=arguments.callee.caller.arguments[0]||event; //若省略此句，下面的e改为event，IE运行可以，但是其他浏览器就不兼容
if (e && e.stopPropagation) {
// this code is for Mozilla and Opera
e.stopPropagation();
} else if (window.event) {
// this code is for IE
window.event.cancelBubble = true;
}
}
三十四、重载页面：location.reload();
三十五、替换当前页面：location.replace("http://www.hao123.com");
三十六、禁止网站内容复制：
<script>
document.oncontextmenu=new Function('event.returnValue=false;');
document.onselectstart=new Function('event.returnValue=false;');
</script>
三十七、contenteditable="true" 使元素可编辑
三十八、www.responsinator.com ：在线测试手机网页
三十九、/*@cc_on
@if(@_jscript)
//这里的代码在一条条件注释中，也在一条常规的JavaScript注释中
//IE会执行这段代码，其他浏览器不执行它
alert("You are using Internet Explorer");
@else*/
//这段代码并没有在JavaScript注释中，但仍然在IE条件注释中
//也就是说除了IE之外的所有浏览器都执行这里的代码
alert("You are not using Internet Explorer");
/*@end
@*/
四十、改变<input type="text" placeholder="value">的初始颜色
适应谷歌浏览器 input::-webkit-input-placeholder{color:red;}
适应火狐浏览器 input::-moz-placeholder{color:red;} /* Mozilla Firefox 19+ */
input:-moz-placeholder{color:red;} /* Mozilla Firefox 4 to 18 */
适应IE10+浏览器 input:-ms-input-placeholder{color:red;}
四十一、用rem 设置字体：
html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}
四十二、规定显示n行字体，超过n行内容省略号显示：
div{
overflow:hidden;
display:-webkit-box;
-webkit-line-clamp:n;
-webkit-box-orient:vertical;
}
四十三、preventDefault() 方法阻止元素发生默认的行为=>防止点击a链接发生跳转
$("a").click(function(event){
event.preventDefault();
});
四十四、IE设置最小高度或宽度
#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}
四十五、将元素设置表格类型：使内容垂直居中：display: table-cell;vertical-align: middle;
四十六、plugin: 表单验证插件：validate
四十七、元素单位：px,em,rem,vw,vh
px:像素，固定单位，统一网页量度单位
em:相对单位，相对父元素字体大小而定。（parent{font-size:12px;=> 1rem = 12px;}）
rem ：相对单位，相对根元素html。（html{font-size:12px;} = > 1rem = 12px;）
vw :1vw = 1/100; 相当百分比单位。若viewpoint 宽度为640px,1vw = 640/100px;
vh :1vh = 1/100;相当百分比单位。若viewpoint 高度为700px;1vh = 700/100px;
四十八、弹性盒子，对其方式：-webkit-align-items: center;justify-content: center;
-webkit-box-pack: center;
-webkit-box-align: center;
四十九、微信开发常见问题解决办法：
1、winphone系统a、input标签被点击时产生的半透明灰色背景去掉
<meta name="msapplication-tap-highlight" content="no">
2、关闭iOS键盘首字母自动大写
<input type="text" autocapitalize="off" />
3、禁止文本缩放
html{
-webkit-text-size-adjust: 100%;
}
4、移动端如何清除输入框内阴影（ios 默认输入框有阴影）
input,textarea {
border: 0;
-webkit-appearance: none;
}
5、忽略页面的数字为电话，忽略email识别
<meta name="format-detection" content="telephone=no, email=no"/>
6、移动端禁止选中内容
div {
-webkit-user-select: none;
}
7、如何禁止保存或拷贝图像
img {
-webkit-touch-callout: none;
}
Geek Uninstaller
8、解决字体在移动端比例缩小后出现锯齿的问题：
-webkit-font-smoothing: antialiased;
9、开启硬件加速、解决页面闪白、保证动画流畅
.css {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
10、/*去掉手持设备点击时出现的透明层*/
a,em,input,button{
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-tap-highlight-color:transparent;/*For some Androids*/
}
五十、JQ:Deferred:延时执行
var dtd = $.Deferred(); // 定义延时对象
dtd.resolve(); //手动改变deferrd的运行状态为“已完成”，从而立即出发done()方法；
return dtd; // 返回dtd对象
五十一、H5 头部定义：
1、设置编码类型：<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
简写：<meta charset="utf-8">
2、手机端禁止页面缩放：<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0">
文档宽度等于设备宽度，文档与设备宽度保持1:1，禁止缩放
3、对电话或email的识别：
a.<meta name="format-detection" content="telephone=no"> //忽略数字为电话号码
b.<meta name="format-detection" content="email=no"> //忽略email
c.<meta name="format-detection" content="telephone=no, email=no"> //并写
4、no-cache缓存控制：<meta http-equiv="Cache-Control" content="no-cache"> //有些Wap浏览器不支持
5、其他：
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
五十二、全局滚动：滚动内容在body或更高层节点 => 流畅，支持弹性滚动
局部滚动：滚动在body内的某个节点 =>滚动不自然，不支持弹性
要在body内的dom滚动流畅以及支持弹性滚动，body{-webkit-overflow-scrolling:touch;}
五十三、<input type="text" pattern="[0-9]*">:只是输入数字键盘
关闭首字母大写：<input type="text" autocapitalize="of">
关闭输入纠错：<input type="text" autocorrect="off">
五十四、文字与图表垂直居中:弹性布局父元素 parent{
display:-webkit-box;display:box;
display:-webkit-flex;dispaly:flex;
-webkit-box-align:center;
box-align:center;
-webkit-align-items:center;
align-items:center;
}//图片所在容器display:block;
五十五、使用rem开发h5页面：
!function(n){
var e = n.document,
t = e.documentElement,
i = 640,
d = i/100,
o = "orientationchange"in n?"orientationchange":"resize",
a = function(){
var n = t.clientWidth||320;n>640&&(n=640),
t.style.fontSize=n/d+"px";
};
e.addEventListener&&(n.addEventListener(o,a,!1),
e.addEventListener("DOMContentLoaded",a,!1));
}(window);
五十六、JSON对值的类型和格式有严格的规定。
1、复合类型的值只能是数组或对象，不能是函数、正则表达式对象、日期对象。
2、简单类型的值只有四种：字符串、数值（必须以十进制表示）、布尔值和null（不能使用NaN, Infinity, -Infinity和undefined）。
3、字符串必须使用双引号表示，不能使用单引号。
4、对象的键名必须放在双引号里面。
5、数组或对象最后一个成员的后面，不能加逗号。
五十七、javascript中容易忘记以及混淆的方法：
1、substring(),slice(),substr(),split()
substring(start,stop):用于提取字符串介于两个指定下标之间的字符
slice(start,end):可提取字符串的某部分，并以新的字符串返回被提取的部分
substr(start,length):可在字符串中抽取从 start 下标开始的指定数目的字符
split(separator,howmany):用于把一个字符串分割成字符串数组
splice(index,howmany,itme1,...,itemx):从index开始，删除howmany个数组项，用新的itme来代替
2、concat():连接两个或多个数组
arrayObject.concat(arrayX,arrayX,......,arrayX)；
3、call()/apply()方法：
a.call(b,arg1,arg2,...) // a对象方法中this指向当前的b对象方法，argn表示参数
a.apply(b,arguments) //a对象方法中this指向当前的b对象方法，arguments表示数组
4、JSON.parse(str) //将字符串对象转换成对象
5、JSON.stringify(obj) //将对象转换成字符串
6、array.reverse() //将数组反过来
7、array.sort(function(a,b){return b-a}) //将数组从大到小排列
五十八、微信小程序开发：
1、app.json,下级页面应该写在对上上级页面后面
2、所有json文件都不能写注释
3、wxss中引入样式 ： @import "common.wxss";
4、出现脚本错误或者未正确调用 Page()
a、js文件中写入 Page({});
5、<view bindtap="change" data-id="007"></view>
a、change:function(event){
var id = event.cutrrentTarget.dataset.id;
}
五十九、nodejs:
1、Node.js 构建在V8 Javascript 引擎之上
2、Node.js由Ryan Dahl创建
3、并发：一次做多件事情的能力
4、npm:Node.js包管理器。它允许开发人员在Node.js应用程序中创建、共享并重用模块。
