html5 (个人笔记)

妙味 html5 1.0

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title>
</head>
<body><div class="a">3434</div>
<script>
//    var obj=document.querySelector("div");var obj=document.querySelector(".a");
//querySelector(); 可以选择 标签 类 id 只选择第一个，  querySelectorAll() 先所有  ie9以上兼容
//var obj=document.getElementsByClassName("a");   /* 选择 class元素  ie9以上兼容*/
    obj.style.backgroundColor='blue';
</script><div id="div1" class="box1 box2 box3">div</div><script>var oDiv=document.getElementById("div1");oDiv.classList.add('box4');oDiv.classList.toggle('box2');  //切换class  有 box2就删除，没有就添加//   remove()  length()</script><script>//eval : 可以解析任何字符串变成JS//parse : 只能解析JSON形式的字符串变成JS  (安全性要高一些)/*var str = 'function show(){alert(123)}';eval(str);show();*//*var str = '{"name":"hello"}';   //一定是严格的JSON形式   字符串转换成jsonvar json = JSON.parse(str);alert( json.name );*//*   var json = {"name" : "hello"};    // 把 json转成 字符串var str = JSON.stringify(json);alert( str );
*//*    var a={name:'he'}var b=a;b.name='123';alert("a.name: "+a.name);    // a.name: hello  a变了*//*    var a={name:'he'}var b={};for(var attr in a){b[attr]=a[attr];}b.name='123';alert("a.name: "+ a.name);   // a.name: he   不改变
*//*      var a={name:'he'}var str=JSON.stringify(a);   //  ie 6 7 不兼容   官网下载www.json.org  json2.jsvar b=JSON.parse(str);b.name='55';alert("a.name: "+ a.name);      // a.name:he  不改变*/</script><h1>获取自定义属性,jquery-mobile 喜欢自定义属性</h1><!--<div id="div2" data-miaov="中国">div</div>--><!-- <div id="div2" data-miaov-all="中国2">div</div><script>var oDiv=document.getElementById("div2");alert(oDiv.dataset.miaovAll);</script>--><!--延迟加载，指先加载html再加载 js  相当于把 js 写在html下面<script src="b.js" defer="defer"></script>async ="async" 异步  跟页面同时加载  可能 出现  找不到对象的错误--><input type="button" value="随机选择" id="input1"><div id="div5"></div><script>var oInput = document.getElementById('input1');var oDiv = document.getElementById('div5');var json={};  // json对象里面存数组
        oInput.onclick= function () {var num = Math.random();var arr=randomNum(35,25);json[num]=arr;      //  把5个数及对应在的num 存储起来
            oDiv.innerHTML=arr;  //  把5个数显示出来
            window.location.hash=num;    // 任意数   hash值 num//oDiv.innerHTML=randomNum(35,5);
        }window.onhashchange= function () {   // 通过 hash值 num 找对应的数组      pushState 不能刷新，没试
            oDiv.innerHTML=json[window.location.hash.substring(1)];}function randomNum(iAll,iNow){var arr=[];var newArr=[];for(var i=0;i<=iAll;i++){
//                arr.push(i);
                arr[i]=i;}
//            alert(arr);for(var i=0;i<iNow;i++){
//                newArr.push( arr.splice( Math.floor(Math.random()*arr.length) ,1) );
                newArr[i]= arr.splice( Math.floor(Math.random()*arr.length) ,1);  //  从已有的数组随机删除1个数，把删除的数赋给数组
//                newArr[i]=arr[Math.floor(Math.random()*arr.length)];   // 这里写可能出现重复数字
            }return newArr;}
/*        var a={};a[1]=1;
//        alert(typeof(a));   // 查看数据类型*/</script>
</body>
</html>

转载于:https://www.cnblogs.com/gyz418/p/5277566.html

html5 (个人笔记)相关推荐

Html5学习笔记1 元素标签属性
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
HTML5 学习笔记
HTML5 学习笔记前言该学习笔记的相关学习视频:[狂神说Java]HTML5完整教学通俗易懂目前笔记只有简单的例子和框架,将来在实践中会进一步学习和补充内容目录 HTML5 学习笔记前言 ...
HTML5学习笔记之音视频标签
HTML5学习笔记之音视频标签其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习 ...
html5学习笔记--leon
html5学习笔记–leon ####什么是html5 1.H5并不是新的语言,而是html语言的第五次重大修改–版本 2.支持:所有的主流浏览器都支持h5.(chrome,firefox,safar ...
HTML5基础——笔记
HTML5基础--笔记近几年来,互联网+.大数据.云计算'物联网'虚拟现实'人工智能.机器学习.移动互联网等IT相关新名词.新概念层出不穷,相关产业发展如火如荼.互联网+移动互联网已经深入到人民日常 ...
html5表格所有属性,HTML5学习笔记之表格标签
HTML5学习笔记之表格标签其他HTML5相关文章一.表格标签 image 1.作用: 以表格形式将数据显示出来, 当数据量非常大的时候, 表格这种展现形式被认为是最为清晰的一种展现形式 2.格式 ...
HTML5学习笔记 —— JavaScript基础知识
HTML5学习笔记 -- JavaScript基础知识标签: html5javascriptweb前端 2017-05-11 21:51 883人阅读评论(0) 收藏举报分类: JavaScr ...
CSS3秘笈第三版涵盖HTML5学习笔记6~8章
第二部分----CSS实用技术第6章,文本格式化指定备用字体: font-family:Arial,Helvetica,sans-serif; 当访问者没有安装第一种字体时,浏览器会在列表中继续往 ...
HTML5学习笔记（一）：HTML简介
Web前端涵盖的内容较多且杂,主要由3个部分组成:HTML标记语言.CSS样式语言和JavaScript脚本语言组成,而下面我们将先学习最新的标记语言HTML5. <!DOCTYPE>标记 ...
最最详细的黑马前端HTML5+CSS3笔记，给大家整理好了
基于黑马前端视频学习的CSS3笔记,每一天的知识点都放在一起,方便学习查阅 ==CSS第一天== 一.css简介二.css语法规范三.css代码风格四.css选择器的作用五.css基础选择器 ...

html5 (个人笔记)

html5 (个人笔记)相关推荐

最新文章

热门文章