作者:神烟醉_263 | 来源:互联网 | 2020-09-04 13:15
全局变量和全局方法都归在window上;如果open方法中的url参数为空的话,那么新窗口也会被打开只是不会显示任何文档;location.href返回当前页面的完整URL;location.hash返回#后面的。
JS中BOM操作知识点
window对象
全局变量和全局方法都归在window上
alert-comfirm-prompt
让alert 、confirm等弹出框上的提示文字实现换行:\n
// confirm()
// 点击确定返回true,取消返回false
var btn=document.getElementById("btn");
btn.Onclick=function(){ // 弹出确认对话框
var result=window.confirm("您确定要删除吗?删除之后该信息\n将不可恢复!"); if(result){
document.getElementById("box").style.display="none";
}
} // prompt("text","defaultText")
// text:对话框中显示的纯文本
// defaultText:默认的输入文本
// 点击确认返回文本,点击取消返回null
var message=prompt("请输入您的星座","天蝎座");
console.log(message); open-close
如果open方法中的url参数为空的话,那么新窗口也会被打开只是不会显示任何文档
window.Onload= function(){
// 打开子窗口,显示
newwindow.html
window.open("newwindow.html","newwindow","width=400,height=200,
left=0,top=0,toolbar=no,menubar=no,scrollbars=no,location=
no,status=no");
var quit = document.getElementById("quit");
// 点击关闭当前窗口
quit.Onclick= function(){
window.close("newwindow.html");
}
} 延迟调用setTimeout()
//调用函数
var fnCall=function(){
alert("world");
}
setTimeout(fnCall,5000); //调用匿名函数
var timeout1=setTimeout(function(){
alert("hello");
},2000)
clearTimeout(timeout1); 实现以下要求:
(1) 点击“删除”按钮3秒后,页面上p里面的文字消失
(2) 点击“删除”按钮之后的3秒内,如果点击“取消删除”按钮,那么页面上p里面的文字就不会被删除
点击"删除"按钮后,里面的内容将在3秒钟后消失;
如点击了"删除"后又不想删除内容,请在点击"删除"按钮3秒之内点击"取消删除"按钮即可
验证码倒计时案例:
会闪烁的文字:
会闪烁的文字
location.href返回当前页面的完整URL
location.hash 返回#后面的
console.log(location.href);
console.log(location.hash);
var btn=document.getElementById("btn");
btn.Onclick=function(){
// 可以实现跳转
location.hash="#top";
} // 返回服务器名称和端口号
// 本地不行,要到服务器上
console.log(location.host); // 返回服务器名称
console.log(location.hostname); // 返回URL中的目录和文件名
console.log(location.pathname); // 返回URL中的查询字符串,以?开头
console.log(location.search); 改变浏览器的位置
setTimeout(function(){ // 会在历史记录中生成新纪录
location.href='index6.html';
window.location='index6.html'; // 不会在历史记录中生成新纪录
location.replace("index6.html");
},1000)
document.getElementById("reload").Onclick=function(){ // 有可能从缓存中加载 location.reload(); // 从服务器重新加载
location.reload(true);
} history保存用户访问页面的历史记录
forward 回到历史记录的下一步
var btn = document.getElementById("btn");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
// 点击btn按钮时回到历史记录的上一步,后退
btn.Onclick= function() { // 方法一
history.back(); // 方法二
history.go(-1);
}
// 点击btn2按钮时回到历史记录的下一步,前进
btn2.Onclick= function() { // 方法一
history.forward(); // 方法二
history.go(1);
}
btn3.Onclick= function() { // 前进n步
history.go(n); // 后退n步
history.go(-n);
} screen对象
// 获取屏幕可用宽高
console.log("页面宽:"+screen.availWidth);
console.log("页面高:"+screen.availHeight); // 获取窗口文档显示区的宽高
console.log("pageWidth:"+window.innerWidth);
console.log("pageHeight:"+window.innerHeight); navigator对象
//console.log(navigator.userAgent);
// 判断浏览器
function getBrowser(){ var explorer = navigator.userAgent,browser; if(explorer.indexOf("MSIE")>-1){
browser = "IE";
}else if(explorer.indexOf("Chrome")>-1){
browser = "Chrome";
}else if(explorer.indexOf("Opera")>-1){
browser = "Opera";
}else if(explorer.indexOf("Safari")>-1){
browser = "Safari";
} return browser;
} var browser = getBrowser();
console.log("您当前使用的浏览器是:"+browser); // 判断终端
function isPc(){ var userAgentInfo = navigator.userAgent,
Agents = ["Andriod","iPhone","symbianOS","windows phone","iPad","iPod"],
flag = true,i;
console.log(userAgentInfo); for(i=0;i-1){
flag = false; break;
}
} return flag;
} var isPcs = isPc();
console.log(isPcs); 本文来自 js教程 栏目,欢迎学习!
以上就是JS中BOM操作知识点的详细内容,更多请关注 第一PHP社区 其它相关文章!