<!--1. URL -->
http://www.baidu.cn/index.html?name=andy&age=18#link
protocol //通讯协议 http
host //域名 www.baidu.cn
port //端口 http 默认80
path //定义服务器上的路径(如果省略,则文档必须位于网站的根目录中)/index.html
query //参数 以键值对形式&分隔 name=andy&age=18
filename // 定义文档/资源的名称 #后面的内容 link 锚点 链接
<!-- 2.location -->
window对象给我们提供了一个location属性用于获取或设置窗体的URL,并可以用于解析URL 因为返回的是一个对象,所以也称location对象
location.href //返回完整的URL // http://www.baidu.cn/index.html?name=andy&age=18#link
location.host //返回一个URL的主机名和端口
location.port // 返回一个URL服务器使用的端口号
location.pathname //返回的URL路径名 //index.html
location.search // 返回一个URL的查询部分 返回参数 //?name=andy&age=18
location.hash // 返回一个URL的锚部分 #后面的内容 //#link
location对象的常见方法:
location.assign() 跟href一样,可以跳转页面(也称重定向页面)
location.replace() 替换当前页面,因为不记录历史,所以不能后退页面
location.reload() 重新加载页面,相当于刷新或F5,如果参数为true强制刷新ctrl + f5
<script>
btn.addEventListener('click', function() {
// 记录浏览历史,所以可以实现后退功能
location.href = 'http://www.baidu.com';
// location.assign('http://www.baidu.com');
// 不记录浏览历史,所以不可以实现后退功能
// location.replace('http://www.baidu.com');
location.reload(true);
})
</script>
<!-- 3. history对象 -->
window对象给我们提供了一个 history对象,与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中)访问过的URL。
back() //后退
forward() //前进功能
go(参数) //1前进 -1后退
<!--4. JS获取url参数: -->
A. JS函数用于获取url参数:
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false) }
url 实例:
http://www.runoob.com/index.php?id=1&image=awesome.jpg
调用 getQueryVariable("id") 返回 1。
调用 getQueryVariable("image") 返回 "awesome.jpg"
B.js 获取URL中的参数并转换为对象:
var $_REQUEST = new Object, aParams = document.location.search.substr(1).split("&");
for (i = 0; i < aParams.length; i++) {
var aParam = aParams[i].split("=");
$_REQUEST[aParam[0]] = aParam[1]
}
实例: url http://www.xxx.net/x/x.html?id=898602B8261890349226&aaa=123&ccc=456
aParams = ["iccid=898602B8261890349226", "aaa=123", "ccc=456"]
$_REQUEST = {iccid: "898602B8261890349226", aaa: "123", ccc: "456"}
C.JS将URL参数转换为对象:
function urlToObj(str){
var obj = {};
var arr1 = str.split("?");
var arr2 = arr1[1].split("&");
for(var i=0 ; i < arr2.length; i++){
var res = arr2[i].split("=");
obj[res[0]] = res[1]; //下标为[0]作为对象的key,下标为[1]则是key对应的值
}
return obj;
}
console.log(urlToObj('https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&tn=baidu&wd=%E7%99%BE%E5%BA%A6'))
//{ie: "utf-8", f: "3", rsv_bp: "1", tn: "baidu", wd: "%E7%99%BE%E5%BA%A6"}
<!-- 5.vue获取URL中的参数 -->
获取?后面的参数:
http://192.168.1.105:8080/#/idInput?username=%22%E5%BC%A0%E4%B8%89%22
获取参数方法 let id = this.$route.query.username
获取不带?的URL中的参数:
http://192.168.1.12:8080/#/home/newsinfo/234
获取参数方法 let id = this.$route.params.id
<!--6, ping cmd查询host域名是否连通 -->
ping www.baidu.com
正在 Ping www.a.shifen.com [163.177.151.109] 具有 32 字节的数据:
来自 163.177.151.109 的回复: 字节=32 时间=9ms TTL=57
来自 163.177.151.109 的回复: 字节=32 时间=10ms TTL=57
163.177.151.109 的 Ping 统计信息:
数据包: 已发送 = 4,已接收 = 4,丢失 = 0 (0% 丢失),
<!-- Debug 查错 -->