1.css 垂直居中 2.JS数据类型和数组复制
1.css/css3实现未知宽高元素的垂直居中和水平居中
解决思路：
<div class="demo">
<img src="img/pic3.jpg" />
</div>
.demo{
/*设置元素绝对定位*/ position: fixed;/*没用定宽高，写了一个定位left:50%离左边百分之五十，transform: translateX(-50%); 这一句的作用就是让自身位置水平左移自身50%的宽度。这样就刚好实现我们想要的效果。*/ top:50%;
left:50%;
transform:translate(-50%,-50%);
-webkit-transform: translateX(-50%);//兼容到ie9
-ms-transform: translateX(-50%);//兼容到ie9
}
2.JS数据类型和数组复制
解决思路：
2.js的数据类型
jscript 有三种->主要数据类型、两种->复合数据类型和两种->特殊数据类型。
基本数据类型：String,boolean,Number,Undefined, Null
引用数据类型：Object(Array,Date,RegExp,Function)
主要（基本）数据类型
字符串
数值
布尔复合（引用）数据类型
对象
数组特殊数据类型
Null
`Undefined`Array 对象方法
| 方法 | 描述 |
|---|---|
| concat() | 连接两个或更多的数组，并返回结果。 |
| join() | 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。 |
| pop() | 删除并返回数组的最后一个元素 |
| push() | 向数组的末尾添加一个或更多元素，并返回新的长度。 |
| reverse() | 颠倒数组中元素的顺序。 |
| shift() | 删除并返回数组的第一个元素 |
| slice() | 从某个已有的数组返回选定的元素 |
| sort() | 对数组的元素进行排序 |
| splice() | 删除元素，并向数组添加新元素。 |
| toSource() | 返回该对象的源代码。 |
| toString() | 把数组转换为字符串，并返回结果。 |
| toLocaleString() | 把数组转换为本地数组，并返回结果。 |
| unshift() | 向数组的开头添加一个或更多元素，并返回新的长度。 |
| valueOf() | 返回数组对象的原始值 |
二、 使用slice()
public slice([startIndex:Number], [endIndex:Number])
返回由原始数组中某一范围的元素构成的新数组，而不修改原始数组。返回的数组包括 startIndex 元素以及从其开始到 endIndex 元素（但不包括该元素）的所有元素。
可使用slice()进行复制，因为slice()返回也是数组。
var array1 = new Array("1","2","3");
var array2;
array2 = array1.slice(0);
array1.length = 0;
alert(array2); //返回1、2、3
三、 使用concat()
注意concat()返回的并不是调用函数的Array，而是一个新的Array，所以可以利用这一点进行复制。
var array1 = new Array("1","2","3");
var array2;
array2 = array1.concat();
array1.length = 0;
alert(array2); //返回1、2、3
3.js跨域 什么是跨域
解决思路：
什么是跨域？
跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。
广义的跨域：
1.) 资源跳转： A链接、重定向、表单提交
2.) 资源嵌入： <link>、<script>其实我们通常所说的跨域是狭义的，是由浏览器同源策略限制的一类请求场景。
什么是同源策略？
同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。
同源策略限制以下几种行为：
1.) Cookie、LocalStorage 和 IndexDB 无法读取
2.) DOM 和 Js对象无法获得
3.) AJAX 请求不能发送常见跨域场景
URL 说明 是否允许通信
http://www.domain.com/a.js
http://www.domain.com/b.js 同一域名，不同文件或路径 允许 http://www.domain.com/lab/c.js http://www.domain.com:8000/a.js http://www.domain.com/b.js 同一域名，不同端口 不允许 http://www.domain.com/a.js https://www.domain.com/b.js 同一域名，不同协议 不允许 http://www.domain.com/a.js http://192.168.4.12/b.js 域名和域名对应相同ip 不允许 http://www.domain.com/a.js http://x.domain.com/b.js 主域相同，子域不同 不允许 http://domain.com/c.js http://www.domain1.com/a.js http://www.domain2.com/b.js 不同域名 不允许
一、jsonp解决跨域
jsonp的原理
JSONP的最基本的原理是：动态添加一个<script>标签，而script标签的src属性是没有跨域的限制的。这样说来，这种跨域方式其实与ajax XmlHttpRequest协议无关了。
JSONP即JSON with Padding。由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源。如果要进行跨域请求， 我们可以通过使用html的script标记来进行跨域请求，并在响应中返回要执行的script代码，其中可以直接使用JSON传递javascript对象。 这种跨域的通讯方式称为JSONP。
Jsonp的执行过程如下：
首先在客户端注册一个callback (如:'testjsonpcallback'), 然后把callback的名字(如:testjsonpcallback)传给服务器。注意：服务端得到callback的数值后，要用testjsonpcallback(......)把将要输出的json内容包括起来，此时，服务器生成 json 数据才能被客户端正确接收。
然后以 javascript 语法的方式，生成一个function， function 名字就是传递上来的参数 'callback'的值 testjsonpcallback
最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。
客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时javascript文档数据，作为参数， 传入到了客户端预先定义好的 callback 函数
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>测试jsonp</h1>
<ul>
<li class="num">手机号码: <span></span></li>
<li class="province">归属省份: <span></span></li>
<li class="operators">运 营 商: <span></span></li>
</ul>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
function testjsonpcallback(data){
alert(JSON.stringify(data));
var province = data.province,
operators = data.catName,
num = data.telString;
$('.num span').html(num);
$('.province span').html(province);
$('.operators span').html(operators);
}
</script>
<script src ="http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=15510588888&callback=testjsonpcallback" type="text/javascript"></script>
</body>
</html>
二、jquery 基本概念和ajax解决跨域
ajax的基本概念
了解这个概念，首先得先知道同步交互与异步交互
- 同步交互：客户端浏览器给服务器发送一个请求，服务器返回一个页面，返回的页面会把之前的页面覆盖掉，我们把这种交互方式称为同步交互
- 异步交互：就是可会断浏览器给服务器发送一个请求，服务器返回数据，返回的数据不会把之前的页面覆盖掉，我们把这种交互方式称之为异步交互
ajax主要的应用场景：页面不刷新，就可以与服务器进行动态的数据交互
交互的原理
-
同步交互原理：我们在浏览器，怎么给服务器发送请求呢？可以点击超链接，提交表单，浏览器地址栏输入地址，都是给服务器发送请求，实际上是浏览器帮助我们给服务器去发送请求
-
异步交互的原理：JavaScript给我们提供了一个新的API接口，帮我们去发送http请求，由XMLHttpRequest 对象来帮助我们发送请求
我们所有的交互操作都可以通过这个对象来完成，发送请求，接受服务器的数据
ajax的具体应用场景
- 前台可以通过XMLHttpRequest 给服务器发送请求，然后再通过XMLHttpRequest 对象来接受服务器返回的数据，最后通过dom操作把数据写到页面上
- ajax：可以用来表单输入规范验证
- ajax：也可以用来做性能优化，比如一个页面非常庞大，这个页面不可能一次加载完毕，实现一个滚动加载
XMLHttpRequest 交互的四个步骤
1，实例化XMLHttpRequest 对象
2，想和服务器进行交互，必须和服务器打开一个连接
3，给服务器发送数据，发送参数数据到服务器
4，接受服务器返回的数据，服务器在返回给客户端的时候会返回一些状态，可以通过监听服务器状态的改变，来更好的操控整个交互流程
①传统的ajax方法
js
$("#ajax").click(function(){
$.ajax({
type: "POST",
url: "http://js.phpsong.com/a.php",
data: 'name=ajax',
dataType:"json",
success: function(data){
alert(data.name);
}
});
});
②$.getJSON
$.getJSON('http://js.phpsong.com/a.php?name=getjson&callback=?', function(data){ //没有回调函数，直接处理
alert(data.name);
});
③$.getScript
$.getScript('http://js.phpsong.com/a.php?name=getscript&callback=getdata'); //回调函数根jsonp一样
④ajax jsonp
$("#jsonp").click(function(){
$.ajax({
url: 'http://js.phpsong.com/a.php',
data: {name: 'jsonp'},
dataType: 'jsonp',
jsonp: 'callback', //为服务端准备的参数
jsonpCallback: 'getdata', //回调函数
success: function(){
alert("success");
}
});
});
function getdata(data){
$('#Result').text(data.name);
}
js对象怎么转换为json
alert(JSON.stringify(data));
1202
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
