码迷，mamicode.com
首页 > 其他好文 > 详细

h5-2

时间：2016-04-06 13:26:43      阅读：174      评论：0      收藏：0      [点我收藏+]

标签：

<!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

标签：

原文地址：http://www.cnblogs.com/yaowen/p/5358520.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！