什么是h5c3
數(shù)字是版本號(hào)怜珍，指的是第幾套標(biāo)準(zhǔn)渡紫。H5就是指HTML的第五套正式發(fā)布的標(biāo)準(zhǔn)到推，CSS3就是CSS標(biāo)準(zhǔn)的第三套
h5中新增的內(nèi)容
1.新增的標(biāo)簽(布局標(biāo)簽)
- header:頭部區(qū)域
- nav：導(dǎo)航區(qū)域
- main：主體區(qū)域
- section：小區(qū)域
- aside：邊欄
- article：正文
- section：小區(qū)域
- footer：頁(yè)尾區(qū)域
新標(biāo)簽其實(shí)也是一個(gè)塊級(jí)元素，不給樣式是看不到的惕澎。所以可以理解為新標(biāo)簽也是一個(gè)div莉测，它比div更有語(yǔ)義
新標(biāo)簽存在兼容問(wèn)題,解決辦法導(dǎo)入html5shiv.js就可以所有瀏覽器都支持,使用css hack按條件導(dǎo)入
<!--[if lte IE 8]>
<script src="html5shiv.js"></script>
<![endif]-->
2.h5的自定義屬性寫(xiě)法
以前寫(xiě)自定義屬性存在的問(wèn)題：
1.一眼看過(guò)去，不太好區(qū)分什么是自帶屬性唧喉，什么是自定義屬性
2.取值和賦值不方便捣卤，也無(wú)法一下子拿到所有自定義屬性來(lái)遍歷在H5里面又新增了關(guān)于自定義屬性的一部分功能
在H5里建議，所有的自定義屬性前面都要加一個(gè)data-
如果你加了data-八孝，那么在JS里就可以通過(guò)元素.dataset來(lái)取到這些自定義屬性
JS取值時(shí)是沒(méi)必要加data-的它會(huì)自動(dòng)去掉data-
注意：自定義屬性后還可以加-董朝，但是JS取值時(shí)不用加-，并把-后面的首字母大寫(xiě),有幾個(gè)-就去掉幾個(gè)-干跛，并把每個(gè)-后面的首字母大寫(xiě)
<body>
<!-- 對(duì)于div而言子姜，name也是自定義屬性,name在表單元素里才是自帶屬性 -->
<!-- <div id="box" shengao="175cm" tizhong="70kg" name="andy"></div> -->
<div id="box" data-shengao="175cm" data-tizhong="70kg" data-name="andy" data-nick-user-name="小安"></div>
<input type="text" name="">
</body>
</html>
<script>
var box = document.getElementById('box');
//以前獲取自定義屬性
// console.log(box.getAttribute('shengao'));
//以前設(shè)置自定義屬性
// box.setAttribute('shengao','186cm');
// 我要獲取所有的自定義屬性并遍歷
// console.log(box.dataset);
console.log( box.dataset.nickUserName );
// console.log(box.dataset.shengao);
// console.log(box.dataset.tizhong);
// console.log(box.dataset['name']);
//賦值
// box.dataset.shengao = "185cm";
// for(var key in box.dataset){
// console.log(box.dataset[key]);
// }
</script>
3.新增的表單元素
- email ：輸入郵箱，當(dāng)點(diǎn)擊提交時(shí)會(huì)自動(dòng)判斷是否為郵箱格式楼入，但是它不會(huì)判斷是否為空哥捕，所以最好加一個(gè)required
- url : 輸入網(wǎng)址的
- number ：輸入數(shù)字的，只能輸入數(shù)字
- range ： 滑塊
- Date pickers (date, month, week, time, datetime, datetime-local) ：日期或時(shí)間
- search ：pc端跟text沒(méi)區(qū)別嘉熊，移動(dòng)端彈出的鍵盤(pán)為搜索鍵盤(pán)
- color ：輸入顏色的遥赚，會(huì)彈出顏色選擇框
- tel： pc端跟text沒(méi)區(qū)別，移動(dòng)端彈出的是數(shù)字鍵盤(pán)
行內(nèi)屬性：required必填項(xiàng),加上表示不能為空
<form action="">
<!-- 既能顯示日期又能顯示時(shí)間的元素：格式：YYYY-MM-DDThh:mm -->
<input type="datetime-local">
<!-- 跟上面的區(qū)別在于：它只有日期阐肤，沒(méi)有時(shí)間 -->
<input type="date">
<!-- 會(huì)出現(xiàn)一個(gè)彈出顏色選擇的框 -->
<input type="color">
<!-- 專(zhuān)門(mén)用來(lái)輸入郵箱的鸽捻，外觀跟文本框是一樣的，區(qū)別在于：點(diǎn)擊提交時(shí)會(huì)自動(dòng)幫你驗(yàn)證內(nèi)容格式是否為郵箱的格式 -->
<!-- <input type="email" required> -->
<!-- 專(zhuān)門(mén)用來(lái)輸入網(wǎng)址的 -->
<!-- <input type="url"> -->
<!-- 滑塊 -->
<input type="range">
<!-- 專(zhuān)門(mén)用來(lái)輸入數(shù)字的 -->
<input type="number">
<!-- 搜索：在PC端跟普通文本框是一樣的，區(qū)別只在移動(dòng)端 -->
<input type="search">
<!-- 輸入電話(huà)號(hào)碼的御蒲，在PC端跟普通文本框是一樣的，在移動(dòng)端有效果：彈出鍵盤(pán)的時(shí)候彈出的數(shù)字鍵盤(pán) -->
<input type="tel">
<input type="submit">
</form>
4.classList
方便的獲取所有的類(lèi)诊赊， 以及操作類(lèi),classList是一個(gè)偽數(shù)組厚满，里面有所有的類(lèi)
- add： 添加類(lèi)，要添加幾個(gè)碧磅，就寫(xiě)幾個(gè)參數(shù)
- remove:刪除一個(gè)類(lèi)
- toggle：切換一個(gè)類(lèi)
- replace：替換一個(gè)類(lèi)
- contains：判斷是否包含某個(gè)類(lèi)碘箍，返回的是
true或者false
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--
classList：h5里面新增的一個(gè)api，可以獲得一個(gè)元素的所有的類(lèi)名鲸郊，以及很方便的添加一個(gè)類(lèi)丰榴，刪除一個(gè)類(lèi)等
classList：是一個(gè)偽數(shù)組，可以獲得所有的類(lèi)秆撮，每個(gè)類(lèi)就是數(shù)組中的一個(gè)元素四濒，通過(guò)下標(biāo)很方便的取出某個(gè)類(lèi)
方法：
add： 添加一個(gè)類(lèi)
remove： 刪除一個(gè)類(lèi)
toggle：切換一個(gè)類(lèi)
replace：替換一個(gè)類(lèi) 參數(shù)1：被替換的類(lèi)， 參數(shù)2：要替換的新的類(lèi)
-->
<style>
.box {
width: 100px;
height: 100px;
}
.red {
background-color: #f00;
}
.border{
border: 10px solid #000;
}
.blue{
background-color: blue;
}
</style>
</head>
<body>
<div class="box red"></div>
<input type="button" value="獲得所有類(lèi)" id="btn1">
<input type="button" value="添加邊框" id="btn2">
<input type="button" value="刪除邊框" id="btn3">
<input type="button" value="切換邊框" id="btn4">
<input type="button" value="變成藍(lán)色" id="btn5">
<input type="button" value="添加多個(gè)類(lèi)" id="btn6">
<input type="button" value="判斷是否有border這個(gè)類(lèi)" id="btn7">
</body>
</html>
<script>
// 找到div
var box = document.querySelector('div');
// 獲得所有類(lèi)的點(diǎn)擊事件
document.getElementById('btn1').onclick = function () {
// console.log(box.className);
console.log(box.classList[0]);
console.log(box.classList[1]);
}
// 添加邊框的點(diǎn)擊事件
document.getElementById('btn2').onclick = function () {
// box.className = "box red border";
// 以前加一個(gè)類(lèi)职辨，可以用+=盗蟆，但是要記得加空格，不方便
// box.className += " border"; // box.className = "box red" + " border"
box.classList.add('border');
}
document.getElementById('btn3').onclick = function () {
//不能這樣刪掉一個(gè)類(lèi)舒裤，這樣會(huì)得到NaN
//box.className -= " border"; // box.className = box.className - " border";
//因?yàn)樗F(xiàn)在有多少個(gè)類(lèi)喳资，就要寫(xiě)多少個(gè)類(lèi)，不能單獨(dú)去刪掉border
// box.className = "box red";
box.classList.remove('border');
}
document.getElementById('btn4').onclick = function () {
//如果以前沒(méi)有border這個(gè)類(lèi)就加上腾供，有這個(gè)類(lèi)就移出掉
box.classList.toggle('border');
}
document.getElementById('btn5').onclick = function () {
//參數(shù)1：被替換的類(lèi)
//參數(shù)2：要替換的新的類(lèi)
box.classList.replace('red', 'blue');
}
document.getElementById('btn6').onclick = function () {
// 下面這個(gè)是錯(cuò)的仆邓！這種鏈?zhǔn)骄幊痰膶?xiě)法在jQuery里有，JS原生沒(méi)有
// box.classList.add('border').add('big');
//下面這兩句話(huà)可以
// box.classList.add('border');
// box.classList.add('big');
// 下面這個(gè)也不可以伴鳖，會(huì)報(bào)錯(cuò)节值！一個(gè)都加不上
// box.classList.add('border big');
// 下面這個(gè)也不可以！
// box.classList.add('border,big');
// 如果想一次性加好幾個(gè)類(lèi)黎侈，那么要加幾個(gè)類(lèi)就要有幾個(gè)參數(shù)
// 比如下面三個(gè)參數(shù)察署，就會(huì)加三個(gè)類(lèi)
box.classList.add('border', 'big', 'test');
}
document.getElementById('btn7').onclick = function () {
console.log(box.classList.contains('border'));
}
</script>
5 地理定位
<script>
//可以獲取到當(dāng)前的經(jīng)緯度
//會(huì)去服務(wù)器請(qǐng)求當(dāng)前經(jīng)緯度,如果獲取到了,會(huì)自動(dòng)調(diào)用你這個(gè)函數(shù),并且把位置信息發(fā)送到這個(gè)形參里
//谷歌服務(wù)器被墻了
//電腦默認(rèn)沒(méi)有開(kāi)定位，你要先把定位開(kāi)了
navigator.geolocation.getCurrentPosition(function(loc){
console.log(loc);
// 緯度
console.log(loc.coords.latitude);
// 經(jīng)度
console.log(loc.coords.longitude);
});
</script>
6 localstorage
概念:本地存儲(chǔ)峻汉，用來(lái)把數(shù)據(jù)存儲(chǔ)在瀏覽器
應(yīng)用場(chǎng)景: 需要長(zhǎng)久保存一些數(shù)據(jù)時(shí)可以用localStorage贴汪，例：換網(wǎng)站皮膚、保存搜索歷史記錄
- 特點(diǎn)
長(zhǎng)久保存休吠，只要自己不刪就一直存在
按網(wǎng)站域名保存數(shù)據(jù)扳埂，不同網(wǎng)站之間不能訪(fǎng)問(wèn)彼此數(shù)據(jù)
只能存基本類(lèi)型，如果要存復(fù)雜類(lèi)型瘤礁，需要先轉(zhuǎn)成JSON再存
- 方法
1 保存數(shù)據(jù)setItem
2 獲取數(shù)據(jù)getItem
3 刪除數(shù)據(jù)removeItem
4 清空數(shù)據(jù)clear
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--
localStorage:可以把數(shù)據(jù)存儲(chǔ)在瀏覽器阳懂，可以做一些數(shù)據(jù)的緩存，只要自己不刪，數(shù)據(jù)一直存在
如果要長(zhǎng)久緩存數(shù)據(jù)岩调，用localStorage巷燥，只要自己不寫(xiě)代碼給服務(wù)器，那么都不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器
每個(gè)網(wǎng)站都有自己的本地存儲(chǔ)号枕，不同網(wǎng)站之間不能互相訪(fǎng)問(wèn)（網(wǎng)站是按域名區(qū)分的）
cookie也可以把數(shù)據(jù)存在瀏覽器
cookie特點(diǎn)：
1.有失效時(shí)間
2.每次訪(fǎng)問(wèn)網(wǎng)站都會(huì)自動(dòng)把cookie發(fā)送給服務(wù)器
方法：
setItem：保存一個(gè)數(shù)據(jù)缰揪，參數(shù)1：鍵，參數(shù)2：值
getItem：獲取一個(gè)數(shù)據(jù)葱淳，根據(jù)鍵來(lái)獲取
removeItem：刪除一個(gè)數(shù)據(jù)钝腺，根據(jù)鍵來(lái)刪除
clear：清空本網(wǎng)站的所有本地存儲(chǔ)
localStorage特點(diǎn)：
1.沒(méi)有有效期
2.不會(huì)自動(dòng)發(fā)給服務(wù)器
3.它也只能存基本類(lèi)型，如果直接存復(fù)雜類(lèi)型赞厕，會(huì)調(diào)用復(fù)雜類(lèi)型的toString方法艳狐，再來(lái)存儲(chǔ)
4.如果要存復(fù)雜類(lèi)型，可以先把復(fù)雜類(lèi)型轉(zhuǎn)成JSON字符串皿桑，再來(lái)存儲(chǔ)
-->
</head>
<body>
<input type="button" value="保存基本類(lèi)型" id="btn1">
<input type="button" value="獲取基本類(lèi)型" id="btn2">
<input type="button" value="刪除一個(gè)本地存儲(chǔ)" id="btn3">
<input type="button" value="清空本地存儲(chǔ)" id="btn4">
<input type="button" value="保存數(shù)組" id="btn5">
<input type="button" value="保存對(duì)象" id="btn6">
<input type="button" value="獲取數(shù)組" id="btn7">
<input type="button" value="獲取對(duì)象" id="btn8">
</body>
</html>
<script>
document.getElementById('btn1').onclick = function () {
//保存一段數(shù)據(jù)到localStorage里
//參數(shù)1：鍵
//參數(shù)2：真正要保存的值
localStorage.setItem('name', 'jack');
localStorage.setItem('age', 321);
localStorage.setItem('gender', true);
}
document.getElementById('btn2').onclick = function () {
//只有一個(gè)參數(shù)：鍵
var res = localStorage.getItem('name');
console.log(res);
}
document.getElementById('btn3').onclick = function () {
//刪除一個(gè)數(shù)據(jù)毫目，根據(jù)鍵來(lái)刪
localStorage.removeItem('age');
}
document.getElementById('btn4').onclick = function () {
//清除（刪掉本網(wǎng)站里所有的本地存儲(chǔ)）
localStorage.clear();
}
//保存數(shù)組
document.getElementById('btn5').onclick = function () {
var arr = [10, 20, 30, 40];
// localStorage.setItem('arr', arr);
//轉(zhuǎn)成字符串
// console.log(arr.toString());
var json = JSON.stringify(arr);
localStorage.setItem('arr', json);
}
//保存對(duì)象
document.getElementById('btn6').onclick = function () {
var obj = { name:"jack", age:16};
// localStorage.setItem('obj', obj);
// console.log(obj.toString());
var json = JSON.stringify(obj);
localStorage.setItem('obj',json);
}
//獲取數(shù)組
document.getElementById('btn7').onclick = function(){
var res = localStorage.getItem('arr');
// console.log(res);
console.log(JSON.parse(res));
}
//獲取對(duì)象
document.getElementById('btn8').onclick = function(){
var res = localStorage.getItem('obj');
// console.log(res);
console.log(JSON.parse(res));
}
</script>
7 sessionStorage
也是把數(shù)據(jù)存儲(chǔ)在瀏覽器，幾乎跟localStorage都是一樣的（包括用法）唁毒，你可以把sessionStorage理解為是一個(gè)短命版的localStorage
關(guān)閉瀏覽器蒜茴，數(shù)據(jù)就刪除了。除了這個(gè)意外浆西，其他都是跟localStorage是一樣的
應(yīng)用場(chǎng)景:在一些需要臨時(shí)保存數(shù)據(jù)的地方就用sessionStorage,多個(gè)頁(yè)面?zhèn)髦?/p>
document.getElementById('btn1').onclick = function(){
sessionStorage.setItem('name','jack');
sessionStorage.setItem('age',16);
sessionStorage.setItem('gender',true);
}
document.getElementById('btn2').onclick = function(){
var res = sessionStorage.getItem('name');
console.log(res);
}
document.getElementById('btn3').onclick = function(){
sessionStorage.removeItem('name');
}
document.getElementById('btn4').onclick = function(){
sessionStorage.clear();
}
</script>
8 拖拽事件
網(wǎng)頁(yè)里面的元素可以被拖拽
但是元素不是你想拖粉私，想拖就能拖
強(qiáng)行拖：給元素加一個(gè)行內(nèi)屬性：draggable="true"
跟被拖拽元素有關(guān)的事件
ondragstart 拖拽開(kāi)始事件
ondrag 拖拽中
ondragend 拖拽結(jié)束的事件
把元素拖拽到另一個(gè)容器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--
之前學(xué)的事件是跟被拖拽元素有關(guān)的
現(xiàn)在要學(xué)的事件跟容器元素（目標(biāo)元素）有關(guān)的事件
ondragenter：有元素拖進(jìn)來(lái)
ondragleave：有元素拖出去
ondrop： 有元素在容器范圍內(nèi)松手觸發(fā)
ondragover：主要是為了讓drop能夠被觸發(fā)，這個(gè)事件里只要做一件事：阻止事件默認(rèn)行為
在JS里所有的事件名都是小寫(xiě)近零，不遵從駝峰
-->
<style>
.box{
width: 100px;
height: 100px;
background-color: #f00;
}
.container{
width: 350px;
height: 500px;
border: 1px solid #000;
position: absolute;
right:20px;
top:20px;
}
</style>
</head>
<body>
<div class="box" draggable="true"></div>
<div class="container"></div>
</body>
</html>
<script>
var box = document.querySelector('.box');
var container = document.querySelector('.container');
//給被拖拽元素加拖拽結(jié)束事件
// box.ondragend = function(){
// //加到容器里
// container.appendChild(box);
// }
//有元素進(jìn)入時(shí)觸發(fā)
container.ondragenter = function(){
console.log('進(jìn)來(lái)了');
// container.appendChild(box);
}
//有元素離開(kāi)時(shí)觸發(fā)
container.ondragleave = function(){
console.log('出去了');
}
// 當(dāng)有元素在容器內(nèi)松手時(shí)觸發(fā)的事件
// 如果你想ondrop事件能夠被觸發(fā)诺核，還需要再寫(xiě)一個(gè)事件叫ondragover事件，并且在over事件里阻止事件的默認(rèn)行為
container.ondrop = function(){
// console.log('drop');
container.appendChild(box);
}
//下面這個(gè)事件主要是為了讓drop能夠被觸發(fā)
container.ondragover = function(e){
//這個(gè)事件在檢測(cè)是否有元素在我的范圍內(nèi)
//只要有元素拖拽到我的范圍內(nèi)不斷觸發(fā)
//這個(gè)事件默認(rèn)有個(gè)行為：當(dāng)檢測(cè)到右元素在我范圍內(nèi)時(shí)久信，不斷的阻止它放進(jìn)來(lái)
//默認(rèn)情況下窖杀，任何元素都不允許有東西放置進(jìn)來(lái)
console.log('over');
e = e || window.event;
e.preventDefault();
}
</script>
