09-25Javascript的笔记

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 设计师:上身试试 返回首页