为了账号安全,请及时绑定邮箱和手机立即绑定

【金秋打卡】第21天 从函数到函数式编程之路

标签:
JavaScript

课程名称:破解JavaScript高级玩法
课程章节:第8章 被我们忽视的BOM
主讲老师:Cloud

课程内容:

今天学习的内容包括:
8-3 location对象几个重要的知识点——location上的属性和方法的使用。

课程收获:

了解location对象
  • href:包含这个URL的DomString
  • protocol:协议,一般为http:,https:
  • host:主机名,包括端口
  • hostname:主机名
  • port:端口
  • pathname:URL中路径部分,开头包含/
  • search:URL参数DOMString,开头包含?
  • hash:URL的hash部分,开头包含#
  • username:URL域名前的用户名
  • password:URL域名前的密码
  • origin:页面来源,URL中?前部分
  • assign():加载指定URL内容
  • reload():重新加载当前页面
  • replace():使用新页面替换当前页面
  • toString():返回一个DOMString,包含整个URL
  • searchParams:只读,访问search中各个查询参数
  • createObjectURL():创建—个唯—的blob链接
  • revokeObjectURL():销毁createObjectURL()创建的实例
可修改属性值
  • protocol
  • host
  • hostname
  • port
  • pathname
  • search
  • hash
  • href
修改属性值-注意点
  • location.origin 属性是只读的,存在兼容问题(IE11以下不存在)
  • 除hash,其他任意属性修改都会以新URL重新加载。修改这些属性值,会在浏览器的历史记录中生成一条新的历史记录
  • 修改pathtname 不用传开头/, 修改search 不用传?,修改hash 不用传#
host vs hostname
  • host 包含端口号
  • hostname 只返回域名
  • 没有端口号的URL,host 与 hostname 相同
访问Location 对象方式
  • window.location
  • document.location
  • window.document.location
  • location(不推荐)
window.location.reload
  • 定义:重新加载当前文档
  • 参数:false或者不传,浏览器可能从缓存中读取页面
  • 参数:true,强制从服务器重新下载文档
assign vs href vs replace
  • assign 和 href会增加一条新纪录
  • replace不会增加
window.location.href vs window.open
  • window.location.href 是用新的域名页调换当前页,不会开新窗口
  • window.open用来打开新窗口或者查找已命名的窗口,打开新窗口可能会被浏览器拦截
hash-监听方式
  • window.onhashchange = funcRef;
  • window.addEventListener(“hashchange”, funcRef, false);
  • <body onhashchange="funcRef();">
location 修改 vs URL 修改 区别
  • location 的属性修改直接反应在相关的对象上,浏览器触发当前地址栏更新。
  • URL 的属性修改,仅仅是URL实例对象更改,不会触发浏览器的其他操作。
encodeURI ,encodeURIComponent系列
  • 定义:都是编码URL,唯一的区别在于编码的字符范围不同。
  • encodeURIComponent 不转义的字符: A-Z a-z 0-9 - _ . ! ~ * ’ ( )
  • encodeURI不转义的字符:A-Z a-z 0-9 ; , / ? : @ & = + $ -_.!~*’() #
encodeURI ,encodeURIComponent使用场景
  • 如果需要编码整个URL,然后需要使用这个URL,那么使用encodeURI
  • 如果只需要编码URL中的参数,那么使用encodeURIComponent是最好的

今天 学习了 location对象几个重要的知识点。学习到了location相关API以及使用场景,了解到了encodeURL和encodeURLComponent的区别。对自己说一句,加油😀~

坚持打卡,坚持学习!明天见💪~


https://img1.sycdn.imooc.com/63709d590001e0a225371375.jpg

https://img1.sycdn.imooc.com/6370a0350001d79425211365.jpg

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消