前端学习第一天

最新推荐文章于 2022-05-17 20:38:54 发布

KarrieL

最新推荐文章于 2022-05-17 20:38:54 发布

阅读量195

点赞数

分类专栏：前端文章标签：前端 js

本文链接：https://blog.csdn.net/Lei190/article/details/112160111

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

BOM(Browser Object Model)是浏览器对象模型。

在客户端中window是全局对象，window对象就相当于浏览器上打开的一个窗口

浏览器可以通过调用系统对话框，向用户显示信息，主要有三个函数：

alert(warning)：【功能】直接弹出警告框，可以通过window.alert（warning）调用。由于window下的函数，都可以省略window直接去调用，所以一般都是直接写成alert（warning）；【参数】：只有一个参数，为警告框下的内容；【返回值】：无返回值；
confirm（question）：【功能】弹出警告框，弹出一个带有确定和取消的警告框；【参数】：参数question是警告框中的内容；【返回值】：注意：confirm有返回值，当选择确定时，返回值为true，选择取消的时候返回值为false；
prompt（parameter1，parameter2）：【功能】弹出一个待输入框的警告框；【参数】：有两个参数，第一个参数，要在提示框上显示的内容，第二个参数，输入框内的默认值；【返回值】：当我点击确定时候，返回值是输入的内容，当点击取消时，返回值为null；

下面是示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
	alert("这是一个alert()");
	confirm("这是一个confirm()");
	prompt("这是一个prompt()","这是第二个参数");
</script>
</head>
<body>
</body>
</html>

window下的open方法：
可以通过window.open（）和 open（）调用

【参数】：

参数1：要加载的url
参数2：窗口的名称或者窗口的目标
参数3：一串具有特殊意义的字符串

第三个参数是用来设置窗口的属性的，一些属性定义如下:

还有一个opener，opener是对对弹出窗口的母窗口的一个引用。
比如我父窗口是father.html，如何我从father.html中通过open函数打开son.html，则在son.html中，opener是指向father.html的。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
	window.onload = function(){
	var btn = document.getElementById("btn");
	btn.onclick = function(){
	// 只有一个参数的情况下，没有给新页面命名，直接新建页面并打开窗口，点击几次打开几个新页面
	// open("https://www.baidu.com");

	// 包含二个参数，给新页面命名了，第一次点击会打开新窗口，并命名为第二个参数的值，之后再点击，只会再这个页面上打开，不会再创建新的页面了
	// open("https://www.baidu.com","这是我open新窗口打开的百度");

	// 包含三个参数，设置窗口的参数，各参数用逗号隔开
	open("https://www.baidu.com","这是我open新窗口打开的百度","left = 100px,width=500px");

}
}
</script>
</head>
<body>
<button id="btn"  >按钮</button>
</body>
</html>

father.html：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
	window.onload = function(){
	var btn = document.getElementById("btn");
	btn.onclick = function(){
	open("son.html","这是son.html");
}
}
</script>
</head>
<body>
	<button id="btn"  > 点击我打开son.html </button>
</body>
</html>

son.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
	window.onload = function(){
	var btn = document.getElementById("btn");
	btn.onclick = function(){
	alert(opener);
}
}
</script>
</head>
<body>
	<button id="btn">点击我查看我的opener</button>
</body>
</html>

Location对象

url：统一资源定位符
protocol(协议)：host（主机名）：port（端口号）/ pathname（路径）？ search（查询字符串）# hash（锚点）

Location 对象的描述（节选自w3school）：##

Location 对象存储在 Window 对象的 Location 属性中，表示那个窗口中当前显示的文档的 Web 地址。它的 href 属性存放的是文档的完整 URL，其他属性则分别描述了 URL 的各个部分。这些属性与 Anchor 对象（或 Area 对象）的 URL 属性非常相似。当一个 Location 对象被转换成字符串，href 属性的值被返回。这意味着你可以使用表达式 location 来替代 location.href。不过 Anchor 对象表示的是文档中的超链接，Location 对象表示的却是浏览器当前显示的文档的 URL（或位置）。但是 Location 对象所能做的远远不止这些，它还能控制浏览器显示的文档的位置。如果把一个含有 URL 的字符串赋予 Location 对象或它的 href 属性，浏览器就会把新的 URL 所指的文档装载进来，并显示出来。
除了设置 location 或 location.href 用完整的 URL 替换当前的 URL 之外，还可以修改部分 URL，只需要给 Location 对象的其他属性赋值即可。这样做就会创建新的 URL，其中的一部分与原来的 URL 不同，浏览器会将它装载并显示出来。例如，假设设置了Location对象的 hash 属性，那么浏览器就会转移到当前文档中的一个指定的位置。同样，如果设置了 search 属性，那么浏览器就会重新装载附加了新的查询字符串的 URL。
除了 URL 属性外，Location 对象的 reload() 方法可以重新装载当前文档，replace() 可以装载一个新文档而无须为它创建一个新的历史记录，也就是说，在浏览器的历史列表中，新文档将替换当前文档
不过 Anchor 对象表示的是文档中的超链接，Location 对象表示的却是浏览器当前显示的文档的 URL（或位置）。但是 Location 对象所能做的远远不止这些，它还能控制浏览器显示的文档的位置。如果把一个含有 URL 的字符串赋予 Location 对象或它的 href 属性，浏览器就会把新的 URL 所指的文档装载进来，并显示出来。
除了设置 location 或 location.href 用完整的 URL 替换当前的 URL 之外，还可以修改部分 URL，只需要给 Location 对象的其他属性赋值即可。这样做就会创建新的 URL，其中的一部分与原来的 URL 不同，浏览器会将它装载并显示出来。例如，假设设置了Location对象的 hash 属性，那么浏览器就会转移到当前文档中的一个指定的位置。同样，如果设置了 search 属性，那么浏览器就会重新装载附加了新的查询字符串的 URL。
除了 URL 属性外，Location 对象的 reload() 方法可以重新装载当前文档，replace() 可以装载一个新文档而无须为它创建一个新的历史记录，也就是说，在浏览器的历史列表中，新文档将替换当前文档。
Location 对象实际上是 JavaScript 对象，而不是 HTML DOM 对象。
Location 对象是由 JavaScript runtime engine 自动创建的，包含有关当前 URL 的信息。
Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。

hash设置或返回从井号 (#) 开始的 URL（锚）

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>Document</title>
</head>
<script>
    window.onload = function(){
        alert(location.hash);   // 返回一个URL的锚部分
        /*
         当我打开网页该网页时 网页的地址内容为： file:///D:/vscode/qianFeng/p82.html
         这时候我location.hash 为空，因为没有锚部分
        */
        /*
        当我在这个网页的后面加上#1时候，即当前网页的地址栏内容： file:///D:/vscode/qianFeng/p82.html#1
        这时候我的location.hash 的结果为1，因为有了锚部分 #1
        */

        location.hash = "#2";   // 可以通过location.hash设置锚部分的值
        alert(location.hash);   // 这时候可以看到地址栏内容为file:///D:/vscode/qianFeng/p82.html#2，location.hash为2

    }
</script>
<body>
    
</body>
</html>

锚点一般用于页内页面跳转。

host返回一个URL的主机名和端口

host 属性是一个可读可写的字符串，可设置或返回当前 URL 的主机名称和端口号。
端口号：所谓的端口，就好像是门牌号一样，客户端可以通过ip地址找到对应的服务器端，但是服务器端是有很多端口的，每个应用程序对应一个端口号，通过类似门牌号的端口号，客户端才能真正的访问到该服务器。为了对端口进行区分，将每个端口进行了编号，这就是端口号。
浏览器的端口号默认是8080
代码示例：

假设当前的 URL 是: http://example.com:1234/test.htm#part2：

<html>
<body>

<script type="text/javascript">
document.write(location.host);
</script>

</body>
</html>

输出结果为： example.com:1234

hostname设置或返回当前 URL 的主机名。

代码示例：

如果网页的url为：http://example.com:1234/test.htm#part2：

<script type="text/javascript">
document.write(location.hostname);
</script>

</body>
</html>

代码输出为： example.com

href设置或返回完整的 URL。

href 属性是一个可读可写的字符串，可设置或返回当前显示的文档的完整 URL。

因此，我们可以通过为该属性设置新的 URL，使浏览器读取并显示新的 URL 的内容。

示例代码：

假设当前的 URL 是: http://example.com:1234/test.htm#part2

<html>
<body>

<script type="text/javascript">
document.write(location.href);
</script>

</body>
</html>

输出：http://example.com:1234/test.htm#part2

pathname设置或返回当前 URL 的路径部分。
代码示例：

假设当前的 URL 是: http://example.com:1234/test/test.htm#part2：

<html>
<body>

<script type="text/javascript">
document.write(location.pathname);
</script>

</body>
</html>

输出： /test/test.htm

port设置或返回当前 URL 的端口号。

代码示例：

假设当前的 URL 是: http://example.com:1234/test.htm#part2：

<html>
<body>

<script type="text/javascript">
document.write(location.port);
</script>

</body>
</html>

输出：1234

protocol设置或返回当前 URL 的协议。

如果是在本地的文件，location.protocol的值为file：，如果是在服务器上，则值为htto：

代码示例：

假设当前的 URL 是: http://example.com:1234/test.htm#part2：

<html>
<body>

<script type="text/javascript">
document.write(location.protocol);
</script>

</body>
</html>

输出： http:

search设置或返回从问号 (?) 开始的 URL（查询部分）

代码示例：

假设当前的 URL 是: http://www.w3school.com.cn/tiy/t.asp?f=hdom_loc_search

<html>
<body>

<script type="text/javascript">
document.write(location.protocol);
</script>

</body>
</html>

输出： ?f=hdom_loc_search

Location对象的方法

assign() 方法可加载一个新的文档。

代码示例：

下面的例子将使用 assign() 来加载一个新的文档：

<html>
<body>

<script type="text/javascript">
document.write(location.protocol);
</script>

</body>
</html>

reload() 方法用于重新加载当前文档。

说明
如果该方法没有规定参数，或者参数是 false，它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变，reload() 会再次下载该文档。如果文档未改变，则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。

如果把该方法的参数设置为 true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。

代码示例：

<html>
<head>
<script type="text/javascript">
function reloadPage()
  {
  window.location.reload()
  }
</script>
</head>

<body>
<input type="button" value="Reload page"
onclick="reloadPage()" />
</body>

</html>

replace() 方法可用一个新文档取代当前文档。

语法
location.replace(newURL)
说明
replace() 方法不会在 History 对象中生成一个新的纪录。当使用该方法时，新的 URL 将覆盖 History 对象中的当前纪录。

代码示例：

下面的例子将使用 replace() 方法来替换当前文档：

<html>
<head>
<script type="text/javascript">
function replaceDoc()
  {
  
window.location.replace("http://www.w3school.com.cn")

  }
</script>
</head>
<body>

<input type="button" value="Replace document" οnclick="replaceDoc()" />

</body>
</html>

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
        assign():  跳转到指定的url
        reload()： 重载当前url
                   该方法如果传参，参数为true的时候，它都会绕过缓存，从服务器上重新下载该文档。
                   该方法如果传参，参数为false的时候，它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变，reload() 会再次下载该文档。
                   如果文档未改变，则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。
        replace(): 用新的url替换当前的页面，可以避免产生跳转前的历史记录。

        对于
        */
        window.onload = function(){
            var btn = document.getElementById("btn");
            btn.onclick = function(){
                //跳转到指定的url，并且会留下原来页面浏览记录，可以通过返回键返回之前页面
                // location.assign("https://www.baidu.com") 

                // location.reload("https://www.baidu.com"); 
                
                //新的url会覆盖旧的url的浏览记录，既旧的url不会留下访问记录，并且不可以通过返回键返回原来的页面
                location.replace("https://www.baidu.com");  
            }

        }
    </script>
</head>
<body>
    <button id="btn"> 点击按钮 </button>
</body>
</html>

History对象

History 对象实际上是 JavaScript 对象，而不是 HTML DOM 对象。

History 对象是由 JavaScript runtime engine 自动创建的，由一系列的 URL 组成。这些 URL 是用户在一个浏览器窗口内已访问的 URL 。

History 对象最初设计来表示窗口的浏览历史。但出于隐私方面的原因，History 对象不再允许脚本访问已经访问过的实际 URL。唯一保持使用的功能只有 back()、forward() 和 go() 方法。

History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

IE: Internet Explorer, F: Firefox, O: Opera.

length 属性

length 属性声明了浏览器历史列表中的元素数量。
语法
screen.width
实例:

<html>
<body>

<script type="text/javascript">
document.write(history.length);
</script>

</body>
</html>

输出：3

history.back()方法：

back() 方法可加载历史列表中的前一个 URL（如果存在）。

调用该方法的效果等价于点击后退按钮或调用 history.go(-1)。

语法
history.back()
实例
下面的例子可在页面上创建一个后退按钮：

<html>
<head>
<script type="text/javascript">
function goBack()
  {
  window.history.back()
  }
</script>
</head>
<body>

<input type="button" value="Back" onclick="goBack()" />

</body>
</html>

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            var getLength = document.getElementById("getLength");
            var btnBack = document.getElementById("btnBack");
            var btnForward = document.getElementById("btnForward");
            var btnGo = document.getElementById("btnGo");

            getLength.onclick = function(){
                alert(history.length);
            }

            btnBack.onclick = function(){
                history.back();
            }

            btnForward.onclick = function(){
                history.forward();
            }

            btnGo.onclick = function(){
                alert(Math.round( history.length/2 ))
                history.go( Math.round( history.length/2 ));
            }
        }
    </script>
</head>
<body>
    <button id="getLength"> 点击查看当前history的length </button>
    <button  id="btnBack"> back </button>
    <button  id="btnForward"> forward </button>
    <button  id="btnGo"> go </button>
</body>
</html>

BOM处理操作

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function getValue( search , key ){
            // 找出key第一次出现的位置
            var start = search.indexOf(key);
            if(start == -1){        // indexof找不到的情况下就返回-1，这时候表示没找到，直接return记性
                return;
            }else{
                //找出键值对，结束的位置
                var end = search.indexOf("&",start);
                if( end == -1 ){         // 没找到，说明没有&符号，那就是最后一个 
                    end = search.length;
                }
            }

            // 将这个键值对提取出来
            var str = search.substring(start,end);

            //分离键值对
            var arr =  str.split("=");
            return arr[1];
        }
        var search = "?id=5&searchme=ok"  
        var a = getValue(search,"searchme");  // 查找searchme键值对
        alert(a);
    </script>
</head>
<body>
    
</body>
</html>