03-H5

发表于 | 分类于 |
1. 选择器
  • querySelector
  • querySelectorAll
  • getElementsByClassName

classList

  • length : class的长度
  • add() : 添加class方法
  • remove() : 删除class方法
  • toggle() : 切换class方法
2. json的新方法
  • JSON.parse():把字符串转成json,字符串中的属性要严格的加上引号
  • JSON.stringify():把json转化成字符串,会自动的把双引号加上
3. data自定义数据
  • data-name : dataset.name
  • data-name-first : dataset.nameFirst
4. 拖放事件

  • drop不触发的时候:
    dragstart > drag > dragenter > dragover > dragleave > dragend

  • drop触发的时候: (dragover的时候阻止默认事件)
    dragstart > drag > dragenter > dragover > drop > dragend

5. 历史管理
  • onhashchange
  • history
  • pushState : 三个参数 ：数据 标题(都没实现) 地址(可选)
  • popstate事件 : 读取数据 event.state
    • 注意：网址是虚假的，需在服务器指定对应页面，不然刷新找不到页面
6. 窗口通信

1.同域下:

  • oMyIframe.contentWindow.document.body.style.background = ‘red’;
  • newWindow = window.open(‘4.window.open.html’, ‘_blank’);
    newWindow.document.body.style.background = ‘red’;
  • window : 当前窗口
    parent : 父级窗口
    top : 顶级窗口
  • window.opener.document.body.style

2.异域:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
oMyIframe.contentWindow.postMessage('1', 'http://www.b.com');

www.b.com:
window.addEventListener('message', function(ev) {
		//alert('b.com下的页面接收到了内容了');
		
		//message事件的事件对象下保存了发送过来的内容
		//ev.data : 发送过来的数据
		//ev.origin: 发送过来的网站
		
		//alert('我接收到了a.com页面发送过来的数据，内容是：' + ev.data);
		
		//alert(ev.origin);
		
		
		if (ev.data == '1') {
			document.body.style.background = 'red';
		}
		
	}, false);