css样式重置
/**
Eric Meyer’s Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
-
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, input {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-weight: normal;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* custom */
a {
color: #7e8c8d;
text-decoration: none;
-webkit-backface-visibility: hidden;
}
li {
list-style: none;
}
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-track-piece {
background-color: rgba(0, 0, 0, 0.2);
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical {
height: 5px;
background-color: rgba(125, 125, 125, 0.7);
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:horizontal {
width: 5px;
background-color: rgba(125, 125, 125, 0.7);
-webkit-border-radius: 6px;
}
html, body {
width: 100%;
}
body {
-webkit-text-size-adjust: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
前端小杂会--坑
1、移动web在ios和android下点击元素出现阴影问题
-webkit-tap-highlight-color:rgba(255,255,255,0)可以同时屏蔽ios和android下点击元素时出现的阴影。备注：transparent的属性值在android下无效。
2、text-overflow: ellipsis;显示省略符号来代表被修剪的文本。He is a good boy => He is a good…
3、github上面clone到本地的话要用ssh
4、list-block中，每一个列表下面都会出现相应的下划线，原因：在list-block下的item-inner（position：relative）下，有一个伪元素after，该元素用绝对定位（position：absolute）绘制的下划线。
5、移动端的页面自适应？
可根据flexible.js控制宽度自适应；
高度自适应用单位：vh，（根据视口的高度viewport分配）；
6、hbuilder的px => rem？
工具 =》选项 =》Hbuilder =》代码助手设置
7、text-overflow: ellipsis;
文字隐藏后添加省略号
8、PS更换背景颜色？
选中工具栏中的油漆桶，再选择要更换的颜色，点击就可以。
9、win10操作：
1）、贴靠窗口：Win +左/右> Win +上/下>窗口可以变为1/4大小放置在屏幕4个角落
2）、切换窗口：Alt + Tab
3）、任务视图：Win + Tab
4）、创建新的虚拟桌面：Win + Ctrl + D
5）、切换虚拟桌面：Win + Ctrl +左/右
6）、关闭当前虚拟桌面：Win + Ctrl + F4
未完待续…
常见HTTP错误代码大全
详细分解：
1xx（临时响应）
表示临时响应并需要请求者继续执行操作的状态代码。
100 （继续） 请求者应当继续提出请求。服务器返回此代码表示已收到请求的第一部分，正在等待其余部分。
101 （切换协议） 请求者已要求服务器切换协议，服务器已确认并准备切换。
2xx （成功）
表示成功处理了请求的状态代码。
200 （成功） 服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。
201 （已创建） 请求成功并且服务器创建了新的资源。
202 （已接受） 服务器已接受请求，但尚未处理。
203 （非授权信息） 服务器已成功处理了请求，但返回的信息可能来自另一来源。
204 （无内容） 服务器成功处理了请求，但没有返回任何内容。
205 （重置内容） 服务器成功处理了请求，但没有返回任何内容。
206 （部分内容） 服务器成功处理了部分 GET 请求。
3xx （重定向）
表示要完成请求，需要进一步操作。 通常，这些状态代码用来重定向。
300 （多种选择） 针对请求，服务器可执行多种操作。服务器可根据请求者 (user agent) 选择一项操作，或提供操作列表供请求者选择。
301 （永久移动） 请求的网页已永久移动到新位置。服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。
302 （临时移动） 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。
303 （查看其他位置） 请求者应当对不同的位置使用单独的 GET 请求来检索响应时，服务器返回此代码。
304 （未修改） 自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。
305 （使用代理） 请求者只能使用代理访问请求的网页。如果服务器返回此响应，还表示请求者应使用代理。
307 （临时重定向） 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。
4xx（请求错误）
这些状态代码表示请求可能出错，妨碍了服务器的处理。
400 （错误请求） 服务器不理解请求的语法。
401 （未授权） 请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。
403 （禁止） 服务器拒绝请求。
404 （未找到） 服务器找不到请求的网页。
405 （方法禁用） 禁用请求中指定的方法。
406 （不接受） 无法使用请求的内容特性响应请求的网页。
407 （需要代理授权） 此状态代码与 401（未授权）类似，但指定请求者应当授权使用代理。
408 （请求超时） 服务器等候请求时发生超时。
409 （冲突） 服务器在完成请求时发生冲突。服务器必须在响应中包含有关冲突的信息。
410 （已删除） 如果请求的资源已永久删除，服务器就会返回此响应。
411 （需要有效长度） 服务器不接受不含有效内容长度标头字段的请求。
412 （未满足前提条件） 服务器未满足请求者在请求中设置的其中一个前提条件。
413 （请求实体过大） 服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。
414 （请求的 URI 过长） 请求的 URI（通常为网址）过长，服务器无法处理。
415 （不支持的媒体类型） 请求的格式不受请求页面的支持。
416 （请求范围不符合要求） 如果页面无法提供请求的范围，则服务器会返回此状态代码。
417 （未满足期望值） 服务器未满足”期望”请求标头字段的要求。
5xx（服务器错误）
这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误，而不是请求出错。
500 （服务器内部错误） 服务器遇到错误，无法完成请求。
501 （尚未实施） 服务器不具备完成请求的功能。例如，服务器无法识别请求方法时可能会返回此代码。
502 （错误网关） 服务器作为网关或代理，从上游服务器收到无效响应。
503 （服务不可用） 服务器目前无法使用（由于超载或停机维护）。通常，这只是暂时状态。
504 （网关超时） 服务器作为网关或代理，但是没有及时从上游服务器收到请求。
505 （HTTP 版本不受支持） 服务器不支持请求中所用的 HTTP 协议版本。
HttpWatch状态码Result is
200 - 服务器成功返回网页，客户端请求已成功。
302 - 对象临时移动。服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。
304 - 属于重定向。自上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。
401 - 未授权。请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。
404 - 未找到。服务器找不到请求的网页。
2xx - 成功。表示服务器成功地接受了客户端请求。
3xx - 重定向。表示要完成请求，需要进一步操作。客户端浏览器必须采取更多操作来实现请求。例如，浏览器可能不得不请求服务器上的不同的页面，或通过代理服务器重复该请求。
4xx - 请求错误。这些状态代码表示请求可能出错，妨碍了服务器的处理。
5xx - 服务器错误。表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误，而不是请求出错。
Framework7无限加载小结
无限加载
原理
滑动页面到底部，请求后台数据，每次加载的数据量是多少（pageSize），加载的次数（可看做分的页数pageNum），加载到页面上，重复上述过程，页数不断加1，直到后台无数据传递过来。
F7框架中可滚动的区域是page-content，但page-content要在page下，所以要在page-content同级加上infinite-scroll，eg：
<div class="page">
<div class="page-content infinite-scroll" data-distance="100">
...
</div>
</div>
data-distance属性用来配置页面滚动到离底部多远时触发无限滚动事件，默认是50 (px)
菜单1，2，3
菜单2或者3无限滚动，直到数据加载完成，菜单之间互不影响
点击相应菜单按钮，绑定滚动事件，其他菜单解除这个事件，
var itemIndexs = 0;
$('.tab .item').on('click',function(){
var $this = $(this);
itemIndexs = $this.index();
console.log(itemIndexs) //0，1，2
//三个菜单按钮
switch (itemIndexs){
case 0:
$$('.infinite-scroll').off('infinite',infinitescroll);
break;
case 1:
$$('.infinite-scroll').on('infinite',infinitescroll);
break;
case 2:
$$('.infinite-scroll').off('infinite',infinitescroll);
break;
default:
break;
}
});
事件封装在函数里，上述的infinitescroll可看做以下的clickHandler：
function clickHandler(){
console.log('clicked');
}
// Add event listener
$$(document).on('click', 'a', clickHandler);
// Remove event listener
$$(document).off('click', 'a', clickHandler);
HTML：
<div class="tab">
<a href="javascript:;" class="item active">菜单一</a>
<a href="javascript:;" class="item">菜单二</a>
<a href="javascript:;" class="item">菜单三</a>
</div>
<div class="content">
<div class="lists"></div>
<div class="lists" id="TargetArea">
<div class="infinite-scroll-preloader">
<div class="preloader"></div>
</div>
</div>
<div class="lists"></div>
</div>
JS:
function infinitescroll(){
if (loading) return;
loading = true;
pageNum++;
UpdateAllGoodsList(TargetArea,inum);
};
function Update(TargetArea,pageNum,pageSize) {
var param = {
"pageNo": pageNum,
"pageSize": pageSize
};
var url = "***";
$.ajax({
type: "***",
url: url,
data: param,
dataType: "json",
success: function (dataObj) {
loading = false;
console.log(dataObj);
},
error: function (xhr, ajaxOptions, thrownError) { //在offline或者数据传输失败时的错误提示
if(pageNum!=1) pageNum--; //页数要减1，在有网络的情况下再重新加载这个页面一次，以防这个页面的数据不显示
setTimeout(function(){
TargetArea.remove(".errormessage");
TargetArea.append("<div class='col-100 errormessage' style='text-align:center;'><h3>加载失败</h3></div>");
$(".infinite-scroll-preloader").hide();
loading = false;
},1000);
}
});
PS:先了解原理，再去尝试写demo，上面代码仅提供思路。
jquery学习路上遇到的小坑
jquery路上的不断填坑
1、jQuery中没有innerText、innerHtml
document.getElementById(“username”) 获得的是dom对象,所有对象都有innerHTML；
$(“#username”)获得的是jquery对象,无innerHTML
解决方法：
$("#username").html("根号");
or
$("#username")[0].innerHTML="根号";
2、jquery中ajax data格式？
data: {
username:username.value,
phone:phone.value,
msg:msg.value
}
3、jquery获取img的元素设置src？
var url = “”；
获取：
$("#imgId")[0].src = url;
修改：
$("#imgId").attr('src',path);
原生获取：
document.getElementById("imgId").src = url;
未完待续…
cookie小总结
cookie
英文翻译为“饼干”。以下是本人在学习cookie时的小总结，欢迎使用和提出宝贵意见：
看这样一个例子（登录后显示相应的用户名）：
一、原生的方法，创建cookie，获取cookie，删除cookie。
1、创建cookie：
function setCookie(name,value,timer){
var date1=new Date();
var day=date1.getDate();
date1.setDate(day+timer);
document.cookie=name+"="+value+"; expires="+date1;
}
传入的三个参数分别是用户名，密码，有效时间。比如创建了以下cookie：
name=根号; value=666; expires=7;
2、获取cookie：
创建完cookie之后，下一步我们就要获取我们创建的cookie，安全起见，只保存用户名，不保存密码
function getCookie(name){
var cookie1=document.cookie; //获取所有的cookie，然后通过分割的方法来获取我们想要的单一值
var arr=cookie1.split("; "); //arr = ["name=根号","value=666"]
for (i=0;i<arr.length;i++) {
var arr2=arr[i].split("="); //["name","根号"],["value","666"]
if(arr2[0]==name){
return arr2[1]; //根号
}
}
}
3、删除cookie：
删除cookie，不是真正的去删除它，而是去设置过期的时间，
function removeCookie(name){
setCookie(name," ",-1);
}
赶紧制作个小demo测试下吧，PS：在服务器环境下测试（非本地路径）
二、利用cookie.js这个库创建，获取和删除cookie
1、创建cookie：
$.cookie('name', 'value', { expires: 7, path: '/' });
2、获取cookie：
$.cookie('name'); // => "value"
$.cookie('nothing'); // => undefined
Read all available cookies:
$.cookie(); // => { "name": "value" }
3、删除cookie：
$.removeCookie('name', { path: '/' });
JSON
JSON其实很简单
就是一个轻量级的数据格式
可以简化表示复杂数据结构的工作量
主要要掌握ES5的全局对象JSON中的两个方法JSON.stringify()和JSON.parse()
总结几个要记住的重点
JSON.stringify()
用于把JavaScript对象转换为JSON字符串
可填写额外两个参数-筛选数组/替换函数和指定缩进
对象遇到undefined、function、symbol（ES6）会忽略
数组遇到undefined、function、symbol（ES6）会返回null
JSON.parse()
用于把JSON字符串转换为JavaScript对象
可填写额外一个参数-还原函数