现整理一下经常用到的一些属性啥的，以便后期直接copy，哈哈~
1、让html支持手机浏览器：
在网页<head></head>中加入以下代码，就可以正常显示了：
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
可以把上面的代码更改为以下代码，效果是一样的：
<meta content="width=device-width,user-scalable=no" name="viewport">
2、给body设置整屏幕背景：
<body>
<div style="position:absolute; left:0px; top:0px; width:100%; height:100%">
<img src="pictures/background.jpg" width="100%" height="100%"/>
</div>
</body>
注：如果想让图片不随浏览器右边滚动条滚动，就用position:fixed属性。
3、让图片在一行居中显示
在包裹img的父元素上添加text-align: center;属性。
<div style="background: #FFAC42;text-align: center;">
<img src="images/icon_square.jpg" style="width: 7rem;height: 7rem;border: 1px solid #d3d3d3;border-radius: 3.5rem;"/>
</div>
4、想让提示性的文字placeholder变色：
input {
color: rgb(250, 219, 173);
}
input::-webkit-input-placeholder { /*Webkit browsers*/
color: rgba(250, 219, 173, 0.5);
}
input:-moz-placeholder { /*Mozilla Firefox 4 to 18*/
color: rgba(250, 219, 173, 0.5);
}
input::-moz-placeholder { /*Mozilla Firefox 19+*/
color: rgba(250, 219, 173, 0.5);
}
input:-ms-input-placeholder { /*Internet Explorer 10+*/
color: rgba(250, 219, 173, 0.5);
}
5、使用rem：
html{
/*谷歌浏览器写62.5%会有一点兼容问题，为了谷歌.改一下倍率吧.*/
/*100 ÷ 16 × 100% = 625%,大多数浏览器的默认字号是16px，因此原来的1rem=16px，设置之后0.16rem=16px*/
font-size: 625%;
font-family: "微软雅黑";
}
body{
/*其实就当16px这么用了.因为设置了625%直接减去两位就可以按px方法做了*/
font-size: 0.16rem;
}
6、设置边框以及边框弧度：
border-radius: 10px;//圆角边框：参数表示圆角边框大小度数
border: 2px solid blue;//边框粗细为2px且边框颜色为蓝色
7、设置button能否可点击状态：
disabled=true表示不可点击。
<button id="getCode" >获取验证码</button>
<button disabled="disabled">此时按钮不可点击</button>
$("#getCode").attr("disabled",true);//不可点击状态
$("#getCode").attr("disabled",false);//可点击状态
8、在ios手机上点击后背景有颜色，解决办法：
在响应的元素上添加以下样式：
-webkit-tap-highlight-color:rgba(0,0,0,0);
9、让一个图片放在整屏幕的垂直水平居中位置：
<img class="imgCenter" src="images/3.jpg"/>
.imgCenter {
width: 310px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
10、让一个div垂直水平居中：
让子元素设置为绝对布局，然后上下左右都设置为0，margin设置为auto即可实现居中。
html结构：
<div class="wrapper">
<div class="content"></div>
</div>
css样式：
.wrapper {
position: relative;
width: 500px;
height: 500px;
border: 1px solid red;
}
.content {
position: absolute;
width: 200px;
height: 200px;
/*top、bottom、left和right 均设置为0*/
top: 0;
bottom: 0;
left: 0;
right: 0;
/*margin设置为auto*/
margin: auto;
border: 1px solid green;
}
效果如下：
11、去掉链接的下划线：
a{text-decoration :none}
12、去掉列表的小圆点：
ul{list-style-type:none;}
13、jquery获取时间戳（注意不要忘了引入jquery的类库）：
var timestamp4 = $.now();
//获取的是当前时间精确到毫秒级的时间戳，实际用的时候要除以1000取整
console.log(timestamp4);
14、js控制台输出：
console.log("test");
console.log("test-----",obj);
15、object对象转换成json字符串：
var param = new Object();
param.a = "aaa";
param.b = 520;
console.log(JSON.stringify(param));//控制台输出'{"a":"aaa","b":520}'
16、jQuery中获取单选框选中的值：
<div>
<input type="radio" value="苹果aaa" name="like_fruit">苹果
<input type="radio" value="香蕉bbb" name="like_fruit">香蕉
<input type="radio" value="橙子ccc" name="like_fruit">橙子
<input type="radio" value="芒果bbb" name="like_fruit">芒果
</div>
<btn id="btn">点击我查看单选的内容</btn>
<script src="common/js/jquery.js"></script>
<script>
$("#btn").click(function () {
var coupon_source = $("input[name='like_fruit']:checked").val();
//点击苹果时，显示的是里面的value的值，即"苹果aaa"
alert("coupon_source=" + coupon_source);
});
</script>
17、验证手机号:
var tel = $("#phone").val();
var telReg = !!tel.match(/^(0|86|17951)?(13[0-9]|15[0-9]|17[0-9]|18[0-9]|14[57])[0-9]{8}$/);
if ($("#phone").val() == "") {
alert("请输入您的手机号码");
} else if (telReg == false) {
alert("手机号码有误哦");
} else {
alert("手机号码输入正确");
//执行下面的操作
}
18、jquery更换背景图片：
方式一：
$(".img").css("background-image", "url('./images/img.png')");
方式二（可用逗号分隔添加多个样式）：
$(".img").css({"background-image": "url('./images/img.png')","xxx":"xxx"});
方式三：
在css中添加样式：
.style{
background: url("./images/img.png") no-repeat center;
}
在js中：$(".img").addClass("style");
//移除样式：$(".img").removeClass("style");
19、html标签a如何跳出iframe：
<a onclick="window.top.location='目标页面' ">跳转</a>
20、css识别换行，添加属性：
white-space: pre-wrap;
21、轻量级的js编辑器：
https://github.com/wysiwygjs/wysiwyg.js
它还响应英文输入法下的@符号，不过中文下的@没反应，哎~写@功能还是不能用这个！
22、At.js(https://github.com/ichord/At.js)
他也可以实现富文本编辑器。
也可以用At.js来实现@功能，但是，亲测有bug，在输入的@符前面有文字的话，紧接着输入@，列表不会展示，前面有个空格再输入@才有响应。
