Javascript BOM

最新推荐文章于 2024-07-16 19:07:40 发布

lq1224825

最新推荐文章于 2024-07-16 19:07:40 发布

阅读量418

点赞数

分类专栏： javascript 文章标签： javascript 浏览器对象

本文链接：https://blog.csdn.net/l954758514/article/details/77200057

版权

javascript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1 常用对象

Window ：窗口，浏览器的窗口
定义的全局变量和全局函数都是window对象的属性和方法。
<script>
    var a = 10;
    function Test(){
        var a = 2;
        alert(a);
        alert(window.a);
    }
    Test()
</script>
全局变量是window的属性。全局函数是window的方法。
浏览器窗口body的宽度：window.innerwidth;
浏览器窗口body的高度：window.innerheight;
获取浏览器窗口宽高的方法：
<body>
    <p id="p1">窗口的宽度</p>
</body>
<script>
    var p1 = document.getElementById("p1");
    var width = window.innerWidth;
    var height = window.innerHeight;
    p1.innerHTML = "窗口的宽度为："+ width + "窗口的高度为：" + height;
</script>

常用的方法：
open:打开一个新的浏览器窗口。要穿三个参数，第一个为将要打开浏览器窗口的路径，第二个为打开的方式第三个为对于新打开浏览器窗口的描述（宽和高等）。
<body>
        <button onclick="openWin()">打开一个新的窗口</button>
</body>
<script>
    function openWin(){
        var myWindow = window.open("http://www.baidu.com","_blank","");
    }
</script>
Close：关闭一个窗口
<body>
    <button onclick="openWin()">打开一个新的窗口</button>
    <button onclick="closeWin()">关闭新的浏览器</button>
</body>
<script>
    function openWin(){
        myWindow = window.open("http://www.baidu.com","_blank","");
    }

    function closeWin(){
        myWindow.close();
    }
</script>

Moveto:移动一个窗口。以窗口的左上角为坐标起点；
focus:使窗口获得焦点。
function removeWin(){
    //一个窗口的左上角为移动窗口的坐标
    myWindow.moveTo(200,200);
    myWindow.focus();//窗口获得焦点
}

resizeTo:改变窗口的大小
function resizeWin(){
    myWindow.resizeTo(1000,1500);
    myWindow.focus();
}

screen：屏幕   也是window下面的一个对象，在使用的时候可以用window.screen，也可以吧window省略掉。
    屏幕的常用属性：宽，高；可用宽和可用高（可用高不包括任务栏）
<script>
    var scrWidth = window.screen.width;
    var scrHeight = screen.height;
    document.write("屏幕的宽："+scrWidth+"屏幕的高："+scrHeight);
    var scrAviWidth = screen.availWidth;
    var scrAviHeight = screen.availHeight;
    document.write("屏幕的宽："+scrAviWidth+"屏幕的高："+scrAviHeight);
</script>


location：地址
常用属性：href 完整路径、port 端口号、pathname 路径名、protocol 协议。
var href = location.href;
document.write("完整的路径"+href+"<br>");
var port = location.port;
document.write("端口号"+port+"<br>");
var path = location.pathname;
document.write("路径名"+path+"<br>");
var pro = location.protocol;
document.write("协议"+pro+"<br>");

常用方法：
assign：打开一个新的路径（窗口）
function newLocation(){
    location.assign("http://www.baidu.com");
}

reload：刷新
function reloadDoc(){
    location.reload();  //如果传值为true为强制刷新，否则就是普通刷新
}

history:历史记录
记录当前窗口的历史，可以进行页面的转换。
back:返回上一页
forward：进入下一页
go：进入确定的哪一页（-1时为返回上一页）
<body>
    <button onclick="goBack()">返回上一页</button>
    <button onclick="goForward()">进入下一页</button>
    <button onclick="newDoc()">新的页面</button>
</body>
<script>
    function goBack(){
        history.back();
    }

    function newDoc(){
        location.assign("http://www.baidu.com")
    }

    function goForward(){
        history.forward();
    }
</script>

2 弹窗

alter():警告提示框，也是window对象下的方法，window可以省略
alert("提示的内容"); //警告提示框


promt(“提示的信息”,”默认值”); 信息提示输入框。也是window对象下的方法，window可以省略。当点击了确定后才把值返回否则返回为空。
var str = prompt("请输入内容","hello world"); //请输入内容就是提示的信息，后面的hello world就是默认值。


confirm（”提示的信息”）确认框。也是window对象下的方法，window可以省略不写。当点击确定的时候，返回true，如果点击取消则返回false

var isRight = confirm("是否确定删除");
document.write(typeof (isRight)+"<br>"+isRight);

3 .cookie

cookie的作用：在本里浏览器存储数据。常用于记住账号等
cookie的组成：
键值对的形式
存储的数据：”userId=123456;pswd=123456”
有效期:”expires=今天以后的时间”
存储cookie：
按照cookie的格式写好一个字符串，然后将它赋值给document.cookie,浏览器就存储了这个cookie。可以存储多个键值对，但是键的名字不能重复。
function saveCookie(){
    var password = document.getElementById("password").value;
    var userId = document.getElementById("userId").value;
    var date = new Date();
    date.setDate(date.getDate()+7);
    var cookieText = "password="+password+";"+"expires="+date;
    var cookieText1 = "userId="+userId+";"+"expires="+date;
    document.cookie = cookieText;
    document.cookie = cookieText1;
}

获取cookie：
通过document.cookie就能得到浏览器之前存储的cookie，是一个字符串。将这个字符串进行解析，得到自己想要的内容。
function getCookie(){
    var data = document.cookie;
    var result = [];
    result = data.split("; ");
    var userIdData = result[0].split("=")[1];
    var passwordData = result[1].split("=")[1];
    var userId = document.getElementById("userId");
    var password = document.getElementById("password");
    userId.value = userIdData;
    password.value = passwordData;
}

清除cookie：
将存储的cookie的有效期改为过去的某一天，就清除了cookie。
function removeCookie(){
        var date = new Date();
        date.setDate(date.getDate()-7)
        var cookieText = "password=;expires="+date;
//        var cookieText1 = "userId=;expires="+date;
        document.cookie = cookieText;
//        document.cookie = cookieText1;
    }

4 计时时间

setInterval（“函数”，“毫秒数”）;//计时器，就是每隔多长时间就调用一次函数。例如时钟的演示：
var timer = setInterval("getTime()",1000);
/*function getTime(){
    var date = new Date();
    var d = date.toLocaleString();
    document.getElementById("demo").innerHTML = d;
}*/

function getTime(){
    var date = new Date();
    var hour = date.getHours();
    var f = date.getMinutes();
    var s = date.getSeconds();
    var d = document.getElementById("demo");
    d.innerHTML = hour+":"+f+":"+s;
}
clearInterval（计时器）;//停止一个计时器

setTimeout（“函数名”，“毫秒数”）；//延时器，就是隔了多长时间后调用一次函数。
<script>
    var timer = setTimeout("alarmClock()",3000);

    function alarmClock(){
        var p1 = document.getElementById("p1");
        p1.innerHTML = "";
    }
</script>