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学习笔记10：端口扫描详解（下）
上一篇先是介绍了UDP的端口扫描,又谈了TCP的不完全连接端口扫描 https://www.cnblogs.com/xuyiqing/p/9389276.html 接下来我们看看TCP的全连接端口扫描 ...
- ubuntu16.04 下鼠标变成十字形状无法点击情况解决
出现这种问题的原因是把shell命令行终端当成了python环境,误输入了"import"命令. (当然如果你真的希望在shell中输入import指令除外...) 我自己想当然的 ...
- Python - 关于代码阅读的一些建议
初始能力 让阅读思路保持清晰连贯,主力关注在流程架构和逻辑实现上,不被语法.技巧和业务流程等频繁地阻碍和打断. 建议基本满足以下条件,再开始进行代码阅读: 具备一定的语言基础:熟悉基础语法,常用的函数 ...
- rgba()和opacity之间的区别(面试题)
rgba()和opacity之间的区别: 相同点:rgba()和opacity都能实现透明效果: 不同点:opacity作用于元素,以及元素中所有的内容: rgba()只用于于元素的颜色,及背景色: ...
- springMVC(2)---获取前段数据
springMVC(1)---获取前段数据 首先说明,如果你学过Struts2,那么在学springMVC就会简单很多,我也不最基础的开始写了,我前篇文章搭建了个ssm框架,算是springmvc入门 ...
- django在关闭debug后，admin界面 及静态文件无法加载的解决办法
当debug为true的时候,ALLOWED_HOSTS是跳过不管用的.所以这里需要将debug关掉,令debug=false,ALLOWED_HOSTS=[ '*' ]表示所有的主机都可以访问 开启 ...
- SpringBoot配置Cors解决跨域请求问题
一.同源策略简介 同源策略[same origin policy]是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源. 同源策略是浏览器安全的基石. 什么是源 源[or ...
- 《HelloGitHub月刊》第 01 期
<HelloGitHub月刊> 因为现在这个项目只有我自己做,只敢叫"月刊",希望有志同道合者,快点加入到这个项目中来!同时,如果您有更好的建议或者意见,欢迎联系我.联 ...
- 【原创】C++之自定义高效的swap（1）
1 问题背景 当交换两个包含了指针成员的类,我们最想看到的是直接交换其指针.但是当我们调用std::swap标准库这个模板函数时,通常它都会复制3个指针指向的对象作为交换所用,缺乏效率.如下: ...
- Apollo 6 — ConfigService 获取配置接口
大纲 看本文之前,建议看看 apollo 的官方文档,特别是数据库设计文档. 主流程分析 2.1 聊聊细节 2.2 loadConfig() 加载配置 2.3 auditReleases() 方法记录 ...