1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>无标题文档</title>
  6. <script>
  7. //document.getElementById();
  8. //document.getElementsByTagName();
  9. //$('#div1')   $('.box')   $('ul li')
  10. window.onload = function(){
  11.     //var oDiv = document.querySelector('[title=hello]');
  12.     var oDiv = document.querySelector('.box'); //只能选择一组中的第一个元素
  13.     //alert( oDiv.length );
  14.     oDiv.style.background  = 'red';
  15. };
  16. </script>
  17. </head>
  18.  
  19. <body>
  20. <div id="div1" class="box" title="hello">div</div>
  21. <div class="box">div2</div>
  22. </body>
  23. </html>
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>无标题文档</title>
  6. <script>
  7. //document.getElementById();
  8. //document.getElementsByTagName();
  9. //$('#div1')   $('.box')   $('ul li')
  10. window.onload = function(){
  11.     var aDiv = document.querySelectorAll('.box');   //获取一组元素
  12.     alert( aDiv.length );
  13. };
  14.  
  15. </script>
  16. </head>
  17.  
  18. <body>
  19. <div id="div1" class="box" title="hello">div</div>
  20. <div class="box">div2</div>
  21. </body>
  22. </html>
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>无标题文档</title>
  6. <script>
  7.  
  8. window.onload = function(){
  9.  
  10.     var aDiv = document.getElementsByClassName('box');
  11.  
  12.     alert( aDiv.length );
  13.  
  14. };
  15.  
  16. </script>
  17. </head>
  18.  
  19. <body>
  20. <div id="div1" class="box" title="hello">div</div>
  21. <div class="box">div2</div>
  22. </body>
  23. </html>
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>无标题文档</title>
  6. <script>
  7.  
  8. window.onload = function(){
  9.     var oDiv = document.getElementById('div1');
  10.  
  11.     //alert( oDiv.classList );  //类似与数组的对象,box1 box2 box3
  12.  
  13.     //alert( oDiv.classList.length );  //3
  14.  
  15.     //oDiv.classList.add('box4');
  16.  
  17.     //oDiv.classList.remove('box2');
  18.  
  19.     oDiv.classList.toggle('box2');//class列表中有box2就删除没有就添加。
  20.  
  21. };
  22.  
  23. </script>
  24. </head>
  25.  
  26. <body>
  27. <div id="div1" class="box1 box2 box3">div</div>
  28. </body>
  29. </html>
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>无标题文档</title>
  6. <script>
  7.  
  8. //eval : 可以解析任何字符串变成JS(安全低，把病毒字符串能解析成js)
  9. //parse : 只能解析JSON形式的字符串变成JS  (安全性要高一些)
  10.  
  11. var str = 'function show(){alert(123)}';
  12. eval(str);//把字符串转成js了，
  13. show();//有弹出
  14.  
  15. var str = 'function show(){alert(123)}';
  16. JSON.parse(str);//不能转成js
  17. show();//没有弹出
  18.  
  19. var str = '{"name":"hello"}';   //一定是严格的JSON形式
  20. var json = JSON.parse(str);
  21. alert( json.name );
  22.  
  23. var json = {name : "hello"};//一个对象，{}就是一个对象。
  24. var str = JSON.stringify(json);//str = '{"name":"hello"}'
  25. alert( str );// {"name":"hello"} 
  26.  
  27. </script>
  28. </head>
  29.  
  30. <body>
  31. </body>
  32. </html>
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>无标题文档</title>
  6. <script src="json2.js"></script>  //引入js文件
  7. <script>
  8.  
  9. /*
  10. var a = {//a对象
  11.     name : 'hello'
  12. };
  13. var b = a;
  14. b.name = 'hi';
  15. alert( a.name );//hi
  16.  
  17. var a = {
  18.     name : 'hello'
  19. };
  20. var b = {};
  21. for(var attr in a){//对象赋值，这是一个浅拷贝，如果属性是一个对象则2个对象的属性会引用同一个对象。
  22.     b[attr] = a[attr];
  23. }
  24. b.name = 'hi';
  25. alert( a.name ); //hello
  26. */
  27.  
  28. var a = {
  29.     name : { age : 100 }//a对象的name属性是一个对象
  30. };
  31. var str = JSON.stringify(a);//变成一个字符串,'{"name":{"age":100}}'
  32. var b = JSON.parse(str);//b就是一个对象了。
  33. alert("sss");//sss
  34. alert(str);//{"name":{"age":100}}
  35. alert(b);//[object Object]
  36. b.name.age = 200;
  37. alert( a.name.age );//100
  38.  
  39. </script>
  40. </head>
  41.  
  42. <body>
  43. </body>
  44. </html>
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>无标题文档</title>
  6. <script>
  7.  
  8. window.onload = function(){
  9.     var oDiv = document.getElementById('div1');
  10.     alert( oDiv.dataset.miaov );
  11.     alert( oDiv.dataset.miaovAll );//miaov-all要写成miaovAll，
  12. };
  13.  
  14. </script>
  15. </head>
  16.  
  17. <body>
  18. <div id="div1" data-miaov="妙味" data-miaov-all="妙味课堂">div</div>
  19. </body>
  20. </html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
  7. <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  8. <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
  9.  
  10. </head>
  11.  
  12. <body>//jquery.mobile表示手机的jquery
  13. <div data-role="page" id="div1">
  14.     <div data-theme="c" data-role="header">
  15.         <h3>妙味课堂</h3>
  16.     </div>
  17.     <div data-role="context">
  18.         <a href="#div2" data-transition="slide">点击</a>
  19.     </div>
  20. </div>
  21.  
  22. <div data-role="page" id="div2">
  23.     <div data-theme="b" data-role="header">
  24.         <h3>妙味课堂-移动开发教程</h3>
  25.     </div>
  26.     <div data-role="context">
  27.         <a href="#div1" data-transition="slide" data-direction="reverse">点击</a>
  28.     </div>
  29. </div>
  30. </body>
  31. </html>
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>无标题文档</title>
  6.  
  7. //单线程从上到下加载
  8. <script src="a.js" defer="defer"></script>  //延迟在页面加载完后加载
  9. <script src="b.js" defer="defer"></script>
  10. <script src="c.js" defer="defer"></script>
  11.  
  12. <script src="a.js" async ="async"></script>  //异步加载，开线程和页面一起加载，有可能页面没有加载完就执行js会出现元素找不到。这种方式可以加载相对独立的js保证不出现元素找不到。
  13. <script src="b.js" async ="async"></script>
  14. <script src="c.js" async ="async"></script>
  15. </head>
  16.  
  17. <body>
  18. <img src="">
  19.  
  20. </body>
  21. </html>
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>无标题文档</title>
  6. <script>
  7.  
  8. //触发历史管理 : 1.通过跳转页面  2.hash  3.pushState 
  9.  
  10. </script>
  11. </head>
  12.  
  13. <body>
  14. </body>
  15. </html>
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>无标题文档</title>
  6. <script>
  7. window.onload = function(){
  8.     var oInput = document.getElementById('input1');
  9.     var oDiv = document.getElementById('div1');
  10.     var json = {};
  11.     oInput.onclick = function(){
  12.         var num = Math.random();
  13.         var arr = randomNum(35,7);
  14.         json[num] = arr;
  15.         oDiv.innerHTML = arr;
  16.         window.location.hash = num;
  17.     };
  18.  
  19.     window.onhashchange = function(){   //浏览器的onhashchange事件。
  20.         oDiv.innerHTML = json[window.location.hash.substring(1)];
  21.     };
  22.  
  23.     function randomNum(iAll,iNow){
  24.         var arr = [];
  25.         var newArr = [];
  26.         for(var i=1;i<=iAll;i++){
  27.             arr.push(i);
  28.         }
  29.         for(var i=0;i<iNow;i++){
  30.             newArr.push( arr.splice( Math.floor(Math.random()*arr.length) ,1) );
  31.         }
  32.     return newArr;
  33.  
  34.     }
  35.  
  36. };
  37. </script>
  38. </head>
  39.  
  40. <body>
  41. <input type="button" value="随机选择" id="input1">
  42. <div id="div1"></div>
  43. </body>
  44. </html>
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>无标题文档</title>
  6. <script>//浏览器的回退，回退历史管理。
  7. window.onload = function(){
  8.     var oInput = document.getElementById('input1');
  9.     var oDiv = document.getElementById('div1');
  10.     oInput.onclick = function(){
  11.         var arr = randomNum(35,7);
  12.         history.pushState(arr,'',arr);//放到浏览器回退站中
  13.         oDiv.innerHTML = arr;
  14.     };
  15.     window.onpopstate = function(ev){//回退时浏览器自动从回退栈中取
  16.         oDiv.innerHTML = ev.state;
  17.     };
  18.     function randomNum(iAll,iNow){
  19.         var arr = [];
  20.         var newArr = [];
  21.         for(var i=1;i<=iAll;i++){
  22.             arr.push(i);
  23.         }
  24.         for(var i=0;i<iNow;i++){
  25.             newArr.push( arr.splice( Math.floor(Math.random()*arr.length) ,1) );
  26.         }
  27.         return newArr;
  28.     }
  29. };
  30. </script>
  31. </head>
  32.  
  33. <body>
  34. <input type="button" value="随机选择" id="input1">
  35. <div id="div1"></div>
  36. </body>
  37. </html>

h5-2的更多相关文章

  1. 旺财速啃H5框架之Bootstrap（五）

    在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...

  2. 旺财速啃H5框架之Bootstrap（四）

    上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...

  3. H5单页面手势滑屏切换原理

    H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...

  4. 快速构建H5单页面切换骨架

    在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...

  5. 07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

  6. 旺财速啃H5框架之Bootstrap（三）

    好多天没有写了,继续走起 在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学boot ...

  7. H5程序员如何利用cordova开发跨平台应用

    什么是Cordova? Cordova以前也叫PhoneGap,它提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头.麦克风等.Cordova还 ...

  8. H5项目开发分享——用Canvas合成文字

    以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...

  9. 【腾讯Bugly干货分享】H5 视频直播那些事

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57a42ee6503dfcb22007ede8 Dev Club 是一个交流移动 ...

  10. H5嵌入原生开发小结----兼容安卓与ios的填坑之路

    一开始听说开发H5,以为就是做适配现代浏览器的移动网页,心想不用管IE了,欧也.到今天,发现当初too young too simple,兼容IE和兼容安卓与IOS,后者让你更抓狂.接下来数一下踩过的 ...

随机推荐

  1. BITED数学建模七日谈之五：怎样问数学模型问题

    下面进入数学建模经验谈第五天:怎样问数学模型问题 写这一篇的目的主要在于帮助大家能更快地发现问题和解决问题,让自己的模型思路有一个比较好的形成过程. 在我们学习数学模型.准备比赛的时候,经常会遇到各种 ...

  2. APT攻击将向云计算平台聚焦

    APT攻击作为一种高效.精确的网络攻击方式,在近几年被频繁用于各种网络攻击事件之中,并迅速成为企业信息安全最大的威胁之一. 近日,飞塔中国首席技术顾问X在谈及APT攻击时表示,随着云计算的不断发展普及 ...

  3. nodejs cmd

    引入系统模块 var exec = require('child_process').exec; cmd.js var exec = require('child_process').exec; va ...

  4. gem openssl 出错

    Unable to require openssl, install OpenSSL and rebuild ruby (preferred) or use non-HTTPS sources 1. ...

  5. [转载]关于CSDN, cnblog, iteye和51cto四个博客网站的比较与分析

    CSDN:http://blog.csdn.net/ cnblog: http://www.cnblogs.com/ iteye: http://www.iteye.com/blogs/ 51cto: ...

  6. js运动 运动效果留言本

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  7. 【转】Hive导入10G数据的测试

    原博文出自于: http://blog.fens.me/hadoop-hive-10g/ 感谢! Hive导入10G数据的测试 让Hadoop跑在云端系列文章,介绍了如何整合虚拟化和Hadoop,让H ...

  8. 用shell求两个文件的差集

    假设有两个文件a.file和b.file,分别代表集合A和集合B. a.file的内容如下: abcde b.file的内容如下: cdefg 可以用grep命令 grep命令是常用来搜索文本内容的, ...

  9. Jenkins+Gitlab搭建持续集成(CI)环境

    利用Jenkins+Gitlab搭建持续集成(CI)环境 Permalink: 2013-09-08 22:04:00 by hyhx2008in intern tags: jenkins gitla ...

  10. HDU2553N皇后问题（状态压缩）

    这道题其实最简单的方法就是打表,直接DFS会超时,那就先运行一遍,找出1~10的值,打表即可,这里提供DFS和打表的数据 DFS:(白书上的)TLE #include <stdio.h> ...