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;
}
h5笔记02的更多相关文章
- 软件测试之loadrunner学习笔记-02集合点
loadrunner学习笔记-02集合点 集合点函数可以帮助我们生成有效可控的并发操作.虽然在Controller中多用户负载的Vuser是一起开始运行脚本的,但是由于计算机的串行处理机制,脚本的运行 ...
- 《30天自制操作系统》笔记(02)——导入C语言
<30天自制操作系统>笔记(02)——导入C语言 进度回顾 在上一篇,记录了计算机开机时加载IPL程序(initial program loader,一个nas汇编程序)的情况,包括IPL ...
- 《The Linux Command Line》 读书笔记02 关于命令的命令
<The Linux Command Line> 读书笔记02 关于命令的命令 命令的四种类型 type type—Indicate how a command name is inter ...
- 强化学习读书笔记 - 02 - 多臂老O虎O机问题
# 强化学习读书笔记 - 02 - 多臂老O虎O机问题 学习笔记: [Reinforcement Learning: An Introduction, Richard S. Sutton and An ...
- JS自学笔记02
JS自学笔记02 1.复习 js是一门解释性语言,遇到一行代码就执行一行代码 2.查阅mdn web文档 3.提示用户输入并接收,相比之下,alert只有提示的作用: prompt(字符串) 接收: ...
- 机器学习实战（Machine Learning in Action）学习笔记————02.k-邻近算法（KNN）
机器学习实战(Machine Learning in Action)学习笔记————02.k-邻近算法(KNN) 关键字:邻近算法(kNN: k Nearest Neighbors).python.源 ...
- CS229 笔记02
CS229 笔记02 公式推导 $ {\text {For simplicity, Let }} A, B, C \in {\Bbb {R}}^{n \times n}. $ $ {\bf {\t ...
- OpenCV 学习笔记 02 使用opencv处理图像
1 不同色彩空间的转换 opencv 中有数百种关于不同色彩空间的转换方法,但常用的有三种色彩空间:灰度.BRG.HSV(Hue-Saturation-Value) 灰度 - 灰度色彩空间是通过去除彩 ...
- ASP.NET Identity 2集成到MVC5项目--笔记02
ASP.NET Identity 2集成到MVC5项目--笔记01 ASP.NET Identity 2集成到MVC5项目--笔记02 继上一篇,本篇主要是实现邮件.用户名登陆和登陆前邮件认证. 1. ...
随机推荐
- Kali学习笔记6：二层发现
先介绍下ARPING命令: arping命令是用于发送ARP请求到一个相邻主机的工具 arping使用arp数据包,通过PING命令检查设备上的硬件地址.能够测试一个IP地址是否是在网络上已经被使用, ...
- python访问互联网
1.python有一个网络包urllib,里面有很多网络模块,其中我们常用的就是urllib.request (module)这个模块 2.引入要是用的模块:import urllib.request ...
- 树莓派GPIO口的使用
树莓派的优势在于Liunx操作系统加GPIO口,其中IO口时物联网组成中不可缺少的,高低电平的控制是很有必要的存在,再加有python的支持,玩转GPIO相对就容易多了 管脚编号 BCM: 编号侧重 ...
- 2，linux入门到上手-ssh安装配置及虚拟机基本使用
ssh配置 1,打开"终端窗口",输入 "sudo apt-get update" --> 回车 --> "输入当前登录用户的管理员密码& ...
- Anaconda+MINGW+theano+keras安装
前言:这几天算是被这东西困扰的十分难受,博客园和csdn各种逛,找教程,大家说法不一,很多方法也不一定适用,有些方法有待进一步完善.这里我借鉴了许多大神们的方法,以及自己的一些心得,希望对你们有一些帮 ...
- Mac OS Eclipse 调试快捷键不好使(失效）的情况
Eclipse调试使用的F5 F6 F8一直都好用,结果一次调试后忽然不好使. 问题原因,尚未知晓. 解决办法,重启机器.
- 上传文件报错--Unable to find 'struts.multipart.saveDir' property setting.
struts2 上传文件时,有时候会报这个错误. Unable to find 'struts.multipart.saveDir' property setting. Defaulting to j ...
- ajax实现文档导出及下载
做导出一直遇到个问题就是不能用ajax实现一步导出文档,即导出加下载.今天突然想到可以分开来做就上网搜了下,发现一篇比较不错的文章(http://www.cnblogs.com/zj0208/p/59 ...
- .Net程序员学用Oracle系列(19)：导出、导入（备份、还原）
1.传统的导出/导入工具 1.1.EXP 命令详解 1.2.IMP 命令详解 1.3.EXP/IMP 使用技巧 2.新的导出/导入工具 2.1.EXPDP/IMPDP 参数说明 2.2.EXPDP/I ...
- go基础系列：结构struct
Go语言不是一门面向对象的语言,没有对象和继承,也没有面向对象的多态.重写相关特性. Go所拥有的是数据结构,它可以关联方法.Go也支持简单但高效的组合(Composition),请搜索面向对象和组合 ...