BOM部分笔记整理
BOM部分整理 (章节 8、9)
概览:
一、介绍BOM
在web中,JS的核心对象就是BOM。
1.1 在浏览器中,window对象 == global
所以,你在全局环境下定义的变量,函数都会自动成为window的属性和方法。
var a = 1;
console.log(window.a); //
function fn(){
console.log("window");
}
console.log(window.fn()); //window
tips:通过var声明的变量,无法被delete操作符删除。因为它默认了configurable =false。
直接写且不声明的变量,以及通过window.xx定义的变量都可以通过delete删除。
var a = 1;
console.log(delete a);//false
window.b = 2;
console.log(delete b);//true
c = 3;
console.log(delete c);//true
二、frame和window的关系
每一个frame窗口都有一个window对象,并且他们保存在JS定制的frames数组里,可以通过frames[0]来获取。
每个window对象都有自己的名称,属性为name。
这部分的内容了解就好,只是定义了一些iframe和window之间互相访问的关系。
因为现在开发很少使用iframe了,就是说不时髦了。
三、窗口相关的方法
整理如上,值得注意的几点:
1. 浏览器和屏幕是两个概念,很多同学调用screen方法发现一直都是0,因为你们全屏了!
2.innerWidth/Height同类的方法还有outerWidth/Height,因为实现的效果基本相同,所以用的基本都是inner系列。
3. 本节的重点是定时器部分的内容,建议多加练习。
4. alert这类方法,基本只是在测试时候用了,正常页面谁会搞这个东西给用户看。
三、location对象
对于搜索框的对象操作,是BOM部分非常重要的内容,概览如下:
它既是window的属性,又是document对象的属性。
虽然可以获取到参数,但是拿过来的字符串其实相当不方便,需要自己编写函数进行优化。
function query(){
//去掉问号
var qs = (location.search.length>0?location.search.substring(1):''); // 用一个空对象来接收键值对
var ar
// 看有没有参数,有就按照&来分割,没有的话就返回空数组
var items = qs.length?qs.split("&"):[];//[a=1,b=2]
console.log("items = " + items);
var item = null,
name = null,
i = 0 ,
len = items.length,
value = null;
for(i=0;i<len;i++) {
//再对每一个项按照等号分割
item = items[i].split("=");//[[a,1],[b,2]]
// name = decodeURIComponent(item[0]);
name = item[0];
value = item[1];
// value = decodeURIComponent(item[1]);
if(name.length) {
args[name] = value;
}
}
return args;
}
四、navigator对象
还没有完全的兼容,但是部分功能依旧强大,概览:
4.1 操作浏览器历史记录的方法
在浏览器中就是左上角的前进后退,JS实现了用代码来管理它们。
history对象,它有一些方法,常用的如下:
history.go(-1);//返回上一页
history.go(1);//前进一页
history.go(2);//前进两页
// 也可以不传参数,简写成
history.back();//后退
history.forward();//前进
如果你不希望用户跳转网页后返回上一页,调用:
window.location.replace("地址");
//这样跳转不能通过浏览器的返回键返回到上一级
最后一个方法,location.reload()
不传参数就在缓存中刷新一遍网页
传true就强制要从服务器重新获取网页
五、第八章小结
这章很多方法都过时了,还有很多兼容ie的方法
重要的几点就是:
location对象和history对象
定时器
第九章
第九章真的没啥好看的,有点浪费时间。
浏览器检测就是为了处理兼容性问题。
我只想说 GTMD IE
以上;
BOM部分笔记整理的更多相关文章
- python学习笔记整理——字典
python学习笔记整理 数据结构--字典 无序的 {键:值} 对集合 用于查询的方法 len(d) Return the number of items in the dictionary d. 返 ...
- 从0开始学Swift笔记整理(五)
这是跟在上一篇博文后续内容: --Core Foundation框架 Core Foundation框架是苹果公司提供一套概念来源于Foundation框架,编程接口面向C语言风格的API.虽然在Sw ...
- Deep Learning(深度学习)学习笔记整理系列之(五)
Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...
- 学习ReactNative笔记整理一___JavaScript基础
学习ReactNative笔记整理一___JavaScript基础 ★★★笔记时间- 2017-1-9 ★★★ 前言: 现在跨平台是一个趋势,这样可以减少开发和维护的成本.第一次看是看的ReactNa ...
- Deep Learning(深度学习)学习笔记整理系列之(八)
Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...
- Deep Learning(深度学习)学习笔记整理系列之(七)
Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...
- Deep Learning(深度学习)学习笔记整理系列之(六)
Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...
- Deep Learning(深度学习)学习笔记整理系列之(四)
Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...
- Deep Learning(深度学习)学习笔记整理系列之(三)
Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...
随机推荐
- 【Android Developers Training】 79. 连接到网络
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
- CSS3学习系列之背景相关样式(二)
在border-radius属性中指定两个半径 在border-radius属性中,可以指定两个半径,指定方法如下所示: border-radius:40px 20px; 针对这种情况,各种浏览器的处 ...
- 在Apworks数据服务中使用基于Entity Framework Core的仓储(Repository)实现
<在ASP.NET Core中使用Apworks快速开发数据服务>一文中,我介绍了如何使用Apworks框架的数据服务来快速构建用于查询和管理数据模型的RESTful API,通过该文的介 ...
- 如何禁用 .net reflector
在 工具--->扩展管理器-->禁用
- [CF373C]计算袋鼠是愉快的(Counting Kangaroos is Fun)-贪心
Problem 计算袋鼠是愉快的 题目大意 有n只袋鼠,如果一个袋鼠体积是另一个袋鼠的两倍或以上,则小袋鼠能被大袋鼠装进袋子里,装进去后就看不到袋子里的袋鼠了,问这群袋鼠如何行动才能使得它们看着数量最 ...
- 包装类、数组、string类浅析及练习
String s1 = "abc"; String s2 = "abc"; System.out.println(s1==s2); //返回true Strin ...
- 使用pillow生成分享图片
重复性的工作一定要交给计算机去做! 有时候要为公司做一张宣传用的分享图片,很简单交给设计通过ps.AI做好就行了,但是如果一个网站要为每个用户生成一张专属的分享图片,如果让设计师一张一张的去做,哪设计 ...
- Jmeter连接DB2/ORACLE/MYSQL数据库
连接DB2 1.将db2数据库驱动db2java.jar.db2jcc.jar放入jmeter的lib/下,同时也要放入本地jdk目录下例如:C:\Program Files\Java\jdk1.7. ...
- nopCommerce 3.9 大波浪系列 之 路由扩展 [多语言Seo的实现]
一.nop种的路由注册 在Global.asax,Application_Start()方法中会进行路由注册,代码如下. public static void RegisterRoutes(Route ...
- win10安装sqlserver2016准备
win10安装sql server2016需要注意: 一.下载jdk-8u121-windows-x64.exe这个安装,这个检测不通过会影响安装 二.把万维网服务的这个去掉,这个影响数据库实例的创建 ...