zoukankan      html  css  js  c++  java
  • 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库

  • 相关阅读:
    基础知识梳理
    计算机基础
    IAR平台下使用STM32的DSP配置方法
    第五节:STM32输入捕获(用CubeMX学习STM32)
    第四节:定时器中断及定时器产生PWM(用CubeMX学习STM32)
    第三节: 串口通信(用CubeMX学习STM32)
    第二节: 外部中断学习(用CubeMX学习STM32)
    第一节补充: 按键操作(CubeMX加HAL库学STM32系列)
    第一节:用Cube学32之简单IO口操作(点灯及按键)
    STM32程序中使用printf打印中文字符乱码
  • 原文地址:https://www.cnblogs.com/dh2608/p/5368820.html
Copyright © 2011-2022 走看看