码迷,mamicode.com
首页 > Web开发 > 详细

HTML5更多(一)

时间:2016-05-16 01:54:08      阅读:253      评论:0      收藏:0      [点我收藏+]

标签:

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" defer="defer"></script>
<script src="b.js" defer="defer"></script>
<script src="c.js" defer="defer"></script>-->

<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; 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">
    <!--<p>
        <span class="box1">1</span>
        <span class="box2">DOM编程艺术</span>
        <span class="box3">45¥</span>
    </p>
    <p>
        <span class="box1">1</span>
        <span class="box2">DOM编程艺术</span>
        <span class="box3">45¥</span>
    </p>
    <div id="allMoney">90¥</div>-->
</div>
</body>
</html>

HTML5更多(一)

标签:

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!