HTML5之新特性（选择器、class列表属性、JSON新方法、data自定义数据、延迟加载JS）
HTML5之新特性
l HTML5新特性的浏览器支持情况
• http://www.caniuse.com/#index
•
l 新的选择器
• querySelector 获取一个或一组中第一个元素
<script>
//document.getElementById();
//document.getElementsByTagName();
//$('#div1') $('.box') $('ul li')
window.onload = function(){
//varoDiv = document.querySelector('[title=hello]');
varoDiv = document.querySelector('.box'); //只能选择一组中的第一个元素
//alert(oDiv.length );
oDiv.style.background = 'red';
};
</script>
</head>
<body>
<div id="div1"class="box" title="hello">div</div>
<divclass="box">div2</div>
</body>
• querySelectorAll 获取一组元素
（与jquery的方式差不多）
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>
• getElementsByClassName 获取一组class元素
<script>
window.onload = function(){
var aDiv =document.getElementsByClassName('box');
alert(aDiv.length );//2
};
</script>
</head>
<body>
<div id="div1" class="box"title="hello">div</div>
<div class="box">div2</div>
</body>
l 获取class列表属性
• classList
– length : class的长度
– add() : 添加class方法
– remove() : 删除class方法
– toggle() : 切换class方法 class中没有则执行添加，有class则执行删除操作
window.onload = function(){
varoDiv = document.getElementById('div1');
alert(oDiv.classList ); //类似与数组的对象
};
</script>
</head>
<body>
<div id="div1"class="box1 box2 box3">div</div>
</body>
window.onload = function(){
var oDiv =document.getElementById('div1');
oDiv.classList.add('box4');
};
</script>
</head>
<body>
<div id="div1" class="box1 box2box3">div</div>
</body>
window.onload = function(){
var oDiv =document.getElementById('div1');
oDiv.classList.remove('box2');
};
</script>
</head>
<body>
<div id="div1" class="box1 box2box3">div</div>
</body>
window.onload = function(){
var oDiv =document.getElementById('div1');
oDiv.classList.toggle('box2');
};
</script>
</head>
<body>
<div id="div1" class="box1 box2box3">div</div>
</body>
之前有box2，则执行删除操作
l JSON的新方法
• parse() : 把字符串转成json
– 字符串中的属性要严格的加上引号
• stringify() : 把json转化成字符串
– 会自动的把双引号加上
/*var str ='{"name":"hello"}'; //一定是严格的JSON形式
var json = JSON.parse(str);
alert( json.name );*/
var json = {name :"hello"};
var str = JSON.stringify(json);
alert( str );
• 新方法与eval的区别
•
//eval : 可以解析任何字符串变成JS
//parse : 只能解析JSON形式的字符串变成JS (安全性要高一些)
• Eval一些植入木马，病毒等不安全的字符串也可以解析
/*var str = 'function show(){alert(123)}';
eval(str);
show();*///弹出123
/*var str = 'function show(){alert(123)}';
JSON.parse(str);
show();*///不成功
• 新方法的应用
– 深度克隆新对象
/*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
• 如何其他浏览器做到兼容
– http://www.json.org/去下载json2.js
l data自定义数据
• dataset
– data-name : dataset.name
– data-name-first : dataset.nameFirst
–
<script>
window.onload = function(){
varoDiv = document.getElementById('div1');
//alert(oDiv.dataset.miaov );
alert(oDiv.dataset.miaovAll );
};
</script>
</head>
<body>
<div id="div1" data-miaov="妙味" data-miaov-all="妙味课堂">div</div>
</body>
• Data数据在jquery mobile中有着重要作用
<div data-role="page"id="div1">
<divdata-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">
<divdata-theme="b" data-role="header">
<h3>妙味课堂-移动开发教程</h3>
</div>
<div data-role="context">
<a href="#div1"data-transition="slide" data-direction="reverse">点击</a>
</div>
</div>
l 延迟加载JS
• JS的加载会影响后面的内容加载
– 很多浏览器都采用了并行加载JS，但还是会影响其他内容
• Html5的defer和async
– defer : 延迟加载，会按顺序执行，在onload执行前被触发
– 只能对外部的起作用，对内联的是没有作用的。
– async : 异步加载，加载完就触发，有顺序问题
– 并排执行谁先加载后，谁先执行，之间有依赖关系不适用
– 适用于独立的JS，互相不影响，比如广告
– 动态创建script标签，异步
<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>
• Labjs库（专门做异步的库）