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. ...
随机推荐
- 树莓派连接不上WiFi
之前还好好的,突然连接不上WiFi,打开文件WiFi配置文件:/etc/wpa_supplicant/wpa_supplicant.conf发现有多个连接记录,把用到的留下,其他的删掉即可: sudo ...
- Word文档使用密码加密
Word文档使用密码加密 方法如下: 文件-->信息-->保护文档-->用密码进行加密-->设置密码
- 在关闭页面时自动清除Session cookie，页面缓存
在默认情况下,session对象在关闭浏览器后并不是立刻被销毁,因此,为了考虑系统的安全性,在用户退出时,需要即刻清除session对象,防止他人盗用session对象中的信息. 清除session对 ...
- Django | 页面数据的缓存与使用
为什么要使用缓存? 一个动态网站的基本权衡点就是,它是动态的. 每次用户请求页面,服务器会重新计算.从开销处理的角度来看,这比你读取一个现成的标准文件的代价要昂贵的多 使用缓存,将多用户访问时基本相同 ...
- 一套能体现 RBAC 的表结构设计
1.RBAC 概述 2.表结构设计 2.1.用户表 2.2.角色表 2.3.权限表 2.4.用户角色(关系)表 2.5.角色权限(关系)表 3.总结 1.RBAC 概述 RBAC(Role-Based ...
- .Net和C#介绍
一.前言 本文主要针对刚入门以及还需要对基础进行恶补一下的兄弟进行基础介绍,并尽可能的做到客观,如有错误也虚心接受高手门的纠正. 二..Net平台简介 .net即DotNet,首先我先给出微软的定义: ...
- leetcode — minimum-window-substring
import java.util.HashMap; import java.util.Map; /** * * Source : https://oj.leetcode.com/problems/mi ...
- 【SqlServer系列】远程访问
1 概述 已发布[SqlServer系列]文章如下: [SqlServer系列]SQLSERVER安装教程 [SqlServer系列]数据库三大范式 [SqlServer系列]表单查询 [SqlS ...
- 翻译：TRUNCATE TABLE(已提交到MariaDB官方手册)
本文为mariadb官方手册:TRUNCATE TABLE的译文. 原文:https://mariadb.com/kb/en/truncate-table/我提交到MariaDB官方手册的译文:htt ...
- DNS工作原理
一.简述dns DNS(domain name system)域名系统或者(domain named system)区域名称服务,分为正向与反向域名解析,适用C/S,端口路53/udp,53/tcp, ...