• 4.8-- HTML5 新方法: 选择器 ,获取class列表属性,JSON,data自定义数据


    1,新的选择器
    querySelector
    querySelectorAll
    getElementsByClassName

    1,var oDiv = document.querySelector('.box'); //只能选择一组中的第一个元素
    //alert( oDiv.length );
    2,var aDiv = document.querySelectorAll('.box');   //获取一组元素
    alert( aDiv.length );
    3,var aDiv = document.getElementsByClassName('box');
    alert( aDiv.length );


    HTML5新特性的浏览器支持情况
    http://www.caniuse.com/#index



    2,获取class列表属性
    classList
    length :  class的长度
    add()  :  添加class方法
    remove()  :  删除class方法
    toggle() :  切换class方法

    toggle() :  切换class方法  如果这个元素在数组中出现,则删除,如果这个元素在数据中没有,则添加。
    
    
    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>


    3,JSON 新方法

    浅拷贝,深拷贝, parse, eval  区别,

    《妙味:对象的引用》 视频详细介绍 对象的引用,  浅拷贝,深拷贝

    parse() : 把字符串转成json
    字符串中的属性要严格的加上引号


    stringify() : 把json转化成字符串
    会自动的把双引号加上
    新方法与eval的区别:

    eval:  可以解析任何字符串变成 js

    parse: 只能解析 json 形式的字符串变成 js  (安全性高)


    新方法的应用
    深度克隆新对象

    /*var a = { name : 'hello' }; var b = a; b.name = 'hi'; alert( a.name );*/  由于对象的引用,a.name值改变为 b的值。

    采用for 语句进行赋值可以解决此问题:

    /*var a = { name : 'hello' }; var b = {}; for(var attr in a){ b[attr] = a[attr]; } b.name = 'hi'; alert( a.name );*/

    //视频 : 对象的引用

    var a = { name : { age : 100 } }; var str = JSON.stringify(a); var b = JSON.parse(str); b.name.age = 200; alert( a.name.age );


    如何其他浏览器做到兼容
    http://www.json.org/去下载json2.js

    HTML5新特性的浏览器支持情况
    http://www.caniuse.com/#index

    4,data自定义数据

    dataset
    data-name :  dataset.name
    data-name-first  :  dataset.nameFirst
    Data数据在jquery mobile中有着重要作用

    延迟加载JS
    JS的加载会影响后面的内容加载
    很多浏览器都采用了并行加载JS,但还是会影响其他内容
    Html5的defer和async
    defer : 延迟加载,会按顺序执行,在onload执行前被触发
    async : 异步加载,加载完就触发,有顺序问题
    Labjs库

  • 相关阅读:
    js小功能实现
    悉尼大学生活指南
    kali linux查看局域网下所有IP,并对指定IP实施局域网内攻击(断网,随时查看对方密码,上网痕迹等)
    kali linux默认密码
    移动互联网创业教程(一):如何进行竞品分析
    TCP/IP:完全弄清OSI七层模型
    Linux(ubuntu)下创建用户没有创建家目录
    Linux下设置root密码
    Linux下用户管理:删除用户
    Linux下用户管理:创建用户指定密码
  • 原文地址:https://www.cnblogs.com/dh2608/p/5368820.html
Copyright © 2020-2023  润新知