web高效编程与实践pdf的学习

1.实现自定义checkbox

<label>
<input type=“checkbox”>
<span class=“checkbox”>
</label>
<input type=“checkbox”>
input[type=checkbox]{
display:none;
}
未实现的checkbox
.checkbox{
border:1px solid blue;
display: block;
width:30px;
height:30px;
}
实现之后的checkbox
input[type=checkbox]:checked + .checkbox{
border:2px solid red;
}

2,多列等高

加大宽高
<div class=“wrapper”>
<div>col1</div>
<div>col2</div>
<div>col3</div>
</div>
<style>
.wrapper>div{
float:left;
padding-bottom:900px;
margin-bottom:-880px;
}
</style>
用表格
wrapper{display:table;border-space:20px;}
wrapper>div{display:table-cell;}

3.form标签按回车可以触发表单提交事件

4.css3伪类

：focus,:invalid
比如输入不合法时,不可点击状：
<style>
input[type=email]:invalid + .next-step{
opacity:0.5;
}
</style>

5.实现好看的title，利用:hover：before

<p>
hello,
<span data-title=“Fuck”>FED</span>
</p>
<style>
span[data-title]{
position:relative;
}
span[data-title]:hover:before{
content:attr(data-title);
position:absolute;
top:-150%;
left:50%;
transform:translateX(-50%);
white-space:nowrap;
}

6.默认主题颜色

:root{
–theme-color:#a22926;
}
body.home li.home{
color:var(–theme-color,#505055);
}

获取表单中的值

<form action="" id=“reg”>
<input type=“text” name=“user-name”>
<input type=“text” name=“password”>
\
<script>
/获取表单数据/
var form = document.forms.namedItem(“reg”);
var userName = form[“user-name”].value,
password = form.password.value;
\
封装一个获取表单元素的函数
$.fn.serializeForm=function(){
var o={};
var a=this.serializeArray();
$.each(a,function(){
//如果存在两个input的name相同，则转成一个数组
if(o[this.name]!==undefined){
if(!o[this.name].push){
o[this.name]=[o[this.name]];
}
o[this.name].push(this.value || ‘’);
}else{
o[this.name]=this.value || “”;
}
});
return o;
}
不同类型的type会弹出不一样的键盘

宽高不同的三角形

.border{
border-left:60px solid transparent;
border-right:0 solid transparent;
border-bottom:40px solid #000;
}
只画边缘的的三角形
<div class=“chat-msg”>
使用after把before盖住
.chat-msg{
width:300px;
height:80px;
border:1px solid #ccc;
position:relative;
}
.chat-msg:before{
content:"";
position:absolute;
left:-10px;
top:34px;
border-top:6px solid transparent;
border-bottom:6px solid transparent;
border-right:10px solid #ccc;
}
.chat-msg:after{
content:"";
position:absolute;
left:-8px;
top:34px;
border-top:6px solid transparent;
border-bottom:6px solid transparent;
border-right:10px solid #fff;
}
为三角添加阴影
.chat-msg{
filter:drop-shadow(0 0 2px #999);
background-color:#fff;
}

伪元素（尽量用伪元素，对js透明，减少js查询）

清除浮动
页面一些小元素
实现勾选计算
<style>
.choose{
counter-reset: fruit;
}
.choose input:checked{
counter-increment: fruit;
}
.count:before{
content:counter(fruit);
}
</style>
<div class=“choose”>
<label>苹果</label>
<label>香蕉</label>
</div>
<p>您选择了 <span class=“count”></span>种水果</p>

js

1,写得像强类型，比如var i="";
2,减少作用域查找，不滥用闭包，不让代码暴露在全局作用域
3，传参尽量声明变量
4，使用es6简化