h5笔记02
Markdown
用普通文本描述富文本的语法
扩展名md，markdown
链接：http://wowubuntu.com/markdown/
代表h标签
没有符号的代表段落
-符号代表无序列表
1.数字符号代表有序列表
```
```代表代码
新选择器
querySelector 和 querySelectorAll
1.document.querySelector(selector);
返回第一个满足选择器天剑的元素，一个dom对象
2.document.querySelectorAll(".item");
返回所有满足该条件的元素，一个元素类型是dom类型的数组
3.$(".item")
返回一个jQuery对象（dom元素的数组）
4.jQuery和qs获取元素区别
本质上jQuery方式和qs方式都是获取Dom数组，只不过jquery会多一些其他成员
5.Dom数组注册需要遍历
Dom数组每一个成员注册事件不能像jquery一样直接注册，必须分别给每个元素注册，就是需要遍历
6.h5的qs
h5的qs就是将我们经常需要的操作又包装一层，方便我们去获取
案例：
<div class="container">
<header class="page-header">header新选择器</header>
<p>新段落</p>
<ul>
<li class="item">item1</li>
<li class="item">item2</li>
<li class="item">item3</li>
<li class="item">item4</li>
<li class="item">item5</li>
<li class="item">item6</li>
<li class="item">item7</li>
<li class="item">item8</li>
<li class="item">item9</li>
<li class="item">item10</li>
</ul>
</div>
(function(){
var first_item = document.querySelector(".item");
//console.log(first_item);
var items = document.querySelectorAll(".item");
//console.log(items);
//不能跟jQuery一样直接注册事件，需要先将元素遍历一下
for ( var i = 0;i<items.length;i++){
items[i].addEventListener("click",function(e){
console.log(2424);
});
}
//jQuery可以直接注册事件
var arr = [];
arr.addEventListener
var $items = $(".item");
console.log($item);
$items.on("click",function(){
console.log(111);
});
})();
元素 .classList
新H5中dom对象多了一个classList属性，是一个数组
classlist.add();
添加一个新的类名
classlist.remove();
删除一个类名；
classlist.contains();
判断是否包含一个指定的类名
classlist.toggle();
切换一个class element.toggle("class-name",[add_or_remove]);
toggle函数的第二个参数true为添加 false为删除
可以通过contains判断是否有类名，如果没有在通过！带入到函数参数
访问历史
forward（）、back（）、go（）
<input type="button" value="前进" onclick="forward()">
<input type="button" value="后退" onclick="back()">
<input type="button" value="刷新" onclick="refresh()">
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>History Api</title>
<style>
html,
body {
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
aside {
background-color: #ccc;
width: 220px;
float: left;
height: 100%;
}
aside ul {
font-size: 20px;
line-height: 2;
}
aside ul li {
cursor: pointer;
}
article {
background-color: #f5f5f5;
margin-left: 220px;
padding: 20px;
height: 100%;
overflow: scroll;
font-size: 20px;
}
</style>
</head>
<body>
<aside>
<ul id="list" data-id="1" data-name="sss">
</ul>
</aside>
<article>
<p id="content"></p>
</article>
<!-- plugin:auto file name -->
<script src="data.js"></script>
<script>
(function() {
var listElement = document.querySelector('#list');
for (var title in data) {
var liElement = document.createElement('li');
liElement.innerHTML = '⭐️' + title;
liElement.setAttribute('data-title', title);
listElement.appendChild(liElement);
}
var liElements = document.querySelectorAll('#list>li');
var content = document.querySelector('#content');
// 注册美哦一个元素事件
for (var i = 0; i < liElements.length; i++) {
liElements[i].addEventListener('click', function() {
// 拿到被点击title
var title = this.dataset['title'];
// 赋值
content.innerHTML = data[title];
// 操作历史记录
if (window.history && history.pushState) {
// 添加一个新的历史记录
history.pushState(title, 'title没有任何浏览器支持', '?t=' + title);
} else {
console.log('不支持');
}
});
}
// 当我们在伪造的访问历史中前进或后退时会执行一个popstate事件
window.addEventListener('popstate', function(e) {
content.innerHTML = data[e.state];
});
// window.location = "https://www.baidu.com";
// 第一次请求过来 获取地址栏中的t参数
// window.location可以拿到当前网页中跟地址相关的信息
var search = window.location.search; // ?t=jkaljdksfla
// 如果地址栏中的地址有中文，会以URL编码方式呈现
// decodeURI 可以转换到之前中文
var title = search.split('=')[1]; // ['?t','jkaljdksfla']
if (title) {
// 有值 decodeURI作用就是从URL编码转换到之前的状态
console.log(decodeURI(title));
content.innerHTML = data[decodeURI(title)];
}
})();
</script>
</body>
</html>
全屏API
常用F11全屏
如果使用全屏API进行全屏的话需要对所有元素的背景颜色进行设置，否则会显示黑色
如果是想要body显示全屏：document.body.webkitRequestFullScreen
var elem = 需要全屏的元素;
if (elem.webkitRequestFullScreen) {
elem.webkitRequestFullScreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.requestFullScreen){
elem.requestFullScreen();
}
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>全屏API</title>
<style>
body{
background-color: #fff;
}
#qqq{
background-color: #fff;
}
</style>
</head>
<body>
<p id="qqq">全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏全屏</p>
<h1 id="btn">全屏</h1>
</body>
</html>
<script>
(function(){
var btn = document.querySelector("#btn");
var qqq = document.querySelector("#qqq");
btn.addEventListener("click",function(e){
if (qqq.webkitRequestFullScreen) {
qqq.webkitRequestFullScreen();
}else if (qqq.mozRequestFullScreen) {
qqq.mozRequestFullScreen();
}else if (qqq.requestFullScreen) {
qqq.requestFullScreen();
}
e.preventDefault();
});
})();
</script>
网页存储 离线访问
利用application cache 和 Web Storage的知识点
application cache
步骤
1.应用程序缓存 开发正常
2.html添加一个manifest属性指向一个文件
如：
<html lang="en" manifest="cache.manifest>
3.manifest文件内容，CACHE 代表离线可以访问的文件，NETWORK代表连接网络的过程中可以访问的文件
示例：
<html manifest="cache.manifest">
CACHE MANIFEST
# version 1.0.7
CACHE:
cache.css
cache.js
05-application-cache.html
toy.png
NETWORK:
*
web stroage
1.可以在本地通过键值的方式存储数据，setItem与local的不一样在于setItem关闭网页之后数据会自动清空，但是local不会清空
2.如果通过txtValue.value = localStorage['key1']的方式获取数据 获得不存在的键，自动返回undefined
3.如果通过txtValue.value = localStorage.getItem('key1')的方式获取数据 获得不存在的键 自动返回 空字符串
<textarea id="txt_value" cols="30" rows="10"></textarea>
<input type="button" value="SET" id="btn_set">
<input type="button" value="GET" id="btn_get">
var btnSet = document.querySelector('#btn_set');
var btnGet = document.querySelector('#btn_get');
var txtValue = document.querySelector('#txt_value');
btnGet.addEventListener('click', function() {
// txtValue.value = localStorage.getItem('key1');
txtValue.value = localStorage['key1'];
});
btnSet.addEventListener('click', function() {
// localStorage.setItem('key1', txtValue.value);
localStorage['key1'] = txtValue.value;
});
文件系统api
<form action="">
<input id="input_file" type="file" name="input_file" value="文件" multiple>
</form>
1.对于表单里的input来说，可以直接通过name找到document.form[0].input_file
2.docement.forms[0] 等价于
document.getElementsBtTagName('forms')[0];
3.multiple可以让文件域多选，不用赋值
4.change事件发生在file选择文件之后发生
5.inputFile中有files这个属性
var files = inputFile.files;
6.将files遍历之后，
files[i].name：代表选中文件名
files[i].lastModifiedDate.toLocaleDateString()：代表文件最后修改日期
files[i].lastModifiedDate.toLocaleTimeString()：代表文件最后修改时间
files[i].size：代表文件大小，需要(files[i]/1024).toFixed(2)转换为两位小数KB
drag和drog事件（拖拽和拖放）
一般步骤：
1.获取目标位置框
var target = document.querySelector("#target);
2.注册拖拽进入事件
target.addEventListener('dragenter',function(){
});
3..注册拖拽离开事件
target.addEventListener('dragleave',function(){
});
4.在注册drog事件之前一定要注册dragover事件，在该事件阻止默认行为，否则不能捕获到drog事件，是一个约定
如下：
target.addEventListener('dragover',function(e){
e.preventDefault();//阻止默认行为
e.stopPropagation();//阻止事件冒泡
})
5.注册drop事件
target.addEventListener('drop',function(e){
})
补充
sublime自动补全插件
plugin：auto file name
css注入文字
body::before{
content:'css注入的内容';
font-size:20px;
}
