HTML5笔记一:基础操作

最新推荐文章于 2024-10-13 21:08:36 发布

_Star_

最新推荐文章于 2024-10-13 21:08:36 发布

阅读量429

点赞数

分类专栏： H5+CSS3 文章标签： html5

H5+CSS3 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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>