前端基础学习之h5-dom操作、新增api（全屏操作、video多媒体、history、web存储等）

最新推荐文章于 2022-06-29 01:43:46 发布
最新推荐文章于 2022-06-29 01:43:46 发布
阅读量544 收藏 2
点赞数
分类专栏： 前端学习基础记录 文章标签： web javascript js html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gua222/article/details/111664978
版权
1.获取dom的方式

H5 api有效选择器:在css当中能使用的都是有效选择器

  • document.getElementsByClassName (‘class’);
    通过类名获取元素，以伪数组形式存在。
  • document.querySelector(‘selector’);
    通过CSS选择器获取元素，符合匹配条件的第1个元素。
  • document.querySelectorAll(‘selector’);
    通过CSS选择器获取元素，以伪数组形式存在。
2.类操作

H5 api 基于对象的classList的方法 add() remove() toggle() contains()

  • dom.classList.add(‘class’);
    添加class
  • dom.classList.remove(‘class’);
    移除class
  • dom.classList.toggle(‘class’);
    切换class，有则移除，无则添加
  • dom.classList.contains(‘class’);
    检测是否存在class
3.自定义属性

在HTML5中我们可以自定义属性，其格式如下data-*=""

  • dom.dataset
    dom.dataset是以对象形式存在的，当我们为同一个dom节点指定了多个自定义属性时， dom.dataset则存储了所有的自定义属性的值。
  • dom.dataset[‘属性’]
    获取单个自定义属性的值
  • demo.dataset[‘属性’] = 属性值;
    设置自定义属性的值

dom/类/自定义属性操作demo1：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
        ul {
            list-style: none;
        }

        li {
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: #fff;
            background: skyblue;
            float: left;
            cursor: pointer;
        }

        li.active {
            background: pink;
        }
        .hot{
        	background-color: hotpink;
        }

    </style>
</head>
<body>
	<ul>
	    <li>菜单1</li>
	    <li class="active">菜单2</li>
	    <li>菜单3</li>
	    <li>菜单4</li>
	</ul>
	<button>按钮</button>
	<div data-user="张三" data-user-age="19">自定义属性</div>
<script>
/*h5 api*/
//1.获取dom的方式
//1.1. querySelector()       获取符合选择器的第一个元素
//1.2. querySelectorAll()    获取符合选择器的所有元素
///* H5 api有效选择器:在css当中能使用的都是有效选择器*/
console.log(document.querySelector("li"));
console.log(document.querySelector("li:nth-child(2)"));

//2 类操作
//h5 api 基于对象的classList的方法 add() remove() toggle() contains()
// let dom=document.querySelector("li:nth-child(2)");
// dom.classList.add("red");
// document.querySelector("button").οnclick=function () {
// 	this.classList.toggle("hot");
// }
window.onload=function () {
	document.querySelector("ul").onclick=function (e) {
		let currentObj=e.target;
		if(!currentObj.classList.contains("active")){
			document.querySelector(".active").classList.remove("active");
			currentObj.classList.add("active");

		}
	}
}

//3.h5 自定义属性 
//=====================
//jquery 自定义属性   data-* 自定义属性 jquery操作内存
//jquery 获取自定义属性 $('div').data() 获取所有 $('div').data('user')--获取单个
//jquery 设置单个属性的值  $('div').data("user","李四")
//====================================================
//h5自定义属性 data-*  h5 操作dom
//h5 获取自定义属性 document.querySelector("div").dataset--获取所有   document.querySelector("div").dataset.user--获取单个
//h5 设置自定义属性的值 document.querySelector("div").dataset.user="李四"
let objSet=document.querySelector("div").dataset;
console.log(objSet);
console.log(objSet.user);
console.log(objSet.userAge);
objSet.user="李四";
console.log(objSet.user)
</script>
</body>
</html>

dom/类/自定义属性操作demo2-简单的tab切换：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul:first-child {
            list-style: none;
        }

        ul:first-child li {
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: #fff;
            background: green;
            float: left;
            cursor: pointer;
        }

        ul:first-child li.active {
            background: red;
        }

        .box li{
            width: 400px;
            height: 400px;
            background: pink;
            display: none;
        }
        .box li.show{
            display: block;
        }
    </style>
</head>
<body>
<ul class="nav">
    <!--在渲染的时候  大小的属性会转换成小写 -->
    <li data-content-id="content01">菜单1</li>
    <li data-content-id="content02" class="active">菜单2</li>
    <li data-content-id="content03">菜单3</li>
    <li data-content-id="content04">菜单4</li>
</ul>
<ul class="box">
    <li id="content01">内容1</li>
    <li id="content03">内容3</li>
    <li id="content04">内容4</li>
    <li id="content02" class="show">内容2</li>
</ul>
<!-- css序号选择器伪类选择器  E:first-child-->
<!-- 查找顺序：
通过E确定父元素
通过父元素找到所有的子元素
再去找第一个子元素
找到第一个子元素之后再去匹配类型是不是E  不是：无效选择器
ul:last-child
-->
 <script>
     document.querySelector(".nav").onclick=function (e) {
        let curNavLi=e.target;
        if(!curNavLi.classList.contains("active")){
            //获取老的nav li
            let oldNavLi=document.querySelector(".active");
            oldNavLi.classList.remove("active");
            curNavLi.classList.add("active");
            //把老的navli 对应的老的 box li的class去除
            document.querySelector("#"+oldNavLi.dataset.contentId).classList.remove("show");
            //给新的 box li 添加类
            document.querySelector("#"+curNavLi.dataset.contentId).classList.add("show");
        }
       


     }
 </script>
</body>
</html>
4.全屏操作

HTML5规范允许用户自定义网页上任一元素全屏显示。

  • dom.requestFullScreen()
    开启全屏显示
  • document.cancelFullScreen()
    取消全屏显示
  • document.fullScreen
    检测当前是否处于全屏
  • 由于其兼容性原因，不同浏览器需要添加前缀如： webkit内核浏览器：webkitRequestFullScreen、webkitCancelFullScreen、document.webkitIsFullScreen，如chrome浏览器。 Gecko内核浏览器：mozRequestFullScreen、mozCancelFullScreen、document.mozFullScreen，如火狐浏览器。

demo:
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.box{
			width: 800px;
			height: 800px;
			background-color: #102b6a;
		}
	</style>
</head>
<body>
	<div class="box">
		<video src="video/trailer.mp4" width="800"></video>
	</div>
	<button class="btn1">开启全屏</button>
	<button class="btn2">取消全屏</button>
	<script>
	document.querySelector(".btn1").onclick=function () {
		// 所有元素都可以全屏显示
		// requestFullScreen
		// h5 api 存在兼容问题 IE9以下完全没用
		// 高级浏览器支持，但是需要加上私有前缀
		// 私有前缀：css(-wekit- 谷歌, -moz- 火狐, -ms- IE, -o-)
		// js中也有如上的私有前缀，不需要- -，在方法属性之前加上即可，首字母大写
		

		//1.播放器全屏显示
		// document.querySelector('video').webkitRequestFullScreen();
		
		//2.box 容器全屏
		// document.querySelector(".box").webkitRequestFullScreen();

		//3.文档对象整个全屏
		document.documentElement.webkitRequestFullScreen();
	}

	document.querySelector(".btn2").onclick=function () {
		// 取消全屏也要加上私有前缀
		//  所有元素的取消全屏只需要用document就可，和元素无关
		
		document.webkitCancelFullScreen();
	}
	</script>
</body>
</html>
5.多媒体–自定义播放器
  • 方法
方法描述
addTextTrack()向音频/视频添加新的文本轨道
canPlayType()检测浏览器是否能播放指定的音频/视频类型
load()重新加载音频/视频元素
play()开始播放音频/视频
addTextTrack()向音频/视频添加新的文本轨道
pause()暂停当前播放的音频/视频
  • 属性
属性描述
audioTracks返回表示可用音轨的 AudioTrackList 对象
autoplay设置或返回是否在加载完成后随即播放音频/视频
buffered返回表示音频/视频已缓冲部分的 TimeRanges 对象
controller返回表示音频/视频当前媒体控制器的 MediaController 对象
controls设置或返回音频/视频是否显示控件（比如播放/暂停等）
crossOrigin设置或返回音频/视频的 CORS 设置
currentSrc返回当前音频/视频的 URL
currentTime设置或返回音频/视频中的当前播放位置（以秒计）
defaultMuted设置或返回音频/视频默认是否静音
defaultPlaybackRate设置或返回音频/视频的默认播放速度
duration返回当前音频/视频的长度（以秒计）
ended返回音频/视频的播放是否已结束
error返回表示音频/视频错误状态的 MediaError 对象
loop设置或返回音频/视频是否应在结束时重新播放
mediaGroup设置或返回音频/视频所属的组合（用于连接多个音频/视频元素）
muted设置或返回音频/视频是否静音
networkState返回音频/视频的当前网络状态
paused设置或返回音频/视频是否暂停
playbackRate设置或返回音频/视频播放的速度
played返回表示音频/视频已播放部分的 TimeRanges 对象
poster规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像（URL）。
preload设置或返回音频/视频是否应该在页面加载后进行加载
readyState返回音频/视频当前的就绪状态
seekable返回表示音频/视频可寻址部分的 TimeRanges 对象
seeking返回用户是否正在音频/视频中进行查找
src设置或返回音频/视频元素的当前来源
startDate返回表示当前时间偏移的 Date 对象
textTracks返回表示可用文本轨道的 TextTrackList 对象
videoTracks返回表示可用视频轨道的 VideoTrackList 对象
volume设置或返回音频/视频的音量
  • 事件
事件描述
abort当音频/视频的加载已放弃时
canplay当浏览器可以播放音频/视频时
canplaythrough当浏览器可在不因缓冲而停顿的情况下进行播放时
durationchange当音频/视频的时长已更改时
emptied当目前的播放列表为空时
ended当目前的播放列表已结束时
error当在音频/视频加载期间发生错误时
loadeddata当浏览器已加载音频/视频的当前帧时
loadedmetadata当浏览器已加载音频/视频的元数据时
loadstart当浏览器开始查找音频/视频时
pause当音频/视频已暂停时
play当音频/视频已开始或不再暂停时
playing当音频/视频在已因缓冲而暂停或停止后已就绪时
progress当浏览器正在下载音频/视频时
ratechange当音频/视频的播放速度已更改时
seeked当用户已移动/跳跃到音频/视频中的新位置时
seeking当用户开始移动/跳跃到音频/视频中的新位置时
stalled当浏览器尝试获取媒体数据，但数据不可用时
suspend当浏览器刻意不获取媒体数据时
timeupdate当目前的播放位置已更改时
volumechange当音量已更改时
waiting当视频由于需要缓冲下一帧而停止

自定义播放器demo:
在这里插入图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>视频播放</title>
    <!--字体图标库-->
    <link rel="stylesheet" href="css/font-awesome.css"/>
    <link rel="stylesheet" href="css/player.css"/>
</head>
<body>
<figure>
    <figcaption>视频播放器</figcaption>
    <div class="player">
        <video src="./video/trailer.mp4"></video>
        <div class="controls">
            <!--播放/暂停-->
            <a href="javascript:;" class="switch fa fa-play"></a>
            <!--播放进度-->
            <div class="progress">
                <div class="line"></div>
                <div class="bar"></div>
            </div>
            <!--当前播放时间/播放总时长-->
            <div class="timer">
                <span class="current">00:00:00</span> / <span class="total">00:00:00</span>
            </div>
            <!--全屏/取消全屏-->
            <a href="javascript:;" class="expand fa fa-arrows-alt"></a>
        </div>
    </div>
</figure>
</body>
</html>

$(function () {

        /*获取需要操作的dom元素*/
        /*--多媒体相关的api都是dom元素提供的--*/
        let $video=$('video');
        let video=$video.get(0);

        let $total=$('.total');

        let $switch=$('.switch');

        let $line=$('.line');

        let $current=$('.current');

        let $bar=$('.bar');

        let $expand=$(".expand");

        /*格式化时间函数*/
        function formatTime(time) {
            let h=Math.floor(time/3600);
            let m=Math.floor(time%3600/60);
            let s=Math.floor(time%60);
            return (h>9?h:'0'+h)+":"+(m>9?m:'0'+m)+":"+(s>9?s:'0'+s);
        }

        /*1.视频加载 / 视频总时长*/
        video.oncanplay=function () {
            $video.show();
            $total.html(formatTime(video.duration));

        };

        /*2.播放 / 暂停*/
        $switch.on("click",function () {
            /*获取按钮状态*/
            if($(this).hasClass('fa-play')){
                //如果是播放按钮 则点击播放 显示暂停按钮
                video.play();
                $(this).removeClass('fa-play').addClass('fa-pause');
            }else{
                 //如果是暂停按钮 则点击暂停 显示播放按钮
                video.pause();
                $(this).removeClass('fa-pause').addClass('fa-play');

            }
        });

        /*3.进度条 / 播放时长*/
        video.ontimeupdate=function () {
            //播放时长
            $current.html(formatTime(video.currentTime));
            //进度条== 换算百分比显示
            let rate=video.currentTime/video.duration;
            let percent= rate*100+"%";
            $line.css("width",percent);
        }

        /*4.全屏 / 取消全屏*/
        $expand.on('click',function () {
            //判断当前状态
            if($(this).hasClass('fa-arrows-alt')){
                //全屏显示
               // video.webkitRequestFullScreen();
                $('.player').get(0).webkitRequestFullScreen();
                //显示取消全屏图标
                $(this).removeClass('fa-arrows-alt').addClass('fa-compress');

            }else{
                //取消全屏
                document.webkitCancelFullScreen();
                //显示全屏图片
                $(this).addClass('fa-arrows-alt').removeClass('fa-compress');
            }
        })

        /*5.跃进功能*/
        $bar.on('click',function (e) {
            // 获取var总的宽度
            let width=$(this).width();
            //获取点击时距离左侧的宽度
            let cw=e.offsetX;
            //根据比例获取需播放的时间
            let time=(cw/width)*video.duration;
            video.currentTime=time;
        })

        /*6.播放完成 重置 回到最初*/
        video.onended=function () {
            this.currentTime=0;
            $switch.removeClass('fa-pause').addClass('fa-play');
        }
    })

body {
    padding: 0;
    margin: 0;
    font-family: 'microsoft yahei', 'Helvetica', simhei, simsun, sans-serif;
    background-color: #F7F7F7;
}
a {
    text-decoration: none;
}
figcaption {
    font-size: 24px;
    text-align: center;
    margin: 20px;
}
.player {
    width: 720px;
    height: 360px;
    margin: 0 auto;
    border-radius: 4px;
    background: #000 url(../images/loading.gif) center/300px no-repeat;
    position: relative;
    text-align: center;
}
video {
    display: none;
    height: 100%;
    margin: 0 auto;
}
/*全屏操作后  自带的控制栏会显示  在显示的时候隐藏*/
video::-webkit-media-controls {
    display: none !important;
}
.controls {
    width: 700px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    position: absolute;
    left: 50%;
    margin-left: -350px;
    bottom: 5px;
    /*比全屏的状态下的视频元素高*/
    z-index: 100000000000;
    opacity: 1;
}
.player:hover .controls {
    opacity: 1;
}
/*播放/暂停*/
.controls .switch {
    display: block;
    width: 20px;
    height: 20px;
    font-size: 20px;
    color: #FFF;
    position: absolute;
    top: 11px;
    left: 11px;
}
/*全屏按钮*/
.controls .expand {
    display: block;
    width: 20px;
    height: 20px;
    font-size: 20px;
    color: #FFF;
    position: absolute;
    right: 11px;
    top: 11px;
}
/*进度条*/
.progress {
    width: 430px;
    height: 10px;
    border-radius: 3px;
    overflow: hidden;
    background-color: #555;
    cursor: pointer;
    position: absolute;
    top: 16px;
    left: 45px;
}
/*下载进度*/
.progress .loaded {
    width: 0;
    height: 100%;
    background-color: #999;
}
/*播放进度*/
.progress .line {
    width: 0;
    height: 100%;
    background-color: #FFF;
    position: absolute;
    top: 0;
    left: 0;
}
.progress .bar {
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}
/*时间*/
.timer {
    height: 20px;
    line-height: 20px;
    position: absolute;
    left: 490px;
    top: 11px;
    color: #FFF;
    font-size: 14px;
}
6.历史管理（history）

提供window.history，对象我们可以管理历史记录， 可用于单页面应用，Single Page Application，可以无刷新改变网页内容。

  • 1.history.pushState(data, title, url)
    追加历史记录。data用于存储自定义数据，通常设为null​+ title网页标题，基本上没有被支持，一般设为空​+ url 以当前域为基础增加一条历史记录，不可跨域设置
  • 2.history.replaceState(data, title, url)
    替换当前历史。与pushState()基本相同， 不同之处在于replaceState()，只是替换当前url，不会增加/减少历史记录。
  • 3.window.onpopstate=function(){}
    监听历史切换事件。当前进或后退时则触发
7.Web 存储
  • 特性
    • 设置、存储方便
    • 容量较大 sessionStorage 约5M、localStorage 约20M
    • 只能存储字符串
  • window.sessionStorage 会话存储
    • 生命周期为关闭浏览器窗口
    • 在同一个窗口（页面）下数据可共享
  • window.localStorage 本地存储
    • 永久生效,没有时间限制的数据存储，除非手动删除（服务器方式访问然后清除缓存）
    • 可以多窗口（页面）共享
  • 方法
    • setItem(key, value) 设置存储内容
    • getItem(key) 读取存储内容
    • removeItem(key) 删除键值为key的存储内容
    • clear() 清空所有存储内容

本地存储demo案例：搜索历史记录
在这里插入图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>首页</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            margin-left: 300px;
        }
        ul{
            list-style: none;
        }
        ul li,div{
            width: 250px;
            padding: 10px 0;
            margin-left: 10px;
            border-bottom: 1px dashed #ccc;
            height: 20px;
        }
        a{
            float: right;
        }
        input{
            padding: 5px;
            margin: 10px;
        }
    </style>
</head>
<body>
<input type="search" placeholder="输入搜索关键字"/>
<input type="button" value="搜索"/>
<div><a href="javascript:;">清空搜索记录</a></div>
<ul>
</ul>
<script src="js/jquery-1.12.3.js"></script>
<script>
$(function () {
    //使用json数据存储历史搜索记录
    //1.默认根据历史搜索记录加载历史列表
    let historyListStr=localStorage.getItem('historyList') || '[]';
    let historyListArr=JSON.parse(historyListStr);
    let $ul=$('ul');
    initList();
    //2.点击搜索时更新历史列表
    $('[type=button]').on('click',function () {
        //更新列表数组
        let searchVal=$('[type=search]').val();
        if(!searchVal){
            alert("请输入搜索关键词");
            return;
        }
        historyListArr.push(searchVal);
        //更新localStorage
        localStorage.setItem('historyList',JSON.stringify(historyListArr));
        initList();
        $('[type=search]').val('');
    })
    //3.点击删除时删除对应的历史列表
    $ul.on('click','a',function () {
        //删除数组中对应的元素
       let i= $(this).data('index');
       historyListArr.splice(i,1);
        //更新localStorage
        localStorage.setItem('historyList',JSON.stringify(historyListArr));
        initList();
    });
    //4.点击清空搜索记录清空历史列表
    $('div a').on('click',function () {
       historyListArr=[];
       localStorage.removeItem('historyList');
       // localStorage.setItem('historyList','[]');
        initList();
    });
    //公共渲染html列表函数
    function initList() {
        let html="";
        historyListArr.forEach( (item,index)=> {
            // console.log(item+'===>'+index);
            html+="<li><span>"+item+"</span><a data-index="+index+" href='javascript:;'>删除</a></li>";
        });
        html=html || "<li>没有搜索记录</li>";
        $ul.html(html);
    }
});
</script>
</body>
</html>
8.地理定位
  • 获取当前地理信息
    navigator.geolocation.getCurrentPosition(successCallback, errorCallback)
  • 重复获取当前地理信息
    navigator.geolocation.watchPosition(successCallback, errorCallback)
  • 当成功获取地理信息后，会调用succssCallback，并返回一个包含位置信息的对象position
    position.coords.latitude纬度
    position.coords.longitude经度
    position.coords.accuracy精度
    position.coords.altitude海拔高度
  • 当获取地理信息失败后，会调用errorCallback，并返回错误信息error
  • 在桌面浏览器使用geolocation会遇到网络阻塞问题 ,多用移动端。
  • 在现实开发中，通过调用第三方API（如百度地图）来实现地理定位信息，这些API都是基于用户当前位置的，并将用位置位置（经/纬度）当做参数传递，就可以实现相应的功能
9.离线缓存

HTML5中我们可以轻松的构建一个离线（无网络状态）应用，只需要创建一个cache manifest文件。

  • 优势

    • 1、可配置需要缓存的资源
    • 2、网络无连接应用仍可用
    • 3、本地读取缓存资源，提升访问速度，增强用户体验
    • 4、减少请求，缓解服务器负担

  • 缓存清单

    • 一个普通文本文件，其中列出了浏览器应缓存以供离线访问的资源，推荐使用.appcache为后缀名
    • 例如我们创建了一个名为demo.appcache的文件，然后在需要应用缓存在页面的根元素(html)添加属性manifest=“demo.appcache”，路径要保证正确。

  • manifest文件格式

    • 1、顶行写CACHE MANIFEST
    • 2、CACHE: 换行 指定我们需要缓存的静态资源，如.css、image、js等
    • 3、NETWORK: 换行 指定需要在线访问的资源，可使用通配符
    • 4、FALLBACK: 换行 当被缓存的文件找不到时的备用资源

  • 其它

    • 1、CACHE: 可以省略，这种情况下将需要缓存的资源写在CACHE MANIFEST
    • 2、可以指定多个CACHE: NETWORK: FALLBACK:，无顺序限制
    • 3、#表示注释，只有当demo.appcache文件内容发生改变时或者手动清除缓存后，才会重新缓存。
    • 4、chrome 可以通过chrome://appcache-internals/工具和离线（offline）模式来调试管理应用缓存
10.drag事件 -拖放

拖放（Drag 和 drop）是 HTML5 标准的组成部分。

  • draggable=“true”
    设置元素拖拽属性为可拖动
  • drag 事件 – 在拖动目标上触发事件 (源元素)
    元素正在拖动时触发
  • dragstart 事件 – 在拖动目标上触发事件 (源元素)
    用户开始拖动元素时触发
  • dragend 事件 – 在拖动目标上触发事件 (源元素)
    用户完成元素拖动后触发
  • dragenter – 释放目标时触发的事件
    当被鼠标拖动的对象进入其容器范围内时触发此事件
  • dragover – 释放目标时触发的事件
    当某被拖动的对象在另一对象容器范围内拖动时触发此事件
  • ondragleave – 释放目标时触发的事件
    当被鼠标拖动的对象离开其容器范围内时触发此事件
  • drop – 释放目标时触发的事件
    在一个拖动过程中，释放鼠标键时触发此事件
  • dataTransfer.setData() 方法
    设置被拖数据的数据类型和值
  • 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）

拖放案例1：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>拖拽</title>
	<style>
		body {
			padding: 0;
			margin: 0;
			background-color: #F7F7F7;
			position: relative;
		}

		.box {
			width: 150px;
			height: 150px;
			background-color: yellow;
			position: absolute;
			top: 100px;
			left: 50px;
		}

		.container {
			width: 300px;
			height: 300px;
			background-color: green;
			position: absolute;
			top: 100px;
			left: 50%;
			margin-left: -150px;
		}
	</style>
</head>
<body>
	<div class="box" draggable="true"></div>
	<div class="container"></div>

	<script>
		var box = document.querySelector('.box');
		var container = document.querySelector('.container');

		// 整个拖拽都会执行
		box.addEventListener('drag', function (e) {
			console.log('drag');
		});

        // 拖拽的点离开当前盒子
		box.addEventListener('dragleave', function () {
			this.style.backgroundColor="yellow";
			console.log('dragleave');
		});

		// 拖拽开始
		box.addEventListener('dragstart', function () {
			this.style.backgroundColor = 'red';
			console.log('dragstart')
		});

		// 拖拽结束
		box.addEventListener('dragend', function (ev) {
			this.style.backgroundColor = '';
			console.log('dragend');
		});


		//在目标元素上移动
		container.addEventListener('dragover', function (e) {
			this.style.backgroundColor = 'yellow';
            console.log('目标dragover');
			e.preventDefault();
		});

		//在目标元素松开
		container.addEventListener('drop', function (e) {
			this.style.backgroundColor = 'black';
			console.log('目标drop');
			e.preventDefault();
		});
        //在目标元素离开
        container.addEventListener('dragleave', function (e) {
            this.style.backgroundColor = '';
            console.log('目标dragleave');
            e.preventDefault();
        });
	</script>
</body>
</html>

拖放案例2-MDN网站案例：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #draggable {
            width: 200px;
            height: 20px;
            text-align: center;
            background: white;
            font-size: 14px;
        }

        .dropzone {
            width: 200px;
            height: 20px;
            background: blueviolet;
            margin-bottom: 10px;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="dropzone">
        <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
            This div is draggable
        </div>
    </div>
    <div class="dropzone"></div>
    <div class="dropzone"></div>
    <div class="dropzone"></div>
<script>
    var dragged;

    /* events fired on the draggable target */
    document.addEventListener("drag", function(event) {

    }, false);

    document.addEventListener("dragstart", function(event) {
        // store a ref. on the dragged elem
        dragged = event.target;
        // make it half transparent
        event.target.style.opacity = .5;
    }, false);

    document.addEventListener("dragend", function(event) {
        // reset the transparency
        event.target.style.opacity = "";
    }, false);

    /* events fired on the drop targets */
    document.addEventListener("dragover", function(event) {
        // prevent default to allow drop
        event.preventDefault();
    }, false);

    document.addEventListener("dragenter", function(event) {
        // highlight potential drop target when the draggable element enters it
        if (event.target.className == "dropzone") {
            event.target.style.background = "purple";
        }

    }, false);

    document.addEventListener("dragleave", function(event) {
        // reset background of potential drop target when the draggable element leaves it
        if (event.target.className == "dropzone") {
            event.target.style.background = "";
        }

    }, false);

    document.addEventListener("drop", function(event) {
        // prevent default action (open as link for some elements)
        event.preventDefault();
        // move dragged elem to the selected drop target
        if (event.target.className == "dropzone") {
            event.target.style.background = "";
            dragged.parentNode.removeChild( dragged );
            event.target.appendChild( dragged );
        }
    }, false);
</script>
</body>
</html>
11.文件读取

HTML5新增内建对象，可以读取本地文件内容。

  • var reader = new FileReader();

文件读取案例：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件读取</title>
    <style>
        img{
            width: 100px;
        }
    </style>
</head>
<body>
<input type="file" name="" id="">
<img src="" alt="">
<script>
    /*获取到了文件表单元素*/
    let fileObj=document.querySelector('[type=file]');
    /*选择文件后触发*/
    fileObj.onchange=function () {
        console.log("选择文件触发")
        /*初始化一个文件读取对象*/
        let fileReader=new FileReader();
        /*读取文件,files[0]表示文件表单元素选择的第一个文件*/
        console.log(fileObj.files)
        fileReader.readAsDataURL(this.files[0]);
        /*文件读取的过程 ===加载的过程*/
        /*读取完毕 === 加载完毕 预览*/
        fileReader.onload=function () {
            document.querySelector('img').src=this.result;
        }
    }
</script>
</body>
</html>
12.网络状态
  • window.navigator.onLine
    可以获取当前的网络状态
  • online事件 -监听网络连接状态
  • offline事件 -监听网络断开状态
Endless Daydream233
关注
专栏目录
H5的新特性及API详解（很惊人）
01-20 1万+
h5新特性总览 移除的元素 纯表现的元素： basefont、big、center、font等  对可用性产生负面影响的元素： frame、frameset、noframes 新增的API 语义： 能够让你更恰当地描述你的内容是什么。  连通性： 能够让你和服务器之间通过创新的新技术方法进行通信（web sockets等）。  离线 & 存储：能够让网页在客户端本地存
HTML5新增API
c1400612901的博客
06-27 1504
HTML5新增API
H5新增API
weixin_34344677的博客
05-06 86
H5新增API 选择器 querySelector()和querySelectorAll()，参数都是css选择器，前者返回符合条件的第一个匹配的元素，如果没有则返回Null，后者返回符合筛选条件的所有元素集合，如果没有符合筛选条件的则返回空数组。 getElementsByClassName()返回一个类似数组的对象，包含了所有指定 c...
H5---DOM操作API
weixin_45626166的博客
09-25 403
H5—DOM操作API • 新DOM获取API出现： • 现在所有的浏览器厂商都提供了 querySelector 和 querySelectorAll 这两个方法的支持，甚至就连微软也派出了 IE 8 作为支持这一特性的代表，querySelector 和 querySelectorAll 作为查找 DOM 的又一途径，极大地方便了开发者，使用它们，你可以像使用 CSS 选择器一样快速地查找到你...
web前端入门到实战：Html5新增视频功能——video API 事件
前端工程师年薪30万，就靠这套教程！持续更新最新知识
04-20 973
video API事件 ** play()  可以控制视频自动播放** 但是在chrome浏览器中不允许自动播放，只有在设置静音时才能允许自动播放 理由是：视频自动播放在终端非常耗电，因此被禁止 不过chrome浏览器允许自动播放7s以内的视频，然而很少有人会放7s以内的视频，而是直接用gif 专门建立的学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的...
webAPI
weixin_45756606的博客
06-29 492
MDN 详细 API : https://developer.mozilla.org/zh-CN/docs/Web/API https://developer.mozilla.org/zh-CN/docs/Web/API/Document/getElementById根据ID获取 根据标签名获取元素 根据类名获得某些元素集合:返回指定选择器的第一个元素对象:(.box #nav)根据指定选择器返回 获取body元素 获取html 元素 innerText和innerHTML的区别 获取内容时的区别：
前端H5最全面试题
qq_59082106的博客
01-08 2108
HTML/CSS: 对web标准的理解(结构/表现/行为)、浏览器内核、渲染原理、依赖管理、兼容性、CSS语法、层次关系、常用属性、布局、 选择器、权重、盒模型、Hack、CSS预处理器、Flexbox、CSS Modules、Document flow、BFC、HTML5（离线&储存&history、多媒体、webGL、SVG、Cavas） Javascript： 数据类型、运算、对象、function、继承、闭包、作用域、事件、prototype、RegExp、JSON、Ajax、
前端面试题汇总 - 基础
将心_的博客
10-18 1889
前端面试基础题目汇总
HTML5学习笔记之History API
09-28
系列文章主要是学习Html5相关的知识点，以学习API知识点为入口，由浅入深的引入实例，让大家一步一步的体会"h5"能够做什么，以及在实际项目中如何去合理的运用达到使用自如，完美驾驭O(∩_∩)O~，
前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)
热门推荐
qq_36609655的博客
07-02 1万+
第1章Html   Html：超级文本标记语言（HyperText Markup Language），在浏览器上运行的一种标记语言。 就是给文本加上含有语义的标签。 接下来应该学习更多具体语义标签： 一、结构（固定的结构）   &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;bod...
HTML5 新增 API
qq_43645678的博客
08-25 1418
HTML5 新增 API
H5新增API （拖拽、文件）
beichen3997的博客
04-23 334
拖拽API 属性 draggable 设置为true 可以被拖拽 拖拽事件 ondragstart 开始被拖动的时候触发 绑定给被拖动的元素 ondrag 拖动的过程总被连续触发 绑定给被拖动的元素 ondragend 停止拖动的时候的触发 绑定给被拖动的元素 ondragenter 当被拖拽的元素进入到目标元素 绑定给目标元素 用于进入目标去区域时 目标区域样式改变 ondrage...
H5 新API
weixin_48016008的博客
09-26 570
1. Location对象 location 对象包含有关当前 URL 的信息 location 对象是 window 对象的一部分，可通过 window.Location 属性对其进行访问。 属性 属性 描述 host 返回一个URL的主机名和端口 hostname 返回URL的主机名 href 返回完整的URL pathname 返回的URL路径名。 port 返回一个URL服务器使用的端口号 protocol 返回一个URL协议 search 返回一个URL的查
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值