js操作BOM对象
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>window对象</title> <!--
BOM:(浏览器对象模型 Browser Object Model)
浏览器页面的 前进 后退 刷新 页面跳转 都是Bom！
对整个浏览器窗口进行交互的对象模型！
包含的内容（对象）：
1.window对象
01.history 属性
02.location 属性
2.document对象 window对象
常用的属性：
01.history 属性
02.location 属性
常用的方法：
alert() :只有一个对话框和一个确认按钮
prompt() ：提示用户输入的对话框
confirm（）：有一个确认按钮和取消按钮的对话框
close(): 关闭浏览器窗口
open()：打开一个新的浏览器窗口
定时函数：
01.setTimeout():在指定毫秒数之后，执行某个方法！ 只执行一次
02.setInterval():每间隔指定的毫秒数，都会执行一次！ window.open("弹出的窗口url"，"窗口的名称"，"窗口的特性") -->
</head>
<body> <script type="text/javascript"> var flag= confirm("确定关闭本窗口吗？");
if(flag){
window.close(); //浏览器窗口关闭
}else{
//window.open("http://www.baidu.com","百度首页");
window.open("http://www.baidu.com","百度首页","height=400,width=400");
} </script>
</body>
</html>
window对象
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>history对象</title>
<!--
history对象常用的三个方法：
01.back（） ：后退
02.forward（）：前进
03.go() ：跳转至指定的url
-->
</head>
<body> <a href="02history对象.html">当前页面</a>
<a href="03history对象2.html">下一个页面</a>
<a href="javascript:history.forward()">history.forward()下一个页面</a>
<a href="javascript:history.go(2)">history.go(2)下一个页面</a> <script type="text/javascript"> </script> </body>
</html>
history对象
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>history对象2</title>
</head>
<body>
history对象2 第二个页面 <a href="javascript:history.back()">history.back()后退一个页面</a>
<a href="javascript:history.go(-1)">history.go(-1)后退一个页面</a> </body>
</html>
history对象2
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>location对象</title>
<!--
location对象
常用方法：
reload（）:刷新页面
replace():使用新的页面替换当前页面
常用属性：
host：主机名+端口号
hostname:主机名
href：完整的url
hash:返回#之后的所有字符串
search:返回?之后的所有字符串
--> </head>
<body> <a href="javascript:doubleC();">百度</a> <script type="text/javascript">
document.write("host值为："+location.host+"<br/>");
document.write("hostname值为："+location.hostname+"<br/>");
document.write("href值为："+location.href+"<br/>");
document.write("hash值为："+location.hash+"<br/>");
document.write("search值为："+location.search+"<br/>");
var flag= confirm("确定跳转页面吗？");
if(flag){
location.href="http://www.baidu.com";
}
//当用户点击百度 超链接时触发的事件
function doubleC(){
location.href="http://www.jd.com";
} </script> </body>
</html>
location对象
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>document对象</title>
<!--
document对象
常用的方法：
write（）:在页面中书写内容
getElementById(): 获取页面中指定id的对象！ 一个对象
getElementsByName("sex"): 获取页面中所有name属性值为sex的对象 ！ 数组
getElementsByTagName("div"): 获取页面中所有标签为div的对象 ！ 数组 常用的属性：
referrer:
当浏览器向web服务器发送请求的时候，一般会带上referrer，
告诉服务器我是从哪个页面链接过来的，服务器基此可以获得一些信息用于处理。
url： 返回当前页面的url
-->
</head>
<body> <script type="text/javascript">
document.write("document.referrer的值是："+document.referrer); </script> </body>
</html>
document对象
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>referrer属性</title>
</head>
<body>
<a href="05document对象.html">推广地址</a>
</body>
</html>
referrer属性
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{font-size:14px;
line-height:30px;
}
input{margin:1px;
width:90px;
font-size:12px;
padding:0;
}
#node{
width:100px;
font-size:24px;
font-weight:bold;
float: left;
}
</style>
<script type="text/javascript">
/*改变层内容*/
function changeLink(){
//获取页面中id属性值是node的节点
var node= document.getElementById("node");
// node.innerText="<h1 style='color:red'>haha</h1>"; innerText：会把整个内容当成文本来输出！
node.innerHTML="<h3 style='color:red'>haha</h3>";//innerHTML:会编译内容中的html标签以及样式
}
/*获取所有input标签中所有的value值*/
function all_input(){
var allInputs= document.getElementsByTagName("input"); // 是一个数组
var result="";
for(var i=0;i<allInputs.length;i++){
result+= allInputs[i].value+"<br/>";
}
//把所有的结果 给 id=s的元素
document.getElementById("s").innerHTML=result;
}
/*获取所有name属性值是season的value*/
function s_input(){
var allSeasons= document.getElementsByName("season"); // 是一个数组
var result="";
for(var i=0;i<allSeasons.length;i++){
result+= allSeasons[i].value+"<br/>";
}
//把所有的结果 给 id=s的元素
document.getElementById("s").innerHTML=result;
} </script>
</head>
<body>
<div id="node">新浪</div>
<input name="b1" type="button" value="改变层内容" onclick="changeLink();" /><br />
<br /><input name="season" type="text" value="春" />
<input name="season" type="text" value="夏" />
<input name="season" type="text" value="秋" />
<input name="season" type="text" value="冬" />
<br /><input name="b2" type="button" value="显示input内容" onclick="all_input()" />
<input name="b3" type="button" value="显示season内容" onclick="s_input()" />
<p id="s"></p>
</body>
</html>
getElement系列
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Date对象</title>
<!--
Date对象:
getDate()：获取是一个月中的哪一天？ 1-31
getDay（）：获取是一周中的哪一天？ 0-6
getHours（）：获取是一天中的小时 0-23
getMinutes（）：获取是分钟 0-59
getSeconds（）：获取是秒数 0-59
getMonth（）：获取是一年中的第几个月？ 0-11
getFullYear():获取年份
getTime():返回1970年1月1日到现在的毫秒数
-->
</head>
<body> <script type="text/javascript">
var today=new Date(); //当前的系统时间
document.write(today);
//获取年月日
var year= today.getFullYear();
var month= today.getMonth()+1;
var date= today.getDate();
var hours= today.getHours();
var min= today.getMinutes();
var s= today.getSeconds();
document.write("当前系统时间是："+year+"年:"+month+"月:"+date+"日 "+hours+":"+min+":"+s)
</script>
</body>
</html>
Date对象
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Math对象</title> <!--
Math对象:
ceil（）:向上取整
floor()：向下取整
random（）:随机数
round（）：四舍五入
-->
</head>
<body>
<script type="text/javascript"> document.write("25.5ceil===》"+Math.ceil(25.5)+"<br/>");
document.write("25.5floor===》"+Math.floor(25.5)+"<br/>");
document.write("25.5round===》"+Math.round(25.5)+"<br/>"); </script>
</body>
</html>
Math对象
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>定时函数</title>
<!--
01. setTimeout函数 在一个指定的时间点，去指定一个指定的函数
02.setInterval函数 每隔多少时间就会执行一次指定的函数
-->
</head>
<body>
<div id="nowTime"></div>
<button type="button" onclick="setOne();"> setTimeout函数</button>
<button type="button" onclick="clearOne();"> 清空setTimeout函数</button> <button type="button" onclick="setTwo();"> setInterval函数</button>
<button type="button" onclick="clearTwo();"> 清空setInterval函数</button> <script type="text/javascript">
var num=0; //成员变量
function one(){
//获取页面中空元素 并赋值
document.getElementById("nowTime").innerHTML="数字："+(++num);
} //声明 定时函数的变量
var timeout,intervar;
function setOne(){ //设置定时函数
timeout=setTimeout("one()",2000);
} function clearOne(){//清空定时函数
clearTimeout(timeout);
} function setTwo(){ //周期性的执行 one（）函数
intervar=setInterval("one()",1000);
}
function clearTwo(){ //周期性的执行 one（）函数
clearInterval(intervar);
} </script>
</body>
</html>
定时函数
js操作BOM对象的更多相关文章
- JavaScript基础16——js的BOM对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 操作BOM对象
操作BOM对象 目录 操作BOM对象 1. 浏览器介绍 2. window 3. Navigator(不建议使用) 4. screan 5. location(重要) 6. document(内容:D ...
- 第三章 JavaScript操作BOM对象
第三章 JavaScript操作BOM对象 一.window对象 浏览器对象模型(BOM)是javascript的组成之一,它提供了独立与浏览器窗口进行交换的对象,使用浏览器对象模型可以实现与HT ...
- js操作DOM对象
js操作DOM对象 (Document Object Model)文档对象模型 nodeType返回值 1:元素节点 2:属性节点 3:文本节点 8:注释节点 9: 文档节点 nodeName 节点 ...
- JS操作DOM对象——JS基础知识（四）
一.JavaScript的三个重要组成部分 (1)ECMAScript(欧洲计算机制造商协会) 制定JS的规范 (2)DOM(文档对象模型)重点学习对象 处理网页内容的方法和接口 (3)BOM(浏览器 ...
- js操作bom和dom
Bom 概念 BOM : Browser Object Model 浏览器对象模型,描述与浏览器进行交互的方法和接 口, ECMAscript是javascript的核心,但如果要在web中使用jav ...
- javascript、js操作json对象和字符串互相转换方法
相信前端的同学们对json并不陌生,接触过很多.但是很少人知道json的全称是什么,哈哈,我也是查资料知道的.(JSON JavaScript Object Notation是一种轻量级的数据交换格式 ...
- 使用jQuery快速高效制作网页交互特效--JavaScript操作BOM对象
JavaScript操作BOM 一.window对象: 二.window对象的属性和方法 1.windows对象的常用属性: 语法:window.属性名="属性值" 2.windo ...
- JS的BOM对象
BOM对象 (一)简介:BOM对象,即浏览器对象模型: 通过javascript的对象,操作和浏览器相关的操作 B: Browser,浏览器 O: Object,对象 M: Model,模型 (1) ...
随机推荐
- io模型---非阻塞模型
Linux下,可以通过设置socket使其变为non-blocking.当对一个non-blocking socket执行读操作时,流程是这个样子: 从图中可以看出,当用户进程发出read操作时,如果 ...
- Javascript 中的数据类型判断
(迁移自旧博客2017 09 25) typeof 我们常使用typeof来判断数据类型,在常规场景中足以应付数据类型判断的需要: var obj = { name: 'zhangxiang' }; ...
- [亲测有效] - Linux安装PostgreSQL
本文章来为各位介绍一篇关于postgresql 9.4 在linux环境的安装步骤详解,希望文章能够对各位新手朋友带来帮助的哦. 环境说明系统:centos 6.4 64位软件:postgresq ...
- TYVJ P1039 【忠诚2】
题目描述 老管家是一个聪明能干的人.他为财主工作了整整10年,财主为了让自已账目更加清楚.要求管家每天记k次账,由于管家聪明能干,因而管家总是让财主十分满意.但是由于一些人的挑拨,财主还是对管家产生了 ...
- 【React】学习之道
一.工欲善其事必先利其器 - 准备工作 安装vscode:https://code.visualstudio.com/ 安装node.js:https://nodejs.org/en/ 安装gitba ...
- ionic3 在windows环境下打包android 正式签名版APK
生成签名文件keytool -genkey -alias demo.keystore -keyalg RSA -validity 40000 -keystore demo.keystore demo为 ...
- LCSS最长公共子序列算法
0.论文基本介绍以及相关内容 分析移动用户位置的相似性,提取移动用户的相似路径在出行路径预测.兴趣区域发现.轨迹聚类.个性化路径推荐等领域具有广泛的应用. 重点:利用移动用户定位数据找到合适轨迹的表示 ...
- [转]pycharm 2016.2注册码
在网上找了好多都不行,最后还是这个好使.在网上搜索了半天挨个试过来最终找到了License server的方法,由此分享给大家.这个也完全没有使用时间的限制~ 直接打开pycharm,选License ...
- nginx 判断移动端或者PC端 进入不同域名
自己最近用node.js + react 做了个网站.在PC端上的访问是这样的: 手机访问居然是这样的: 这样用户体验很不好. 所以做了一个移动端的版本. 需求: 需要判断用户是否手机还是电脑 访问网 ...
- 【转】PO/POJO/BO/DTO/VO的区别
PO :persistent object持久对象 1 ．有时也被称为Data对象,对应数据库中的entity,可以简单认为一个PO对应数据库中的一条记录. 2 ．在hibernate持久化框架中 ...