学习备忘录
跨域
接触到的解决跨域的方法 JSONP，
1 header( 'Access-Control-Allow-Origin:*' ); //所有访问 2 3 header( 'Access-Control-Allow-Origin:http://www.study.com');//特定网站
JSONP
本质是利用 HTML中的<scirpt>标签具有跨域性的特点，通过<script>异步发送请求。
服务端返回一个特定字符串。这个字符串被js解析成一个函数调用。参数就是服务器传输的数据。
此方法需要前后端配合完成。只能以GET方式请求。ps：耗时操作都是异步，如请求，定时器
jQuery中的JSONP
Jquery的$.ajax（）方法集成了JSONP的实现。用法如下：
1 $.ajax({ 2 url:" ", 3 data:{ 4 5 }, 6 dataType:'jsonp',//与ajax没啥关系，ajax用的是XMLHttpRequest对象的方法
7 jsonp:""//传输的函数名，配合后台 8 success:function(result){ 9 10 } 11 });
Cookie&Session
Session依赖于Cookie,因为Cookie在浏览器中记录服务器的数据。Session在服务器中生成一个文件，将文件名通CooKies在浏览器中保存。如果浏览器禁止Cookie则登录操作必须在每个页面进行一次。在百度贴吧中如果禁止cookie，则无法进行登录操作，在b站中如果禁止cookie则不显示登录按钮。
用IP代替cookie？ip理论上是可以代替cookie进行验证的。方法是将IP和账号密码绑定。但ip可以造假，所有IP代替cookie实际上是不行的。
在php中cookie和session的用法
session_start();//无论读写session，都必须先调用session_start()方法，使用session_start()会新建一个空的session文件。 $_SESSION["user"] = array( "username" => $_POST["username"], "userPwd" => $_POST["password"], "isLogin" => "yes" );
// 有效期 的单位是秒。它的时间参照是php默认起始时间(1970-1-1)
// setcookie("username","jack",time() + 10);
// 设置永久存储的cookie
// setcookie("username","jack",PHP_INT_MAX);
// 通过path设置访问权限:目录的设置是参照网站根目录的
// 1.设置目录为父级目录，子目录也能访问
// 2.设置目录为子级目录，父级目录不能访问
// /代表整站都能访问
setcookie("username","jack",PHP_INT_MAX,"/");
// 怎么创建就应该怎么删除：方法的参数应该对应
// setcookie("username","jack",PHP_INT_MAX,"/");
// setcookie("username","");
setcookie("username","",PHP_INT_MAX,"/");
jquery中$.ajax()传输文件
在XMLHttpRequest2.0中，用 构造函数FormData(表单元素)来收集表单中的数据，发送post请求时不需要设置请求头。如果设置则会出错。FormData中的参数必须是一个dom元素。jQuery对象 不是dom 元素。$("form")[0]才是dom对象。示例代码如下：
1 var uploading = false; 2 $("#sub").click(function () { 3 if (uploading) { 4 alert("文件正在上传中，请稍候"); 5 return false; 6 } 7 console.log(new FormData($('#form1')[0]));//必须加索引，不然无法读取到表单中的数据 8 // $('#form1')[0]是取出id=form1的元素，至于为什么是[0]，这是因为jquery对象都有一个默认为0的索引用来取出其Dom元素，
$('f')是一个jquery对象，[0]为Dom元素 可以用dom的所有属性和方法 9 //FormData 中必须是一个dom元素 不能是jQ对象 10 $.ajax({ 11 type: "POST", 12 url: "03-uploadFile.php", 13 data: new FormData($('#form1')[0]),//必须加索引，不然无法读取到表单中的数据 14 dataType: 'json', 15 beforeSend: function(){ 16 uploading = true; 17 }, 18 processData: false, //jQ上传文件必须 不设置 setrequeryheadrt() 19 contentType: false,//jQ上传文件必须设置为fasle 不改变传输文件 参考https://www.cnblogs.com/henuyuxiang/p/6656001.html 20 success: function (res) { 21 console.log(res); 22 uploading = false; 23 } 24 }); 25 });
mySql
在代码中有存储数据的用number ，string，array，objec，在数据库中有int char。那么数据库中是否能存储数组呢。
答案是不能的。数据库无法存储数组。那么有一个用户表 和一个商品表。一个用户可以拥有多种商品。一个商品也可被多个用户拥有。这种联系该如何存储呢？
虽然数据库不能存储数组，但是数据库能存储字符串。将字符串按特定的符合分割就是数组了。
在数据库中一般用 1,2,3,4 这种形式存储数组型数据。在查询时使用 find_in_set查找，代码如下：
select * from user where find_in_set(Id,"1,2")
一个页面数据库只用连接一次。再次连接会报错。
XmlHttpRequest
var xhr = new XMLHttpRequest(); xhr.open("get","index.php"); xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//如果是post需要设置 xhr.send(null);//数据是字符串 key=value&key1=value1 xhr.onreadystatechange = function(){ if(xhr.status = 200 && xhr.readyState == 4){ console.log(xhr.responseText); } }
移动web
视口
使视口等于理想视口，理想视口就是设备的实际宽高
<meta name="viewport" content="width=device-width, initial-scale=1.0">//vs code 自动 sublime meta:vp+tab键补全
由于移动端不存在兼容问题，而jQuery中花费大量代码来解决兼容问题，影响了性能。所有使用
一些用过的插件
$(function() { FastClick.attach(document.body); });
<div class="swiper-container">
<!--图片-->
<ul class="swiper-wrapper">
<li class="swiper-slide">
<a href="javascript:;">
<img src="./uploads/l1.jpg" alt="">
</a>
</li>
<li class="swiper-slide">
<a href="javascript:;">
<img src="./uploads/l2.jpg" alt="">
</a>
</li>
<li class="swiper-slide">
<a href="javascript:;">
<img src="./uploads/l3.jpg" alt="">
</a>
</li>
</ul>
</div>
<script>
var mySwiper = new Swiper('.swiper-container',{
effect : 'cube',
cube: {
slideShadows: true,
shadow: true,
shadowOffset: 100,
shadowScale: 0.6
}
})
</script>
html 父盒子固定高度 ，子盒子高度大于父盒子 <script type="text/javascript"> var myScroll = new IScroll('#wrapper',{ mouseWheel: true, scrollbars: true });
var myScroll = new IScroll('.tabs_parent',{
/*设置水平滑动，不允许垂直滑动*/
scrollX: true, scrollY: false
}); </script>
bootstrap
主要运用了 @media 媒体查询来实现栅栏系统。
媒体查询遵循原则 。
1.向上兼容：如果设置了宽度更小时的样式，默认这些样式也会传递到宽度更大的条件范围内
2.向下覆盖：宽度更大的样式会将前面宽度更小的样式覆盖*/
/*max-width: 768px:宽度在768以下*/ @media screen and (max-width: 768px){ body{ background-color: pink; } } /*max-width: 992px:宽度在992以下*/ @media screen and (max-width: 992px){ body{ background-color: blue; } } /*max-width: 1200px:宽度在1200以下*/ @media screen and (max-width: 1200px){ body{ background-color: green; } }
bootstrap 常用的类
<div class="wjs_reverse hidden-xs">
<div class="container">
<div class="row">
<div class="col-xs-9">
</div>
<div class="col-xs-3">
</div>
</div>
</div>
</div>
/*
bootstrap 默认 把宽度分为 12 格，可通过官网自定义这个属性。
屏幕大小 由小到大
xs - sm - md -lg
hidden-sx //在小屏幕隐藏
container： 在大屏幕是 100%,在小屏幕时 是固定值 左右有边距
container-fluid:宽度一直为100%
row：根类 使用 col 必须在 row盒子中
col-sm-12：在sm 宽度下 宽度占12格 也就是100%
*/
mui 框架
一个坑：mui 默认阻止所有 a 标签的跳转，解决办法
mui('body').on('tap','a',function(){
window.top.location.href=this.href;
});//通过事件委托为所有的a便签注册 tap 事件，tap 为 mui中封装的点击事件
mui框架是专注与移动布局的框架。如务必要请不要在pc端中使用。如区域滑动功能 无法用鼠标滑轮控制 。更多功能可以查看 官网文档 <a href="http://dev.dcloud.net.cn" ></a>
布局
左右固定，中间自适应（双飞翼）
定位或浮动实现： 中间盒子设置 padding 左右各200px .宽度自适应 ， 左右盒子用浮动或定位 填充到左右
flex实现： 父盒子设置 display:flex ; 中间盒子设置 flex ：1 。左右设置固定宽度
flex-direction: column; 改变排列方式为 纵向排列
flex 常用的属性
justify-content: center;
align-items: center;
一个我没想到的布局
一个盒子分三份 ，每个盒子之间间隔15px. 盒子的content 相同且自适应 。
实现 左：
{
width:33.33%
margin-right:10px;
}:
中{
width:33.33%;
margin: 0 5px;
}
右{
width:33.33%;
margin-left:10px
}
less
@定义变量
@color:#3c3c3c
定义函数
.addRadius(@r:10px){
border-radius: @r;
-webkit-border-radius: @r;
-moz-border-radius: @r;
}
调用函数
box{
.addRadius(5px);
}
rem,em 和 vw,wh
rem 相对于 html 的font-size , 如果 html 设置 font-size：100xp 则 1rem = 100px； 如果设置 font-size： 625%； 则 1rem = 16* 625% 16位浏览器默认的font-size
em 相对于 父元素的font-size。
一个bug 由于谷歌 浏览器 font-size 最小为12px 。12px 以下的默认为 12px 导致 兼容问题。目前无法解决（有）。幸好 10px 基本没人设置。
vw 相对于 视口 如果 视口宽为 640px 则 1vw = 640/100= 6.4px；
vh 相对于 视口 如果 视口高为 640px 则 1vh = 640 / 100 = 6.4px；
