h5笔记 - 伟丶那个哥(2)_H5之家 - 中国HTML5教程资源分享第一站

案例二：

<body> <ul> <li data-id="1" data-age="18" data-gender="true"> 张三 <pre></pre> </li> <li data-id="2" data-age="18" data-gender="false"> 李四 <pre></pre> </li> <li data-id="3" data-age="18" data-gender="true"> 王二 <pre></pre> </li> </ul> </body> <script> var ul = document.getElementById('users'); for (var i = 0; i < ul.children.length; i++) { var li = ul.children[i]; // JS 添加data属性 i.setAttribute('data-name', li.innerText); i.children[0].innerText = ''; or (var key in li.dataset) { li.children[0].innerText += key + ':' + li.dataset[key] + '\n'; } } </script>

案例三：

<body> <div> <ul> <li data-target=".panel-new">新闻</li> <li data-target=".panel-bagua">八卦</li> <li data-target=".panel-sport">体育</li> </ul> <div></div> <div></div> <div></div> </div> <script> $(function(){ //写这个是为了有一个单独作用于，避免污染 //api是应用程序编程接口 var $lis = $('.tabs>ul>li'); $lis.on("click",function(){ //获取目标对象的选择器 var targetSelector = $(this).data('target'); var $target = $(targetSelector); }); }); </script> </body> 智能表单新的表单类型 <form action="#"> //repuired表示必须的，表示填写框不能为空，会有提示但是提示不能更改 <label>text:<input type="text" required></label></br> //只能判断中间是否有@ <label>email:<input type="email" value="ice@wedn.net"></label><br> <label>date:<input type="date" min="2014-10-14" max="2020-10-14" value="2016-08-14"></label><br> //拖动条，可以获得拉到的地方的数字 <label>range:<input type="range" min="0" max="50" value="10"></label> <br> <label>search:<input type="search" results="10" placeholder="搜点啥？"></label><br> <label>tel:<input type="tel" placeholder="(010) 888-888" pattern="^$?\d{3}$?[-\s]\d{3}[-\s]\d{4}.*?$"></label><br> <label>color:<input type="color" placeholder="e.g. #bbbbbb"></label><br> <label>number:<input type="number" step="1" min="-5" max="10" value="0"></label><br> <input type="submit" value="提交"> </form> 虚拟键盘适配手机键盘会根据不同的type类型弹出不同键盘类型如打开数字键盘，密码键盘，邮件键盘 <input type="text"> <input type="number"> <input type="email"> <input type="tel"> <input type="url"> 网页多媒体音频多媒体的dom对象有一些新的方法可以去做播放暂停单个数据源的方式默认界面： <audio src="music.mp3" controls="controls"></audio> 自定义一个： <audio src="music.mp3"></audio> <button>播放</button> <button>暂停</button> <script> var btn = document.getElementById("btn"); var btn_pause = document.getElementById("btn_pause"); var audio = document.getElementById("audio"); btn.addEventListener("click",function(){ //播放音频 audio.play(); }); btn_pause.addEventListener("click",function(){ // 暂停音频 audio.pause(); }); </script> 多个数据源的方式 <audio controls="controls"> <source src="img/music.mp3" type="audio/mpeg"/> </audio> 视频单个数据源的方式 <video src="fun.mp4" controls="controls"></video> 多个数据源的方式 <video controls="controls" poster="top.png" autoplay="autoplay"> 不同浏览器支持格式不一样,因为版权问题 <source src="fun.ogg" type="video/ogg"></source> <source src="fun.mp4" type="video/mp4"></source> 当浏览器不兼容video标签，就会将他以div方式解析用第三方组件代替 <object type="application/x-shockwave-flash" data="http://static.youku.com/v1.0.0557/v/swf/loader.swf"> <param value="true"> <param value="always"> <param value="true"> <param value="VideoIDS=XMTMwNDAzNzM4NA==&ShowId=0&category=85&Cp=0&ev=1&Light=on&THX=off&unCookie=0&frame=0&pvid=1439005764768c9QpaT&uepflag=1&Tid=0&isAutoPlay=true&Version=/v1.0.1080&show_ce=0&winType=interior&Type=Folder&Fid=25977506&Pt=0&Ob=1&plchid=z&openScanCode=1&scanCodeText="限时" 扫码免广告&embedid=AjMyNjAwOTM0NgJ3d3cueW91a3UuY29tAi8=&vext=bc%3D%26pid%3D1439005764768c9QpaT%26unCookie%3D0%26frame%3D0%26type%3D1%26fob%3D1%26fpo%3D0%26svt%3D0%26emb%3DAjMyNjAwOTM0NgJ3d3cueW91a3UuY29tAi8%3D%26dn%3D%E7%BD%91%E9%A1%B5%26hwc%3D1%26mtype%3Doth&pageStartTime=1439005764766"> <param value="http://static.youku.com/v1.0.0557/v/swf/loader.swf"> <div> <div> <div><span>您还没有安装flash播放器,请点击<a href="http://www.adobe.com/go/getflash" target="_blank">这里</a>安装</span></div> </div> </div> </object> </video> 视频播放器相关属性属性值描述 autoplay autoplay 如果出现该属性，则视频在就绪后马上播放 controls controls 如果出现该属性，则向用户显示控件，比如播放按钮 height pixels 设置视频播放器的高度 loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放 muted muted 规定视频的音频输出应该被静音。【即：静音】 poster URL 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像 preload preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放如果使用"autoplay"，则忽略该属性 src url 要播放的视频的URL width pixels 设置视频播放器的宽度字幕字幕案例： <video controls> <source src="fun.mp4" type="video/mp4" /> <track label="English subtitles" kind="subtitles" srclang="en" src="video-subtitles-en.vtt" default /> </video> 字幕文件内容示例： WEBVIT FILE 1 00:00:00.000 --> 00:00:12.000 D:vertical A:start 2 00:00:12.000 --> 00:00:15.300 大家好，我是伟哥哥 Canvas 2D 3D (WebGL) SVG Scalable Vector Graphics 可缩放矢量图形 svg图片来源：通过AI，文件-->脚本-->将文档存储为SVG svg可以像标签那样子直接黏贴到页面上，但是我们更希望像图片那样载入进来可以借助三个标签载入： <iframe src="demo.svg" frameborder="0"></iframe> //推荐 <object data="demo.svg" type=""></object> <embed src="demo.svg" type=""> 学完ajax之后推荐方式：学习完异步请求之后，我们可以遍历所有SVG节点，把src引入进来，本身他是一个document对象，可以把它直接append到文档中。 window.addEventListener('load',function(){ var svgs = document.getElementByTagName('svg'); for (var i = 0;i < svgs.length; i++){ //console.log(svg[i].dataset); var src = $(svgs[i].data('src')); //向服务器发送请求得到svg $.get(src,function(data){ var el = data.documentElement; $(document.body).append($(el)); }); } }); 同时将svg文件里面的style删除，以便我们进行更改样式补充：

1、sublime server插件安装
安装完不要stop serber，不用的时候直接要退出sublime，不然sublime会崩溃

2、谷歌浏览器开发者工具右上角展开栏的settings，给show useragent shadow DOM选上钩后可以看到虚拟出来的DOM

3.伪类对象
相当于在weigege后面插入一个，并且可以改变他的样式