JavaScript主要知识点

最新推荐文章于 2023-10-24 22:05:07 发布

Wulixi1002

最新推荐文章于 2023-10-24 22:05:07 发布

阅读量190

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/wulixi1002/article/details/108803141

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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://