HTML5更多（一）

zoukankan html css js c++ java

HTML5更多（一）

l理解新的选择器
l获取class列表属性
lJson的新方法
ldata自定义数据
l延迟加载JS
l历史管理
l拖放事件

新的选择器
•querySelector

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>

//document.getElementById();
//document.getElementsByTagName();

//$('#div1')   $('.box')   $('ul li')

window.onload = function(){

    //var oDiv = document.querySelector('[title=hello]');

    var oDiv = document.querySelector('.box'); //只能选择一组中的第一个元素

    //alert( oDiv.length );

    oDiv.style.background = 'red';


};

</script>
</head>

<body>
<div id="div1" class="box" title="hello">div</div>
<div class="box">div2</div>
</body>
</html>

•querySelectorAll

//document.getElementById();
//document.getElementsByTagName();

//$('#div1')   $('.box')   $('ul li')

window.onload = function(){

    var aDiv = document.querySelectorAll('.box');   //获取一组元素

    alert( aDiv.length );




};

</script>
</head>

<body>
<div id="div1" class="box" title="hello">div</div>
<div class="box">div2</div>
</body>
</html>

•getElementsByClassName

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>

window.onload = function(){

    var aDiv = document.getElementsByClassName('box');

    alert( aDiv.length );

};

</script>
</head>

<body>
<div id="div1" class="box" title="hello">div</div>
<div class="box">div2</div>
</body>
</html>

获取class列表属性
•classList
–length : class的长度
–add() : 添加class方法
–remove() : 删除class方法
–toggle() : 切换class方法

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>

window.onload = function(){
    var oDiv = document.getElementById('div1');

    //alert( oDiv.classList ); //类似与数组的对象

    //alert( oDiv.classList.length ); //3

    //oDiv.classList.add('box4');

    //oDiv.classList.remove('box2');

    oDiv.classList.toggle('box2');

};

</script>
</head>

<body>
<div id="div1" class="box1 box2 box3">div</div>
</body>
</html>

JSON的新方法
•parse() : 把字符串转成json
–字符串中的属性要严格的加上引号
•stringify() : 把json转化成字符串

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="json2.js"></script>
<script>

/*var a = {
    name : 'hello'
};

var b = a;

b.name = 'hi';

alert( a.name );*/ //hi

/*var a = {
    name : 'hello'
};

var b = {};

for(var attr in a){
    b[attr] = a[attr];
}

b.name = 'hi';

alert( a.name );*/   // hello //视频 : 对象的引用

var a = {
    name : { age : 100 }
};

var str = JSON.stringify(a);

var b = JSON.parse(str);

b.name.age = 200;

alert( a.name.age ); //100

</script>
</head>

<body>
</body>
</html>

–会自动的把双引号加上

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>

//eval : 可以解析任何字符串变成JS

//parse : 只能解析JSON形式的字符串变成JS (安全性要高一些)

/*var str = 'function show(){alert(123)}';

eval(str);

show();*/

/*var str = 'function show(){alert(123)}';

JSON.parse(str);

show();*/

/*var str = '{"name":"hello"}';   //一定是严格的JSON形式

var json = JSON.parse(str);

alert( json.name );*/
// var name = 'name';

var json = {name : "hello"};

var str = JSON.stringify(json);

alert( str );

</script>
</head>

<body>
</body>
</html>

•新方法与eval的区别
•新方法的应用
–深度克隆新对象
•如何其他浏览器做到兼容
–http://www.json.org/去下载json2.js

data自定义数据
•dataset
–data-name : dataset.name
–data-name-first : dataset.nameFirst

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>

window.onload = function(){
    var oDiv = document.getElementById('div1');

    //alert( oDiv.dataset.bin );

    alert( oDiv.dataset.binAll );
};

</script>
</head>

<body>
<div id="div1" data-bin="bin" data-bin-all="binperson">div</div>
</body>
</html>

•Data数据在jquery mobile中有着重要作用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

</head>

<body>
<div data-role="page" id="div1">
    <div data-theme="c" data-role="header">
        <h3>课堂</h3>
    </div>
    <div data-role="context">
        <a href="#div2" data-transition="slide">点击</a>
    </div>
</div>

<div data-role="page" id="div2">
    <div data-theme="b" data-role="header">
        <h3>课堂-移动开发教程</h3>
    </div>
    <div data-role="context">
        <a href="#div1" data-transition="slide" data-direction="reverse">点击</a>
    </div>
</div>
</body>
</html>

延迟加载JS
•JS的加载会影响后面的内容加载
–很多浏览器都采用了并行加载JS，但还是会影响其他内容
•Html5的defer和async
–defer : 延迟加载，会按顺序执行，在onload执行前被触发
–async : 异步加载，加载完就触发，有顺序问题
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>


<script src="a.js" async ="async"></script>
<script src="b.js" async ="async"></script>
<script src="c.js" async ="async"></script>
</head>

<body>
<img src="">

</body>
</html>

•Labjs库

历史管理
•onhashchange ：改变hash值来管理
•history ：
–服务器下运行
–pushState : 三个参数：数据标题(都没实现) 地址(可选)
–popstate事件 : 读取数据 event.state
–注意：网址是虚假的，需在服务器指定对应页面，不然刷新找不到页面

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
//触发历史管理 : 1.通过跳转页面 2.hash 3.pushState
window.onload = function(){
    var oInput = document.getElementById('input1');
    var oDiv = document.getElementById('div1');

    var json = {};

    oInput.onclick = function(){

        var num = Math.random();

        var arr = randomNum(35,7);

        json[num] = arr;

        oDiv.innerHTML = arr;

        window.location.hash = num;

    };

    window.onhashchange = function(){

        oDiv.innerHTML = json[window.location.hash.substring(1)];

    };

    function randomNum(iAll,iNow){

        var arr = [];
        var newArr = [];
        for(var i=1;i<=iAll;i++){
            arr.push(i);
        }

        for(var i=0;i<iNow;i++){
            newArr.push( arr.splice( Math.floor(Math.random()*arr.length) ,1) );
        }

        return newArr;

    }

};
</script>
</head>

<body>
<input type="button" value="随机选择" id="input1">
<div id="div1"></div>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function(){
    var oInput = document.getElementById('input1');
    var oDiv = document.getElementById('div1');

    oInput.onclick = function(){

        var arr = randomNum(35,7);

        history.pushState(arr,'',arr);

        oDiv.innerHTML = arr;

    };

    window.onpopstate = function(ev){

        oDiv.innerHTML = ev.state;

    };


    function randomNum(iAll,iNow){

        var arr = [];
        var newArr = [];
        for(var i=1;i<=iAll;i++){
            arr.push(i);
        }

        for(var i=0;i<iNow;i++){
            newArr.push( arr.splice( Math.floor(Math.random()*arr.length) ,1) );
        }

        return newArr;

    }

};
</script>
</head>

<body>
<input type="button" value="随机选择" id="input1">
<div id="div1"></div>
</body>
</html>

拖放事件
•draggable ：
–设置为true，元素就可以拖拽了
•拖拽元素事件 : 事件对象为被拖拽元素
–dragstart , 拖拽前触发
–drag ,拖拽前、拖拽结束之间，连续触发
–dragend , 拖拽结束触发
•目标元素事件 : 事件对象为目标元素
–dragenter , 进入目标元素触发，相当于mouseover
–dragover ,进入目标、离开目标之间，连续触发
–dragleave , 离开目标元素触发，相当于mouseout
–drop , 在目标元素上释放鼠标触发

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
li{ list-style:none; 100px; height:30px; background:yellow; margin:10px;}
#div1{ 100px; height:100px; background:red; margin:200px;}
</style>
<script>
window.onload = function(){
    var aLi = document.getElementsByTagName('li');
    var oDiv = document.getElementById('div1');
    var i = 0;

    for(var i=0;i<aLi.length;i++){
        aLi[i].ondragstart = function(){
            this.style.background = 'green';
        };

        /*aLi[i].ondrag = function(){ //开始与结束连续触发
            document.title = i++;
        };*/

        aLi[i].ondragend = function(){
            this.style.background = 'yellow';
        };
    }

    oDiv.ondragenter = function(){
        this.style.background = 'blue';
    };

    oDiv.ondragover = function(ev){
        //enter和leave之间连续触发
        //要想触发drop事件，就必须在dragover当中阻止默认事件
        //document.title = i++;

        ev.preventDefault();

    };

    oDiv.ondragleave = function(){
        this.style.background = 'red';
    };

    oDiv.ondrop = function(){
        alert(123);
    };

};
</script>
</head>

<body>
<ul>
    <li draggable="true">a</li>
    <li draggable="true">b</li>
    <li draggable="true">c</li>
</ul>
<div id="div1"></div>
</body>
</html>

拖放事件_2
•事件的执行顺序：drop不触发的时候
–dragstart > drag > dragenter > dragover > dragleave > dragend
•事件的执行顺序：drop触发的时候(dragover的时候阻止默认事件)
–dragstart > drag > dragenter > dragover > drop > dragend
•不能释放的光标和能释放的光标不一样

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
li{ list-style:none; 100px; height:30px; background:yellow; margin:10px;}
#div1{ 100px; height:100px; background:red; margin:200px;}
</style>
<script>
window.onload = function(){
    var oUl = document.getElementsByTagName('ul')[0];
    var aLi = oUl.getElementsByTagName('li');
    var oDiv = document.getElementById('div1');
    var i = 0;

    for(var i=0;i<aLi.length;i++){

        aLi[i].index = i;

        aLi[i].ondragstart = function(ev){

            var ev = ev || window.event;

            //ev.dataTransfer.setData('name','hello');

            ev.dataTransfer.setData('name',this.index);

            this.style.background = 'green';
        };

        /*aLi[i].ondrag = function(){ //开始与结束连续触发
            document.title = i++;
        };*/

        aLi[i].ondragend = function(){
            this.style.background = 'yellow';
        };
    }

    oDiv.ondragenter = function(){
        this.style.background = 'blue';
    };

    oDiv.ondragover = function(ev){
        //enter和leave之间连续触发
        //要想触发drop事件，就必须在dragover当中阻止默认事件
        //document.title = i++;

        ev.preventDefault();

    };

    oDiv.ondragleave = function(){
        this.style.background = 'red';
    };

    oDiv.ondrop = function(ev){
        //alert(123);

        //alert( ev.dataTransfer.getData('name') );

        oUl.removeChild( aLi[ev.dataTransfer.getData('name')] );

        for(var i=0;i<aLi.length;i++){

            aLi[i].index = i;

        }

    };

};
</script>
</head>

<body>
<ul>
    <li draggable="true">a</li>
    <li draggable="true">b</li>
    <li draggable="true">c</li>
</ul>
<div id="div1"></div>
</body>
</html>

拖放事件_3
•解决火狐下的问题
–必须设置dataTransfer对象才可以拖拽除图片外的其他标签
–
dataTransfer对象
•setData() : 设置数据 key和value(必须是字符串)
•getData() : 获取数据，根据key值，获取对应的value

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
li{ list-style:none; 100px; height:30px; background:yellow; margin:10px;}
#div1{ 100px; height:100px; background:red; margin:200px;}
</style>
<script>
window.onload = function(){
    var oUl = document.getElementsByTagName('ul')[0];
    var aLi = oUl.getElementsByTagName('li');
    var oDiv = document.getElementById('div1');
    var oImg = document.getElementById('img1');
    var i = 0;

    for(var i=0;i<aLi.length;i++){

        aLi[i].ondragstart = function(ev){

            var ev = ev || window.event;

            ev.dataTransfer.setData('name','hello');

            ev.dataTransfer.effectAllowed = 'link';

            ev.dataTransfer.setDragImage(oImg,0,0);

        };


        aLi[i].ondragend = function(){
            this.style.background = 'yellow';
        };
    }

    oDiv.ondragenter = function(){
        this.style.background = 'blue';
    };

    oDiv.ondragover = function(ev){
        //enter和leave之间连续触发
        //要想触发drop事件，就必须在dragover当中阻止默认事件
        //document.title = i++;

        ev.preventDefault();

    };

    oDiv.ondragleave = function(){
        this.style.background = 'red';
    };

    oDiv.ondrop = function(ev){


    };

};
</script>
</head>

<body>
<ul>
    <li draggable="true">a</li>
    <li draggable="true">b</li>
    <li draggable="true">c</li>
</ul>
<div id="div1"></div>
<img src="miaov.png" id="img1" style="display:none" />
</body>
</html>

dataTransfer对象_2
•effectAllowed
–effectAllowed : 设置光标样式(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized)
•setDragImage
–三个参数：指定的元素，坐标X，坐标Y
•files
–获取外部拖拽的文件，返回一个filesList列表
–filesList下有个type属性，返回文件的类型

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>

#div1{ 200px; height:200px; background:red; margin:100px;}
</style>
<script>
window.onload = function(){

    var oDiv = document.getElementById('div1');


    oDiv.ondragenter = function(){

        this.innerHTML = '可以释放啦';

    };

    oDiv.ondragover = function(ev){

        ev.preventDefault();

    };

    oDiv.ondragleave = function(){

        this.innerHTML = '将文件拖拽到此区域';

    };

    oDiv.ondrop = function(ev){

        ev.preventDefault();

        var fs = ev.dataTransfer.files;

        //alert(fs.length);

        //alert( fs[0].type );

        var fd = new FileReader();

        fd.readAsDataURL( fs[0] );

        fd.onload = function(){
            alert( this.result );
        };

    };

};
</script>
</head>

<body>

<div id="div1">将文件拖拽到此区域</div>

</body>
</html>

FileReader(读取文件信息)
•readAsDataURL
–参数为要读取的文件对象，将文件读取为DataUrl

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>

#div1{ 200px; height:200px; background:red; margin:100px;}
</style>
<script>
window.onload = function(){

    var oDiv = document.getElementById('div1');
    var oUl = document.getElementById('ul1');

    oDiv.ondragenter = function(){

        this.innerHTML = '可以释放啦';

    };

    oDiv.ondragover = function(ev){

        ev.preventDefault();

    };

    oDiv.ondragleave = function(){

        this.innerHTML = '将文件拖拽到此区域';

    };

    oDiv.ondrop = function(ev){

        ev.preventDefault();

        var fs = ev.dataTransfer.files;

        //alert(fs.length);

        //alert( fs[0].type );

        /*if(fs[0].type.indexOf('image')!=-1){
            var fd = new FileReader();

            fd.readAsDataURL( fs[0] );

            fd.onload = function(){

                var oLi = document.createElement('li');
                var oImg = document.createElement('img');
                oImg.src = this.result;
                oLi.appendChild(oImg);
                oUl.appendChild(oLi);

            };
        }
        else{
            alert('亲，请上传图片类型');
        }*/

        for(var i=0;i<fs.length;i++){
            if(fs[i].type.indexOf('image')!=-1){
                var fd = new FileReader();

                fd.readAsDataURL( fs[i] );

                fd.onload = function(){

                    var oLi = document.createElement('li');
                    var oImg = document.createElement('img');
                    oImg.src = this.result;
                    oLi.appendChild(oImg);
                    oUl.appendChild(oLi);

                };
            }
            else{
                alert('亲，请上传图片类型');
            }
        }

    };

};
</script>
</head>

<body>

<div id="div1">将文件拖拽到此区域</div>
<ul id="ul1">
</ul>
</body>
</html>

•onload
–当读取文件成功完成的时候触发此事件
–this. result , 来获取读取的文件数据，如果是图片，将返回base64格式的图片数据
•实例
–拖拽删除列表
–拖拽购物车
–上传图片预览功能

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
li{ list-style:none;}
li{ float:left; 200px; border:1px #000 solid; margin:10px;}
li img{ 200px;}
p{ height:20px; border-bottom:1px #333 dashed;}
#div1{ 600px; border:1px #000 solid; height:300px; clear:both;}
.box1{ float:left; 200px;}
.box2{ float:left; 200px;}
.box3{ float:left; 200px;}
#allMoney{ float:right;}
</style>
<script>

window.onload = function(){
    var aLi = document.getElementsByTagName('li');
    var oDiv = document.getElementById('div1');

    var obj = {};
    var iNum = 0;
    var allMoney = null;

    for(var i=0;i<aLi.length;i++){
        aLi[i].ondragstart = function(ev){

            var aP = this.getElementsByTagName('p');

            ev.dataTransfer.setData('title',aP[0].innerHTML);
            ev.dataTransfer.setData('money',aP[1].innerHTML);

            ev.dataTransfer.setDragImage(this,0,0);

        };
    }

    oDiv.ondragover = function(ev){
        ev.preventDefault();
    };

    oDiv.ondrop = function(ev){
        ev.preventDefault();

        var sTitle = ev.dataTransfer.getData('title');
        var sMoney = ev.dataTransfer.getData('money');


        if( !obj[sTitle] ){

            var oP = document.createElement('p');
            var oSpan = document.createElement('span');
            oSpan.className = 'box1';
            oSpan.innerHTML = 1;
            oP.appendChild( oSpan );
            var oSpan = document.createElement('span');
            oSpan.className = 'box2';
            oSpan.innerHTML = sTitle;
            oP.appendChild( oSpan );

            var oSpan = document.createElement('span');
            oSpan.className = 'box3';
            oSpan.innerHTML = sMoney;
            oP.appendChild( oSpan );

            oDiv.appendChild( oP );

            obj[sTitle] = 1;

        }
        else{

            var box1 = document.getElementsByClassName('box1');
            var box2 = document.getElementsByClassName('box2');

            for(var i=0;i<box2.length;i++){

                if(box2[i].innerHTML == sTitle){
                    box1[i].innerHTML = parseInt(box1[i].innerHTML) + 1;
                }

            }

        }

        if(!allMoney){
            allMoney = document.createElement('div');
            allMoney.id = 'allMoney';
        }

        iNum += parseInt(sMoney);

        allMoney.innerHTML = iNum + '￥';

        oDiv.appendChild( allMoney );


    };

};

</script>
</head>

<body>
<ul>
    <li draggable="true">
        <img src="img1.jpg" />
        <p>javascript语言精粹</p>
        <p>40￥</p>
    </li>
    <li draggable="true">
        <img src="img2.jpg" />
        <p>javascript权威指南</p>
        <p>120￥</p>
    </li>
    <li draggable="true">
        <img src="img3.jpg" />
        <p>精通javascript</p>
        <p>35￥</p>
    </li>
    <li draggable="true">
        <img src="img4.jpg" />
        <p>DOM编程艺术</p>
        <p>45￥</p>
    </li>
</ul>
<div id="div1">
    
</div>
</body>
</html>

查看全文

相关阅读:
Spring Boot 使用 Micrometer 集成 Prometheus 监控 Java 应用性能
 Prometheus 通过 consul 实现自动服务发现
 Prometheus 通过 consul 分布式集群实现自动服务发现
 使用 PushGateway 进行数据上报采集
 AlertManager 之微信告警模板，UTC时间错8个小时的解决办法
 Prometheus 监控报警系统 AlertManager 之邮件告警
 Elasticsearch：使用 IP 过滤器限制连接
 Elasticsearch：创建 API key 接口访问 Elasticsearch
Elasticsearch：反向代理及负载均衡在 Elasticsearch 中的应用
 Kibana：如何周期性地为 Dashboard 生成 PDF Report

原文地址：https://www.cnblogs.com/binperson/p/5496781.html