window对象，BOM，window事件,延时器,DOM
01.定时器补充
function fn(){
console.log(1);
}
setInterval("fn()",100); //定时器调用匿名函数
/*
function(){} （常用）
fn(); //这个直接就运行了，会使运行结果不正确
"fn()"
*/
02.window对象
//都是window下面的方法，其中，这三个对话框都有阻塞浏览器其他功能的执行(阻止程序的运行)
alert('dfjjf'); //弹出一个对话框
confirm(); //弹出一个带有确定和取消按钮的对话框，点击确定返回true,点击取消返回false
prompt(); //输入框对话框，点击确定返回输入的内容，点击取消返回null
//设置窗口大小
open('url','(名称)','width = 400px,height:500px');
open('http://www.baidu.com','','width=300px,height;500px');
//window.resize(1000,200);在打开的百度的页面，改变窗口大小
close(); //关闭窗口
03.BOM
1.history对象
history.go()
参数： -1 后退 0 刷新 1前进
history.back(); 后退
history.forward();前进
2.location对象
location.href = 'url' 页面的跳转
location.reload(); 页面的刷新，如果参数为true，清除缓存
3.navigator对象
navigator.userAgent
pc端："Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.75 Safari/537.36"
移动端："Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1"
简单测试：
location.href='http://www.baidu.com'; //页面跳转(属性)
location.reload(); //页面刷新（方法 ）
navigator.userAgent(); //在控制台输入之后，pc端打印出"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.75 Safari/537.36"
navigator.userAgent(); //移动端结果："Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1"
04.window的事件
1.window.onload
window.onload = function(){
//等待页面加载完成之后，再执行onload里面的代码
}
2.window.onscroll(滚动条事件)
window.onscroll = function(){
//高频触发，滚动条只要滚动，就触发！！！
}
05.滚动条事件案例
吸顶效果
<style>
body{
height:4000px;
}
*{
margin:0;
padding:0;
}
header{
width:100%;
height:150px;
background:red;
}
nav{
width:100%;
height:40px;
background: blue;
}
</style>
<header></header>
<nav id="nav1"></nav>
<script>
/*
滚动条滚动，获取滚动条的高度(存在兼容性)
document.documentElement.scrollTop;
document.body.scrollTop;
*/
onscroll = function(){
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //兼容性
if(scrollTop >= 150){
nav1.style.position = 'fixed';
nav1.style.top = 0;
}else{
nav1.style.position = 'static'; //让它恢复原样
}
}
</script>
06.延时器
setTimeout(function(){
},1000)
<style>
width:100%;
height:100%;
background:blue;
</style>
<div id="box"></div>
<script>
var height = 300;
setTimeout(function(){
var timer = setInterval(function(){
//控制box的height值，实时减小box的height
height -= 10;
box.style.height = height + 'px';
//关闭定时器
if(height <= 0){
clearInterval(timer);
}
},30)
},0)
</script>
setTimeout(function(){
console.log(0);
},0); //设置为0时，立即打印
console.log(1);
//结果是1 0 由于异步加载的原因
07.回到顶部
<style>
*{
margin:0;
padding:0;
}
section{
width:400px;
height:2000px;
background:pink;
}
p{
font-size:20px;
color:black;
}
#btn{
font-size:40px;
width:50px;
height:50px;
display:block;
position:fixed;
right:0;bottom:0;
}
</style>
<section>
<p>春暖花开</p>
<p>春暖花开</p>
<p>春暖花开</p>
<p>春暖花开</p>
<p>春暖花开</p>
<p>春暖花开</p>
<p>春暖花开</p>
<p>春暖花开</p>
<p>春暖花开</p>
<p>春暖花开</p>
<p>春暖花开</p>
<p>春暖花开</p>
<p>春暖花开</p>
<p>春暖花开</p>
<p>春暖花开</p>
<p>春暖花开</p>
<p>春暖花开</p>
<p>春暖花开</p>
<p>春暖花开</p>
<p>春暖花开</p>
<p>春暖花开</p>
<p>春暖花开</p>
</section>
<button id="btn">^</button>
<script>
function goTop(){
//速度
var speed = 100;
//开启定时器
var timer = setInterval(function(){
//获取滚动条的高度
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
//设置滚动条的高度
document.documentElement.scrollTop = document.body.scrollTop = scrollTop - speed;
//加速
speed += 10;
//清除加速器
if(scrollTop <= 0){
clearInterval(timer);
}
},30)
}
btn.onclick = function(){
goTop();
}
</script>
08.进度条
<style>
*{
margin:0;
padding:0
}
#box{
width:800px;
height:50px;
background:blue;
}
#box1{
width:0;
height:50px;
background:red;
}
</style>
<div id="box">
<div id="box1"></div>
</div>
<script>
var speed = 10;
var timer = setInterval(function(){
//offsetWidth 获取元素的高度的
box1.style.width = box1.offsetWidth + speed + 'px';
//清除定时器
if(box1.offsetWidth >= 800){
clearInterval(timer);
}
},10)
</script>
09.DOM
1.dom节点的获取
document.getElementById(id); //返回对拥有指定id的第一个对象进行访问
document.getElementsByName(name); //返回带有指定名称的节点集合
document.getElementsByTagName(tagname); //返回带有指定标签名的对象集合
document.getElementsByClassName(classname); //返回带有指定class名称的对象集合（IE8以下不兼容）
2.ES5新增获取元素
document.querySelector(); (IE8以下不兼容，不包括IE8)
eg:document.querySelector('#id > .box')
document.querySelectorAll() //获取对应的全部元素，返回伪数组
parentNode 属性返回某个节点的父节点
3.节点的创建
document.createElement('div'); //元素节点
document.createTextNode('nnnn'); //文本节点
4.添加节点
父节点.appendChild(需要添加的节点)
5.节点克隆
cloneNode() 如果参数为true，克隆包括子节点
6.删除节点
父节点.removeChild(子节点)
节点.remove();
7.检测节点类型
节点一共分为3种类型：
元素节点：<span></span>
属性节点：<span id ="xxx"></span>
文本节点：djgkf
nodeType属性:检测节点的类型
元素类型 节点类型
元素element 1
属性attr 2
文本text 3
注释comments 8
文档document 9
简单测试：
<section id="box">
<div>kkkk</div>
<div>1</div>
<div>2</div>
<div>3</div>
</section>
<div id="box"></div>
<input type="text" name="userName">
<input type="text" name="userName">
<input type="text" name="userName">
<section class="wrap"></section>
<script>
var oBox = document.getElementById('box');
console.log(oBox); var dwrap = document.getElementsByTagName('section');
console.log(dwrap); var obj = document.getElementsByClassName('wrap');
console.log(obj);
var userName = document.getElementsByName('userName');
console.log(userName);
var obj = document.querySelector('input');
console.log(obj); //获取一个input
var obj = document.querySelectorAll('input');
console.log(obj); //获取所有的input
var obj = document.querySelector('#box');
console.log(obj.parentNode); //获取节点的父节点
var dwrap = document.getElementsTagName('*');
console.log(dwrap); //获取页面所有 var createDiv = document.createElement('div');
console.log('createDiv'); //创建元素节点
var createTxt = document.createTextNode('nnn');
console.log(createText); //创建文本节点
//添加节点
var oBox = document.getElementById('box'); //首先获取父节点
var createDiv = document.createElement('div'); //创建新节点
oBox.appendChild(createDiv);//将创建的新节点添加到父节点里面
//节点克隆
var oBox = document.getElementById('box');
var newBox = oBox.cloneNode(true);
document.body.appendChild(newBox);
//删除节点
var oBox = document.getElementById('box');
var aDiv = oBox.querySelectorAll('div');
console.log(aDiv); //父节点下子节点的节点集合
oBox.removeChild(aDiv[1]); //删除下标为1的节点
aDiv[0].remove(); //remove谁调用，就删谁
//节点的集合，给每个节点操作，必须遍历
for(var i = 0 ; i < aDiv.length ; i++){
console.log(aDiv[i]);
console.log(aDiv[i].nodeType); //节点的类型为1，表明是元素
}
</script>
10.childNodes
childNodes 包括元素节点也包括文本节点
children 只能获取元素节点
检测节点的类型：nodeType
节点的过滤：如果节点类型为3（文本节点），直接remove（）；
简单测试：
<section>
<div>1<div>
<div>2<div>
<div>3<div>（8个div）
</section>
var aDiv = document.getElementById('box').childNodes;//NodeList(17) [text, div, text, div, text, div, text, div, text, div, text, div, text, div, text, div, text](回车造成的text文本节点)
var adIV = document.getElementById('box').children;//HTMLCollection(8) [div, div, div, div, div, div, div, div]
for(var i = 0 ; i <aDiv.length ; i++){
if(aDiv[i].nodeType ==3){
aDiv[i].remove();
}
}
console.log(aDiv);
作业(根据用户输入的数值打印表格)
根据用户输入的数值打印表格
要求：每一行的最后有一个按钮，点击按钮之后，删除整行
单元格内输入1-100随机数，每个表格的背景颜色随机
<style>
*{
margin:0;
padding:0;
}
td{
width:50px;
height;50px;
border:1px solid red;
text-align:center;
}
tr button{
width:100px;
height:50px;
text-align:center;
font-size:16px;
font-weigth:bold;
}
</style>
<label>输入的行数</label>
<input type="text" id="txt1">
<label>输入的列数</label>
<input type="text" id="txt2">
<button>打印</button>
<script src="../myApi.js"></script>
<script>
var
oTxt1 = document.getElementById('txt1');
oTxt2 = document.getElementById('txt2');
obtn = document.querySelector('#btn');
obtn.onclick = function(){
//获取文本框的value的值
var
rows = oTxt1.value,
cols = oTxt2.value;
//创建table标签
var createTable = document.createElement('table');
//根据用户输入的行数和列数，创建tr td
//创建tr
for(var i = 0 ; i < rows ; i++){
var createTr = document.createElement('tr');
//创建td
for(var j = 0 ; j < cols ; j++){
var createTd = document.createElement('td');
//给td添加随机数
createTd.innerHTML = randomNum(1,100);
//给td添加随机背景色
createTd.style.background = randomColor();
//把td放在tr里面
createTr.appendChild(createTd);
}
//每一行创建一个按钮
var createBtn =document.createElement('button');
createBtn.innerHTML = '删除本行';
createBtn.onclick = function(){
//删除本行，this指向的是单击的按钮
this.parentNode.remove();
}
//把按钮添加到行
createTr.appendChild(createBtn);
//把tr添加到table
createTable.appendChild(createTr);
}
//把table放在body里面
document.body.appendChild(createTable);
}
</script>
window对象，BOM，window事件,延时器,DOM的更多相关文章
- window对象BOM
BOM的和新对象是window,他表示流浪器的一个实例,作为一个Global对象,有权访问parseInt()等方法 在全局作用域声明的变量,函数都有钱访问 ; function sayName () ...
- window 对象常见的事件
1.页面加载事件 方式1:window.onload = function(){ } window.addEventListener('load',function(){ }) window.onlo ...
- JavaScript---网络编程(6)-Dom和Bom模型概念讲解(节点获取,window对象)
本节讲Dom和Bom模型概念讲解(节点获取,window对象). out.js: 写了2个输出到页面的函数. function println(param){ document.write(param ...
- Javascript高级编程学习笔记（27）—— BOM（1）window对象1
ECMAScript是JS的核心 但是对于在浏览器中运行的JS,BOM显然才是真正的核心 我们知道JS是由三个部分组成的 BOM.DOM.ECMAScript 之前的文章我们主要介绍的是ECMAScr ...
- 第8章 浏览器对象模型BOM 8.1 window对象
ECMAScript是javascript的核心,但如果要在web中使用javascript,那么BOM(浏览器对象模型)则无疑是真正的核心.BOM提供了很多对象,用于访问浏览器的功能,在浏览器之间共 ...
- javascript之BOM对象（一window对象）
javascript包含三个部分,ECMAScript,BOM和DOM.ECMAScript是javascript的核心,包含javascript的基础语法.在Web中使用javascript,BOM ...
- window对象的属性及事件。
不同的运行环境有不同的“顶层对象”,而在浏览器的环境中,顶层对象就是window对象.window就是指当前的浏览器窗口. 例:var a = 1: window.a; //1 1.window对象的 ...
- 【使用 DOM】使用 Window 对象
1. 获取 Window 对象 可以用两种方式获得Window对象.正规的HTML5方式是在Document对象上使用defaultView属性.另一种是使用所有浏览器都支持的全局变量window . ...
- DOM对象和window对象
本文内容: DOM对象 Window 对象 首发日期:2018-05-11 DOM对象: DOM对象主要指代网页内的标签[包括整个网页] 比如:document代表整个 HTML 文档,用来访问页面中 ...
随机推荐
- spark shuffle的写操作之准备工作
前言 在前三篇文章中,spark 源码分析之十九 -- DAG的生成和Stage的划分 剖析了DAG的构建和Stage的划分,spark 源码分析之二十 -- Stage的提交 剖析了TaskSet任 ...
- 夯实Java基础（八）——代码块
在Java中代码块指的是使用”{}”括起来的代码称为代码块.代码块一共分为4种:局部代码块,静态代码块,同步代码块,构造代码块. 1.局部代码块 局部代码块就是定义在方法体内部的代码块. public ...
- 比特平面分层（一些基本的灰度变换函数）基本原理及Python实现
1. 基本原理 在灰度图中,像素值的范围为[0, 255],即共有256级灰度.在计算机中,我们使用8比特数来表示每一个像素值.因此可以提取出不同比特层面的灰度图.比特层面分层可用于图片压缩:只储存较 ...
- Linux常用命令之权限管理
在linux中的每一个文件或目录都包含有访问权限,这些访问权限决定了谁能访问和如何访问这些文件和目录,这也让linux更安全.下面主要讲解下常用的权限命令chgrp,chmod,chown . 1.文 ...
- bootstrape select使用小结
看看上面的效果是bootstrape使用的效果.虽然不是很好看,但是符合bootstrape的风格.来看看普通的select的样式 bootstrape下的select和普通select在bootst ...
- asp.net core 从单机到集群
asp.net core 从单机到集群 Intro 这篇文章主要以我的活动室预约的项目作为示例,看一下一个 asp.net core 应用从单机应用到分布式应用需要做什么. 示例项目 活动室预约提供了 ...
- centos7 yum搭建lnmp环境及配置wordpress超详细教程
yum安装lnmp环境是最方便,最快捷的一种方法.源码编译安装需要花费大量的人类时间,当然源码编译可以个性化配置一些其它功能.目前来说,yum安装基本满足我们搭建web服务器的需求. 本文是我根据近期 ...
- 2.php语言基础
HP简介 PHP超文本预处理器.是嵌入HTML文件中的服务器端脚本程序.换句话:PHP只能运行在服务器上. 一个HTML文件中,可以包含的代码:HTML代码.CSS代码.JS代码.PHP代码等. PH ...
- 微信小程序页面跳转url如何传对象参数
两步走 首先第一步:wx.navigateTo({ url:"XXX"+"¶ms="+ JSON.stringify(obj); }) 第二步获 ...
- 表结构查询 Sql
select row_number() over(order by a.column_id) rownumber, a.name, case ),a.),a.scale) +')' ),a.max_l ...