目录
一、JS基本语法
1.1、基础语法
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="div"></div>
</body>
</html>
<script>
alert("hello,js")//提示信息
var divEle = document.getElementById("div");
divEle.innerHTML='hello,js'
</script>
通过script来进行定义js。script标签可以放着head标记中，也可以放在body中，也可以放在最后。
1.2 js书写方式
1.2.1 行内js
<input type="button" value="点击" onclick="alert('点我干嘛??');"/>按钮借助事件【onclick】来触发js代码
1.2.2 内嵌js【页面中】
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="div"></div>
</body>
<script>
alert("hello,js")//提示信息
var divEle = document.getElementById("div");
divEle.innerHTML='hello,js'
</script>
</html>
1.2.3 外部js
创建js文件
alert("我是外部的js")html页面通过<script>标签引入外部js
<script src="js/js01.js"></script>1.3 对话框
1.3.1 警告框 alert
只能点击确定按钮
alert()
1.3.2 确认框 confirm
var b = confirm("确定删除吗?")
点击确定获取的结果是true，当我们点击取消的时候，获取的结果是false
1.3.3 输入框 prompt
var b = prompt("请输入您要计算的表达式","eg:3+5")//确定，获取的输入的值，如果点击取消获取的是null
在文本框中输入信息，然后点击确定，，我们可以获取到输入的信息。如果点击取消获取的null
他们都是属于window对象的事件.
练习：
询问用户是否要输入表达式？如果点击是，弹出对话框，用户输入表达式，点击确定，将结果输出到页面。如果点击取消，页面输出”您取消了计算“
var tf = confirm('你要进行表达式的计算吗？')
if(tf){
var b = prompt('请输入您想计算的表达式：')
var c = eval(b)
document.write(b+"=" c)
}else{
document.write('你已取消计算！')
}1.4 基本语法
1.4.1 关键字
| break | else | new | var | case |
|---|---|---|---|---|
| finally | return | void | catch | for |
| switch | while | continue | function | this |
| with | default | if | throw | delete |
| in | try | do | instanceof | typeof |
| abstract | enum | int | short | boolean |
| export | interface | static | byte | extends |
| long | super | char | final | native |
| synchronized | class | float | package | throws |
| const | goto | private | transient | debugger |
| implements | protected | volatile | double | import |
| public | async | await | yield | let |
1.4.2 注释
//单行注释 /* 多行注释 */ /*！ 文档注释 */
1.4.3 变量
语法：
var 变量名 = 值;
变量的使用
var age=12 ;// 用var声明变量age，并赋值为12
var gender;//声明变量
gender="男";//给变量gender赋值为男
age=12.5;
age="年龄";//js是弱语法语言，类型是根据赋值来决定
//还可以通过let来定义变量，const来定义常量
let name="tony";
const VERSION=1.0;//常量，赋值后不能重新赋值注意变量规则：同java.可以包含数字，字母，_以及$符号，但是开头不能是数字，不能是java中的关键字。见名知意。一般采用驼峰命名规则 myName 。
1.4.4 数据类型
1>基本数据类型
数值类型(Number) int【整数】 float【小数】
布尔类型(Boolean)
字符串(string)
空(null)
未定义(undefine)
非数字(NaN)
2>引用数据类型
数组
Object
typeof //判定变量是属于哪种数据类型
<script>
var age = 10
//判断一个值是否是非数字，如果是非数字返回true,如果是数字，返回false
console.log(isNaN(age))
console.log(age+","+typeof(age))
age = 3.5
console.log(age+","+typeof(age))
age="年龄"
console.log(isNaN(age))
console.log(age+","+typeof(age))
name="zhangsan"
console.log(name)
let sex ="男"
console.log(sex)
sex="女"
console.log(sex)
const V = 1.0
console.log(V)
var b = true
console.log(b+","+typeof(b))
b = false
console.log(b+","+typeof(b))
var divEle = document.getElementById("div")
console.log(divEle+","+typeof(divEle))
/* const定义的是常量，常量不能重复的赋值
* V = 1.5
console.log(V)*/
</script>1.4.5 运算符
1.4.5.1 算术运算符
算术运输符指的就是变量之间进行数值之间的各种加减乘除（+、-、*、/）运算。
ar num1 = 50;
var num2 = 5;
// 加法运算 + 在js表示加法运算
// 注意：如果有字符串参与，加号就会拼接字符串
console.log(num1 + num2);
// 减法运算
console.log(num1 - num2);
// 乘法运算使用*
console.log(num1 * num2);
// 乘法运算
console.log(num1 / num2);
// 求余数（求模）
console.log(num1 % num2);
// 幂次方
console.log(num1 ** num2)1.4.5.2 比较运算符
比较运输符，有被称为关系运输符，主要就是用来比较两个数之间的关系。我们知道数之间的关系有：大于（>）、小于（<）、大于等于（>=）、小于等于（<=）、等于（==）、不等于（!=）这样几种。
var age1 = window.prompt("请输入您的年龄", "20");
var age2 = 20;
/**
* 注意：在JavaScript中，== 比较的是值
* = 单等于符号表示赋值，将等号右侧的值赋给左侧
*/
if (age1 == age2) {
alert("年龄相等")
}
if (age1 > age2) {
alert("大于20岁了")
}
if (age1 < age2) {
alert("小于20岁")
}1.4.5.3 逻辑运算符
与或非【&& || ！】
短路&
&& 与 & 的区别
请输入语文的成绩和数学的成绩。如果数学成绩等于100并且语文成绩大于95分，或者 语文和数学都大于98分，可以获得奖励一场电影，否则惩罚做五套试卷
1.4.5.4 类型转换
var age="12"
console.log(typeof(age))
console.log(age+2)//拼接
console.log(parseInt(age)+2)
var price="12.5"
console.log(parseFloat(price)*2)1.5 选择结构
if
switch
1.6 循环结构
for
while
do-while
break continue
增强循环
var arr = [15,25,3,69,6]
for(var i in arr){
console.log(arr[i])//i代表的是下标
}
var person = new Object()
person.name="tony"
person.sex="男"
person.age=12
for(var v in person){
console.log(v+","+person[v])//v代表的的属性 person[v]取出具体的属性的值
}
for(var i of arr){//i代表的是数组中的具体的元素
console.log(i)
}二、函数
2.1 函数的基本概念
函数就是一个功能、就是一个行为、就是一个动作。有点像java中的方法。函数必须得经过调用才可以执行。函数可以调用多次。
语法
function 函数名([参数列表]){
//函数体
[ return 结果;]
}
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--通过点击事件调用-->
<input type="button" value="点击" onclick="info()" />
</body>
<script>
//定义了一个函数
function info(){
alert("提示信息")
}
info();//
</script>
</html>函数定义好后，不会自动执行。必须调用才能执行。
//定义带有参数是函数
function say(name){
document.write("hello,"+name)
}
//调用带有参数的函数
say("jerry")
<input type="button" value="点击" onclick="say(prompt('请输入用户名','jerry'))" />
<!--调用say函数-->写一个函数，函数接收两个数，返回两个说的和
调用以上函数，实现，【用户输入两个数，调用以上函数，将结果在控制台进行输出】
2.2 函数调用
说明：调用函数的代码在前，定义函数的代码在后面。此时代码也是可以正常执行的。此种现象称为函数提升。因为代码从上往下执行，当执行到getSum函数的时候，浏览器就会去找到函数，并运行。
2.3 函数中变量的定义
在函数中定义的变量如果使用var或let定义，该变量就是局部变量。如果未通过var或let定义变量，该变量就是全局变量。
2.4 值传递和引用传递
举例：值传递
function changeVal(n1,n2){
n1=100;
n2=200;
}
function test(){
var n1=1;
var n2=2;
changeVal(n1,n2)
console.log(n1+"---"+n2)
}
test()引用传递：传递的是地址
2.5 函数做为参数传递
弱数据类型语言中，函数也是对象。对象就可以当作函数的参数。所以，函数是可以当作参数进行传递
function test(fn){//test函数的参数是一个函数的类型
fn();//执行传递的函数
console.log("test函数执行了")
}
function fun01(){
console.log("fun01函数执行了")
}
test(fun01)//将定义的fun01函数传递给test
//注意区分
test(fun01())//调用fun01函数。将fun01结果传递给test函数2.6 默认值函数
没使用默认值函数
使用默认值函数
function getAir(r,PI=3.14){
return PI*r*r
}
var air = getAir(2,3.14159)
console.log(air)
//或
var air = getAir(2)
console.log(air)注意：默认值参数的位置必须在最后
2.7 匿名函数
匿名函数：定义函数的时候，没有起名字。一般这种函数就是充当参数，只是使用一次，那就没有必要取名了，或者定义的时候，赋给其他变量（当然这种情况下，本质还是有名字的）
<script>
//没法执行的
function (){
console.log("hello");
}
//将匿名函数赋值给一个变量fu。可以通过fu来调用该函数。
var fu = function (){
console.log("hello");
}
fu();//通过变量名()来调用函数
function test(fn){
fn();//执行传递的函数
console.log("test函数执行了")
}
//匿名函数,只执行一次。当成参数进行传递
test(function(){
console.log("只是执行一次")
})
fu();
</script>2.8 lambda表达式
<script>
//无参无返回值
var fun=()=>alert("hello");
fun();
//带参带返回值的函数
var fun2=(n1,n2)=>{
var r = n1+n2;
return r;
}
var res = fun2(2,3)
console.log(res)
</script>语法
var 函数名=(参数列表)=>{
方法体
}
2.9 递归
递归就是函数自己调用自己。在使用递归的时候，一定要找到程序的出口。
//求和
function getSum(n){
if(n<=1){
return 1;
} else{
return n+getSum(n-1)
}
}
var s = getSum(100);
console.log(s)
//斐波那契数列
function fun1(n){
if(n==1||n==2){
return 1;
}else{
return fun1(n-1)+fun1(n-2);
}
}
//1 1 2 3 5 8 13 21
var r = fun1(9)
console.log(r)2.10 函数属性
函数也是对象，所以也有自己的属性和方法
1>length属性：函数参数的个数
2>property属性
对于 prototype 属性，它是保存实例方法的所在，也就是原型。会用到apply和call。区别在于apply是传递参数的时候，参数列表是数组，call就直接传递参数即可。
<script>
function getSum(n1,n2,n3){
return n1+n2+n3;
}
console.log(getSum.length)
function box1(num1,num2){
console.log(num1+num2);
console.log("box1函数执行了");
}
function box2(num1,num2){
box1.apply(this,[num1,num2])//调用box1 this代表当前的window对象。apply要是第二个参数是数组，将传递给box1的函数参数列表封装到数组中
console.log("box2函数也执行了")
}
box2(10,20)
function box3(num1,num2){
box1.apply(this,arguments)//同上一个案例，但是不同的地方在于，用arguments代表了参数是将box3的参数传递给box1
console.log("box3函数也执行了")
}
box3(1,2)
function box4(num1,num2){
console.log("box4采用call方式调用")
box1.call(this,num1,num2)
}
box4(100,200)
</script>如果box2以及box3的参数列表的数量多余box1的时候，使用第一种方式可以指定传递哪些值给box.第二种方式默认就会传递参数1和参数2
apply方法只有两个参数，一个是this当前window对象，一个是参数
call,参数不定的。第一个是this,除去第一个后，其他是调用函数的参数(数量保持一致)
可以看出，call需要一个一个将参数传递，而apply使用数组，一次传递，这个就是两者的区别，其他都一样的。这些方法都可以修改this指针的作用域。
/**
* 当需要创建一个类的时候，设置类的属性和方法需要通过this关键字来引用
* 但是特别注意:this关键字在调用时会根据不同的调用对象变得不同
*/
var color="red";
function showColor(){
alert(this.color);
}
/**
* 创建了一个类，有一个color的属性
*/
function Circle(color){
this.color=color;
}
showColor.call(this);//使用上下文来调用showColor,结果是red
var c = new Circle('yellow');
showColor.call(c);//上下文对象是c,结果就是yellow
/**
* 通过以上发现，使用call和apply之后，对象中可以不需要定义方法了
* 这就是call和apply的一种运用
*/
console.log(c.color)//yellow
console.log(this.color)// red
console.log(color)//red2.11 闭包
闭包：就是一个函数。这个函数能够访问其他函数作用域中的变量
嵌套（内部）函数对其容器（外部）函数是私有的。它自身也形成了一个闭包。一个闭包是一个可以自己拥有独立的环境与变量的的表达式（通常是函数，因为ES6有了块级作用域的概念）。
变量保存在内存中。不会随着函数的运行结束而销毁
<body>
<ul>
<li>第一个li</li>
<li>第二个li</li>
<li>第三个li</li>
<li>第四个li</li>
<li>第五个li</li>
</ul>
</body>
<script>
//变量i再内存中保存着没有随着函数的结束而销毁。
var liColl = document.getElementsByTagName("li")
for(var i=0;i<liColl.length;i++ ){
var liEle = liColl[i];//每一个li
liEle.onclick=function(){
alert(i)
}
}
</script>点击li会提示五个5。本身li绑定的函数中不存在变量i到复函中中取找。找到后i的值是5.
闭包，只能包含函数汇总任何变量的最后一个值。
两个函数形参的闭包只是一个一般的形式
var i=10;
(function test(){
alert(i)
})();
<body>
<input type="button" value="点击" name="btn"/>
</body>
<script>
var i=1;
(
function fun01(){
var num = 3
var btnEle = document.getElementsByName("btn")[0]
btnEle.onclick = function(){
alert("ok~~~"+i++)
}
})()
console.log(i)
</script>如果将var 变成 let,会提示0 1 2 ...
<script>
//变量i再内存中保存着没有随着函数的结束而销毁。
var liColl = document.getElementsByTagName("li")
for(let i=0;i<liColl.length;i++ ){
var liEle = liColl[i];//每一个li
liEle.onclick=function(){
alert(i)
}
}
</script>var 与let声明变量的区别
var是函数作用域，而let是块作用域。在函数内声明了var，整个函数内都是有效的，在for循环内定义了一个var变量，实际上其在for循环以外也是可以访问的，而let由于是块作用域，所以如果在块作用域内（for循环内）定义的变量，在其外面是不可被访问的。
var和let区别
var和let声明变量时的一些区别
1、如果在全局作用域中用var声明变量，此变量会默认成为window的一个属性，let声明的变量则不会添加到window对象中。
2、在es6之前，是没有块级作用域，所谓块级作用域，就是用{}包含的区域，我们常用的有for，while，if等。但是在块级作用域中用let声明变量，那么此变量就有了块级作用域，就必须只有在此块级作用域才能访问此变量。
3、var声明的变量有变量提升特性，let声明则没有这个特性。变量提升
4、var可以允许重复声明相同的变量，后者会覆盖前者，let则不能重复声明相同的变量。
三、数组
3.1 数组的声明
var arr1 = ["北京","上海","深圳","成都"]
console.log(arr1.length)
console.log(arr1[2])
arr1[4]="西安" //不会报错，会将改元素添加到数组中
console.log(arr1[4])
console.log(arr1.length)
var arr1 = new Array()
console.log(arr1.length)
var arr2 = new Array(3)
console.log(arr2.length)
var arr3 = Array()
console.log(arr3.length)
var arr4 = new Array(1,2,3,"aa")
console.log(arr4.length)
var arr=[1,2,3]
console.log(arr.length)3.2 数组遍历
普通for循环 for in for of
3.3 数组中的常用方法
| 方法 | 描述 |
|---|---|
| concat() | 连接两个或更多的数组，并返回结果。 |
| join() | 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。 |
| pop() | 删除并返回数组的最后一个元素 |
| push() | 向数组的末尾添加一个或更多元素，并返回新的长度。 |
| reverse() | 颠倒数组中元素的顺序。 |
| shift() | 删除并返回数组的第一个元素 |
| slice() | 从某个已有的数组返回选定的元素，原数组的内容不变 |
| sort() | 对数组的元素进行排序，该方法会改变原来的数组，而不会创建新的数组 |
| splice() | 删除元素，并向数组添加新元素，数组的值会发生变化，两个参数时表示删除，三个参数时，第二个参数为0，表示添加元素到对应的位置 |
| unshift() | 向数组的开头添加一个或更多元素，并返回新的长度。 |
| toSource() | 返回该对象的源代码。 |
| toString() | 把数组转换为字符串，并返回结果。 |
| toLocaleString() | 把数组转换为本地数组，并返回结果。 |
| valueOf() | 返回数组对象的原始值 |
<script>
var arr1 = [1,2,3]
var arr2 = [10,20,30]
var newarr = arr1.concat(arr2)//数组的拼接
console.log(newarr)
var s = newarr.join("-")//将数组中的元素进行拼接成一个字符串
console.log(s)
var ele = arr2.pop()//删除最后一个元素，并返回
console.log(ele)
console.log(arr2)
arr2.push(300);
var newlength = arr2.push(600);
console.log(newlength)
console.log(arr2)
arr2.reverse();//直接翻转数组中的元素
console.log(arr2)
var v = arr2.shift()//删除第一个元素并返回
console.log(v)
console.log(arr2)
//1, 2, 3, 10, 20, 30
console.log(newarr)
/* var v1 = newarr.slice(0,3)//从数组的begin索引开始，到end索引结束，返回新的数组，包含开始索引不包含结束索引
console.log(v1)
console.log(newarr)
var v2 = newarr.splice(2,2)//从begin索引开始删除length个元素 第一个代表的beigin索引为止，第二个代表的几个元素
console.log(v2)
console.log(newarr)*/
v2 = newarr.splice(3,0,'apple') //三个参数的时候，第二个参数设置为0 代表的含义就是做添加。将apple的值添加到索引为3的位置上
console.log(v2)
console.log(newarr)//1, 2, 3, "apple", 10, 20, 30
v2 = newarr.unshift("begin") //向数组的开头添加元素
console.log(v2)
console.log(newarr)//1, 2, 3, "apple", 10, 20, 30
</script>数组的排序方法：
<script>
var arr = [25,36,74,86,10,2,37,42,1]
console.log(arr)
arr.sort()//当成字符串排序
console.log(arr)
arr.sort(comp)//按照自己定义的规则排序
console.log(arr)
function comp(a1,a2){//java中的比较器
if(a1>a2){
return -1
}else if(a1<a2){
return 1
}else{
return 0
}
}
</script>3.4 二维数组
多个一维数组组成二维数组
var arr2 = [[2,3,6],[14,25,36],[36,1,2,36,97,45]]//多个一维数组组成一个二维数组
var arr4 = new Array(new Array("a","b"),new Array("hello","js","jQuery"))
var arr2 = new Array(8).fill(new Array(6)) //八个一维，每个一维是6个元素四、常见内置对象
4.1 Math
math里面的方法都是静态的方法，之间可以通过Math. 来进行调用方法
console.log(Math.E)
console.log(Math.PI)
console.log(Math.abs(-5))//求绝对值
console.log(Math.ceil(9.6))//取到比该数大1的整数
console.log(Math.floor(-9.5))//取到比该数小1的整数
console.log(Math.max(25,10))//获取较大的数
console.log(Math.min(12,36))//获取较小的数
console.log(Math.random())//0-1之间的float类型的小数 生成1-25之间的整数
var r= parseInt(Math.random()*10)//1-9之间的一个整数
console.log(Math.round(12.5))4.2 Date
var date = new Date();//获取系统当前的时间
var year = date.getFullYear() //年
var month = date.getMonth()+1 //从0开始
var d = date.getDate()
var hours = date.getHours()
var min = date.getMinutes()
var sec = date.getSeconds()
var w = date.getDay()//星期几? 星期日是0 星期一是1 ...
var d = new Date("2023-01-01 0:0:0").getTime() //给定时间，并获取时间的long型的表示4.3 字符串
1>创建字符串的几种方式 [三种方式]
var s1 = "hello,js"
console.log(typeof(s1))
var s2 = new String("hello,javascript")
console.log(typeof(s2)+"---"+s2.length)
var s3 = String("hello,jQuery")
console.log(typeof(s3))2>常用的方法
charAt() 返回在指定位置的字符。 charCodeAt() 返回在指定的位置的字符的 Unicode 编码。 concat() 连接两个或更多字符串，并返回新的字符串。 endsWith() 判断当前字符串是否是以指定的子字符串结尾的（区分大小写）。 fromCharCode() 将 Unicode 编码转为字符。 indexOf() 返回某个指定的字符串值在字符串中首次出现的位置。 includes() 查找字符串中是否包含指定的子字符串。 lastIndexOf() 从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置。 match() 查找找到一个或多个正则表达式的匹配。 repeat() 复制字符串指定次数，并将它们连接在一起返回。 replace() 在字符串中查找匹配的子串，并替换与正则表达式匹配的子串。 replaceAll() 在字符串中查找匹配的子串，并替换与正则表达式匹配的所有子串。 search() 查找与正则表达式相匹配的值。 slice() 提取字符串的片断，并在新的字符串中返回被提取的部分。 split() 把字符串分割为字符串数组。 startsWith() 查看字符串是否以指定的子字符串开头。 substr() 从起始索引号提取字符串中指定数目的字符。 substring() 提取字符串中两个指定的索引号之间的字符。 toLowerCase() 把字符串转换为小写。 toUpperCase() 把字符串转换为大写。 trim() 去除字符串两边的空白。 toLocaleLowerCase() 根据本地主机的语言环境把字符串转换为小写。 toLocaleUpperCase() 根据本地主机的语言环境把字符串转换为大写。 valueOf() 返回某个字符串对象的原始值。 toString() 返回一个字符串。
var s2 = "hello,javascript 2023!hello,java 2023"
console.log(typeof(s2)+"---"+s2.length)
console.log(s2.indexOf("java"))
console.log(s2.lastIndexOf("java"))
console.log(s2.replace(/\d+/g,"****"))//替换 \d代表数组，+ 至少一次
console.log(s2.slice(6,10))//包含begin的索引并不包含end的索引
var str="2020,Hox, 2030, 2040!"
console.log(str.search(/\h+/g))//只找h
console.log(str.search(/\h+/i))// /i 忽略大小写找h
var str2 = "a,b,c,d"
var arr = str2.split(",");
console.log(arr.length)
var s = arr.join("--")
console.log(s)4.4 Number
| 属性 | 描述 |
|---|---|
| constructor | 返回对创建此对象的 Number 函数的引用。 |
| MAX_VALUE | 可表示的最大的数。 |
| MIN_VALUE | 可表示的最小的数。 |
| NaN | 非数字值。 |
| [NEGATIVE_INFINITY | 负无穷大，溢出时返回该值。 |
| POSITIVE_INFINITY | 正无穷大，溢出时返回该值。 |
| prototype | 使您有能力向对象添加属性和方法。 |
| toString | 把数字转换为字符串，使用指定的基数。 |
| toLocaleString | 把数字转换为字符串，使用本地数字格式顺序 |
| toFixed | 把数字转换为字符串，结果的小数点后有指定位数的数字。 |
| toExponential | 把对象的值转换为科学计数法。 |
| toPrecision | 把数字格式化为指定的长度。 |
五、Bom编程
js编程分层DOM编程，dom比较重要，知识点也比较多，属于一类的。
history，location属于BOM编程
5.1 window的属性以及方法
| 属性 | 描述 |
|---|---|
| document | 对 Document 对象的只读引用，就是子对象文档对象 |
| history | 对 History 对象的只读引用，就是子对象历史对象 |
| location | 用于窗口或框架的 Location 对象，就是子对象路径对象 |
| Navigator | 对 Navigator 对象的只读引用，就是子对象导航者对象 |
| Screen | 对 Screen 对象的只读引用，就是子对象屏幕对象 |
| length | 设置或返回窗口中的框架数量。 |
| name | 设置或返回窗口的名称。 |
| opener | 返回对创建此窗口的窗口的引用。 |
| defaultStatus | 设置或返回窗口状态栏中的默认文本。 |
| closed | 返回窗口是否已被关闭 |
| innerwidth | 返回窗口的文档显示区的宽度。 |
| innerheight | 返回窗口的文档显示区的高度。 |
| outerheight | 返回窗口的外部高度。 |
| outerwidth | 返回窗口的外部宽度。 |
| pageXOffset | 设置或返回当前页面相对于窗口显示区左上角的 X 位置。 |
| pageYOffset | 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。 |
| parent | 返回父窗口。 |
| self | 返回对当前窗口的引用。等价于 Window 属性。 |
| status | 设置窗口状态栏的文本。 |
| top | 返回最顶层的先辈窗口。 |
| window | window 属性等价于 self 属性，它包含了对窗口自身的引用。 |
| screenLeft screenTop screenX screenY | 只读整数。声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。IE、Safari 和 Opera 支持 screenLeft 和 screenTop，而 Firefox 和 Safari 支持 screenX 和 screenY。 |
| 方法 | 描述 |
|---|---|
| alert() | 显示带有一段消息和一个确认按钮的警告框。 |
| blur() | 把键盘焦点从顶层窗口移开。 |
| clearInterval() | 取消由 setInterval() 设置的 timeout。 |
| clearTimeout() | 取消由 setTimeout() 方法设置的 timeout。 |
| close() | 关闭浏览器窗口。 |
| confirm() | 显示带有一段消息以及确认按钮和取消按钮的对话框。 |
| createPopup() | 创建一个 pop-up 窗口。 |
| focus() | 把键盘焦点给予一个窗口。 |
| moveBy() | 可相对窗口的当前坐标把它移动指定的像素。 |
| moveTo() | 把窗口的左上角移动到一个指定的坐标。 |
| open() | 打开一个新的浏览器窗口或查找一个已命名的窗口。 |
| print() | 打印当前窗口的内容。 |
| prompt() | 显示可提示用户输入的对话框。 |
| resizeBy() | 按照指定的像素调整窗口的大小。 |
| resizeTo() | 把窗口的大小调整到指定的宽度和高度。 |
| scrollBy() | 按照指定的像素值来滚动内容。 |
| scrollTo() | 把内容滚动到指定的坐标。 |
| setInterval() | 按照指定的周期（以毫秒计）来调用函数或计算表达式。 |
| setTimeout() | 属性名称 在指定的毫秒数后调用函数或计算表达式。 |
var btnEle1 = document.getElementsByName("btn")[1]
btnEle1.onclick = function(){
//打开窗口 window.open("new.html","","height=400,width=400,toolbar=no,location=no,menubar=no,resizable=no")
}
//关闭窗口
function closeWin(){
var b = window.confirm("是否关闭窗口")
if(b){
window.close()
}
}window.open(url,name,属性设置)
属性设置见下表
| 属性名称 | 说 明 |
|---|---|
| height、width | 窗口文档显示区的高度、宽度。以像素计。 |
| left、top | 窗口的x坐标、y坐标。以像素计 |
| toolbar=yes | no |1 | 0 | 是否显示浏览器的工具栏。黙认是yes。 |
| scrollbars=yes | no |1 | 0 | 是否显示滚动条。黙认是yes。 |
| location=yes | no |1 | 0 | 是否显示地址地段。黙认是yes。 |
| status=yes | no |1 | 0 | 是否添加状态栏。黙认是yes。 |
| menubar=yes | no |1 | 0 | 是否显示菜单栏。黙认是yes。 |
| resizable=yes | no |1 | 0 | 窗口是否可调节尺寸。黙认是yes。 【ie支持，其他不支持】 |
| titlebar=yes | no |1 | 0 | 是否显示标题栏。黙认是yes。 |
| fullscreen=yes| no |1 | 0 | 是否使用全屏模式显示浏览器。黙认是no。处于全屏模式的窗口必须同时处于剧院模式。 |
5.2 history对象
了解窗口的前进，后退。
function go_back(){
// window.history.back()//后退一步 等價go(-1)
window.history.go(-1)
}
function go_to(){
window.history.go(1)
}
//-1 代表后退一级 -2 代表后退两级 1前进一级
//window.history.back() ==> window.history.go(-1) 后退一级
1675
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
