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