JavaScript基础入门学习整理

于 2020-07-11 11:14:40 发布
阅读量219 收藏
点赞数
文章标签： js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ymj960722/article/details/107279604
版权

JavaScript定义

JavaScript的简称是JS，是一种动态脚本语言
动态页面——人机交互
静态页面——没有人机交互

JavaScript的标识符

变量、函数、属性的名字、函数参数都属于标识符
命名规则：

  • 由字母、数字、下划线(_)美元($)组成
  • 不能由数字开头
    例如：4num…
  • 不能使用关键字作为标识符
    例如：break for return…
  • 不能使用保留字作为标识符
    例如：do in let var typeof…

JavaScript变量

变量是用于存储信息的“容器”
变量名称对大小写敏感（例如：X和x是不同的变量）

var x;
x = 123;//数字类型
alert(x+1);//弹出124

var x;
x = "123";//字符串类型
alert(x+1);//1231

JavaScript自定义函数

概念：是完成某一个功能模块的代码段，可以重复执行，方便管理和维护
创建方法分为两种：

  1. 函数声明，可以先使用后定义
function fun1(){
  //代码段;
  return;
}
  1. 函数表达式，必须先定义后使用
var fun1 = function(x){
 	return x+1;
}

先定义后使用的情况

var num1=function(n1,n2){
var n3 = n1+n2;
	return n3;
}
var n = num1(13,14);
alert(n);//弹出27

如果先使用后定义的话，会报错

alert(num2(3,6));
var num2 = function(n1,n2){
	var n3 = n1+n2;
	return n3;
}
var num1;
alert(num1);//弹出undefined

JavaScript数据类型

简单数据类型：

  • undefined
    未定义，一般指的是已经声明，但是没有赋值的变量，派生自null值，undefined==null -->返回的是true
  • null
    空对象类型 var a = null; 和var a =""有区别
  • Boolean
    布尔类型，只有true和false两种值
  • Number
    数字类型，整数型，浮点型都包括
  • String
    字符串类型，必须放在单引号或者双引号中

特殊数据类型：

  • Objecct
    对象类型，在js中常见的window document Array等
  • NaN
    是Number的一种特殊类型，任何涉及NaN的操作（例如：NaN/10）都会返回NaN，NaN和任何值都不相等，包括NaN本身
  • isNaN()
    如果是数字 返回的是false 如果是非数字 返回的是true
var id="16";
console.log(isNaN(id));//false   转换之后是数字

var id="lisi";
console.log(isNaN(id));//true   转换之后不是数字

typeof

功能：检测变量类型
语法：typeof 变量 或者 typeof(变量)
返回值：string number boolean object undefined function

var name = "lisi";
console.log(typeof name);//string

var num = 123;
console.log(typeof(num));//number

var str = "123";
alert(typeof str);//string

类型转换

  • parseInt( ) 转换成整型
  • parseFloat( ) 转换成浮点类型，带小数点
  • Number( )包括整数和小数
  • Bolean( ) 转换成逻辑类型
  • 强制类型转换
  • 隐式类型转换
var str = "123";
console.log(parseInt(str));//123
console.log(parseFloat(str));//123
console.log(Number(str));//123
console.log(Boolean(str));//true

var str = "abc";
console.log(parseInt(str));//NaN
console.log(parseFloat(str));//NaN
console.log(Number(str));//NaN

var str = "123a";
console.log(parseInt(str));//123
console.log(parseFloat(str));//123
console.log(Number(str));//NaN

var str = "a123";
console.log(parseInt(str));//NaN
console.log(parseFloat(str));//NaN
console.log(Number(str));//NaN

var str = "1a23";
console.log(parseInt(str));//1
console.log(parseFloat(str));//1
console.log(Number(str));//NaN

var str = "0123";
console.log(parseInt(str));//123
console.log(parseFloat(str));//123
console.log(Number(str));//123

var str = "0123.654";
console.log(parseInt(str));//123 取整 不满足四舍五入
console.log(parseFloat(str));//123.654
console.log(Number(str));//123.654

var str = "null";
console.log(parseInt(str));//NaN
console.log(parseFloat(str));//NaN
console.log(Number(str));//0
console.log(Boolean(str));//false

var str = "";
console.log(parseInt(str));//NaN
console.log(parseFloat(str));//NaN
console.log(Number(str));//0
console.log(Boolean(str));//false

var str = false;
console.log(Boolean(str));//false 定义了false就是false

var str = 0;
console.log(Boolean(str));//false

var str = NaN;
console.log(Boolean(str));//false

var str = undefined;
console.log(Boolean(str));//false

类型转换总结：

  • 除0之外的所有数字，转换成布尔类型都是true
  • 除""之外的所有字符串，转换成布尔类型都是true
  • null和undefined转换成布尔类型是false
  • NaN转换成布尔类型是false

变量作用域

  • 局部变量：在函数内部创建的变量，称为局部变量，其他函数不能使用。
  • 全局变量：在函数外部创建的变量，称为全局变量，在函数之间可以共享使用。
var n = 9;//全局变量
		function fun1(){
			var n1 = 5;//局部
			n = 12;//全局 没有加var 不管是在内部还是在外部 都是全局变量
		}
		function fun2(){
			n = n-1;//全局
		}
		function fun3(){
			console.log(n);//11
			console.log(n1);//报错
		}
		fun1();
		fun2();
		fun3();

var n = 9;//全局变量
		function fun1(){
			var n1 = 5;//局部
			n = 12;//全局 没有加var 不管是在内部还是在外部 都是全局变量
			console.log(n1);//5
		}
		function fun2(){
			n = n-1;//全局
		}
		function fun3(){
			console.log(n);//11
			console.log(n1);//报错
		}
		fun1();
		fun2();
		fun3();

var n = 9;//全局变量
		function fun1(){
			var n1 = 5;//局部
			var n = 12;//局部
			console.log(n1);//5
		}
		function fun2(){
			n = n-1;//全局
		}
		function fun3(){
			console.log(n);//8
			console.log(n1);//报错
		}
		fun1();
		fun2();
		fun3();

function fun1(){
			var n1 = 5;//局部
			var n = 12;//局部
		}
		function fun2(){
			n = n-1;//全局
		}
		function fun3(){
			console.log(n);
			console.log(n1);
		}
		fun1();
		fun2();
		fun3();
//直接报错

比较运算符

用于比较两个值，结果true或者false
运算符范围：> 、>= 、!= 、< 、<=

var x = 2;
var flag = x<10;
console.log(flag);//true

逻辑运算符

逻辑与：&& and
逻辑或： || or
逻辑非： ! 非

  1. 对于&& 两个都是true结果是true，如果有一个false结果是false
  2. 对|| ，其中一个是true结果就是true，两个都是false结果才为false
var x = 2;
var y = 3;
var flag = x<10 && y<5;
console.log(flag);//true

var x = 2;
var y = 3;
var z = 1;
var flag = x>10||(y>5 && z>10);
console.log(flag);//false

var flag = true;
var flag1 = !flag;
console.log(flag1);//false

var x = 2;
var y = 3;
var z = 1;
var flag = x<10 && !(y>5 && z>10);
console.log(flag);//true

三目运算符（三元运算符）

根据不同的条件，执行不同的操作/返回不同的值

var x = 21;
var y =3;
var z = 1;
var str = x>10?"dayu":"xiaoyu";
console.log(str);//dayu

var x = 2;
var y = 3;
var z = 1;
var str = x>10?"dayu":"xiaoyu";
console.log(str);;//xiaoyu

算数操作符

  • + 加
var num = 2+2;
console.log(num);//4
  • - 减
var num = 2-2;
console.log(num);//0
  • * 乘
var num = 2*2;
console.log(num);//4
  • / 除
var num = 2/2;
console.log(num);//1
  • % 取余
var num = 2%2;
console.log(num);//0

赋值运算符

  • 复合赋值+=
var a = 10;
var b = 20;
var str = "hello";
a+=5;
str+="world";
console.log(a);//15
console.log(str);//hello world
  • 复合赋值-=
var a = 10;
var b = 20;
a-=5;
console.log(a);//10-5=5
  • 复合赋值*=
var a = 10;
var b = 20;
a*=5;
console.log(a);//10*5=50
  • 复合赋值/=
var a = 10;
var b = 20;
a/=5;
console.log(a);//10/5=2
  • 复合赋值%=
var a = 10;
var b = 20;
a%=5;
console.log(a);//10%5=0

比较运算符

  • ==： 相等，只比较值是否相等。
  • ===：全等，比较值的同时比较数据类型是否相等。
  • !=：不相等，比较值是否不相等。
  • !==：不全等，比较值的同时比较数据类型是否不相等。

返回都是boolean类型

有单独的几个类型

console.log(null==undefined);//true undefined派生null
console.log(null===undefined);//false
console.log(NaN==NaN);//false NaN和谁都不匹配 包括自身
console.log(NaN===NaN);//fasle

递增和递减

概念：递增 ++a 与 a++ 都是对a进行递增的操作
区别：

  • ++a先返回递增之后的a的值 – 先运算再赋值
  • a++ 先返回a的原来的值，再返回递增之后的值 – 先赋值在运算
    递减同理

程序控制语句

条件判断控制语句

var n = 10;
var str;
if(n>10){
	str="n>10";
} else {
	str ="n<=10";
}
console.log(str);//n<=10

多重if嵌套控制语句

var n = 10;
var str;
if(n>10){
	str = "n>10";
} else if (n<10){
	str = "n<10";
} else {
	str = "n=10";
}
console.log(str);//n=10

多条件分支控制语句

var myscore = 70;
var str;
var n = parseInt(myscore/10);
switch(n){
	case 10:
		str = "满分";
		break;
	case 9:
		str = "优秀";
		break;
	case 8:
	case 7:
		str = "良好";
		break;
	case 6:
		str = "及格";
		break;
	default:
		str = "不及格";
		break;
}
console.log(str);//良好

循环类控制语句
for循环

//1+2+3+4+5+。。。。+100=5050
var i;
var sum=0;
for(i=0;i<=100;i++){
    sum+=i;
}
 console.log(sum);

while循环
概念：while循环是先判断条件，条件满足了再继续执行

//1+2+3+4+5+。。。。+100=5050
var i=0;
var sum=0;
while(i<=100){
    sum=sum+i;
    i++;
}
console.log(sum);

do-while循环
概念：do-while: 先执行一次，执行完之后再进行判断

//1+2+3+4+5+。。。。+100=5050
var i=0;
var sum=0;
do{
    sum=sum+i;
    i++;
}while(i<=100);
console.log(sum);

while和do-while区别

var i =101;
var sum = 0;
while(i<=100){
sum+=i;
i++;
}
console.log(sum);//0

var i = 101;
var sum = 0;
do{
sum+=i;
i++;
} while(i<=100);
console.log(sum);//101
console.log(i);//102

内置函数

字符函数
substring
索引位置 从0开始 第一个参数表示从哪儿开始 第二个参数表示截取的长度

var str = "520134199906061234";
    // 索引位置 从0开始
    console.log(str.substr(0,3));//520
    console.log(str.substr(6,4));//1999

substr
substr 索引位置 从0开始 第一个参数表示从哪儿开始 第二个参数表示结束的位置 算前不算后

var str = "520134199906061234";
    // 索引位置 从0开始
    console.log(str.substring(0,3));//520
    console.log(str.substring(6,10));//1999

charAt
charAt 表示根据位置获取字符串 用于找具体哪个字符串的

var str = "520134199906061234";
    console.log(str.charAt(16));//3  第16位是3字符串  

//判断奇偶数
    var str = "520134199906061234";
    var n = parseInt(str.charAt(10));
    if (n%2==0) {
      console.log("nv");
    } else {
      console.log("nan");
    }

split
split 将字符串有规律的转换成数组

//split 分割 将字符串有规律的转换成数组
    var str2 = "aa,ttt,121,gg,ak,aa,bb";
    // 数组array 一般用arr定义
    var arr = str2.split(",");
    console.log(arr);

    var str2 = "aa/ttt/121/gg/ak/aa/bb";
    var arr = str2.split("/");
    console.log(arr);

    var str2 = "aa,ttt,121,gg,ak,aa,bb";
    var arr = str2.split(",");
    console.log(arr[0]);//aa
    console.log(arr[2]);//121

    var str3 = "How are you";
    console.log(str3.split(" "));//"How","are","you"
    console.log(str3.split(""));//"H","o","w"," ","a","r","e"," ","y","o","u"
    console.log(str3.split(" ",2));//"How","are"  截取数组里几个
    console.log(str3.split(" ",4));//"How","are","you" 大于整个数组值 则输入整体

length
length表示长度 从1开始正常数数

 var str = "520134199906061234";
 console.log(str.length);//18 从1开始正常数数

indexOf

  • indexOf 查找具体的值在字符串中第一次出现的位置 空格也要算进去
  • 如果字符串找不到 则返回-1 必须要全部匹配
//indexOf 查找具体的值在字符串中第一次出现的位置
	var str = "520134199906061234";
    console.log(str.indexOf(1));//3 第一个1在字符串中第三个位置
    console.log(str.indexOf(1,4));//6  从索引4开始查找1的位置
    console.log(str.indexOf("1",4));//自动类型转换 可以查出 还是6
    // 之后项目会用的很多 查找没有的字符串会返回-1
    console.log(str.indexOf(7));//-1  

    var str1 = "Hello world";
    // 返回某个指定的字符串的值，在字符串中首次出现的位置
    //并且以第一个字符串为定位而不是最后一个字符串定位
    document.write(str1.indexOf("Hello")+"<hr/>");//0
    document.write(str1.indexOf("world")+"<hr/>");//6 空格也要算进去


    // 如果字符串找不到 则返回-1 必须要全部匹配
    document.write(str1.indexOf("Helll")+"<hr/>");//-1

concat

	var str2 = "aa,ttt,121,gg,ak,aa,bb";
    var arr = str2.split(",");
    //aa,ttt,121,gg,ak,aa,bb,55,88,99
    console.log(str2.concat(",55",",88",",99"));

    //"aa", "ttt", "121", "gg", "ak", "aa", "bb", "55", "88", "99"
    console.log(arr.concat("55","88","99"))//不用再加逗号

replace

  • replace返回的是全新的字符串或数组
  • 不管是concat还是replace都是在字符串之后进行改变的,都不会改变字符串本身的值
var str2 = "aa,ttt,121,gg,ak,aa,bb";
    var arr = str2.split(",");
    // 第一个参数表示你要替换的 第二个参数表示要替换成什么
    console.log(str2.replace("aa","dodoke"));//dodoke,ttt,121,gg,ak,aa,bb

    // g表示全局 global 可以替换所有
    console.log(str2.replace(/aa/g,"dodoke"));//dodoke,ttt,121,gg,ak,dodoke,bb

    console.log(str2);//aa,ttt,121,gg,ak,aa,bb
    // 不管是concat还是replace都是在字符串之后进行改变的,都不会改变字符串本身的值

日期函数
包含：Date、getDate、getDay、getMonth、getFullYear （getYear）、getHours、getMinutes、getSeconds

var d1 = new Date();
console.log(d1);//当前系统时间

var d2 = new Date("2021-1-1 10:58:58");
console.log(d2.getDate());//1 几号
console.log(d2.getDay());//5 星期几
console.log(d2.getMonth()+1);//1 几月 要+1 因为月份从0开始索引
console.log(d2.getFullYear());//2021 哪年
console.log(d2.getHours());//10 小时
console.log(d2.getMinutes());//58 分钟
console.log(d2.getSeconds());//58 秒

计算距离2021年元旦还有多少时间

var d1 = new Date();
var d2 = new Date("2021-1=1");
var n = d2.getTime()-d1.getTime();
console.log(n);
console.log(n/(24*3600*1000));//获取的是天数

日期格式化

function fun_fmtDate (){
	var d1 = new Date();
	var yyyy,mm,dd,hh,mi,ss;
	var time;
	yyyy=d1.getFullYear();
	mm = d1.getMonth+1();
	dd = d1.getDate();
	hh = d1.getHours();
	mi = d1.getMinutes();
	ss = d1.getSeconds();
	time = yyyy+"-"+mm+"-"+dd+"-"+hh+":"+ss;
	return time;
}
console.log(fun_fmtDate ());

数学函数
包含：Math.round max min abs

var num = 16.654789;
console.log(parseInt(num));//16
console.log(Math.round(num));//17 满足四舍五入 取整
console.log(num.toFixed(2));//16.65 满足四舍五入 保留n个小数
console.log(Math.min(2,6,81,1));//1 最小数
console.log(Math.max(2,6,81,1));//81 最大数
console.log(Math.abs(3));//3 取绝对值
console.log(Math.abs(-3));//3 取绝对值

数组

创建数组：

  • 声明或创建不指定长度的数组（实例化创建）
var arrayobj = new Array();
    console.log(arrayobj);//Array(0)
  • 声明或创建一个数组并指定长度
var arrayobj = new Array(5);
    console.log(arrayobj);//Array(5)
  • 声明或者创建一个带有默认值的数组
 var arrayobj = new Array(2,4,"a","b",8);
    console.log(arrayobj);//2,4,"a","b",8
  • 创建一个数组并赋值的简写，又可以称为隐式创建数组
 var arrayobj = [2,4,"a","b",8];
    console.log(arrayobj);//2,4,"a","b",8
  • 数组赋值字符下标，数组遍历
var arrayobj = [2,4,"a","b",8];
    console.log(arrayobj[0]);//2
    console.log(arrayobj[5]);//undefined

数组的栈方法

分为：push() 、unshift() 、pop() 、shift()

push()
概念：把它的参数顺序添加到数组的尾部
语法：arr.push(arr1,arr2…)
返回值：把指定的值添加到数组后的新长度。 返回的是number

unshift()
概念：把它的参数顺序添加到数组的头部
语法：arr.unshift(arr1,arr2…)
返回值：把指定的值添加到数组后的新长度。 返回的是number

pop()
概念：删除arrayObj的最后一个元素
语法：arr.pop()
返回值：被删除的那个元素

shift()
概念：删除arrayObj的第一个元素
语法：arr.shift()
返回值：被删除的那个元素

数组的方法

包含：join() 、 reverse() 、 sort()

join()
概念：用于把数组中的所有元素放入一个字符串
语法：arr.join()
返回值：字符串

reverse()
概念：用于颠倒数组中的元素的顺序
语法：arr.reverse()
返回值：数组

sort()
概念：用于对数组的元素进行排序
语法：arr.sort()
返回值：数组
说明：

  1. 即使数组中每一项都是数值，sort()方法比较的也是字符串
  2. sort()方法可以接收一个比较函数作为参数

数组操作方法

包括：concat()、 slice()

concat()
概念：用于连接两个或多个数组
语法：arr.concat(arr1,arr2…)
返回值：数组

slice()
概念：从已有的数组中返回选定的元素
语法：arr.slice(start,end) – 截取
参数：
• start – 必须 规定从何处开始选取，如果是负数，从数组的尾部开始算起
• end – 可选 规定从何处结束选取，是数组片段结束处的数组下标
• start和end指的是数组中的索引值
• 截取从start到end（不包含的元素），正确的是从start到end-1的元素 ——算前不算后
返回值：数组

DOM基础

JavaScript由ECMAScript+DOM+BOM组成的。
DOM: DOCUMENT OBJECT MODEL(文档对象模型)的缩写
DOM查找方法
document.getElementById()
根据id获取唯一的一个元素

document.getElementsByTagName()
返回所有的tag标签引用的集合 – 返回的是数组

DOM事件

概念：就是文档或者浏览器窗口中发生的一些特定的交互瞬间。
分为两种：

  1. HTML事件
  2. DOM0级事件

HTML事件
概念：直接在HTML元素标签内添加的事件，执行脚本。
语法：<tag 事件=“执行脚本”>
功能：在html元素上绑定事件
说明：执行脚本可以是一个函数的调用

鼠标事件
onload
概念：页面加载时触发

onclick
概念：鼠标点击时触发

onmouseover
概念：鼠标滑过时触发

onmouseout
概念：鼠标离开时触发

onfoucs
概念：获得焦点时触发
input标签type为text password / textarea标签

onblur
概念：失去焦点时触发

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>onfoucs和onblur</title>
	<style type="text/css">
		.box{
			padding:50px;
		}

		.left,.tip{
			float:left;
		}

		.left{
			margin-right: 10px;
		}

		.tip{
			display:none;
			font-size:14px;
		}
	</style>
	<script type="text/javascript">
		window.οnlοad=function(){
			//获取文本框和提示框
			var phone = document.getElementById("phone"),
				tip = document.getElementById("tip");
			//给文本框添加激活事件
			phone.οnfοcus=function(){
			//显示tip内容
			tip.style.display="block";
			}
			//获取值
			phone.οnblur=function(){
				//获取文本框的值，value用于获取表单数据的值
				var phoneValue = this.value;
				//判断手机号码是否是11位的数字
				//逻辑与 两者都要满足 isNaN判断是否是数字
				if(phoneValue.length==11 && isNaN(phoneValue)==false){
					tip.innerHTML = "<img src='img/right.png'/>";
				} else {
					tip.innerHTML = "<img src='img/error.png'/>";
				}
			}
		}
	</script>
</head>
<body>
	<div class="box">
		<div class="left">
			<input type="text" id="phone" placeholder="请输入手机号码">
		</div>
		<div class="tip" id="tip">
			请输入有效的手机号码
		</div>
	</div>
</body>
</html>

onchange
概念：域的内容发生改变时触发 一般作用在select、chaecbox、radio

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>onchange</title>
	<script type="text/javascript">
		//页面初始化
		window.onload = init;//调用函数
		//具体的初始化函数
		function init(){
			//获取下拉菜单
			var menu = document.getElementById("menu");
			//给菜单绑定change事件
			menu.οnchange=function(){
				var bgcolor = this.value;
				if (bgcolor=="") {
					document.body.style.background="#fff";
				} else {
					document.body.style.background=bgcolor;
				}
			}
		}


		//方法二
		// function init(){
		// 	//获取下拉菜单
		// 	var menu = document.getElementById("menu");
		// 	//给菜单绑定change事件
		// 	menu.οnchange=function(){
		// 		var bgcolor = menu.options[menu.selectedIndex].value;
		// 		if (bgcolor=="") {
		// 			document.body.style.background="#fff";
		// 		} else {
		// 			document.body.style.background=bgcolor;
		// 		}
		// 	}
		// }
	</script>
</head>
<body>
	<div class="box">
		请选择您喜欢的颜色
		<select id="menu">
			<option value="">请选择</option>
			<option value="#f00">红色</option>
			<option value="#0f0">绿色</option>
			<option value="#00f">蓝色</option>
			<option value="#ff0">黄色</option>
			<option value="#ccc">灰色</option>
		</select>
	</div>
</body>
</html>

onsubmit
表单中的确认按钮被点击时发生 – 不是加在按钮上而是表单上

onmousedown
鼠标按钮在元素上按下时触发

onmouseup
在元素上松开鼠标按钮时触发 – 2和3成就了onclick事件

onmousemove
在鼠标指针移动时触发

onresize
当调整浏览器窗口大小时触发

onscroll
拖动滚动条滚动时触发

DOM0级事件
概念：通过DOM获取HTML元素
语法：（获取HTML元素）.事件 = 执行脚本 ele.事件 = 脚本
功能：在DOM对象上绑定事件
说明：执行脚本可以是一个匿名函数，也可以是一个函数的调用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>DOM0级事件</title>
	<style type="text/css">
		.lock{
			width:140px;
			height:30px;
			line-height:30px;
			background:#00f;
			color:#fff;
			font-size:14px;
			text-align:center;
			border-radius:5px;
			cursor:pointer;
			margin-top:30px;
		}

		.unlock{
			width:140px;
			height:30px;
			line-height:30px;
			background:#666;
			color:#ccc;
			font-size:14px;
			text-align:center;
			border-radius:5px;
			cursor:pointer;
			margin-top:30px;
		}
	</style>
</head>
<body>
	<div class="lock" id="btn">锁定</div>
</body>
<script type="text/javascript">
	//获取按钮
	var btn = document.getElementById("btn");
	//给按钮绑定事件
	//function()匿名函数
	btn.onclick=function(){
		// console.log(this);//整个div 表示调用该函数的当前对象的应用
		//想应用unlock里的属性设置 this.className="unlock";
		if(this.className=="lock"){
			this.className="unlock";
			this.innerHTML="解锁";
		} else {
			this.className="lock";
			this.innerHTML="锁定";
		}
	}

	//方法二
	// btn.οnclick=function(){
	// 	if(this.innerHTML=="锁定"){
	// 		this.className="unlock";
	// 		this.innerHTML="解锁";
	// 	} else {
	// 		this.className="lock";
	// 		this.innerHTML="锁定";
	// 	}
	// }
	

	//不建议推荐使用HTML事件的原因
	//1.多个元素绑定多个事件或者多元素绑定相同事件，效率较低;
	//2.不是特别建议在HTML中写javaScript代码,结构层(HTML),行为层(javaScript),表示层(css)不建议把行为层和表示层写在一起


	//有名字的函数调用
	//获取按钮
	var btn = document.getElementById("btn");
	//函数声明可以先使用后定义,函数表达式不可以
	function clickBtn(){
		alert("我是按钮");
	}
	//点击按钮调用clickBtn这个函数
	btn.onclick=clickBtn;//事件调用不要加()不然会自动调用
</script>
</html>

DOM总结
概念：将文档表现为结构化的表示方法，使得每一个页面元素都是可操控的。
DOM将网页和脚本以及其他编程语言联系起来。

常见的DOM操作：

  1. getElementById 返回带有指定的ID元素
  2. getElementsByTagName 返回的是包含带有指定标签名的所有元素的节点列表
  3. getElementsByClassName 返回的是包含带有指定类名的所有元素的节点列表
  4. getElementsByName 获取相同名称（name）的元素的所有节点列表

BOM基础

BOM概念
bom:(browser object model) – 浏览器对象模型

window

  1. 是通过JavaScript访问浏览器窗口的一个接口
  2. 又是ecmascript规定的global对象 global（全局对象）

window对象的方法

  1. window.alert();
  2. window.confirm(“message”);
    点击确定，返回true 点击取消，返回false
  3. window.prompt()
    prompt可以加两个参数，第一个参数是要在对话框内显示的纯文本，第二个参数是默认的输入文本。
    返回值:点击认，返回是true，点击取消返回是false
  4. window.open()
  5. window.close()
  6. location对象 – window对象的属性，也是document对象的属性
  7. history.back() – history.go(-1) – 回退
  8. history.forwar() – history.go(1) – 前进
ymj960722
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值