HTML5更多（一）

最新推荐文章于 2023-05-21 23:51:10 发布

weixin_33922672

最新推荐文章于 2023-05-21 23:51:10 发布

阅读量87

点赞数

文章标签： json javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/binperson/p/5496781.html

版权

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>

</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; width:100px; height:30px; background:yellow; margin:10px;}
#div1{ width: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; width:100px; height:30px; background:yellow; margin:10px;}
#div1{ width: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; width:100px; height:30px; background:yellow; margin:10px;}
#div1{ width: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{ width: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{ width: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; width:200px; border:1px #000 solid; margin:10px;}
li img{ width:200px;}
p{ height:20px; border-bottom:1px #333 dashed;}
#div1{ width:600px; border:1px #000 solid; height:300px; clear:both;}
.box1{ float:left; width:200px;}
.box2{ float:left; width:200px;}
.box3{ float:left; width: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>