JavaScript基础之BOM 个人笔记

来源：互联网发布：每日销售数据统计表编辑：程序博客网时间：2024/06/10 22:40

SCREEN

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Screen</title></head><body></body><script>    console.log(screen.width);/*屏幕宽度*/    console.log(screen.height);    console.log(screen.availWidth);/*屏幕可用宽度*/    console.log(screen.availHeight);</script></html>

LOCATION

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>location</title></head><body><button onclick="assign()">加载新页面</button><button onclick="replace()">替换页面</button><button onclick="reload1()">刷新页面</button><button onclick="reload2()">彻底刷新页面</button></body><script>    function assign() {        /*可以返回老页面*/        location.assign("http://www.baidu.com");    }    function replace() {        /*不可以返回老页面*/        location.replace("http://www.baidu.com");    }    function reload1() {        location.reload();    }    function reload2() {        location.reload(true)    }</script><!----><script>    console.log(location.href);    /*完整的url*/    console.log(location.protocol);    /*协议*/    console.log(location.port);    /*端口号*/    console.log(location.hostname);    /*主机名称*/    console.log(location.pathname);    /*路径名称*/    console.log(location.search);    /*？后的数据部分*/</script></html>

HISTORY

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>history</title></head><body><h1>45</h1><a href="Demo46.html">Demo46</a><button onclick="forward()">下一个页面</button></body><script src="../../js/history.js"></script></html>

CONFIRM

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>confirm</title></head><body></body><script language="javascript" type="text/javascript">    var flag = confirm("确认要删除此条信息吗？");    if (flag) {        alert("删除成功");    } else {        alert("取消删除");    }</script></html>

navigator

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Navigator</title></head><body><button onclick="close1()"></button></body><script>    console.log(navigator.appName);    console.log(navigator.appVersion);    console.log(navigator.userAgent);    console.log(navigator.platform);    function close1() {        window.close1();    }</script></html>

OPEN

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>OPEN</title></head><body><button onclick="openNewPage()">打开鲜花页面</button></body><script>    function openNewPage() {        window.open("Demo49.html", "xianhua", "height=300,width=500,left=50,top=100")    }</script></html>

定时器

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>定时器</title></head><body><button onclick="show()">五秒后显示helloworld</button><button onclick="cancelShow()">取消显示helloworld</button><button onclick="cancelShow2()">停止显示helloworld</button></body><script>    //setTimeout            默认情况下，只会执行一次    var hello;    function show() {        hello = setTimeout(function () {            alert("HelloWorld!");        }, 5000);                                       //5000=5000ms    }    function cancelShow() {        clearTimeout(hello);    }</script><script>    /*setinterval   根据指定的时间，循环执行*/    var hello2 = setInterval(function () {        console.log("HelloWorld!")                     //console在控制台看变化    }, 1000)    function cancelShow2() {        clearTimeout(hello2);    }</script></html>

getelement系列方法

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>getelement系列方法</title></head><body><p id="jereh">杰瑞集团</p><p name="jredu">杰瑞教育</p><p name="jredu">杰瑞教育</p><button onclick="change()">变字体颜色！！</button><button onclick="change2()">字体变大！！</button><button onclick="change3()">全部字体变大！！</button></body><script>    /*getElementById    通过id查找元素，只会返回一个匹配的元素*/    function change() {        document.getElementById("jereh").style.color = "red";    }    /*getElementByClassName     通过class查找元素，只会返回一个匹配的元素数组*/    /*function change2() {        var result = document.getElementsByClassName("jredu");        //用这个函数就把上边杰瑞教育name改成class        for (var i = 0; i < result.length; i++) {            result[i].style.fontSize = "40px";        }    }*/    /*getElementByName      通过name属性查找元素，只会返回一个匹配的元素数组*/    function change2() {        var result = document.getElementsByName("jredu");        for (var i = 0; i < result.length; i++) {            result[i].style.fontSize = "40px";        }    }    /*getElementByTagName       通过标签查找元素，只会返回一个匹配的元素数组*/    function change3() {        var result = document.getElementsByTagName("p");        for (var i = 0; i < result.length; i++) {            result[i].style.fontSize = "40px";        }    }</script></html>

Attribute

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Attribute</title></head><body><img src="../../../img/f3_Android1.png" alt="图片错误" id="img"><br><button onclick="getUrl()">获取图片路径信息</button><button onclick="changeUrl()">改变图片</button><button onclick="chan()">获取文本</button></body><script>    var img = document.getElementById("img");    function getUrl() {//        var src = img.getAttribute("src");    //相对路径        //与下面语句两者作用相同，所以存在一个就ok        var src = img.src;                      //绝对路径        console.log(src);    }    function changeUrl() {        img.setAttribute("src", "../../../img/f3_Android2.png");//        img.src= "../../../img/f3_Android2.png"               //于上边函数一样，于上边语句的差别是相对绝对    }</script></html>

点符号法

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <style>        .ccy {            margin-top: 200px;        }        .yut {            text-align: center;            font-size: 30px;            color: red;        }    </style>    <title>点符号法</title></head><body><p id="school" class="ccy">青岛理工大学！</p><button onclick="change()">改变字体</button></body><script>    var p = document.getElementById("school");    function change() {        /*1:style方法，逐个去给元素添加样式，速度慢！*///        p.style.color="red";//        p.style,textAlign="center";//        p.style.fontSize="40px";        /*2:className方法，直接给元素添加一个样式类，速度快         * 前提是样式类已经存在         * 元素已存在默认类的时候，再次添加样类需要使用+="(空格)类名称"*///        document.getElementById("school").className="yut";//        p.className += " yut";      //这样写两个类可以同时显示        /*3:cssText 可以一次把多个样式写在样文本中*/        p.style.cssText += ";color:red;font-size:40px;text-align:center";    }</script></html>

行内样的获取

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <style>        #yut {            color: red;        }    </style>    <title>行内样的获取</title></head><body><p id="yut" style="font-size: 40px">青岛理工大学</p></body><script>    var p = document.getElementById("yut");//    var style = p.style;                            /*.style    获取的全部为行内样式*/    /*var style = window.getComputedStyle(p);         /!*W3C   获取元素的所有样式*!/    var style = p.currentStyle;                     /!*IE    获取元素的所有样式*!/*/    /*浏览器种类的区分不适用浏览器对象    * 尝试用的方法为判断浏览器特有的属性和方法*/    if (p.currentStyle){/*IE*/        var style = p.currentStyle;                     /*IE    获取元素的所有样式*/    }else{              /*W3C*/        var style = window.getComputedStyle(p);         /*W3C   获取元素的所有样式*/    }    console.log(style.fontSize);    console.log(style.color);           //没效果？因为只能获取行内样式</script></html>

阅读全文

0 0