JS学习总结

js的声明学习：
    1.在head标签中使用script标签进行js代码域的声明
--------------------------------------------------------------------------------
<script type="text/javascript">
			alert("这是我的第一个JS")
		</script>
--------------------------------------------------------------------------------
        作用：
            声明js代码域
        特点：
            js的代码只会作用于当前网页
    2.在head标签中使用script标签引入外部声明好的js文件
        <script type="text/javascript(相对路径)" src="js/my.js" charset="UTF-8" </script>
        作用：引入外部声明好的js文件
        特点：实现js代码的重复使用，避免代码的冗余。
        注意：
            因为js在HTML文档中是一门独立的语言，可以声音在文档中的任意位置
        一般情况下声明在head标签中。
js的变量学习：
    1.js中的所有变量声明只有用var关键字。
        var a=123;
        var A=1234;
        var a1=3.1415926;
        var a2="js";
        var a3='k';
        var a4=true;
        var a5=new Date();
    注意：
        1.js的变量名是严格区分大小写的
        2.js中的字符串可以使用双引号也可以使用单引号
        3.js中可以声明同名变量，不会报错，后面的会将前面的声明覆盖。（重要）
            var  a=123;
            var  a="js的学习";
            alert(a);
    2.js中的数据类型：
        数据类型判断关键字：typeof
        数据类型：
            number:数字类型；
            String：字符串类型
            boolean：
            object;对象类型
            null：
                空对象赋值，主要是和undefined进行区分
            undefined;变量声明不赋值的情况下，默认值是undefined。
         注意：
            var  d;
            alert(d);
            alert(typeof c);
            在js中尽量的给声明的变量赋初始值；
js的运算符学习：
    js中的特殊关系运算符：
        等值运算符==
            先判断类型，类型一致，则直接比较。
            类型不一致，则先使用Number()进行强转后在进行比较。
        等同运算符：===
            先判断类型，类型一致则在比较内容，内容一致则返回true，内容不一致则返回false。
            类型不一致直接返回false
        注意：
            null和undefined在做==判断时候返回true
js的数组学习：
    1.数组的声明
        var arr=new Array();//声明一个空数组对象
        var arr=new Array(length);//声明一个指定长度的数组
        var arr=[元素];//声明数组（最常用）;
        注意：js中的数组声明不用指定长度，JS的数组长度是不固定的，会随着元素的数量改变而改变
    2.数组的赋值和取值
         数组可以的存储任意类型的数据
             数组名[角标]=值；//角标可以是任意的正整数或者是0
        数组的取出
            数组名[角标];//返回当前角标对应存储的值
            如果角标不存在返回undefined;
    3.数组的length属性
        作用1：数组名.length//返回当前数组的长度。
        作用2：数组名.length=新值//动态的改变数组的长度
        注意:
            length>原有长度,则使用空进行填充
            length<原有长度,则从后面进行截取，最后的数据会被删除
    4.数组的遍历
        普通for循环遍历
            for（var  i=0;i<arr.length;i++）{
                alert(arr[i]);
            }
        for---in:
        for(var  i   in   arr){
            alert(i);//获取的是角标
            }
5.数组的常用操作
    1.数组的合并：arr.concat(b,c)；
    2.数组指定间隔符转换字符串： var  b=arr.join("-");
    3.数组移除最后一个元素并返回：var ele=arr.pop();
    4.数组的追加，返回新的长度：var ln=arr.push("lol");//追加的元素可以是一个数组，但是会作为一个角标存在。
    5.数组移除第一个元素：var  ele=arr.shift();
    6.数组在开始位置插入指定元素：var a=arr.unshift("又是周五啦");
    7.数组删除指定位置的元素，并可以在后面添加新的元素：var arr1=arr.splice(1,3,"a");
js的函数学习：
    作用：功能代码块的封装。减少代码的冗余。
    1.函数的声明：
        方式一：function  函数名（"形参1:","形参2"，.....）{函数体}；
        方式二：var  函数名=new  Function("形参1"，"形参2"....."函数执行体");
            注意：此声明表明在JS中函数是作为对象存在的
        方式三：var  变量名=function(形参名1，形参名2，...........){函数执行体}
    2.函数的参数
        JS中得函数在调用时，形参可以不赋值，不会报错
        JS中的函数在调用时，形参赋值可以不全部赋值，不会报错，但实参会依次进行赋值。
    3.函数的返回值
        在JS中如果函数有返回值则直接返回，没有返回值默认返回undefined
    4.函数的执行符
        在JS中函数的执行符值（）
            没有小括号则函数名其实就是一个变量
            加上小括号则函数会被执行
    5.函数作为实参传递
        在JS中函数是可以作为实参进行传递的
            function  testobj(a){
                    alert(a());
                }
            var  testParam=function(){
                alert("我是函数参数");
                }
            testobj(testParam());
    注意：
        JS的代码声明区域和执行区域是一起的，都是在JS代码中的代码域中
js中的类学习：
    1.类的声明
        function  类名(形参1，形参2..........){
        this.属性名1=形参1；
        this.属性名2=形参2；
        ......
        this.属性名=函数对象
    }
代码实例：
--------------------------------------------------------------------------------
function Person(name,age){
				this.name=name;
				this.age=age;
				this.test=function(a){
					return a;
				}
			}
--------------------------------------------------------------------------------
    2.类的使用
        var  对象名=new  类名(实参1，实参2.........)；
            例如：var p1=new Person("张三",32);
    3.类的“继承”：prototype关键字
        通过prototype实现了不同对象之间的数据共享。
        作用1：实现了某个类的所有字对象的方法区对象的共享，节省内存。
    4.js创建自定义对象
        对象的作用：用来存储整体的数据
        原因：很多时候我们没有办法预先知道一个对象应该有哪些属性，所以只能临时的创建一个对象来自定义属性存储数据。来保证数据的完整性。
        应用：
            Ajax中会使用
        使用：
            1.创建自定义对象
            var  对象名=new Object();
                    对象名.属性名1=属性值1;
                    对象名.属性名2=属性值2；
                    对象名.属性名3=属性值3；
                        ...........
                    var  对象名={}；
                    对象名.属性名1=属性值1;
                    对象名.属性名2=属性值2；
                    对象名.属性名3=属性值3；
                    ..........
              2.一般用来存储数据，不会再定义对象中存储函数对象。
              3.JS中的对象属性和内容是可以自定义的扩充的，不是依赖类的声明的，类只是对象公共部分的一种声明，是为了节省代码的冗余的。
js中常用的方法和对象学习：
    String对象；
    Data对象；
        使用：var  变量名=new Date();
        getYear():返回1900年起算距今的年份数
        getFullYear():返回当前的年份
        getMonth();获取当前的月份数（注意：要+1）；
        getDate();返回当前的日期；
        getDay()；返回星期数，注意星期日返回0；
     Math对象；
        Math.函数名
        random()
        round()
        ceil()
        floor()
        随机数字：
            Math.floor(Math.random()*9000+1000)  //产生一个四位数的随机数。
    Globa对象；
        eval();
        isNaN();
        parseInt();
        parseFloat();
        （使用时查看手册使用即可）
js中事件机制学习：
    js中的事件机制1：
        解释：当我们的行为动作满足了一定的条件后，会触发；某类事物的执行
        作用：主要是结合js的函数来使用
        内容:
            1.单双击事件
                单击：onclick
                双击：ondblclick
            2.鼠标事件
                onmousemove 鼠标被移动
                onmouseout 鼠标从某元素移开
                onmouseover 鼠标被移到某元素之上
            3.键盘事件
                onkeydown 某个键盘的键被按下 
                onkeyup 某个键盘的键被松开 
            4.焦点事件
                onfocus   获取焦点事件
                onblur      失去焦点事件
            5.页面加载事件
                onload	当页面加载成功后触发
            注意：
                js中添加事件的第一种方式:
                    在Html上直接使用事件属性进行添加，属性值为所监听的执行函数。
                js中的事件只有在当前HTML元素上有效
                一个HTML中可以添加多个不同的事件
                一个事件可以监听触发多个函数的执行，但是不同的函数要使用分号间隔
    js中的事件机制2：
        1.给合适的HTML标签添加合适的事件
            onchange--------------select下拉框
            onload-------------------body标签
            单双击---------------------用户会进行点击动作的HTML元素
            鼠标事件------------------用户会进行鼠标操作的元素
            键盘事件------------------用户会进行键盘操作的HTML元素
        2.给HTML元素添加多个事件时，注意事件之间的冲突。
            例如：单双击事件
            当事件的触发条件包含相同部分的时候，会产生事件之间的冲突
        3.事件的阻断
            当事件所监听的函数的将返回值返回给事件时：
                false:则会阻断当前事假所在的HTML标签的功能
                true:则继续执行当前事件所在的HTML标签的功能
                (常用于提交表单时)
        4.超链接调用JS函数
            <a  href="javascript:函数名（）">调用JS函数</a>
Windows对象学习：
    BOM浏览器对象模型：是规范浏览器对JS语言的支持（JS调用浏览器本身的功能）
    BOM的具体实现是windows对象
    windows对象使用学习：
        1.windows对象不用new,直接进行使用即可，类似Math的使用方式，windows关键字可以省略不写。
        2.框体方法
            alert:警告框  提示一个警告信息，没有返回值
            comfirm:确认框  提示用户选择一项操作（确认/取消）
                点击确认返回true
                点击取消返回false
            prompt:提示框，提示用某个信息的录入或者说收集
                点击确定，返回当前用户录入的数据，默认返回空字符串
                点击取消，返回null
        3.定时和间隔执行方法
            setTimeout:指定的时间后执行指定的函数
                参数1：函数对象
                参数2：时间，单位毫秒
                返回值：返回当前定时器的id
            setInterval：每隔指定的时间执行指定的函数
                参数1：函数对象
                参数2：时间，单位毫秒
                返回值：返回当前间隔器的id
            clearTimeout:用来停止指定的定时器
                参数：定时器的id
            clearInterval:用来停止指定的间隔器
                参数：间隔器的id
        4.子窗口方法
            windows.open("子页面的资源(相对路径)","打开方式","配置")；
        示例：
            window.open("son.html","_blank","toolbar=yes, location=yes, directories=no,         status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=400,left=300px,top=400px");
        注意：
            关闭子页面的方法Windows.close();但是此方法只能关闭open方法打开的子页面。
        5.子页面调用父页面的函数
            Window.opener.父页面的函数
    JS的window对象的常用属性
        地址栏属性：location
            window.location.href="新的资源路径（相对路径/URL）"
            window.location.reload() 重新加载页面资源
        历史记录属性
            window.history.forward()  页面资源前进，历史记录的前进
            window.history.back()  页面资源后退，历史记录后退
            window,history.go(index)  跳转到指定的历史记录资源
                注意：window,history.go(0)   相当于刷新
        屏幕属性
            window.srceen.width;//获取屏幕的宽度分辨率
            window.srceen.height;//获取屏幕的高度分辨率
        浏览器配置属性
            window.navigator.userAgent
        主体面板属性（document）
document对象学习：
    1.document对象的概念
        浏览器对外提供的支持JS的用来操作HTML文档的一个对象，此对象封存的HTML文档的所有信息。
    2.使用document
        获取HTML元素对象
            直接获取方式：
                通过id   document.getElementById("id名")；
                通过name属性值  document.getElementsByName("属性名")；
                通过标签名  document.getElementsByTagName("标签名")；
                通过class属性值   document.getElementsByClassName("class名")；
            间接获取方式：
                父子关系
                子父关系
                兄弟关系
        操作HTML元素对象的属性
            获取元素对象
            操作元素对象
                获取：
                    元素对象名.属性名//返回当前属性的属性值----------------固有
                    元素对象名.getAtteribute("属性名");//返回自定义属性的值-------自定义
                修改：
                    元素对象名.属性名=属性值--------------------------固有
                    元素对象名.setAtteribute("属性名");//修改自定义属性的值---------自定义
                注意：
                    尽量的不要去修改元素的id值和name属性值。
                    使用自定义方法获取固有属性内容，value的值获取的是默认值，不能够获取到实时的用户数据
        操作HTML元素对象的内容和样式
            操作元素内容
                获取
                    元素对象名.innerHTML//返回当前元素对象的所有内容，包括HTML标签
                    元素对象名.innerText//返回当前元素对象的文本内容，不包括HTML标签
                修改
                    元素对象名.innerHTML="新的值"//会将原有的内容覆盖，并HTML标签解析
                    元素对象名.innerHTML=元素对象名.innerHTML+"新的值"//追加效果
                    元素对象名.innerText="新的值"//会将原有内容覆盖，但HTML标签不会被解析，会作为普通文本显示
            操作元素样式
                获取元素对象
                    通过style属性
                        元素对象名.style.样式名="样式值";//添加或修改
                        元素名象名.style.样式名=""//删除样式
                        注意：
                            以上操作，操作的是HTML的style属性声明中的样式。而不是其他CSS代码域中的样式。
                    通过className
                        元素对象名.className="新的值"//添加类选择器样式或者修改类选择器样式
                        元素对象名.className=""//删除类样式
            操作HTML的文档结构
                增加节点
                删除节点
                第一种方式：
                    使用innerHTML
                    div.innerHTML=div.innerHTML+"内容"//增加节点
                    div.innerHTML=""//删除所有节点
                    父节点.removeChild(子节点对象)//删除指定的子节点
代码示例：
--------------------------------------------------------------------------------
function testAdd(){
    //获取元素对象
    var  showdiv=document.getElementById("showdiv");
    //给div追加上传按钮
    showdiv.innerHTML=showdiv.innerHTML+"<div><input type='file' value=''  />
    <input  type='button' value='删除'  onclick='delInp(this)'/></div>";
}
function delInp(btn){
    //获取父级div
    var  showdiv=document.getElementById("showdiv");
    //获取要删除的子div
    var  cdiv=btn.parentNode;
    父div删除子div
    showdiv.removeChild(cdiv);
}
--------------------------------------------------------------------------------
第二种方式：
    获取元素对象
        var obj=document.createElement("标签名")；
        元素对象名.appendChild(obj);
代码示例：
--------------------------------------------------------------------------------
<script type="text/javascript">
			function testOper2(){
				//获取元素对象
				var showdiv=document.getElementById("showdiv");
				//创建input元素对象
				var inp=document.createElement("input");
				inp.type="file";
				//创建按钮元素对象
				var btn=document.createElement("input");
				btn.type="button";
				btn.value="删除";
				btn.onclick=function(){
					showdiv.removeChild(inp);
					showdiv.removeChild(btn);
					showdiv.removeChild(br);
				}
				//创建换行符
				var br=document.createElement("br");
				//将创建好的元素对象存放到div中
				showdiv.appendChild(inp);
				showdiv.appendChild(btn);
				showdiv.appendChild(br);
			}
		</script>
--------------------------------------------------------------------------------
document操作Form元素
    js操作Form：
        获取form表单对象
            使用id：var  fm=document.getElementById("fm");
            使用name属性:var  frm=document.frm;
        获取form下的所有表单元素对象的集合
            fm.elements
        form表单的常用方法
            表单对象.submit();//表单提交数据（很重要）
            表单对象.reset();//表单重置
        form的属性操作;
            表单对象名.action="新的值";//动态的改变数据的提交路径
            表单对象名.method="新的值";//动态的改变提交的方式
    js表单元素的通用属性
        只读模式：
            readonly="readonly"//不可以更改，但数据可以提交
        关闭模式：
            disabled="disabled"//不可以进行任何的操作，数据不会提交
        代码示例：
--------------------------------------------------------------------------------
<script type="text/javascript">
			function testFrom(){
				//使用id获取form表对象
				var fm=document.getElementById("fm");
				//使用from表单的name属性值来取值
				var frm=document.frm;
				//获取from表单元素对象集合
				alert(frm.elements);
			}
</script>
--------------------------------------------------------------------------------
js操作多选框、单选框
    被选中状态下载JS中checked属性值为true,未选中的状态为false;
js操作下拉框：
    被选择的option对象在Js中selected属性值为true,未选中未false
代码示例：
--------------------------------------------------------------------------------
<html>
	<head>
		<title>操作表单元素</title>
		<meta charset="UTF-8"/>
		<script type="text/javascript">
	 		//多选框操作
			function test1(){
				//获取所有的多选元素对象数组
				var favs=document.getElementsByName("fav");
				//遍历数组
				for(var i=0;i<favs.length;i++){
					if(favs[i].checked){
						alert(favs[i].value);
					}
				}
			}
			//全选
			function test2(){
				var favs=document.getElementsByName("fav");
				for(var i=0;i<favs.length;i++){
					favs[i].checked=true;
				}
			}
			//反选
			function test3(){
				var favs=document.getElementsByName("fav");
				for(var i=0;i<favs.length;i++){
					favs[i].checked=(!favs[i].checked);
				}
			}
			function test4(){
				//获取下拉框
				var sel=document.getElementById("address");
				//获取option对象的集合
				var os=sel.options;
				for(var i=0;i<os.length;i++){
					if(os[i].selected){
						alert(os[i].text);
					}
				}
			}
		</script>
	</head>
	<body>
		<h3>操作表单元素</h3>
		<hr />
		<input type="checkbox" name="fav" id="fav" value="1" />最美的期待<br />
		<input type="checkbox" name="fav" id="fav" value="2" />老男孩<br />
		<input type="checkbox" name="fav" id="fav" value="3" />远走高飞<br />
		<input type="checkbox" name="fav" id="fav" value="4" />当<br />
		<input type="checkbox" name="fav" id="fav" value="5" />怀念青春<br />
		<input type="checkbox" name="fav" id="fav" value="6" />我相信<br />
		<input type="button" name="" id="" value="播放"  onclick="test1()"/>
		<input type="button" name="" id="" value="全选"  onclick="test2()"/>
		<input type="button" name="" id="" value="反选"  onclick="test3()"/>
		<hr />
		<select name="" id="address" onchange="test4()">
			<option value="0">--请选择--</option>
			<option value="1">北京</option>
			<option value="2">上海</option>
			<option value="3">郑州</option>
		</select>
	</body>
</html>
--------------------------------------------------------------------------------
document操作表格
    1.删除行：
        行对象.rowIndex//返回对象的角标
        表格对象。deleteRow(要删除行对象的角标)
        表格所有操作的代码示例：
--------------------------------------------------------------------------------
<html>
	<head>
		<title>table操作</title>
		<meta charset="UTF-8"/>
		<style type="text/css">
			#ta{
				margin: auto;
			}
			#ta tr{
				height: 35px;
			}
		</style>
		<script type="text/javascript">
//删除行
			function del(btn){
				//获取table对象
				var ta=document.getElementById("ta");
				//获取要删除的行对象
				var tr=btn.parentNode.parentNode;
				//删除行
				ta.deleteRow(tr.rowIndex);
			}
//更新数据
			function update(btn){
				var tr=btn.parentNode.parentNode;
				var cell=tr.cells[4];
				if(!isNaN(Number(cell.innerHTML))){
					cell.innerHTML="<input type='text' value='"+cell.innerHTML+"' onblur='update2(this)'/>";
				}
				
			}
//当焦点离开后数据不能变更
			function update2(btn){
				var tr=btn.parentNode.parentNode;
				var cell=tr.cells[4];
				cell.innerHTML=btn.value;
			}
//批量删除
			function chooseDel(){
				//获取表格对象、
				var ta=document.getElementById("ta");
				var chks=document.getElementsByName("chk");
				for(var i=1;i<chks.length;i++){
					if(chks[i].checked){
						ta.deleteRow(i);
						i--;
					}
				}
				//获取要删除的行号
				//开始删除
			}
//添加行
			function add(){
				var ta=document.getElementById("ta");
				var row=ta.insertRow(1);
				var cell0=row.insertCell(0);
				cell0.innerHTML="<input type='checkbox' name='chk' id='chk' />";
				var cell1=row.insertCell(1);
				cell1.innerHTML="c语言";
				var cell2=row.insertCell(2);
				cell2.innerHTML="王先生";
				var cell3=row.insertCell(3);
				cell3.innerHTML="33.23";
				var cell4=row.insertCell(4);
				cell4.innerHTML="5";
				var cell5=row.insertCell(5);
				cell5.align="center";
				cell5.innerHTML="<input type='button' value='修改数量' onclick='update(this)'/><input type='button' value='删除' onclick='del(this)'/>";
			}
//全选
			function selectAll(){
				var chks=document.getElementsByName("chk");
				var f=chks[0].checked;
				for(var i=1;i<chks.length;i++){
					chks[i].checked=f;
				}
			}
///复制行
			function copyRow(){
				//获取表格对象
				var ta=document.getElementById("ta");
				//获取选择行对象
				var chks=document.getElementsByName("chk");
				for(var i=1;i<chks.length;i++){
					if(chks[i].checked){
						var tr=ta.insertRow(ta.rows.length);
						//复制行
						tr.innerHTML=ta.rows[i].innerHTML;
					}
					
				}
			}
//隔行变色
			function colors(){
				//获取所有行对象数组
				var trs=document.getElementById("ta").rows;
				for(var i=0;i<trs.length;i++){
					if(i%2==0){
						trs[i].style.backgroundColor="green";
					}
				}
			}
		</script>
	</head>
	<body>
		<h3 align="center">操作表格学习</h3>
		<div align="center">
			<input type="button" name="" id="" value="删除" onclick="chooseDel()"/>
			<input type="button" name="" id="" value="添加" onclick="add()"/>
			<input type="button" name="" id="" value="复制行" onclick="copyRow()"/>
			<input type="button" name="" id="" value="隔行变色" onclick="colors()"/>
		</div>
		
		<hr />
		<table border="1px" id="ta">
			<tr style="text-align: center;font-weight: bold;">
				<td width="50px" align="left"><input type="checkbox" name="chk" id="chk" value="" onclick="selectAll()"/></td>
				<td width="200px">书名</td>
				<td width="100px">作者</td>
				<td width="100px">价格</td>
				<td width="200px">数量</td>
				<td width="200px">操作</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="chk" id="chk" value="0" /></td>
				<td>java从入门到放弃</td>
				<td>wollo</td>
				<td>43.50</td>
				<td>3</td>
				<td align="center">
					<input type="button" name="" id="" value="修改数量" onclick="update(this)"/>
					<input type="button" name="" id="" value="删除" onclick="del(this)"/>
				</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="chk" id="chk" value="1" /></td>
				<td>javaScript入门</td>
				<td>灰灰</td>
				<td>77.60</td>
				<td>2</td>
				<td align="center">
					<input type="button" name="" id="" value="修改数量" onclick="update(this)"/>
					<input type="button" name="" id="" value="删除" onclick="del(this)"/>
				</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="chk" id="chk" value="2" /></td>
				<td>Spring入门</td>
				<td>老王</td>
				<td>78.88</td>
				<td>3</td>
				<td align="center">
					<input type="button" name="" id="" value="修改数量" onclick="update(this)"/>
					<input type="button" name="" id="" value="删除" onclick="del(this)"/>
				</td>
			</tr>
		</table>
	</body>
</html>
--------------------------------------------------------------------------------
    document对象实现form表单校验
  formset不同的页面在一个页面展示div是将一个区块的内容分成不同的区块进行展示