一、markdown
- 用普通文本描述富文本
- 扩展名md
http://wowubuntu.com/markdown/
我们要写一个应用程序，需要用到什么东西，这些东西可能是js或者jq提供给我们的一些方法，这些东西就叫API。
二、基础IAPI提升
- 新选择器
提供类似于jQuery中选择器的API
- 通过类名查找元素
document.getElementById('section1'); √
document.getElementsByTagName('div'); √
document.getElementsByClassName('section'); 这是新的，查找class类名 - 通过CSS语法查找元素
document.querySelectorAll('ul'); 取一个元素类型是dom类型的数组
document.querySelectorAll('.container');
document.querySelector('div.container > .inner'); 取一个的dom对象，这是jq的写法，h5也可以用了
但是$(".container") 返回的是一个jq对象。（dom元素的数组）
本质上都是获取dom数组，只不过jq多一些其他成员
dom数组的成员的注册事件不能像jq一样直接注册，要遍历挨个注册！
var items = document.querySelectorAll('ul > .item');
console.log(items);
for (var i = 0; i < items.length; i++) {
items[i].addEventListener('click', function(e) {
console.log(1111);
});
}
H5就是将我们经常用的操作又包装一层。
- Element.classList
提供类似于jQuery中CSS操作的API
- add添加类、remove移除类
(function() {
// 1.获取所有li元素
var lis = document.querySelectorAll('.nav > li');
for(var i = 0; i<lis.length; i++){
var item = lis[i];
//2.遍历，给所有的元素注册click事件
item.addEventListener('mouseover',function(e){
//3. 要重置一下其他的active样式
for(var i = 0; i<lis.length;i++){
lis[i].classList.remove('active');
}
// 4.把正在执行的元素active
this.classList.add('active');
console.log(this.classList);
e.preventDefault();
})}
})();
- contains包含、toggle切换
link.addEventListener('click',function(e){
var exist = this.classList.contains('active');
// toggle函数的第二个参数为true是添加，false是删除
this.classList.toggle('active',!exist);
e.preventDefault();
})
- 访问历史api
在此之前我们可以通过history对象实现前进（forward）、后退（back）和刷新（go）之类的操作
H5中开放了更多的API：历史状态操作
我们可以通过window.history去操作历史状态，让一个页面可以有多个历史状态
HTML5 history API包括：
history.pushState()方法：新增状态
history.replaceState()方法：替换状态
window.onpopstate事件：得到状态
默认样式是有必要的，并不是把它清除掉，而是为了给所有的浏览器设置默认样式，统一化；
不推荐用*去设置默认样式效率低
(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 lisElement = document.querySelectorAll("#list>li");
var content = document.querySelector("#content");
for(var i = 0; i < lisElement.length; i++){
lisElement[i].addEventListener('click',function(){
var title = this.dataset['title'];
content.innerHTML = data[title];
if(window.history && history.pushState){
history.pushState(title,"title没有任何浏览器支持","?t="+title);
// 添加一个新的历史记录
}
else{
console.log("不支持");
}
});
}
// 当我们在伪造的访问历史中前进后退时，会执行popstate事件：push里面的元素
window.addEventListener("popstate",function(e){
content.innerHTML = data[e.state];
});
var title = window.location.search.split('=')[1];
if(title){
console.log(decodeURI(title));
content.innerHTML = data[decodeURI(title)];
}
})();
js操作不会被浏览器记住，不会回到之前的状态
new Date() 一个时间对象
toLocalTimeString()转换成我们能认识的时间字符串
toLocalDateString()日期字符串
- 全屏api（很少用到）
点击某处使页面全屏：
var elem = 需要全屏的元素;
if (elem.webkitRequestFullScreen) {
elem.webkitRequestFullScreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.requestFullScreen){
elem.requestFullScreen ();
}
三、网页存储
- Application Cache
就是让网页可以离线访问的技术
<html manifest="cache.manifest">
CACHE MANIFEST
# version 1.0.7
CACHE:
cache.css
cache.js
05-application-cache.html
toy.png
NETWORK:
*
satckedit就可以离线markdown
- web storage
localStorage：永久保存
&
sessionStorage：关闭浏览器就过期
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');
//若果不存在这个值，会返回空，而下面这个方法会返回undefined
txtValue.value = localStorage['key1'];
});
btnSet.addEventListener('click', function() {
// localStorage.setItem('key1', txtValue.value);
localStorage['key1'] = txtValue.value;
});
- 文件系统（提供客户端本地操作文件的可能）
- fileAPI
对于表单里的input，可以通过name属性直接找到
document.forms[0].input_file
<input id="input_1" class="form-control" name="input_1" type="file">
// script
var input = document.querySelector('#input_1');
// 获取文件域中选择的文件
// var file = input.files[0];
var file = input.files.item(0);
- FileReader
用来读取本地文件的对象
var reader = new FileReader();
reader.addEventListener('load', function () {
this.result; // 读取出来的结果
});
reader.readAsText(file); // 以文本的形式读取
reader.readAsDataURL(file); // 以DataURI的形式读取
// 以下（后台工程师用，前端不会用到）
reader.readAsBinaryString(file); // 二进制格式
reader.readAsArrayBuffer(file); // 字节数组
拖拽操作小案例：
思路：
先获取目标框，进行拖入拖出事件的注册，然后中间要进行阻止默认事件。
拽入框内后：先获取到文件，遍历文件并添加小li，给li添加内容（关于文件的 信息）
如果是文字，获取文字内容并赋值，如果是图片，添加一个img元素并把地址赋进去。
(function() {
// 找到目标位置框框
var target = document.querySelector('#target');
var fileList = document.querySelector('#result');
// 注册拖拽进入
target.addEventListener('dragenter', function() {
this.classList.add('actived');
});
// 离开
target.addEventListener('dragleave', function() {
this.classList.remove('actived');
});
// 如果想要捕获drop事件 就一定得在该事件中阻止默认事件
target.addEventListener('dragover', function(e) {
e.preventDefault();
e.stopPropagation();
});
// 当元素放到该对象上
target.addEventListener('drop', function(e) {
if (e.dataTransfer.files.length) {
var files = e.dataTransfer.files;
for (var i = 0; i < files.length; i++) {
var li = document.createElement('li');
li.setAttribute('class', 'list-group-item');
// 创建信息的子节点
li.innerHTML = '<h5 class="list-group-item-heading">' + files[i].name + '</h5><p class="list-group-item-text">' + files[i].lastModifiedDate.toLocaleDateString() + ' ' + files[i].lastModifiedDate.toLocaleTimeString() + ' ' + (files[i].size / 1024).toFixed(2) + 'KB</p>';
fileList.appendChild(li);
}
} else {
// 短路运算
// var data = e.dataTransfer.getData('text/plain') || e.dataTransfer.getData('text/uri-list');
var data = e.dataTransfer.getData('text/plain');
if (data) {
// 拖入的是文本
target.innerHTML = data;
} else {
var img = document.createElement('img');
img.src = e.dataTransfer.getData('text/uri-list');
target.appendChild(img);
}
}
this.classList.remove('actived');
e.preventDefault();
e.stopPropagation();
});
})();
网友评论