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));