python 学习_第五模块 BOM
1.BOM对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>BOM对象</title> </head> <body> <!-- 浏览器对象模型 BOM--> <!-- 1.window alert() confirm() prompt() setInterval() setTimeout() 2.location href hash url ... reload() 3.screen 4.history go() --> </body> </html>
2. window 对象常用方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>window 对象常用方法</title> </head> <script type="text/javascript"> window.alert("alert"); // 弹窗显示 alert var a = window.confirm("是否离开"); // 弹窗显示 console.log(a); // 接收a 的返回值 true false var name = window.prompt('你早上吃什么？','aa'); // 不输入就是默认选项aa console.log(name); // 接收 name 值 </script> <body> </html>
3 定时器方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定时器方法 setTimeout()| setInterval() </title> </head> <script type="text/javascript"> // 延迟操作 window.setTimeout(function(){ console.log('1122'); },0) console.log('end'); // 先输入 外面的内容 在输入函数的内容 // 定时操作 每一秒执行一次 var num = 0; var timer = null; timer = setInterval(function(){ num++; if (num >5) { clearInterval(timer); //清除 定时器 return; } console.log('num:'+ num); },1000); </script> <body> </html>
4 location对象
<!DOCTYPE html> <html> <head> <title>location 对象</title> </head> <body> <form> <input type="text" name="user"> <input type="password" name="pwd"> <input type="submit"> </form> <script type="text/javascript"> console.log(location.host); // 127.0.0.1 console.log(location.hostname); // 127.0.0.1 console.log(location.href); // http://127.0.0.1/11.html?user=yyyy&pwd=ppppp console.log(location.pathname); // /11.html console.log(location.port); // console.log(location.protocol); // http: console.log(location.search); // ?user=yyyy&pwd=ppppp </script> </body> </html>
5.如何访问每个查询字符串参数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>如何访问每个查询字符串参数</title> </head> <body> <form> <input type="text" name="user"> <input type="password" name="pwd"> <input type="submit"> </form> <script type="text/javascript"> function getQueryString(){ // 1.取得去掉问号查询字符串 user=mjj&pwd=123 var qs = location.search.length > 0 ? location.search.slice(1): ''; // 2.取得每一项 存放到数组中 var items = qs.length ? qs.split('&'): []; //["name=mjj", "pwd=123"] var item = null,name = null,value = null,args = {}; for(var i = 0; i < items.length; i ++){ item = items[i].split('='); //['name%20','mjj'] name = decodeURIComponent(item[0]); value = decodeURIComponent(item[1]); if (name.length) { args[name] = value; } } return args; } var args = getQueryString(); console.log(args.user); console.log(args.pwd); </script> </body> </html>
6 位置操作
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> 位置操作</title> </head> <body> <script type="text/javascript"> setTimeout(function(){ location.href = 'https://www.baidu.com'; // 跳转到 百度 点击返回会 回到老页面 // location.replace('https://www.baidu.com'); // 新地址 替换老地址 // location.reload(); // 刷新 },2000) </script> </body> </html>
7 navigator对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>navigator对象</title> </head> <body> <script type="text/javascript"> console.log(navigator.plugins);s function hasPlugin(name){ // 如果有插件 返回true 反之亦然 name = name.toLowerCase(); for(var i = 0; i < navigator.plugins.length; i++){ if(navigator.plugins[i].name.toLowerCase().indexOf(name) > -1){ // 有此插件 return true; }else{ return false; } } } alert(hasPlugin('Flash')); alert(hasPlugin('Chrome PDF Plugin')); </script> </body> </html>
8 history对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>history对象</title> </head> <body> <script type="text/javascript"> console.log(history); var count = 0; setTimeout(function(){ count++; console.log(count); history.go(-2);//刷新 -2 -1上一个页面， 1前进一个页面 },2000) </script> </body> </html>