h5-2
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
//document.getElementById();
//document.getElementsByTagName();
//$('#div1') $('.box') $('ul li')
window.onload = function(){
//var oDiv = document.querySelector('[title=hello]');
var oDiv = document.querySelector('.box'); //只能选择一组中的第一个元素
//alert( oDiv.length );
oDiv.style.background = 'red';
};
</script>
</head> <body>
<div id="div1" class="box" title="hello">div</div>
<div class="box">div2</div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
//document.getElementById();
//document.getElementsByTagName();
//$('#div1') $('.box') $('ul li')
window.onload = function(){
var aDiv = document.querySelectorAll('.box'); //获取一组元素
alert( aDiv.length );
}; </script>
</head> <body>
<div id="div1" class="box" title="hello">div</div>
<div class="box">div2</div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script> window.onload = function(){ var aDiv = document.getElementsByClassName('box'); alert( aDiv.length ); }; </script>
</head> <body>
<div id="div1" class="box" title="hello">div</div>
<div class="box">div2</div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script> window.onload = function(){
var oDiv = document.getElementById('div1'); //alert( oDiv.classList ); //类似与数组的对象,box1 box2 box3 //alert( oDiv.classList.length ); //3 //oDiv.classList.add('box4'); //oDiv.classList.remove('box2'); oDiv.classList.toggle('box2');//class列表中有box2就删除没有就添加。 }; </script>
</head> <body>
<div id="div1" class="box1 box2 box3">div</div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script> //eval : 可以解析任何字符串变成JS(安全低，把病毒字符串能解析成js)
//parse : 只能解析JSON形式的字符串变成JS (安全性要高一些) var str = 'function show(){alert(123)}';
eval(str);//把字符串转成js了，
show();//有弹出 var str = 'function show(){alert(123)}';
JSON.parse(str);//不能转成js
show();//没有弹出 var str = '{"name":"hello"}'; //一定是严格的JSON形式
var json = JSON.parse(str);
alert( json.name ); var json = {name : "hello"};//一个对象，{}就是一个对象。
var str = JSON.stringify(json);//str = '{"name":"hello"}'
alert( str );// {"name":"hello"} </script>
</head> <body>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="json2.js"></script> //引入js文件
<script> /*
var a = {//a对象
name : 'hello'
};
var b = a;
b.name = 'hi';
alert( a.name );//hi var a = {
name : 'hello'
};
var b = {};
for(var attr in a){//对象赋值，这是一个浅拷贝，如果属性是一个对象则2个对象的属性会引用同一个对象。
b[attr] = a[attr];
}
b.name = 'hi';
alert( a.name ); //hello
*/ var a = {
name : { age : 100 }//a对象的name属性是一个对象
};
var str = JSON.stringify(a);//变成一个字符串,'{"name":{"age":100}}'
var b = JSON.parse(str);//b就是一个对象了。
alert("sss");//sss
alert(str);//{"name":{"age":100}}
alert(b);//[object Object]
b.name.age = 200;
alert( a.name.age );//100 </script>
</head> <body>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script> window.onload = function(){
var oDiv = document.getElementById('div1');
alert( oDiv.dataset.miaov );
alert( oDiv.dataset.miaovAll );//miaov-all要写成miaovAll，
}; </script>
</head> <body>
<div id="div1" data-miaov="妙味" data-miaov-all="妙味课堂">div</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> </head> <body>//jquery.mobile表示手机的jquery
<div data-role="page" id="div1">
<div data-theme="c" data-role="header">
<h3>妙味课堂</h3>
</div>
<div data-role="context">
<a href="#div2" data-transition="slide">点击</a>
</div>
</div> <div data-role="page" id="div2">
<div data-theme="b" data-role="header">
<h3>妙味课堂-移动开发教程</h3>
</div>
<div data-role="context">
<a href="#div1" data-transition="slide" data-direction="reverse">点击</a>
</div>
</div>
</body>
</html>
<!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> //异步加载，开线程和页面一起加载，有可能页面没有加载完就执行js会出现元素找不到。这种方式可以加载相对独立的js保证不出现元素找不到。
<script src="b.js" async ="async"></script>
<script src="c.js" async ="async"></script>
</head> <body>
<img src=""> </body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script> //触发历史管理 : 1.通过跳转页面 2.hash 3.pushState </script>
</head> <body>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function(){
var oInput = document.getElementById('input1');
var oDiv = document.getElementById('div1');
var json = {};
oInput.onclick = function(){
var num = Math.random();
var arr = randomNum(35,7);
json[num] = arr;
oDiv.innerHTML = arr;
window.location.hash = num;
}; window.onhashchange = function(){ //浏览器的onhashchange事件。
oDiv.innerHTML = json[window.location.hash.substring(1)];
}; function randomNum(iAll,iNow){
var arr = [];
var newArr = [];
for(var i=1;i<=iAll;i++){
arr.push(i);
}
for(var i=0;i<iNow;i++){
newArr.push( arr.splice( Math.floor(Math.random()*arr.length) ,1) );
}
return newArr; } };
</script>
</head> <body>
<input type="button" value="随机选择" id="input1">
<div id="div1"></div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>//浏览器的回退，回退历史管理。
window.onload = function(){
var oInput = document.getElementById('input1');
var oDiv = document.getElementById('div1');
oInput.onclick = function(){
var arr = randomNum(35,7);
history.pushState(arr,'',arr);//放到浏览器回退站中
oDiv.innerHTML = arr;
};
window.onpopstate = function(ev){//回退时浏览器自动从回退栈中取
oDiv.innerHTML = ev.state;
};
function randomNum(iAll,iNow){
var arr = [];
var newArr = [];
for(var i=1;i<=iAll;i++){
arr.push(i);
}
for(var i=0;i<iNow;i++){
newArr.push( arr.splice( Math.floor(Math.random()*arr.length) ,1) );
}
return newArr;
}
};
</script>
</head> <body>
<input type="button" value="随机选择" id="input1">
<div id="div1"></div>
</body>
</html>
h5-2的更多相关文章
- 旺财速啃H5框架之Bootstrap（五）
在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...
- 旺财速啃H5框架之Bootstrap（四）
上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...
- H5单页面手势滑屏切换原理
H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...
- 快速构建H5单页面切换骨架
在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...
- 07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...
- 旺财速啃H5框架之Bootstrap（三）
好多天没有写了,继续走起 在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学boot ...
- H5程序员如何利用cordova开发跨平台应用
什么是Cordova? Cordova以前也叫PhoneGap,它提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头.麦克风等.Cordova还 ...
- H5项目开发分享——用Canvas合成文字
以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...
- 【腾讯Bugly干货分享】H5 视频直播那些事
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57a42ee6503dfcb22007ede8 Dev Club 是一个交流移动 ...
- H5嵌入原生开发小结----兼容安卓与ios的填坑之路
一开始听说开发H5,以为就是做适配现代浏览器的移动网页,心想不用管IE了,欧也.到今天,发现当初too young too simple,兼容IE和兼容安卓与IOS,后者让你更抓狂.接下来数一下踩过的 ...
随机推荐
- TLCL中英对照版
TLCL中英文对照阅读网址:http://billie66.github.io/TLCL/book/index.html 感谢好奇猫团队(http://haoqicat.com/about/team) ...
- WCF綁定
服务之间的通信方式是多种多样的,有多种可能的通信模式.包括:同步的请求与应答(Request/Reply)消息,或者异步的即发即弃(Fire-and-Forget)消息等等,在通信时传输的消息编码格式 ...
- Slideout吐槽
前言: 今天有点事,只尝试做一个侧边栏.SlideOut一个侧边栏,对着github,ReadMe看,并尝试着写了.还不错,关键是当与bootstrap一起时,什么效果都没了, 这是什么情况,明天想再 ...
- LeetCode(6) － ZigZag Conversion
这个题的要求是给你一个字符串,和一个行数,例如(s = "mysisteristhemostlovelygirl" , row ＝ 4),每一行一个字符串,但是s却得按照zigza ...
- Tachyon框架的Worker心跳及Master高可用性分析
0 概述 分布式框架中的Master-Slave类型,Slave节点负责工作的具体执行,Master负责任务的分发或者相关元数据的存储等.一般情况下,一个Master节点都会对应多个Slave节点,M ...
- gradle 及 git 环境下利用hook及gradle脚本自动添加versioncode和versionname的方法
在 app/build.gradle 文件里添加几行代码: def gitCommitShortHash = 'git log -1 --pretty=%h'.execute([], project. ...
- 转】用Maven构建Hadoop项目
原博文出自于: http://blog.fens.me/hadoop-maven-eclipse/ 感谢! 用Maven构建Hadoop项目 Hadoop家族系列文章,主要介绍Hadoop家族产品 ...
- c++面试题总结（2）
1. C中static有什么作用 (1)隐藏. 当我们同时编译多个文件时,所有未加static前缀的全局变量和函数都具有全局可见性,故使用static在不同的文件中定义同名函数和同名变量,而不必担心命 ...
- 一、 使用存储过程实现数据分页(Sql Server 2008 R2)
1.废话不多说了,直接上代码.调用这个存储过程只需要传递 表名,排序字段,搜索字段,以及页码,页码数量,搜索值(可空) create PROCEDURE NewPage --通用的分页存储过程,百万数 ...
- HDU 4493 Tutor （控制精度）
题意:给定12个数,求平均数. 析:这个题就是精度控制问题,如果控制精度,最好的办法就是用整型了. 代码如下: #include <cstdio> #include <string& ...