JavaScript主要知识点

JavaScript笔记

一、 简介

js全称为JavaScript,是一种解释性脚本语言,边解释边执行

javaScript组成:
ECMAScript语法
DOM文档对象模型(Document Object Model)
BOM浏览器对象模型(Browser Object Model)

二、 JS用法

	1.	内部js语法: 
			在head标签中写,
			在body底部写
			注:尽量让js代码写在body底部,因为代码从上往下执行,如果js代码写在head里,有可能页面还没有加载标签,js代码就已经利用了标签,这个时候会报null

	2.	引入外部js文件
			在head标签中写
			在body底部写

三、 数据类型

	1.	声明变量方式: var 变量名 = 值;   
	2.	数据类型:number	string    boolean  undefined(未定义的)    null obj

四. 内置函数

:
(1) 检测当前变量的数据类型: typeof()
(2) 解析一个字符串,并返回一个整数: parseInt();
注意:只返回第一个数字;
(3) 检测数字是否非法: isNaN();

五. 引用类型:(重点)

	(1)	数组类型: 三种声明方式:
				var a = [1,2];    					  
				var b = new Array();     
				var c = new Array(3);    
	(2)	对象类型:两种声明方式
				var user = {name:”天花板”,age:21};  
				var user = new Object(); 
	(3)	JSON类型:  键值对形式存储数据
				声明JSON对象:
				声明JSON数组对象:
				js对象转换成json格式的字符串: 
				json格式的字符串转换成json对象: 

六、 运算符:

	1.	算数运算符: + - * / %
	2.	逻辑运算符: && || !
	3.	比较运算符: >  <  >=  <=  ==  !=  
		===(不仅判断值是否相对,也要判断数据类型是否相等)
	4.	自增自减: ++   --
	5.	双目运算符: +=  -=  *=  /=  %=

七、 条件分支语句、循环语句

		if(条件表达式){}else{}
		switch(表达式){ case 值: break;}
		while(条件表达式){}
		do{}while(条件表达式)
		for(var i = 0;i<num;i++){}

八、 函数(方法)

		1.	js声明方法:
		(1)	无参无返回值方法: function 方法名(){}
		(2)	有参无返回值方法: function 方法名(参数){}
		(3)	无参有返回值方法: function 方法名(){ return 值; }
		(4)	有参有返回值方法: function 方法名(参数){ return 值; }

九、 事件

		1.	点击事件用法:
		2.  a标签的事件特殊用法:
		3.	其他事件:
			(1)	onchange:  表单内容改变事件
			(2)	onclick:  鼠标左击事件
			(3)	onmouseover: 鼠标滑过事件
			(4)	onmousemove: 鼠标滑过事件
			(5)	onmouseout: 鼠标离开事件
			(6)	onkeyup: 键盘弹起事件
			(7)	onkeydown: 键盘按下事件
			(8)	onload: 预加载事件
			onload用法: window.onload = function(){}  只要打开页面,就执行此事件

十、 js弹框:

		1.	警告弹框:  alert(“内容”);
		2.	确认弹框:  confirm(“郝老师美不美?”);  
		3.	文本弹框:  prompt(“问题”,”默认内容”);  
		点击确定返回输入内容,点击取消返回null

十一、 js操作DOM元素

		1.	js获取dom元素
			(1)	根据id获取:
					document.getElementById(“hid”);
			(2)	根据class获取:
					document.getElementsByClassName(“hclass”);  
		2.	js操作DOM的样式、内容、属性
			var doc = document.getElementById(“name”);
			(1)	js获取标签内容:  doc.innerHTML;
			(2)	js获取表单内容:  doc.value;
			(3)	js向标签内写入内容:  doc.innerHTML = “新内容”;
			(4)	js获取元素背景颜色: doc.stlye.backgroundColor;
			(5)	js添加元素样式: doc.style = “color:red;font-size:10px;”;
			(6)	js获取元素属性: doc.name;
			注: js在获取class的时候, doc.className;
			(7)	js添加元素属性: doc.src= “index.html”;
		3.	js操作节点
			<div>
			<span>我是原有标签</span>
			</div>
			获取页面标签: var div = document.getElementsByTagName(“div”)[0];
			(1)	创建元素:  var p = document.createElement(“标签名称”);
			(2)	向创建的元素中添加内容: 
			创建一段文本:  var content = document.createTextNode(“文字”);
			将文本添加到标签内:  p.appendChild(content);
			将创建的元素添加到页面中:  div.appepndChild();
			(3)	删除元素: div.removeChild(p);
			(4)	替换元素: 
			var span = doucment..getElementsByTagName(“span”)[0];//获取页面要替换的元素
			//创建一个新的元素
			var li = document.createElement(“li”);
			var liCon = document.createTextNode(“我是li标签内容”);
			li.appendChild(liCon);
			div.replaceChild(li,span);//将div中的span替换成了li
			(5)	插入元素:
			var span = doucment..getElementsByTagName(“span”)[0];//获取一个元素
			//创建一个新的元素
			var li = document.createElement(“li”);
			var liCon = document.createTextNode(“我是li标签内容”);
			li.appendChild(liCon);
			div.insertBefore(li,span); //将li标签插入到span标签前面

十二、 时间与Math对象用法

:
1. Math用法:
(1) 随机数用法: Math.random(); 产生0~1之间的随机数
(2) 向上舍入: Math.ceil(10.1); ---->11
(3) 向下舍入: Math.floor(10.1); ----->10
(4) 四舍五入: Math.round(9.5); ---->10
(5) 最大值、最小值: Math.max(4,3);–>4 Math.min(4,3);–>3
(6) 次幂: Math.pow(2,3); ---->8
2. Date用法:
(1) 获取系统时间:var date = new Date(); //创建时间对象
(2) 获取年:var year = date.getFullYear();
(3) 获取月: var month = date.getMonth()+1; 月份的取值范围是:0~11
(4) 获取日: var day = date.getDate();
(5) 获取时: var hours = date.getHours();
(6) 获取分: var minu = date.getMinutes();
(7) 获取秒: var sec = date.getSeconds();
(8) 获取星期: var week = date.getDay(); 星期的取值范围:0~6

十三、 定时器

			  function show(){
			 alert(“我是计时器和延时器要执行的方法”);
			}
			1.	计时器用法:  var inter = setInterval(“show()”,1000);//每1000毫秒调用一次show方法
			2.	停止计时器:  clearInterval(inter);//清除名为inter的计时器
			3.	延时器用法:  var timeout = setTimeout(“show()”,5000);//经过5000后再执行show方法
			4.	停止延时器:  clearTimeout(timeout);

十四、 BOM元素

			1.	window: 浏览器窗口
			(1)	获取屏幕宽高:	screen.availWidth;//宽度     screen.availHeight;//高度
			(2)	获取浏览器可用宽高:
			宽度:window.innerWidth||document.documentElement.clientWidth|| document.body.clientWidth;
			高度:window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;
			2.	history:
			(1)	让浏览器后退方法: history.back();
			(2)	让浏览器前进方法: history.forward();
			3.	location
			(1)	跳转页面: window.location.href = “新页面地址”;
			(2)	刷新页面:window.location.reload();
			(3)	获取域名:window.location.hostname;	localhost表示本机地址---->127.0.0.1
			(4)	获取端口:window.location.port;			8080、3306
			(5)	获取页面路径:window.location.pathname; 
			(6)	获取协议:window.location.protocol;		http://或https://
©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页