本文共 6740 字，大约阅读时间需要 22 分钟。

js

js和html整合

方式1:在页面上直接写	将js代码放在 标签中,一般放在head标签中

方式2:独立的js文件	通过script标签的src属性导入

js中变量声明:

var 变量名=初始化值;var 变量名;	变量名=初始化值;注意:	var可以省略 建议不要省略	一行要以分号结尾,最后一个分号可以省略,建议不要省略

js的数据类型:

原始类型:(5种)	Null	String	Number	Boolean	Undefined	通过 typeof运算符可以判断一个值或者变量是否属于原始类型,若属于原始类型,他还可以判断出属于那种原始类型		typeof 变量|值;	若变量为null,使用typeof弹出的值 object		使用typeof的返回值		undefined - 如果变量是 Undefined 类型的 		boolean - 如果变量是 Boolean 类型的 		number - 如果变量是 Number 类型的 		string - 如果变量是 String 类型的 		object - 如果变量是一种引用类型或 Null 类型的

var b=false;alert(typeof b);  boolean

函数的定义:

方式1:	function 函数名(参数){		函数体;	}	方式2:	var 函数名=function(参数){		函数体;	}

js中的事件:

常见的事件:	单击:  onclick	表单提交: onsubmit 加在form表单上的 onsubmit="return 函数名()"  注意函数返回值为boolean类型	页面加载: onload

   
    	姓名：
    
    
	年龄：
    
    
    
	
    
   

onsubmit是在提交form前执行的方法，返回Boolean，true:就提交；false:不提交

js事件和函数的绑定:

方式1:		通过标签的事件属性   
   	方式2:		给元素派发事件			document.getElementById("id值").onclick=function(参数){....}			document.getElementById("id值").onclick=函数名		注意:			内存中应该存在该元素才可以派发事件		a.将方式2的js代码放在html页面的最下面		b.在页面加载成功之后在运行方式2的js代码  onload事件.

js获取元素:

方式1:	var obj=documnet.getElementById("id值");获取元素的value值	obj.value;获取元素的标签体中的内容	obj.innerHTML;

function f1(){
   	//1现获取到标签对象	var obj=document.getElementById("btn1");	//2在获取标签的属性对应的值	alert(obj.value);}

修改样式：

运算符:

比较运算符: > >= < <=	若两边都是数字 和java一样	若一般为数字,另一边为字符串形式的数字,将字符串形式的数字转换成数字在进行比较   3>"2"	若一般为数字,另一边为字符串,返回一个false   3>"hello"	两边都是字符串的时候,比较ascii等性运算符 == ===	== :只判断值是否相同	===:不仅判断是否相同,还要判断类型是否相同语句:	if语句 和java一样	for while 语句和java一样	switch 和java一样(区别,switch 后面跟字符串. 还可以跟变量)

定时器:

var id=setInterVal(code,毫秒数):每隔指定的毫秒数执行一次函数 周期var id=setTimeout(code,毫秒数):延迟指定的毫秒数之后 只执行一次函数清除定时器:	clearInterval(id);	claerTimeout(id);

history

back();后退forward():向前★go(int)	go(-1) 相当于 back()	go(1) 相当于 forward()

location

window.location.href='../history/a.html';

window

* js的bom对象	** navigator、screen、location、history	** window：是顶层对象，代表一个窗口	*** alert、setInterval、setTimeoutwindow对象详解:	如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，	并为每个框架创建一个额外的 window 对象。	常用的属性:		通过window可以获取其他的四个对象			window.location 等价域 location			window.history 等价于 history			...	常用的方法		消息框			alert("...."):警告框			confirm("你确定要删除吗?"):确定框 返回值:boolean			prompt("请输入您的姓名"):输入框 返回值:你输入的内容		定时器			设置定时器				setInterval(code,毫秒数):周期执行				setTimeout(code,毫秒数):延迟多长事件后 只执行一次.								例如:					setInterval(showAd,4000);					serInterval("showAd()",4000);						清除定时器				clearInterval(id):				clearTimeout(id):		打开和关闭			open(url):打开			close():关闭

消息框

function init(){
   	alert(1);		var result = window.confirm("是否删除该记录");	alert(result);		var result = window.prompt("请输入密码","123456");	if(null==result){
   		alert("你没有输入密码");	}else{
   		alert(result);	}}

常见事件

常见的事件:	焦点事件:★		onfocus		onblur	表单事件:★		onsubmit		onchange 改变	页面加载事件:★		onload		鼠标事件(掌握)		onclick	鼠标事件(了解)		ondblclick:双击		onmousedown:按下		onmouserup:弹起		onmousemove:移动		onmouserover:悬停		onmouserout:移出	键盘事件(理解)		onkeydown:按下		onkeyup:弹起		onkeypress:按住

function f2(event){
   	var event=event || window.event;	//阻止浏览器的默认行为； onclic在href前面执行	event.preventDefault();}function f1(event){
   	var event=event || window.event;	//阻止浏览的传播行为	event.stopPropagation();}

止浏览的传播行为：正常情况下，大框套小框，如果我们点击了小框，那么大框也会收到点击事件。 但是如果我们阻止了事件的传播行为，那么大框就感觉不到点击了。stopPropagation()

js的全局函数

* 这些函数不属于任何的一个对象，使用使用不需要写任何的对象，直接写函数名称= eval()：把字符串当成js代码来执行	== var str = "alert('aaaa');";	//alert(str);	eval(str);= encodeURI()：对字符串编码= decodeURI()：对编码之后的字符串进行解码** 在传递参数的过程中，如果参数中包含中文，中文会有乱码问题*** 解决方式：首先对中文进行编码，获取数据时候在对编码之后的内容进行解码	== var encode1 = "abc123东方不败";	var e1 = encodeURI(encode1);	document.write(e1);	document.write("
   
");	//decodeURI()：对编码之后的字符串进行解码	var d1 = decodeURI(e1);	document.write(d1);= isNaN()：判断是否是一个数字	== var s = "aa";	//如果是数字返回 false；如果不是数字返回 true	alert(isNaN(s)); = parseInt()：把字符串转化成number类型	== var a1 = "10";	document.write(a1+1);	document.write("
   
");	document.write(parseInt(a1)+1);

案例

案例一表单校验

   
	
    
		     
      
			       
用户名：
			       
											
		      
		      
			       
密码：
			       
				 							
		      
		      
			       
确认密码：
			       
				 							
		      
	     
    
	
    
   

为什么checkForm()返回了false，页面还是跳转了？原因： 1 checkForm()里面没有返回false,或者       2 调用checkForm()的地方有问题(漏了单词return)

案例二 隔行换色

table>style>border表示table的边框	table>border表示单元格的边框	getElementsByTagName：查找同一种标签    getElementByName: 查找name相同的标签

   
	    
     
		      
分类ID
		      
分类名称
		      
分类描述
		      
操作
	     
	     
		      
1
		      
手机数码
		      
手机数码类商品
		      
修改|删除
	     
	     
		      
2
		      
电脑办公
		      
电脑办公类商品
		      
修改|删除
	     
	     
		      
3
		      
家居饰品
		      
鞋靴箱包类商品
		      
修改|删除
	     
	     
		      
4
		      
鞋靴箱包
		      
家居饰品类商品
		      
修改|删除
	     
    
   

案例三 全选或全不选

全选和全不选： 获取当前的checked状态，给下面的checkbox赋值

   
	    
     
		      
全选
		      
分类ID
		      
分类名称
		      
分类描述
		      
操作
	     
	     
		      
		      
1
		      
手机数码
		      
手机数码类商品
		      
修改|删除
	     
	     
		      
		      
2
		      
电脑办公
		      
电脑办公类商品
		      
修改|删除
	     
	     
		      
		      
3
		      
家居饰品
		      
鞋靴箱包类商品
		      
修改|删除
	     
    
   

案例四 省市联动

数组：

语法:	new Array();//长度为0	new Array(size);//指定长度的	new Array(e1,e2..);//指定元素	非官方		var arr4=["aa","bb"];常用属性:	length注意:	数组是可变的	数组可以存放任意值常用方法:(了解)	存放值:对内容的操作		pop():弹	最后一个		push():插入 到最后				shift():删除第一个		unshift():插入到首位	打印数组:		join(分隔符):将数组里的元素按照指定的分隔符打印	拼接数组:		concat():连接两个或更多的数组，并返回结果。	对结构的操作:		sort();排序		reverse();反转concat(xx)+join(xx)产生了新的数组，原数组没变化reverse() sort() 原数组产生了变化

籍贯：    

案例五 左右选中

为什么下面的方法会报错undefined is not a function？

forEach()是给数组用的，leftOptions 不是Array，是 HTMLOptionsCollection，所以会报错undefined is not a functionjs用forEach() ;  jquery用each()(js对象用each()会报错undefined is not a function)

leftOptions.forEach(function(item){
   	if(item.selected){
   		rightSelect.appendChild(item);		return;	}});leftOptions.each(function(item){
   	rightSelect.appendChild(item);});

引用类型

引用类型总结:

原始类型中的String Number Boolean都是伪对象,可以调用相应的方法 Array:数组 String: 语法: new String(值|变量);//返回一个对象 String(值|变量);//返回原始类型 常用方法: substring(start,end):[start,end) substr(start,size):从索引为指定的值开始向后截取几个

charAt(index):返回在指定位置的字符。		indexOf(""):返回字符串所在索引				replace():替换		split():切割			常用属性:length	Boolean:	语法:		new Boolean(值|变量);		Boolean(值|变量);		非0数字 非空字符串 非空对象 转成trueNumber	语法:		new Number(值|变量);		Number(值|变量);	注意:			null====>0 		fale====>0 true====>1		字符串的数字=====>对应的数字		其他的NaNDate:	new Date();	常用方法:		toLocalString()RegExp:正则表达式	语法:		直接量语法  /正则表达式/参数		直接量语法  /正则表达式/				new RegExp("正则表达式")		new RegExp("正则表达式","参数") 		参数:			i:忽略大小写			g:全局		常用方法:			test() :返回值为booleanMath:	Math.常量|方法	Math.PI	Math.random()  [0,1)	全局:	★	decodeURI() 解码某个编码的 URI。 	encodeURI() 把字符串编码为 URI。	Number():强制转换成数字	String():转成字符串		parseInt():尝试转换成整数	parseFloat():尝试转换成小数		eval() 计算 JavaScript 字符串，并把它作为脚本代码来执行。

demo:

转载地址：http://qcdvi.baihongyu.com/