JavaScript 学习(2)
参考: http://www.w3cschool.cc/js/js-window.html
四、浏览器 BOM
浏览器对象模型(BOM)使JavaScript有能力与浏览器“对话”。
(1)Window
浏览器对象模型(Browser Object Model),尚无正式标准。
所有浏览器都支持window对象,它表示浏览器窗口。
// 甚至HTML DOM 的 document 也是 window 对象的属性之一:
window.document.getElementById("header");
document.getElementById("header");
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
window.open(); // 打开新窗口
window.close(); // 关闭当前窗口
window.moveTo(); // 移动当前窗口
window.resizeTo(); // 调整当前窗口
(2)Window Screen
window.screen 对象包含有关屏幕的信息。
screen.availWidth; // 可用屏幕宽度
screen.availHeight; // 可用屏幕高度
Screen { availWidth: 1366, availHeight: 738, width: 1366, height: 768, colorDepth: 24, pixelDepth: 24, top: 0, left: 0, availTop: 0, availLeft: 0 }
(3)Window Location
window.location 对象用于获得当前页面的地址(URL),并把浏览器重定向到新页面。
location.hostname; // 返回 web 主机的域名
location.pathname; // 返回当前页面的路径和文件名
location.port; // 返回 web 主机的端口 (80 或 443)
location.protocol; // 返回所使用的 web 协议(http:// 或 https://)
(4)Window History
window.history 对象包含浏览器的历史。
history.back(); // 与在浏览器点击后退按钮相同
history.forward(); // 与在浏览器中点击按钮向前相同
(5)Window Navigator
window.navigator 对象包含有关访问者浏览器的信息。
(6)弹窗
可以在JavaScript中创建三种消息框:警告框,确认框,提示框。
// 警告框
window.alert(" sometext ");
// 确认框。点击“确认”,返回true。点击“取消”,返回false。
window.confirm(" sometext ");
// 提示框。
window.prompt(" sometext ", "default_value");
(7)计时事件
通过使用JavaScript,我们有能力做到在一个设定的时间间隔之后执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。
在JavaScript中使用计时事件是很容易的,两个关键方法是:
setInterval(); // 间隔指定的毫秒数不停的执行指定代码
setTimeout(); // 暂停指定的毫秒数后执行指定代码
window.setInterval("javascript function",milliseconds);
window.clearInterval(intervalVariable);
window.setTimeout("javascript 函数",毫秒数);
window.clearTimeout(timeoutVariable);
// 简单时钟
<script>
setInterval(function(){doTimer()}, 1000);
function doTimer(){
var time = new Date();
var time_str = time.toLocaleTimeString();
document.getElementById("timer").innerHTML = time_str;
}
</script>
<div id="timer"></div>
(8)Cookies
在JavaScript中,可以使用document.cookie 属性来创建,读取,删除cookies。
// 创建 cookie
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
// 读取 cookie
var x = document.cookie; // 以字符串的方式返回所有cookies,类型格式:cookie1=value; cookie2=value; cookie3=value;
// 修改 cookie
document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
// 删除 cookie, 将expires参数设置为以前的时间即可
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
五、JavaScript 库
JavaScript 库 - JQuery,Prototype,MooTools。
(1)简介
JavaScript高级程序设计(特别是针对浏览器差异的处理),通常很困难也很耗时。
为了应对这些调整,许多的JavaScript(helper)库应用而生。这些库通常称为 JavaScript框架。
所有这些框架都提供针对常见 JavaScript任务的函数,包括动画、DOM操作、以及AJAX处理。
JQuery目前最受欢迎的JavaScript框架。使用CSS选择器来访问和网页上的HTML元素(DOM对象)。
(2)JQuery
这里只所JQuery吧,至于JQuery,打算重新写篇文章 ... ...
六、
至此,JavaScript算是基本完成了。下面 JQuery ... ...
- Java基础——异常体系
- Java基础——数据类型之间的转换
- Java程序员面试宝典——重要习题整理
- Java8读文件方法代码学习
- .NET ORM 的 “SOD蜜”--零基础入门篇
- 【Spark研究】用Apache Spark进行大数据处理之入门介绍
- DataSet的灵活,实体类的方便,DTO的效率:SOD框架的数据容器,打造最适合DDD的ORM框架
- Java 内部类种类及使用解析
- JSON与XML的区别比较
- 无需开启宏即可渗透:在Office文档中利用DDE执行命令
- SQLiv:一款批量SQL注入漏洞扫描工具
- 【Python环境】监督学习之KNN算法
- 【数据科学】什么是数据科学家与数据科学
- Android基础总结(12)——XML和JSON解析
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android 天气APP(七)城市切换 之 城市数据源
- Elasticsearch: Reindex接口
- Android Studio 更新版本之后报错: Cannot access android.arch.lifecycle.ViewModelStoreOwner
- Android各版本查询和开启悬浮窗权限
- RuntimeException: setAudioSource failed异常
- Java&Android获取当前日期、时间、星期几、获取指定格式的日期时间、时间戳工具类包含使用示例
- Android TV 开发之 TV视频播放器
- Android MediaPlayer 音乐播放器扫描 本地音乐、上一曲、下一曲切歌、播放本地音乐
- 1小时真正掌握正则表达式
- Android Studio 安装配置教程 - Windows(详细版)
- Android 天气APP(八)城市切换 之 自定义弹窗与使用
- Android 接入udesk SDK实现IM
- Android 天气APP(十二)空气质量、UI优化调整
- Python+selenium 自动化-调用dom节点的click()监听事件,强力操作节点!穿透元素进行点击,节点被遮挡不可点击解决方法
- pkl是什么类型的文件?怎么来打开它?