您的位置：首页 > Web前端 > HTML5

HTML5笔记一:基础操作

2016-07-14 15:26 519 查看

1.新的选择器

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload = function(){
//var a = document.querySelector('.one');   // 只能选择一组中的一个元素
//var  a = document.querySelector('[title=o_two]');
//var a = document.querySelectorAll('.one'); // 获取一组元素
//var a = document.getElementsByClassName('one');// IE9+
//alert(a.length); ==>2

//a.style.background = 'green';
//var a = document.getElementById('div2');
//a.classList.add('two4');
//a.classList.remove("two4");
//a.classList.toggle('two4');
}
</script>
</head>

<body>
<div id="div1" class="one" title="o_two">111</div>
<div  class="one">222</div>

<div id="div2" class="two1 two2 two3"></div>
</body>
</html>

2.json的新方法

parse() : 把字符串转成json

字符串中的属性要严格的加上引号

stringify() : 把json转化成字符串

会自动的把双引号加上

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
/*var str = 'function show(){alert(212312)}';
eval(str);
show();*/
/*var str = 'function show(){alert(dfdf)}';
JSON.parse(str);
show(); 只能解析JSON形式的字符串变成JS  (安全性要高一些)*/
/*var str = '{"name","xiaowei"}';
var json = JSON.parse(str); // 直接洗严格json形式
alert(json.name);*/
var json = {name : "hello"};

var str = JSON.stringify(json);

alert(str);
</script>
</head>

<body>
</body>
</html>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
/*var str = 'function show(){alert(212312)}';
eval(str); 解析任何字符串变为js
show();*/
/*var str = 'function show(){alert(dfdf)}';
JSON.parse(str);
show(); 只能解析JSON形式的字符串变成JS  (安全性要高一些)*/
/*var str = '{"name","xiaowei"}';
var json = JSON.parse(str); // 直接洗严格json形式
alert(json.name);*/
/*var json = {name : "hello"};

var str = JSON.stringify(json);

alert(str);*/
/*var a = {name : 'hello'};
var b = a;
b.name = 'tom';
alert(a.name); ==>tom*/
/*var a = {name : 'tom'};
var b = {};
for(var attr in a){
b[attr] = a[attr];
}
b.name = 'mike';
alert(a.name); ==>tom*/
var a = {name : {age : 21}};
var str = JSON.stringify(a);;
var b = JSON.parse(str);
b.name.age = 22;
alert(a.name.age);

</script>
</head>

<body>
</body>
</html>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
/*var str = 'function show(){alert(212312)}';
eval(str); 解析任何字符串变为js
show();*/
/*var str = 'function show(){alert(dfdf)}';
JSON.parse(str);
show(); 只能解析JSON形式的字符串变成JS  (安全性要高一些)*/
/*var str = '{"name","xiaowei"}';
var json = JSON.parse(str); // 直接洗严格json形式
alert(json.name);*/
/*var json = {name : "hello"};

var str = JSON.stringify(json);

alert(str);*/
/*var a = {name : 'hello'};
var b = a;
b.name = 'tom';
alert(a.name); ==>tom*/
/*var a = {name : 'tom'};
var b = {};
for(var attr in a){
b[attr] = a[attr];
}
b.name = 'mike';
alert(a.name); ==>tom*/
var a = {name : {age : 21}};
var str = JSON.stringify(a);;
var b = JSON.parse(str);
b.name.age = 22;
alert(a.name.age);

</script>
</head>

<body>
</body>
</html>

3.自定义属性

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>自定义属性</title>
<script>
window.onload = function(){
var b = document.getElementById('a');
alert(b.dataset.barnett);
alert(b.dataset.barnettCcc);
}
</script>
</head>

<body>
<input id="a" data-barnett="BarnettXie" data-barnett-ccc="xuexue">
</body>
</html>

4.js加载

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html5

相关文章推荐

新的分享

章节导航