h5-2

时间：2022-04-13 05:53:12
<!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>

相关文章