前端 js的学习

js的学习

	* js与html结合方式
		* 内部js：
				* 定义<script>标签，标签体书写js代码
					* 注意：<script>标签定义的位置，会影响执行顺序
		* 外部js:
			* 定义<script>标签,通过src属性导入外部js文件
	* ECMAScript规范	
		* 语法：
		
			常量：
				* 基本数据类型：
					Java中：
						整型：byte short int long
						浮点型：float double
						布尔型：boolean
						字符型：char
					js原始数据类型:
						number：数字类型，包含整数和小数和 NaN(not a number)
						string: 字符串和字符类型	""  ''
						boolean: true 和 false
						null： 空类型。对象的占位符
						undefined：未定义,如果一个变量没有初始化值，默认为undefined
					
			变量：
				* 语法：
					* 使用 var定义变量  var i = "abc";
					* js是一门弱类型语言：定义变量时，不需要规定其数据类型。
					* typeof运算符：获取变量的数据类型
					* var关键字如果不书写，该变量则为全局变量
			
			语句：
				if
				switch
				while
				do...while
				for
				
			运算符:自动类型转换
				* 一元运算符
					++ --  +(正) -(负)
					* 注意：在js中，如果传递给运算符的值，和 运算符想要接受的 值 的类型不匹配，则会自动类型转换
			
					* 其他类型转为number
						string：将字符串的字面值，转为number，如果字面值不是数字，则 转为NaN
						boolean： true为1 false 为0
						
				* 比较运算符
					* > < >= <=: 
					* NaN参与的运算，结果都为fasle，除了(!=)
					* 字符串比较小大：如果长度一致按照字典顺序比较  长度不一致 那谁的长度长那就谁大
					* !=:
					* == ===(全等于):
						* 全等于比较时，先比较类型，如果类型不一致，直接返回false
				
				* 逻辑运算符
					&& || !
						* 其他类型转boolean
							* number：非0为true，0和NaN为false，
							* string: 除了空字符串("")，其他都是true
							* null 和 undefined:转为false
							* 对象:所有对象都为true
				
				* 算术运算符：
					+ - * / %
					注意:NaN 参与数学运算 结果都为NaN

				* 赋值运算符
					= += ....
				
				* 三元运算符
					表达式 ? 值1 : 值2; 
		
		* 对象：
			* js是一门基于对象的语言
				* 基于对象：不能由原生的对象派生出新的对象。换句话说，不存在继承关系
		
		
		
			* Function(*****): 代表函数
					* 创建方式：
						* var fun = new Function("参数列表","方法体");
						* function 方法名称(形参列表){
								方法体
						  }
						* var fun = function(){
						
						  }
					
					* 属性：
						length：形参的个数
					
					* 使用：
						* 函数名称(实参列表);	
						* 特点：
							1.函数的调用，只与函数名称有关，与实参列表无关
							2.函数内部有内置对象 arguments 封装实参数组
					
					* void运算符：拦截返回值，一般结合a标签一起使用
						* 注销a标签跳转功能，保留可被点击的功能
							<a href="javascript:void(0);" onclick="exit();">退出</a>
	JS中的内置对象	
	
	 一：String 对象
	   	1.      定义方式1： String  str=new String("abckdddd");
	         	定义方式2：var  str="我爱你爱你";
	
	    	2. 属性：length: 字符串的长度

	
		3 方法：
			charAt() 返回在指定位置的字符。 
				例子：var v="abcd";
				          var a=v.charAt(2);   
 
			concat() 连接字符串。 
				例子：var v="ab";  var a="cd";
					var z=v.concat(a);
				
			indexOf() 根据字符检索此符在字符串中的索引。 
				例子：var v="abcde";
					var z=v.indexOf("c");			

			lastIndexOf() 从后向前搜索字符串。 
			substring() 提取字符串中两个指定的索引号之间的字符。 
				var v="abcde";
				var z=v.substring(0,3); 含头不含尾

			toLowerCase() 把字符串转换为小写。
 				例子：
			 var str = "Hello World!";
			 document.write(str.toLocaleLowerCase());


			  toUpperCase() 把字符串转换为大写。 

			replace() 替换字符串。
				例子： 
				var v="abceaaaa";
				var z=v.replace("a","h");  参1：被替换的字符/或字符串   参数2：替换成哪个字符/或字符串

			split() 把字符串分割为字符串数组。
 				例子： 
				var v="a#b#c#d";
				var z=v.split("#");

			* trim():去除字符串两端的空格
				例子： 
                                                             var v="  abcd     ";
				var z=v.trim();


三：Number对象
		定义方式：var num=new Number(555.6666);
			var num1=Number(5694);
		
		方法：
			
			toString()  把数字类型转成字符串类型
			例子：
			var v=Number(695444);
			var z=v.toString();

			toPrecision()  把数字格式化为指定的长度。也就是小数后面保留几位
			例子：
			var v=Number(3.5999999999999);
	；		var z=v.toPrecision(4);
		
四：Date 对象
		定义方式： var  myDate=new Date();
		
	                 方法：
			getTime()   获取从1970-01-01 00:00：00   到当前的毫秒值
			
			toLocaleString()  将时间转化成本地格式 利于阅读

			例子

			var myDate=new Data();
			var time=myDate.getTime();
			var localTime=time.toLocaleString();

五：Math 对象   特点： 该对象不需要创建  直接对象名点上方法
	
 Math.random()；随机产生0----1 之间的随机数      var  num=Math.random()*100;
      Math.round(2.36); 对小数进行四舍五入  得到一个整数    var n=Math.round(Math.random()*100);
       Math.min(15,25); 取最小值
      Math.max(15,25);取最大值
      Math. abs(-2) 返回数的绝对值。 
      Math.floor(2.6);向下取整
      Math.ceil(3.82);向下取整

六：数组对象：
	定义方式：  var arr=new Array(2,6,8);
		   var  arr1=[6,"a",6];
	属性：  length  数组的长度

	* 特点：
			* 在js中数组可以存储任意类型元素
			* 在js中数组的长度可变
		* 方法：
			concat() 连接两个或更多的数组，并返回结果。  
				例子：var v=[1,2];  var v2=[3,4];
					var z=v.concat(v2);
			join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。 
				var v=[1,2,3];
				var z=v.join("-");  给数组元素之间添加分隔符
			pop() 删除并返回数组的最后一个元素 
				例子：
				var arr = [1, 6, 20];
			                alert(arr.pop());
			push() 向数组的末尾添加一个或更多元素，并返回新的数组长度。 
				例子：var arr = [1, 6, 20];
				         alert(arr.push(28));
			reverse() 颠倒数组中元素的顺序。
 
			sort() 对数组的元素进行排序  从小到大
				* 默认排序方式：字典顺序
				* 要想实现自己的比较方式，需要传入比较器方法对象
				例子：var arr = [1, 6, 20, 100];
			                  alert(arr.sort(bijiao));

			function bijiao(a, b) {
				if(a > b) {

					return 1;
				} else if(a == b) {

					return 0;
				} else {

					return -1;

				}
				//return a-b;

			}
	遍历数组：


七* Global：全局方法对象
			* 特点:该对象中的方法调用，不需要对象的引用，可直接使用
			
			* isNaN() 检查某个值是否是NaN。 
				例子：var v=NaN;  var v1="abc"; var v2=123;
					var b=isNaN(v); 
					var b1=isNaN(v1);
					var  b2=isNaN(v2);

				
				* parseInt() 解析一个字符串并返回一个整数。  
					* 从左向右依次查找，每一位是否是数字，直到遇到不是数字为止。将前边的值转为数字
						比正号强大些  var v=+“123”；
					例子：  var v=“152abc”
					var  v="123";
					var z=parseInt(v)+1;
                            
八.RegExp(**):正则表达式对象
         
位置：
		^		开头
		$		结尾
次数：
		*		0或多个
		+		1或多个
		?		0或1个
		{n}		就是n个
		{n,}	至少n个
		{n,m}	最少n个，最多m个
通配符：
		\d		任意数字
		\D		任意非数字
		\s		任意空白
		\S		任意非空白
		.		任意字符（除'\n'外）
组合：
		[a-z]
		[0-9]
		等
组：
		(正则)		匹配括号中正则表达式对应的结果，并暂存这个结果。
		(?:正则)	匹配括号中正则表达式对应的结果，但不暂存这个结果。
		\数字		使用第n个组匹配的结果
使用正则的工具（RegExp类与相关方法）
创建：
		// 方式一
		var regex = new RegExp("正则表达式", "标志");
		// 方式二
		var regex = /正则表达式/标志
参数说明：
正则表达式：
	参见上面的规则 
标志：
	g （全文查找出现的所有 pattern） 
	i （忽略大小写） 
	
方法：
		Regexp.test( str )
		String.replace( regex, str )
	

正则表达式对象常用的方法：
	 test()  使用正则对象去匹配字符串  如果匹配成功返回ture，否则返回false.	
	 exec()  根据正则表达式去查找字符串符合规则的内容。

模式：
	g （全文查找出现的所有 pattern） 	
	i （忽略大小写）

* 概念：将标记语言文档的各个组成部分 封装为对象
		
		* 组成：
			* Document：文档对象
			* Element:元素对象
			* Attribute：属性对象
			* Text：文本对象
			* Comment：注释对象
			
			* Node：节点对象
			
		* Document：文档对象
			* 获取：window.document

			//document 中 body属性 可以获取body标签对象
			document.body.bgColor = "red";
			//title 属性获取文档标题
			var bt = document.title;
			//获取文档最后一次修改时间
			var rq=document.lastModified;
			//URL 属性 获取地址栏中的地址

			* 方法：
				* 获取Element对象
					* getElementById():通过id属性值获取唯一的元素
					* getElementsByTagName():通过标签名称获取元素对象数组
					* getElementsByName():通过name属性值获取元素对象数组
					* getElementsByClassName():通过class属性值获取元素对象数组
				
				* 创建其他对象
				* createElement:创建元素对象
				* createAttribute：创建属性对象
				* createComment：创建注释对象
				* createTextNode：创建文本对象
				//给属性对象设置值
				font1.setAttribute('color','yellow');
			例子：	
			var div4 = window.document.createElement("div");
			var text1 = window.document.createTextNode("我是第四个div");
			var v = div4.appendChild(text1);
			document.getElementsByTagName("body")[0].appendChild(div4);
		* Element:元素对象
			* innerHTML属性：获取或设置 元素的 子内容
			*innerTEXT属性:获取标签之间的文本内容
		
		* 事件
			* 概念：
				* 事件：一件事
				* 事件源：事件发生的组件。
				* 监听器：一个对象。当事件源上发生了事件，就执行对象中的某些方法
				* 注册监听：将监听器绑定到事件源上，监听事件的发生
			
			* js中注册监听的方式：
				1. 在定义标签时，添加 事件名称属性。属性值是js代码
					* js代码会被自动封装到一个function函数的方法体中
					例子：<div id="div_id" onclick="fun();">hehe</div>
				2. 通过js获取元素对象，再添加事件。
				
				例子：
				//1.获取元素对象
				var input = document.getElementById("username");
				//2.注册监听
				input.onclick = function(){
					//alert("hehe");
				}
			* js中事件的种类：
				* 焦点事件：
					* onfocus 元素获得焦点。 
					* onblur  元素失去焦点
				
				* 点击事件：
					* onclick 当用户点击某个对象时调用的事件句柄。 
					* ondblclick 当用户双击某个对象时调用的事件句柄。 
					
				* 键盘事件：
					* onkeydown 某个键盘按键被按下。
					* onkeyup 某个键盘按键被松开。 
					* onkeypress 某个键盘按键被按下并松开。 
				* 鼠标事件：
					* onmousedown 鼠标按钮被按下。 
					* onmouseup 鼠标按键被松开。 
					* onmouseover 鼠标移到某元素之上。 
					* onmouseout 鼠标从某元素移开。 
					* onmousemove 鼠标被移动。 
				
				* 表单事件：
					* onsubmit 确认按钮被点击。 
					* onreset 重置按钮被点击。 
					
				* 加载与卸载事件
					* onload 一张页面或一幅图像完成加载。 
					* onunload 用户退出页面。 其他浏览器不支持 IE支持
				
				* 其他事件：
					针对表单
					* onchange 域的内容被改变。 比如下拉框
					* onselect 文本被选中。