JavaScript -小记

Posted 2020-08-20

JS引入方式：
 1、内嵌方式
 2、外链方式 
 
js实现幻灯片（图片播放）

常见变量命名：
1、驼峰式
2、帕斯卡：每个单词的首字母大写
3、匈牙利：属性+类型+对象描述   ,G_Str_w3c 

window中常用的提示框：
	1. alert  
	2. confirm
	3. prompt

数据类型：
	1. 原始数据类型
		存放在栈中，变量与其值存放在一处
		
		undefined、null、number、string、boolean
	
	2. 引用数据类型-复合数据类型
	
typeof -- 查看数据类型

条件控制：
	if、switch（支持字符串的）、三元运算、

循环控制：
	while
	do...while
	for
	for...in  一般在数组或对象中使用  ，直接遍历结果为数组的索引或者对象中的属性名
	break
	continue

类与对象：

	javascript类本身也是一种对象。
	
	自定义对象：
		var obj = {
			name:‘tom‘,
			age:2
		} ;
		或者
		var obj = new Object();
		obj.name = ‘tom‘;
		
		if(obj.name){.....}
		或者
		if("name" in obj){.....}
		
		属性获取：
		1、使用点操作符  obj.name
		2、使用中括号[]   obj["name"]    --- 可以针对复杂的键问题
		
		
		静态类：
		
		//此种形式叫对象直接量
		var Person = {
		  name:‘jerry‘,
		  age:2
		} ;
		
		非静态类：
		var Car = function(name,color){
			
			this.name = name ;
			this.color = color ;
			this.say = function(){
				alert(this.name);
				// 此处的this指向的是当前的对象function（函数也是对象），即指向say ，
				// 但是发现say中没有name这个属性，所以就到其父亲那里寻找name,如果找到则使用（this就代表有该属性的对象），否则继续向上一层父亲查找，知道最顶层，如果没有则undefined
			};
		}
		
		//注意对于非静态类需要先实例化（采用new操作符）才可以访问其内部属性
		var car = new Car(‘bmw‘,‘red‘);
		
		
		
	with关键字：   --- 尽量少用，容易浪费系统资源
		with(obj){
			alert(name);
		}
	
	this：代表当前对象，对于比较复杂的对象或者调用，如何区分this到底代表谁 ——  谁调用（该方法）则this表示的就是谁。
	
	prototype:
	
	var Car = function(){};
	// 通过prototype放入公开属性
	Car.prototype.name = ‘bmw‘;
	Car.prototype.color = ‘red‘;
	Car.prototype.say = function(){};
	
	类属性：
	Car.run = function(){};
	类方法：
	
	对象属性：
	对象方法：
	

	JavaScript中常用内置对象：
		1、String
			var str = new String(‘hello world‘); // new 方式
			var  str = "hello world" ;  // 对象直接量方式
			常用属性与方法：
			Global的方法： parseInt parseFloat 
			str.length
			str.charAt(1); //返回指定索引出字符
			str.charCodeAt(2);//返回指定索引处的字符的ASCII编码
			str.concat(‘hello‘,‘wor‘,‘world‘) ; // 链接字符串
			str.indexOf(‘world‘); // 返回首次出现的world的位置
			str.lastIndexOf(‘hello‘);
			str.replace(‘world‘,‘heiheiru‘);//经常配合正则使用 : str.replace(/o/g,‘p‘); 全局替换所有o
			str.slice(2,6);
			str.split(‘#‘);
			str.substr(2,5)
			str.substring();
			"HELLO".toLowerCase();
			str.toUpperCase()
			str.toString();
			str.match(regex) ; // 返回正则匹配的所有结果构成的数组
			可以利用prototype给String追加其他的方法。
			
			
		2、Date
			
			var date = new Date() ;  // 返回当前日期时间
			
			方法：
				getDate() ; // 返回 0-31 
				getDay() ; // 返回一周中的某一天 0 -6 
				getMonth(); // 0-11 
				getFullYear() ;// 返回四位年份  ， getYear() 被废弃
				getHours() ; // 0-23 
				getMinutes();
				getSeconds(); // 
				getMilliseconds() ;//
				getTime(); //返回从1970年到现在所经过毫秒
				
				Date.parse(dateVal) ; // 返回1970到指定时间的毫秒数
				toTimeString() ; // 将Date对象的时间部分转化为字符串
				toDateString() ; // 将Date对象日期部分转换为字符串
				
				setDate() ;// 设置日期中月份的某一天（1-31）
				setMonth() ;// 0-11
				setFullYear() ;// 四位数
				setHours() ; // 0-23
				setMinutes() ;// 0-59 
				setTime();// 利用毫秒数设置时间
				
			
		3、Number
			属性:
				MAX_VALUE 、MIN_VALUE、NaN 、NEGATIVE_INFINITY 负无穷、POSITIVE_INFINITY正无穷
			方法：
				toString() ;
				toFixed(0-20) :  参数指定数字保留多少位小数
				
			
		4、Array
			属性： length 、prototype
			
			var arr = new Array(1,2,3,4,"a","hello",{x:1,y:3}); // 里面可以放复杂类型的数据，类型不必一致
			var arr = [1,2,3,4,"a","hello",{x:1,y:3}] ; // 对象直接量定义方式
			
			concat() ; // 连接不同数组,将多个数组内容放置到一个数组中
			var arr1 = [1, 2, 3, 4];
			var arr2 = [‘a‘, ‘b‘, ‘c‘] ;
			arr1.concat(arr2);  // 
		
		    join() ; //将数组中的元素通过指定的参数连接起来，返回该字符串。
			arr1.toString() // toString默认利用逗号将数组元素连接起来并返回
			pop() ; // 返回并删除数组中最后一个元素
			push(); //向数组末尾添加一个或多个元素，并返回新的数组长度。
			
			//清空数组
			arr = [] ;
			或者  arr.push();
			
			unshift() ; //向数组头部添加一个或多个元素
			reverse() ; // 颠倒数组元素
			shift() ; // 删除数组第一个元素
			slice();
			splice(index,howMany[,elem]); // 从index开始删除howMany个元素,并添加元素到删除的元素处
			sort() // 排序 ，有很多排序算法
			sort(); // 无参数时，对数组排序先排序第一位，。。。
			sort(function(a,c){if(a > b){return 1}else{return  -1}) ; // 自定义排序算法
			sort(function(){renturn a-b}) // 从小到大排序
			sort(function(){renturn b-a}) // 从大到小排序
			自定义算法可以利用数轴来表示：  -num ———————————————0————————————————————— +num
			返回负数时，就调换俩个元素的位置，返回正数则不调换，如果是零也不调换
			
			
		5、Math
			属性：
			     E、LN2、LN10、PI、SQRT2 等
			方法：
				 abs(x) ; // 绝对值
				 ceil(x) ; // 向上舍入  1.1 -》 2  ， 1.000 -》 2
				 floor(x) ; // 向下舍入
				 round(x) ; // 四舍五入
				 exp(x); // e的指数
				 max(x,y,z,....);//返回x y ,z ...中最大的值
				 min(x,y,z,...)
				 pow(x,y); // x的y次幂
				 random() ;// 随机数在0 - 1 之间
				 
		6、Function
			属性：
				arguments   、arguments.length（利用参数个数模拟其他语言的方法重载）
				(
					function(i){
						alert(i);
						arguments.callee(++i);
					}
				)(0);
			方法：
				arguments.callee()
			
			使用Function对象定义函数 ,最后一个参数作为函数体
			var abc = new Function(‘a‘,‘c‘,‘c‘,"alert(a+b+c);");
			abc();
		7、Global
		8、Window
		
		
	DOM  - 文档对象模型
	
	每当浏览器打开一个窗口，就自动构建一个window对象。
							DOM
							 |
						  window
						     |
	|---------------------------------------------------------|
	|            |            |              |
Navigator       Screen       History        Location        Document

	window的方法：
		
		 setTimeout();
		 clearTimeout();
		 setInterval();
		 clearInterval();
		 
    Navigator : 主要包含客户端浏览器的信息
		判断浏览器类型及版本信息
		cookieEnabled --- 判断cookie是否启用
		userAgent --  浏览器信息，一般利用string的match方法筛选所需要的属性信息
		
	Screen ：包含了客户端屏幕信息
		height、width、avaiHeight、avaiWidth
		
    History: 浏览器当前window的历史记录
		length  -- 历史记录长度
		back();
		forward();
		go(-/+num)；
	Location: 包含了当前URL的信息
		hash // 设置或返回url锚点（如 ： #course2）
		href // 设置或返回url
		hostname // 设置或者返回当前主机名
		pathname // 设置或者返回当前url的路径部分
		protocol // 设置或者返回协议
		search // 设置或返回查询字符串(包含问号) （不包含锚点部分）
		assign() // 加载新的文档
		reload() // 重新加载
		replace() //新文档替换当前文档
		
DOM节点操作： 通过document对象操作html文档
	
	访问节点:
	getElementById();
	getElementsByName(); // 返回数组形式
	getElementsByTagName(); // 返回数组
	
	创建节点:
	createElement();
	creatTextNode();
	
	添加节点：
	appendChild(node) ;
	insertBefore(newNode,oldNode);
	
	删除节点：
	removeChild(node);
	获取父节点:
	parentNode ;
	
	替换节点：
	replaceNode(newNode,oldNode);
	
	使用文档碎片提高js执行效率 ：  写js时尽量减少操作DOM，可以一次操作完成就不要多次操作，减少DOM元素的查找。
	createDocumentFragment()
	
	表格操作：
	caption ：
		createCaption();
		deleteCaption();
	thead:
		createTHead();
		deleteTHead();
	tfoot:
		createTFoot();
		deleteTFoot();
	tbody:
		rows 
		insertRow();
		deleteRow();
	cell:
		insertCell();
		deleteCell();
		
	DOM元素的属性：
		setAttribute(name,value);
	    getAttribute(name);
		removeAttribute(name);
		常见如style ,style.cssText
	    innerText ;
		innerHtml ;
		outerText;
		outerHtml ;
		
事件 ：
	HTML事件
		onload();
		onresize();
		onscroll();
	键盘鼠标事件
		onclick();
		ondbclick();
		onmousedown();
		onmouseover();
		onkeypress();
		onkeydown();
		onkeyup();
		
	表单事件
		onfocus();
		onblur();
		onchange();
		onreset();
		onsubmit();
		
	Event对象的属性或方法
		button -  标识鼠标的左中右三个键
		ctrlkey 
		altkey
		shiftkey
		type
		target 
		srcElement
		screenX/screenY
		
		preventDefault()
		stopPropagation() ; // 阻止事件冒泡  不同浏览器有区别
		
		
	事件流
		捕获型事件（由外而内的查找过程）
		冒泡型事件（由内而外）
			如常用赋值形式的事件 ： document.getElementById(‘btnSubmit‘).onclick = function(){} ;
		
		事件的绑定是可以覆盖的（同一个事件的先后绑定顺序）
		不是所有的事件都能冒泡。以下事件不冒泡：blur、focus、load、unload
		
		//阻止事件冒泡函数
		function stopBubble(e)
		{
			if (e && e.stopPropagation)
				e.stopPropagation()
			else
				window.event.cancelBubble=true
		}
		
	事件处理和监听函数
		addEventListener(eventName,callback,isbublePop); // 第三个参数指定是冒泡式还是捕获式事件
		removeEventListener();
		attachEvent();
		detachEvent();
		
	Cookie :
		cookie的容量不超过4K 
		添加：
			document.cookie = "值" ; 多个cookie值之间使用分号空格分隔