HTML5笔记一:基础操作
2016-07-14 15:26
519 查看
1.新的选择器
2.json的新方法
parse() : 把字符串转成json
字符串中的属性要严格的加上引号
stringify() : 把json转化成字符串
会自动的把双引号加上
3.自定义属性
4.js加载
<!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中在客户端验证文件上传的大小
- html5 web数据存储
- 页面元素查找之Selectors API
- 使用ajax实现用户登录验证(升级版)
- Canvas 在高清屏下绘制图片变模糊的解决方法
- 关于前端的思考与感悟
- 新时代编辑神器:Atom
- rem : web app适配的秘密武器
- jquery高级应用之Deferred对象
- 又被事件冒泡坑了一把,这次要彻底弄懂浏览器的事件流
- 移动端点击事件全攻略,这里的坑你知多少?
- $q 实例分析 Angular 中的 Promise
- 浏览器中唤起native app || 跳转到应用商城下载
- Angular directive 实例详解
- 关于浮动与清除浮动,你应该知道的
- 数组reduce方法的高级技巧
- 原生js结合html5制作小飞龙的简易跳球
- HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)