cookie设置，读取，删除

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

<script>
    function setCookie(name,value,expiresHours){
        var cookieString = name+'='+escape(value);
        if(expiresHours > 0){
            var date = new Date();
            date.setHours(date.getHours()+expiresHours);
            cookieString = cookieString + ";expires="+date.toUTCString();
        }
        //然后设置cookie
        document.cookie = cookieString ;
    }
    setCookie('malename','Jhon',20);
    function getCookie(name){
        var strCookie = document.cookie ;
        var arrCookie = strCookie.split(';');
        for(var i = 0 ; i < arrCookie.length ; i++){
            var arr = arrCookie[i].split("=");
            if(arr[0] == name){
                return unescape(arr[1]);
            }else{
                return "";
            }
        }
    }
    console.log(getCookie('malename'));
//    document.cookie = 'malename = v;expire'
    //删除一个cookie
    function deleteCookie(name){
        var date = new Date();
        date.setHours(date.getHours()-10);
        document.cookie = name+'=v'+';expires='+date.toUTCString();
    }
    function deleteCookie(name){
        var date=new Date();
        date.setTime(date.getTime()-10000); //设定一个过去的时间即可
        document.cookie=name+"=v; expires="+date.toGMTString();
    }
    function deleteCookie(name)
    {
        var exp = new Date();
        exp.setTime(exp.getTime() - 1);
        var cval=getCookie(name);
        if(cval!=null)
            document.cookie= name + "="+cval+";expires="+exp.toGMTString();
    }
    document.getElementById('btn').onclick = function(){
        console.log("1");
        deleteCookie('malename');
    };
</script>

1 平常开发，移动端场景：

• 开发移动端H5页面
• 面对不同分辨率的手机
• 面对不同屏幕尺寸的手机

2 视觉稿:对于移动端的开发而言，为了做到页面高清的效果，经常会对视觉稿有如下规范

• 首先选取一款手机屏幕作为基准(更多的是iphone6的375*667)
• 对于retina屏幕(比如dpr=2),为了达到高清的效果，视觉稿的大小会是基准的两倍，也就是说像素点的个数是原来的四倍(对于iphone6来说，375667 变成了 7501334)

3 引出两个问题

• 对于dpr = 2 的手机，胃泌素画布大小 x2 就可以解决高清问题？
• dpr=物理像素/设备独立像素(可能就是分辨率吧)

• 对于2倍大小的视觉稿，在具体的css编码中如何还原每一个区块 的真实宽高？
• 当dpr=1 时候,通过1个设备独立像素显示一个css像素,当dpr=2的时候,通过4个设备独立像素(=2个物理像素)显示1个css像素(所以如果图片的css像素不足会出现模糊的情况),当dpr=3的时候,通过9个设备独立像素(=3个物理像素)显示一个css像素.

4 由问题来看下基本的定义以及概念

• 物理像素(设备像素) : (physical pixel)一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作系统的调度下，每一个设备独立像素都有自己的颜色值和亮度值

• 设备独立像素 : (dp/dip density-independent pixel) 可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用并控制的虚拟像素(比如：CSS 像素,只是在android机中CSS 像素就不叫”CSS 像素”了而是叫”设备独立像素”)，然后由相关系统转换为物理像素。(跟设备的宽高一致),也成为逻辑像素

• CSS像素：CSS像素是Web编程的概念，独立于设备的用于逻辑上衡量像素的单位，也就是说我们在做网页时用到的CSS像素单位，是抽象的，而不是实际存在的。单位是px(是一个像素单位,相对的是设备独立像素)

• css像素==设备独立像素==逻辑像素

• 位图像素(png,jpg)是由像素（Pixel）组成的，像素是位图最小的信息单元，存储在图像栅格中。 每个像素都具有特定的位置和颜色值。按从左到右、从上到下的顺序来记录图像中每一个像素的信息，如：像素在屏幕上的位置、像素的颜色等。位图图像质量是由单位长度内像素的多少来决定的。单位长度内像素越多，分辨率越高，图像的效果越好。位图也称为“位图图像”“点阵图像”“数据图像”“数码图像”

• 矢量图是根据几何特性来绘制图形，是用线段和曲线描述图像，矢量可以是一个点或一条线，矢量图只能靠软件生成，矢量图文件占用内在空间较小，因为这种类型的图像文件包含独立的分离图像，可以自由无限制的重新组合；

• 位图和矢量图的区别

  • 1 最大的区别，矢量图形与分辨率无关，可以将它缩放到任意大小和以任意分辨率在输出设备上打印出来，都不会影响清晰度，而位图是由一个一个像素点产生，当放大图像时，像素点也放大了，但每个像素点表示的颜色是单一的，所以在位图放大后就会出现咱们平时所见到的马赛克状。

  • 2 位图表现的色彩比较丰富，可以表现出色彩丰富的图象，可逼真表现自然界各类实物；而矢量图形色彩不丰富，无法表现逼真的实物，矢量图常常用来表示标识、图标、Logo等简单直接的图像。

  • 3 由于位图表现的色彩比较丰富，所以占用的空间会很大，颜色信息越多，占用空间越大，图像越清晰，占用空间越大；由于矢量图形表现的图像颜色比较单一，所以所占用的空间会很小。

  • 4 经过软件矢量图可以很轻松的转化为位图，而位图要想转换为矢量图必须经过复杂而庞大的数据处理，而且生成的矢量图质量也会有很大的出入。

  • 5 位图的文件类型很多，如.bmp、.pcx、.gif、.jpg、.tif、photoshop的.psd等；

    矢量图形格式也很多，如AdobeIllustrator的.AI、.EPS和SVG、AutoCAD的.dwg和dxf、Corel DRAW的.cdr等。

• 设备像素比(device pixel ratio) 定义了物理像素和设备独立像素的对应关系

  dpr = 物理像素/css像素 (x 和 y方向上都是如此)，可以通过window.devicePixelRatio属性获取当前设备的dpr

• 比如iphone设备宽高 375x667,那么此时设备独立像素(css像素)就是375x667;

  • 对于普通屏幕物理像素 375x667; 即一个css像素对应一个物理像素
  • 对于retina屏幕(dpr=2)物理像素 750x1334;即一个css像素对应4个物理像素(x,y方向都进行了等比缩放)

5 对于图片高清显示的问题

最完美的显示情况是一个位图像素对应一个物理像素，图片才能完美的显示

• 对于普通屏幕 ，200x300的位图在普通屏幕上显示是没有问题的
• 对于retina屏幕(dpr = 2)，200x300的位图在retina屏幕上显示的时候，位图像素的一个像素对应了4个物理像素(x,y方向都会进行缩放);所以会导致图片模糊，为什么会导致图片模糊呢？
• 那么对于单个位图像素不能再进行分割，然后多余的物理像素会进行就近取色，所导致图片模糊

那么这个问题如何解决呢？

根本实现，让一个位图像素对应一个物理像素

实现方法 1 提供400x600的位图 2 img标签的宽高设置为 200x300

如此一来，在retina屏幕下，位图像素的在img标签下，一个位图像素对应一个物理像素

但是问题又来了，如果 1 提供400x600的位图 2 img标签的宽高设置为 200x300

如此在普通屏幕下，这个时候，一个物理像素对应了四个位图像素，图片显示会模糊？同样，why?

• 这个时候一个物理像素点的取色同样对应了四个位图像素，所以它的取色只能经过一定的算法(显示的结果就是一张只有原图像素总数的四分之一，我们称这个过程是downsampling),肉眼看上去虽然图片没有特别模糊，但是会少了一些锐利度，或者图片有色差

6 以上对于retina屏幕下图片高清显示 如果图片大小400x600

• 1 img标签 width : 200 px ; height : 300 px
• 2 背景图片 width : 200 px ; height : 300 px backgroundground-image : url () ; background-size: 200px 300px (/contain)

###7 这样子也会带来一个新的问题:就是需要准备两套图片，但是还有一个解决方案就是我们只需要准备一套大图，然后需要一个图片服务器，用来处理小图，然后根据不同请求的URL进行下载不同图片

参考

Object 新增API Object.defineProperty(obj,prop,descripter)

1 Object.defineProperty(obj,prop,descriptor)

接受三个参数，第一是要设置属性的对象，第二个是要设置的属性名，第三个是要设置的属性的相关信息descriptor对象，该对象有如下属性：value writable configurable enumerable get 和set；返回值是传递给defineProperty的对象，也就是obj，作为返回值

2 对于descriptor有如下可配置的信息：

Both data and accessor descriptors are objects. They share the following required keys:

• configurable

  true if and only if the type of this property descriptor may be changed and if the property may be deleted from the corresponding object.Defaults to false.

• enumerable

  true if and only if this property shows up during enumeration of the properties on the corresponding object.Defaults to false.

第一种方式 : A data descriptor also has the following optional keys:

• value

  The value associated with the property. Can be any valid JavaScript value (number, object, function, etc).Defaults to undefined.

• writable

  true if and only if the value associated with the property may be changed with an assignment operator.Defaults to false.

  1 2 3 4 5 6 7 8

  var obj={}; Object.defineProperty(obj,"name",{ get:function(){ return 10; } }); obj.name=20; console.log(obj.name);//10 默认不可修改 writable false

  第二种方式 An accessor descriptor also has the following optional keys:

• get

  A function which serves as a getter for the property, or undefined if there is no getter. The function return will be used as the value of property.Defaults to undefined.

• set

  A function which serves as a setter for the property, or undefined if there is no setter. The function will receive as only argument the new value being assigned to the property.Defaults to undefined.

3 先来看下默认值的影响

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var obj = {};
Object.defineProperty(obj,"name",{
 
});	
//等价于如下:
var obj = {};
Object.defineProperty(obj,"name",{
    value : undefined,
	writable : false ,
	configurable : false ,
	enumerable : false
});	
console.log(obj.name);//undefined
obj.name = "JiM";
console.log(obj.name);//undefined

4 descriptor对象分为data descriptor 和 accessor descriptor，两者只能存在一个，两者共存会报错；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

var obj= {};
    Object.defineProperty(obj,"name",{
      //------------------可在两者中存在
        configurable:true,
        enumerable : false,
  //----------------------------data descriptor  
        value:"Jhon",
        writable:true,
   //--------------------------accessor descriptor      
        get : function(){
           return "JiM";
        }
        set:function(){
            
        }
    //------data descriptor中的 value 或者 writable 任何一个不能和 accessor descriptor中的get set任何一个共同存在 descriptor对象中；
    });

5 descriptor对象的属性

5.1 value 属性:用来设置obj对象的属性值，writable属性用来控制obj对象的属性值是否可以修改

1
2
3
4
5
6
7
8
9
10

var obj= {};
   Object.defineProperty(obj,"name",{
       configurable:true,
       enumerable : false,
       value:"Jhon",
       writable:false,//当设置为true的时候，obj的name属性可以被修改为 JiM333 ;
   });
   obj.name = 'JiM333';
   console.log(obj.name);//Jhon

5.2 set 方法:用来设置属性的值obj.property = “value”的时候调用set方法，get方法用来获取属性的值 ，obj.property的时候调用get方法；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

var obj= {};
    Object.defineProperty(obj,"name",{
        configurable:true,
        enumerable : false,
        get : function(){
           return " I always return this string, whatever you have assigned";
        },
        set:function(){
            obj.newName = "JiM2";
        }
    });
    obj.name = 'JiM333'; // 这个表达式相当于调用了descriptor的set方法
    console.log(obj.name);//  I always return this string, whatever you have assigned
    console.log(obj.newName); //JiM2 
//obj.name 相当于调用descriptor的get方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

//接下来看一个最大调用栈溢出的问题	
var obj= {};
    Object.defineProperty(obj,"name",{
        configurable:true,
        enumerable : false,
        get : function(){
           return " I always return this string, whatever you have assigned";
        },
        set:function(){
            obj.name = "JiM2";//一直在重复的调用set函数，注意这个还是在给name属性赋值，而上一个案例是给一个newName属性赋值;
        }
    });
    console.log(obj.name);
    obj.name = 'JiM333';//调用set函数；

5.3 configurable属性，用来设置descriptor对象的属性(value writable get set enumerable )是否可以修改;如果设置了false，那么这些属性都不可以修改，即使设置的值和原来一样；如果设置了true,那么就可以重新更改；

The configurable attribute controls at the same time whether the property can be deleted from the object and whether its attributes (other than writable) can be changed.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

var o = {};
Object.defineProperty(o, 'a', {
  get: function() { return 1; },
  configurable: false
});
Object.defineProperty(o, 'a', {
  configurable: true
}); // throws a TypeError
Object.defineProperty(o, 'a', {
  enumerable: true
}); // throws a TypeError
Object.defineProperty(o, 'a', {
  set: function() {}
}); // throws a TypeError (set was undefined previously)
Object.defineProperty(o, 'a', {
  get: function() { return 1; }
}); // throws a TypeError
// (even though the new get does exactly the same thing)
Object.defineProperty(o, 'a', {
  value: 12
}); // throws a TypeError
Object.defineProperty(o, 'a', {
  writable:true
}); // throws a TypeError
console.log(o.a); // logs 1
delete o.a; // Nothing happens
console.log(o.a); // logs 1

5.4 enumerable 属性

The enumerable property attribute defines whether the property shows up in a for...in loop and Object.keys() or not.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

var o = {};
Object.defineProperty(o, 'a', {
  value: 1,
  enumerable: true
});
Object.defineProperty(o, 'b', {
 value: 2,
 enumerable: false
});
Object.defineProperty(o, 'c', {
  value: 3
}); // enumerable defaults to false
o.d = 4; // enumerable defaults to true
         // when creating a property by setting it
for (var i in o) {
  console.log(i);
}
// logs 'a' and 'd' (in undefined order)
Object.keys(o); // ['a', 'd']
o.propertyIsEnumerable('a'); // true
o.propertyIsEnumerable('b'); // false
o.propertyIsEnumerable('c'); // false

6 Object.defineProperties(obj ,prop) The **Object.defineProperties()** method defines new or modifies existing properties directly on an object, returning the object.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

var obj = {};
Object.defineProperties(obj, {
  'property1': {
    value: true,
    writable: true
  },
  'property2': {
    value: 'Hello',
    writable: false
  }
  // etc. etc.
});
//注意prop的格式 
{
  'property1' : {  }
  'property2' : {  }
  'property3' : {  }
  //etc	
}

7 Object.getOwnPropertyDescriptor(obj,’property’) ; 获取obj对象的指定属性的descriptor,返回时描述该属性的详细信息的对象；

Object.getOwnPropertyDescriptors(obj); 获取obj对象的所有属性descriptor详细信息的对象，该对象包含了每个属性的descriptor对象；

一 : js中事件参数的总结：

1 所有的事件都有默认的事件对象参数，事件对象参数可以通过arguments属性查看,在不同浏览器中，事件对象参数支持不一样，谷歌和火狐支持事件对象参数 e ,而IE支持 window.event,针对不同浏览器需要兼容

1

e = window.event ? window.event : e

DragEvent TouchEvent 继承event和MouseEvent的事件对象参数属性值；

2 事件(Event) window事件 keyBoard事件 Form表单事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Event:
bubbles:false	返回布尔值，指示该事件是否是冒泡事件，true代表是冒泡事件，false代表是捕获事件		
cancelBubble:false 阻止事件冒泡，设置该属性值为true,可以阻止事件冒泡，默认false
cancelable:false  cancelable 事件返回一个布尔值。如果用 preventDefault() 方法可以取消与事件关联的默认动作，则为 true，否则为 fasle。默认false
composed:false  
currentTarget:		即当前处理该事件的元素、文档或窗口。即事
件绑定的元素
defaultPrevented:false
eventPhase:2	eventPhase 属性返回事件传播的当前阶段。它的值是下面的三个常量之一，它们分别表示捕获阶段(1:事件通过捕获触发)、正常事件派发(2:直接点击事件绑定元素)和起泡阶段(3:事件通过冒泡触发)。	
isTrusted:true
path:Array[1]
returnValue:true
srcElement:		返回触发其他元素的绑定事件的 节点:即直接点击的节点
target: 		返回触发其他元素的绑定事件的 节点:即直接点击的节点
timeStamp:
type:"load"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#dv1 {
			height: 300px;
			width: 300px;
			background-color: red;
		}
		#dv2 {
			height: 200px;
			width: 200px;
			background-color: blue;
		}
		#dv3 {
			height: 100px;
			width: 100px;
			background-color: green;
		}
		#dv4 {
			height: 50px;
			width: 50px;
			background-color: pink;
		}
	</style>
</head>
<body>
<div id="dv1">1
	<div id="dv2">2
		<div id="dv3">3
			<div id="dv4">4</div>
		</div>
	</div>
</div>
<script src="common.js"></script>
<script>
// e.target记录触发事件的目标
	// my$("dv2").onclick = function(e){
	// 	console.log(e.target+"==="+window.event.srcElement+"=="+e.currentTarget);
	//这句代码里面的
	// 	console.log(e.target.id+"==="+window.event.srcElement.id+"=="+e.currentTarget.id);
	// };
	my$("dv2").onclick = function(e){
		e = e || window.event;
		console.log(e.target+"====="+e.currentTarget);
		console.log(e.srcElement.id+"=="+e.target.id+"==="+"=="+e.currentTarget.id+"=="+e.bubbles+"=="+ e.eventPhase);
	};
// 	在 2 级 DOM 中，事件传播分为三个阶段：
// 第一，捕获阶段。事件从 Document 对象沿着文档树向下传递给目标节点。如果目标的任何一个先辈专门注册了捕获事件句柄，那么在事件传播过程中运行这些句柄。
// 第二个阶段发生在目标节点自身。直接注册砸目标上的适合的事件句柄将运行。这与 0 级事件模型提供的事件处理方法相似。
// 第三，起泡阶段。在此阶段，事件将从目标元素向上传播回或起泡回 Document 对象的文档层次。
	
// 	target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口;
// 	currentTarget currentTarget 事件属性返回其监听器触发事件的节点，即当前处理该事件的元素、文档或窗口。
// 在捕获和起泡阶段，该属性是非常有用的，因为在这两阶段，它不同于 target 属性
// srcElement.id + target.id +currentTarget.id  + e.bubbles e.eventPhase
// 	如点击dv2  控制台输出：dv2  dv2   dv2 true   2  
// 	点击dv3  控制台输出   dv3  dv3   dv2  true  3
  //点击dv4  控制台输出   dv4  dv4   dv2  true  3
</script>
</body>
</html>

3 鼠标事件(MouseEvent)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

altKey:false
bubbles:true
button:0
buttons:0
cancelBubble:false
cancelable:true
clientX:230
clientY:58
composed:true
ctrlKey:false
currentTarget:null
defaultPrevented:false
detail:1
eventPhase:0
fromElement:null
isTrusted:true
layerX:230
layerY:58
metaKey:false
movementX:0
movementY:0
offsetX:64
offsetY:50
pageX:230
pageY:58
path:Array[5]
relatedTarget:null
returnValue:true
screenX:371
screenY:205
shiftKey:false
sourceCapabilities:InputDeviceCapabilities
srcElement:div
target:div
timeStamp:141604.27000000002
toElement:div
type:"click"
view:Window
which:1
x:230
y:58

4 拖拽事件(DragEvent)

1
2
3
4
5
6
7

dataTransfer:DataTransfer
  dropEffect:"none"
  effectAllowed:"uninitialized"
  files:FileList
  items:DataTransferItemList
  types:Array[0]
  __proto__:DataTransfer

5 触摸事件(TouchEvent)

1
2
3

- changedTouches   所有改变的触摸点的集合
- targetTouches  目标元素上方的触摸点的
- touches 改变的触摸点

6 messageEvent

1
2
3
4

message 属性表示该message 的类型； 
data 属性为 window.postMessage 的第一个参数；
origin 属性表示调用window.postMessage() 方法时调用页面的当前状态； 
source 属性记录调用 window.postMessage() 方法的窗口信息。

7 storageEvent

1
2
3

key  属性用来表示storage存储的键值对属性的键
oldValue 属性用来表示storage存储的原来的属性值
newValue 属性用来表示storage存储的原来的属性值

二 : jQuery中事件参数,多了两个属性，e . originalEvent : 用于存放所有的事件对象参数值 ; e . data :

1
2
3
4
5

originalEvent:Event
originalEvent:MouseEvent
originalEvent:DragEvent
originalEvent:TouchEvent
data : undefined (如果没有传值给这个参数，那么就是undefined)

对于drag事件和touch 事件的新增属性dataTransfer changedTouches targetTouches touches 存放在originalEvent属性里面.

三 : 标准Event方法

1
2
3
4

preventDefault() : 该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。例如，如果 type 属性是 "submit"，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单。注意，如果 Event 对象的 cancelable 属性是 fasle，那么就没有默认动作，或者不能阻止默认动作。无论哪种情况，调用该方法都没有作用。
stopPropagation() : 不再派发事件。
终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。
该方法将停止事件的传播，阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意，虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点。

在应用有frameset或者iframe的页面时，parent是父窗口，top是最顶级父窗口（有的窗口中套了好几层frameset或者iframe），self是当前窗口， opener是用open方法打开当前窗口的那个窗口。

window.self

功能：是对当前窗口自身的引用。它和window属性是等价的。

语法：window.self

注：window、self、window.self是等价的。

window.top

功能：返回顶层窗口，即浏览器窗口。

语法：window.top

注：如果窗口本身就是顶层窗口，top属性返回的是对自身的引用。

window.parent

功能：返回父窗口。

语法：window.parent

注：如果窗口本身是顶层窗口，parent属性返回的是对自身的引用。

parent

parent用于在iframe,frame中生成的子页面中访问父页面的对象。例如：A页面中有一个iframe或frame，那么iframe
或frame中的页面就可以通过parent对象来引用A页面中的对象。这样就可以获取或返回值到A页面中。

在框架网页中，一般父窗口就是顶层窗口，但如果框架中还有框架，父窗口和顶层窗口就不一定相同了。

判断当前窗口是否在一个框架中：

你应当将框架视为窗口中的不同区域，框架是浏览器窗口中特定的部分。一个浏览器窗口可以根据你的需要分成任意多的框架，一个单个的框架也可以分成其它多个框架，即所谓的嵌套框架

jQuery 对象$(“selector”).serialize()方法的使用

1 表单元素:from 表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。表单用于向服务器传输数据。

• input : type 类型 button checkbox file hidden image password radio reset submit text 。如果要表单元素的值包含到序列字符串中，元素必须使用 name 属性。默认text类型
• textarea 必须属性 col row 该标签也有 name属性，也可以上传数据

2 select select 元素可创建单选或多选菜单。当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将 \ 表单数据提交给服务器时包括 name 属性。

• option 元素必须位于select元素内部,不能单独的使用，没有name属性

3 首先理解jQuery ajax - serialize() 方法注意：只会将”成功的控件“序列化为字符串 。如果不使用按钮来提交表单，则不对提交按钮的值序列化。如果要表单元素的值包含到序列字符串中，元素必须使用 name 属性。

什么是”成功的控件”？可以简单理解为 被选中的 表单元素 有name属性的表单元素；**注意name属性不能是js或者jQuery中的关键字，否则无法序列化 ；其实就是用户操作选中的那些控件内容会被序列化；

1
2
3
4
5

input 	type = text password hidden 可以直接被选中序列化为字符串
        type = checkbox  radio  只有当check="checked" 的时候才能被选中序列化为字符串
        type =  file button image 则不会被选中序列化为字符串
input   元素有name 属性，发往服务器的是input元素的name属性值  和 input元素的 value 值
select  元素有name 属性，发往服务器的数据是select的name属性值和 其子元素的option元素的 value值;注意不是option标签包裹的内容 <option value="man">男</option>  上传到服务器的是   man ;

1

textarea 元素有name 属性，发往服务器的数据是textarea的name属性值和textarea元素的内容；

如果要表单元素的值包含到序列字符串中，元素必须使用 name 属性。否则无法序列化该元素的值；

序列化的”键值对”是

• 对于input select 元素是 name 属性 的值 和 value 属性的值；如果value属性也有值，那么就提交value属性的值，如果没有value属性，或者value属性值为空字符串，则序列化的结果没有value值，如果value值是一个空的字符串，那么序列化的结果是一个 + 字符。
• 对于textarea 元素是textarea元素的 name属性值 和内容值

4 明白以上的内容，具体到serialize()的用法,是对所有选中的表单元素进行序列化；序列化表单值的作用是将表单中的值拼装成字符串形式的key-value键值对提交给后台服务器程序解析，来获取用户的输入值

• 定义:serialize()方法通过序列化表单值，创建标准的URL编码文本字符串 ，它的操作对象是代表表单元素集合的jQuery 对象.你可以选择一个或多个表单元素（比如input或文本框），或者 form 元素本身。序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中，然后发送到服务器。
• 我们可以单独的获取某个表单元素的序列化的值，$(“input”).serialize(),序列化所有的input元素，\$(“input:password”).serialize(),序列化password ; \$(“form”).serialize() 序列化 form；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="jquery-1.12.2.js"></script>
    <title>serializeArray()与serialize()</title>
    <script type="text/javascript">
        function onClik(){
            $("#results").html("serializeArray()与serialize()的区别如下：");
            var data1 = $("#form1").serializeArray(); //自动将form表单封装成json
            $("#results").append("<br/><b>serializeArray:</b>");
            $.each(data1, function(i, field){
                $("#results").append(field.name+":"+field.value+" ");
            });
            $("#results").append("<br/>");
            var data2 = $("#form1").serialize(); //自动将form表单封装成json
            $("#results").append("<b>serialize():</b>"+data2);
        }
    </script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
    <p>进货人 :
        <label for="name"></label>
        <input type="text" name="name" id="name" />
      <!--没有value值，结果为空-->
    </p>
    <p>性别:
        <label for="sex"></label>
        <select name="sex" size="1" id="sex">
            <!--select有name属性，会序列化选中的option 。这里是第一个option-->
            <option value="man">男</option>
            <option value="女">女</option>
        </select>
        <select name="sex" size="1" id="sex">
            <!--select有name属性，会序列化选中的option 。这里是第二个option-->
            <option value="man">男</option>
            <option value="woman" selected="selected">女</option>
        </select>
        <select>
            <!--select没有name属性，则不会被序列化-->
            <option value ="volvo">Volvo</option>
            <option value ="saab">Saab</option>
            <option value="opel">Opel</option>
            <option value="audi">Audi</option>
        </select>
        <textarea name="txt" id="" cols="30" rows="10">
             这是text
            <!--注意这里面有空格，会被序列化为+-->
        </textarea>
    </p>
    <table width="708" border="1">
        <tr>
            <td width="185">商品名</td>
            <td width="205">商品数量</td>
            <td width="296">商品价格</td>
        </tr>
        <tr>
            <td><label for="pro_name"></label>
                <input type="text" name="pro_name" id="pro_name" /></td>
          <!--没有value值，结果是 pro_name=  -->
            <td><label for="pro_num"></label>
                <input type="text" name="pro_num" id="pro_num" /></td>
            <td><label for="pro_price"></label>
                <input type="text" name="pro_price" id="pro_price" /></td>
            <input type="password" name=""  value="123"/></td>
            <input type="hidden" name="hid"  value="hid" /></td>
            <input type="file" name="fil"  value="filess" /></td>
            <input type="checkbox" name="ck"  value="ckk" checked="checked" /></td>ck
            <input type="checkbox" name="ck"  value="ckk2"  /></td>ck2
		   <input type="radio" name="ra"  value="raa" checked="checked" /></td>ra
            <input type="radio" name="ra2"  value="raa2"  /></td>ra2
			   <!--没有被选中，不会序列化，  -->
        </tr>
        <tr>
            <td><input type="text" name="pro_name2" id="pro_name2" value=" " /></td>
            <!--注意此时的value属性值是一个  空格 序列化为 + -->
            <td><input type="text" name="pro_num2" id="pro_num2"  value=""/></td>
            <!--这个地方的value属性值是  空字符串 -->
            <td><input type="text" name="pro_price2" id="pro_price2" /></td>
        </tr>
    </table>
    <p id="results"></p>
    <input type="button" name="submit" onclick="onClik();" value="提交"/>
</form>
</body>
</html>
<!--serializeArray()与serialize()的区别如下：-->
<!--serializeArray:name: sex:man sex:woman txt: 这是text ck:ckk ra:raa pro_name: pro_num: pro_price: hid:hid pro_name2: pro_num2: pro_price2:-->
<!--serialize():name=&sex=man&sex=woman&txt=+++++++++++++%E8%BF%99%E6%98%AFtext%3C!&#45;&#45;%E6%B3%A8%E6%84%8F%E8%BF%99%E9%87%8C%E9%9D%A2%E6%9C%89%E7%A9%BA%E6%A0%BC%EF%BC%8C%E4%BC%9A%E8%A2%AB%E5%BA%8F%E5%88%97%E5%8C%96%E4%B8%BA%2B&#45;&#45;%3E%0D%0A++++++++&ck=ckk&ra=raa&pro_name=&pro_num=&pro_price=&hid=hid&pro_name2=+&pro_num2=&pro_price2=-->

$.param()方法是serialize()方法的核心，用来对一个数组或对象按照key/value进行序列化。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

param: function( a ) {
        ///    <summary>
        ///        This method is internal.  Use serialize() instead.
        ///    </summary>
        ///    <param name="a" type="Map">A map of key/value pairs to serialize into a string.</param>'
        ///    <returns type="String" />
        ///    <private />
    
        var s = [ ];
        function add( key, value ){
            s[ s.length ] = encodeURIComponent(key) + '=' + encodeURIComponent(value);
        };
        // If an array was passed in, assume that it is an array
        // of form elements
        if ( jQuery.isArray(a) || a.jquery )
            // Serialize the form elements
            jQuery.each( a, function(){
                add( this.name, this.value );
            });
        // Otherwise, assume that it's an object of key/value pairs
        else
            // Serialize the key/values
            for ( var j in a )
                // If the value is an array then the key names need to be repeated
                if ( jQuery.isArray(a[j]) )
                    jQuery.each( a[j], function(){
                        add( j, this );
                    });
                else
                    add( j, jQuery.isFunction(a[j]) ? a[j]() : a[j] );
        // Return the resulting serialization
        return s.join("&").replace(/%20/g, "+");
    }

5 如何 解决空字符串转化为 + 号 的问题？

一 js offset

1 :如果父元素没有定位，那么offsetLeft offsetTop是元素自身border 边界左上角相对于body边界 的距离

2 :如果父元素有定位，那么offsetLeft offsetTop是元素自身border 边界左上角相对于父元素的border边界

3 offsetWidth offsetHeight 是一个只读属性，该属性的宽高包括 内容区+padding+border；返回它的屏幕尺寸；

• 通过ele.offsetWidth ele.offsetHeight可以获取元素的宽高 ; 包括padding值和border值

• ele.offsetLeft 和 ele.offsetTop 指的是相对于文档或者定位父节点的左边距和上边距，是一个只读 属性
• offset系列的属性值是数字类型，只可读，不能设置

4 所有的HTML元素都有offsetHeight offsetWidth属性，offsetTop offsetLeft 可以获取当前元素相对于 文档坐标系统的x y 坐标值;

• 对于很多元素，都是相对于文档坐标系统的值；
• 但是对于已经定位的元素的后代元素和一些其他 元素(表格元素)，这些属性返回的坐标是相对于祖先元素定位的的而非文档；offsetParent属性指定这些属性所相对的父元素，如果offsetParent为null,这些属性都是文档坐标；

js scroll

1 ele.scrollHeight ele.scrollWidth 用来获取元素的内容的宽高，包括padding,不包括 border(如果产生了滚动条，则不包括滚动条的宽度)，是一个只读 属性，包括内容区，内边距以及任何溢出的内容，当么有溢出的时候，等于clientHeight he clientWidth ，当有溢出的时候，大于它们；

2 ele.scrollTop ele.scorllLeft 用来获取元素自身(比如当元素内容宽高大于元素自身的时候，会产生scroll，经常用来获取body的卷曲距离)内容向上或者向左卷曲出去的距离，也就是元素的内容区相对于滚动条顶部的距离；是一个可读可写 的属性；可以设置滚动出去的距离；

3 如何获取页面的卷曲出去的距离，由于不同的浏览器支持不一样有的支持window.pageXoffset, window.pageYoffset(股和火狐都不支持) 有的支持(html)document.documentElement.scrollLeft ,document.documentElement.scrollTop(火狐)有的支持(body)document.body.scrollLeft, document.body.scrollTop(谷歌)

4 封装一个获取相对浏览器窗口偏移的兼容性代码：

1
2
3
4
5
6
7
8
9
10
11
12

function scrollTop(){
return  window.pageYoffset || document.documentElement.scrollTop || document.body.scrollTop || 0 ;
}
fuction scrollLeft(){
 return window.pageXoffset || document.documentElement.scrollLeft || document.body.scrollTop || 0 ;  
}
function getScroll() {
  	return{
      	left :  window.pageXoffset || document.documentElement.scrollLeft || document.body.scrollTop || 0 ;
	return top :  window.pageYoffset || document.documentElement.scrollTop || document.body.scrollTop || 0 ;
  	} ;
}

5 HTML元素并没有像window对象那样的scrollTop( ) 和scrollBy( ) 方法 ；

js client

1 ele.clientHeight ele.clientWidth 用来获取元素可视区域的宽高，是一个只读 属性；包括padding值，不包括border ，不包括滚动条，对于内联元素只是0 ；

2 ele.clientTop ele.clientLeft 用来获取元素的边框的宽度，以像素计；是一个只读 属性

3 如果元素设置了display:none ,不可见，那么无法获取宽高;结果为0；

Submit

• offsetWidth offsetHeight 获取元素的元素的宽度包括 content+padding+border ,包括border ;scrollWidth scrollHeight clientWidth clientHeight 获取的元素的宽度仅仅包括content+padding,不包括border ；

• offsetTop offsetLeft 获取该元素的border外边界 距离已经定位了了父元素的border内边界 的距离，如果没有祖先元素都没有定位，则获取相对于body的边界的距离；scrollLeft scrollTop 获取元素相对于滚动条头部 的距离，clientLeft clientTop 获取元素的边框的宽度

• 以上所有的属性，只有scrollTop 和 scrollLeft 是一个可读可写的属性，其余仅仅可读 :语法

1

ele.scrollTop = number ; ele.scrollLeft  = number ;

1

ele.scrollTop = 5  ;ele.scrollLeft = 10;

• 所有获取的结果是一个number类型的数字；设置值的时候也仅仅设置数字；

注意区分事件对象参数里面的 (都是只读属性)

• offsetX offsetY(偏移) 获取鼠标点击事件源相对于元素(content+padding)的左上角的坐标值,如果点击在border边界上的话，那么值为负数；
• clientX clientY 获取事件源相对于浏览器窗口的可视区域(不包括滚动条和工具栏)的左上角的坐标值 pageX pageY也是
• screenX screenY 获取的是鼠标点击点相对于显示屏的屏幕的左上角的坐标值

滚动条是浏览器添加的，在内边距和边框之间添加了滚动条

二 jquery offset( )这是jquery中的一个方法

1 如果不传参数，那么可以获取该元素的距离body边界的距离；

2 如果传了参数，那么可以设置该元素距离body的边界的距离，

3 注意，无论该元素的父元素是否定位 ，都是相对于body 边界的距离；这点和js不一样；

• jquery对象.offset( ) ; 该方法有两个整形返回值，一个代表left 一个代表top
• jquery对象.offset().left jquery对象.offset().top 可以获取left和top的值
• jquery对象.offset( { left : 30 ,top : 20 } ) 可以设置该元素距离body边界的距离；

jquery中如何获取元素的宽高

1 height( )只可以获取内容高度，也就是原本设置的height高度值，或者由内容撑开的高度值

2 innerHeight( ) ,获取的高度包括 padding，不包括边框

3 outerHeight( ),获取的高度值包括 padding 和border ，不包括margin,outerHeight(false)，里面默认值是false，当设置为outerHeight(true)的时候，可以获取到margin的值；

3 width( ) innerWidth( ) outerWidth( )也是一样的道理

4 如果传入了数值参数，那么可以为元素设置宽高；

jquery scroll

1 $(“selector”).scrollTop( ) 、\$(“selector”).scrollLeft( ) 不传参数的时候，可以获取该对象 相对滚动条顶部和左侧的偏移

2 $(“selector”).scrollTop( number) 、 \$(“selector”).scrollLeft(number) 传入参数的话，则代表可以设置相对滚动条顶部和左侧的距离

三 所有的HTML元素都有scroll client offset这三组属性；

scrollHeight scrollWidth scrollLeft scrollTop

offsetHeight offsetWidth offsetLeft offsetTop offsetParent

clientHeight clientWidth clientLeft clientTop

1 HTML5新的API允许跨域访问其他页面，postMessage ;语法如下

发送消息的窗口，通过postMessage API发送消息

1
2
3
4
5

targetWindow.postMessage(mes,targetOrigin)
targetWindow  指目标窗口，也就是给哪个window发消息，是 window.frames 属性的成员或者由 window.open 方法创建的窗口 
mes : 是要发送的信息
targetOrigin : 是  限定  消息接受的域范围，如果不限定可以使用* 字符串参数，指明目标窗口的源，协议+主机+端口号[+URL]，URL会被忽略，所以可以不写，这个参数是为了安全考虑，postMessage()方法只会将message传递给指定窗口，当然如果愿意也可以建参数设置为"*"，这样可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。

接受消息的窗口，通过message事件为该窗口注册事件

1
2
3
4
5

window.addEventListener('message',function(e){
  console.log(e.data);//传递过来的消息
  console.log(e.source);//发送消息的窗口对象
  console.log(e.origin);//发送消息窗口的源（协议+主机+端口号）
})

2 栗子分析 www.myvirtual1.com www.myvirtual2.com 是我的两个虚拟主机

假如在http://www.myvirtual1.com/post1.html 文件内容如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!DOCTYPE html>
<html>
<head>
    <title>Post Message</title>
</head>
<body>
<iframe id="child" src="http://www.myvirtual2.com/post2.html"></iframe>
<input type="button" id="btn" value="click to send message"/>
<input type="text" id="send" placeholder='please input what you want to send anotherwindow'/>
<script type="text/javascript">
document.getElementById('btn').onclick = sendMessage();
function sendMessage(){
    var str = document.querySelector('#send').value;
    var frame = window.frames[0];
    frame.postMessage(str,'http://www.myvirtual2.com');
    console.log("message is sended");
}
</script>
</body>
</html>

http://www.myvirtual2.com/post2.html 文件内容如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<!doctype html>
<html>
<head>
    <style type="text/css">
        html,body{
            height:100%;
            margin:0px;
        }
    </style>
</head>
<body>
<input type="text" value="this will be changed when you click the button "/>
<script type="text/javascript">
    function receiveMessage(){
        window.addEventListener('message',function(e){  //这个事件在当post1页面发送消息的时候才会触发
            console.log(e.data);//传递过来的消息
            console.log(e.source);//发送消息的窗口对象
            console.log(e.origin);//发送消息窗口的源（协议+主机+端口号）
            document.querySelector('input').value = e.data;
        })
    }
    window.onload = function(){
        receiveMessage();
    }
</script>
</body>
</html>

3 跨域的时候，正常来说由于受同源策略的影响，不同域之间的页面不允许通信，postMessage方法可以跨域发送信息，然后在另外一个页面可以被处理。

MIME类型对应表格

按照文件扩展名排列的 Mime 类型列表