Javascript学习笔记
1.js的声明
（1）在head标签中使用script标签进行js代码域的声明
<script type="text/javascript"> ... </script>
作用：
声明js代码域
特点：
js的代码只会作用于当前网页
（2）在head标签中使用script标签引入外部声明好的js文件
<script src="***.js" type="text/javascript" charset="utf-8"/>
作用：
引入外部声明好的js文件
特点：
实现js代码的重复使用，避免代码的冗余
注意：
因为js在HTML代码中是一门单独的语言，可以声明在文档中的任意位置
一般情况下声明在head标签中
2.js的变量
（1）js的变量声明
js中的所有变量声明只有var关键字
<script type="text/javascript"> var a=123; var a1=3.1415926; var a2="js"; var a3='k'; var a4=true; var a5=new Date(); </script>
注意：
js的变量名严格区分大小写
js中的字符串可以使用双引号也可以使用单引号
js中可以声明同名变量，不会报错，后面会将前面声明覆盖
（2）js中的数据类型
数据类型判断关键字：typeof
数据类型：
number：数字类型
string：字符串类型，注意，在js中字符可以使用单引号也可以使用双引号
boolean：布尔类型
object：对象类型
null：空对象赋值，引用类型的数据赋值为null
Undefined：变量声明不赋值的情况下，默认值是undefined
注意：
在js代码中尽可能的给声明的变量赋初始值
（3）js的变量强转
使用Number()函数，将其他数据类型转换为数值类型，转换失败返回NaN（not a number)
使用Boolean()函数，将其他数据类型转换为布尔类型，有值返回true，无值返回false;
（4）特殊值
null object
undefined undefined
NaN number
3.js的运算符
算术运算符：
加法：+
减法：-
乘法：*
除法：/
余数：%
number类型和number类型
number类型和boolean类型（true--1,false--0)
number类型和string类型（*，/，%，-）
string类型和string类型的数字（*，/，%，-）
string类型数字和boolean类型（*，/，%，-）
在算术运算符中如果两边的数据类型不是number,会使用Number()强转后再进行运算
注意：
在字符串中“+”符号代表的是字符串连接符，不参与运算
逻辑运算符：
& && | || ！与java中一致
关系运算符:返回值true或者false
!= >= <= > <
自增运算符
++ -- += -=
4.js的特殊关系运算符
等值运算符：==
先判断类型，类型一致则直接比较
类型不一致，则先使用Number()进行强转后再进行比较
注意：
null和undefined在做==判断时返回true
var a=1; var a1="1"; var a2=true; var a3="true"; var a4="a"; var a5="a"; alter(a==a1);//true alter(a==a2);//true alter(a==a3);//false alter(a1==a2);//true alter(a1==a3);//false alter(a2==a3);//false alter(a4==a5);//true
等同运算符：===
先判断类型，类型一致再比较内容，内容也一致则返回true
类型不一致，直接返回false
var a=1; var a1="1"; var a2=true; var a3="true"; var a4="a"; var a5="a"; alter(a===a1);//false alter(a===a2);//false alter(a===a3);//false alter(a1===a2);//false alter(a1===a3);//false alter(a2===a3);//false alter(a4===a5);//true
5.js的逻辑结构
if结构
单分支结构：
if(判断条件){执行体}
双分支：
if(判断条件){执行体}else{执行体}
多分支：
if(判断条件){执行体}else if(判断条件){执行体}...else{执行体}
switch选择结构
switch(变量){
case :break;
case :break;
...
default:break;
}
注意：
判断的变量可以是number类型也可以是string类型，但是不要混用
6.js的循环结构
for循环
for(变量;条件;迭代条件){循环体}
while循环
while(循环条件){循环体}
do{}while{}循环
do{循环体}while(循环条件)
7.js的数组
（1）数组的声明
<script type="text/javascript">
var arr=new Array();//声明一个空数组
var arr=new Array(length);//声明一个指定长度的数组
var arr=[元素];//声明数组
</script>
注意：
js的数组声明不用指定长度，js的数组长度时不固定的，会随着元素的数量改变而改变
（2）数组的赋值和取值
<script type="text/javascript">
var arr[];
arr[0]="2";
arr[1]="abc";
arr[2]=true;
arr[3]=new Date();
</script>
数组可以存储任意类型的数据
数组名[角标] = 值；//角标可以是任意的正整数或则0
数组的取出：
数组名[角标]//返回当前角标对应存储的值
如果角标不存在，返回undefined
（3）数组的length属性
数组名.length //返回当前数组的长度
数组名.length=新的值//动态的改变数组的长度
如果length>原有长度，则使用空格进行填充
如果length<原有长度，则从后面截取，最后的数据会删除
（4）数组的遍历
var arr[1,"abc",3,"a",4]; //遍历1:普通for循环 for(var i=0;i<arr.length;i++){ alter(arr[i]); } //遍历2：for-in for(var i in arr){ alter(i);//获取的是角标 alter(arr[i]); }
8.js数组的常用操作
数组的操作学习：
数组的合并：arr.concat(b,c);//数组的合并
数组指定间隔符转换字符串：var b=arr.join("-");
数组的开始位置插入指定原属，返回新的长度：var ln=arr.unshift("lol");
数组移除第一个元素并返回：var ele=arr.shift();
数组的末尾插入指定原属，返回新的长度：var ln=arr.push("lol");//追加的元素可以是一个数组，但作为一个角标值存在
数组移除最后一个元素并返回：var ele=arr.pop();
数组反转：reverse();
数组的排序：sort();
数组删除指定位置元素：var arr2=arr.splice(1,3,"a");//从1位置开始往后删除3个元素
9.js的函数
作用：功能代码块的封装，减少代码的冗余
函数的声明
//方式一：
function 函数名(形参1,形参2...){函数执行体}
//方式二：
var 函数名=new Function("形参1","形参2"...,"函数执行体");
注意：此声明表明在js中函数是作为对象存在的
//方式三：
var 函数名=new Function("形参1","形参2"...){函数执行体}；
//调用声明的函数
test(实参1,实参2);
函数的参数
js中的函数在调用时，形参可以不赋值，不会报错
js中的函数在调用时，形参赋值可以不全赋值
函数的返回值
在js中如果函数有返回值直接返回，没有返回值默认返回undefined
注意：
js的代码声明区域和执行区域是一起的，都是在js代码的代码域中
10.js的函数(二)
函数的执行符
在js中函数的执行符是()
没有小括号则函数名其实就是一个变量
加上括号则函数会被执行
函数作为实参传递
在js中函数可以作为实参进行传递
function testobj(a){ a(); } var testParam=function(){ alert("我是函数参数")； } testobj(testParam);
//开发中常用的传递方式 function testObj2(fn){//testobj2函数在调用时，实参必须是一个函数对象 fn(); } testObj2(function(){ alert("开发"); })
11.js中的类
类的声明
function 类名（形参1，形参2.....){
this.属性名1=形参1；
this.属性名2=形参2；
......
this.属性名=fn;
}
function Person(name,age){ this.name=name; this.age=age; this.test=function(a){ alert(a); } }
类的使用
var 对象名=new 类名（实参1，实参2......);
注意：
js中类的内容只是对象的公共部分，每个对象还可以自定义进行扩充
var p1=new Person("张三"，32)； alert(p1.name);
类的“继承”：prototype关键字
通过prototype关键字实现了不同对象之间的数据共享
作用1：实现某个类的所有子对象的方法区对象的共享，节省内存
Person.prototype.test=function(){alert("哈哈")}；
作用2：
function Person(name,age){ this.name=name; this.age=age; this.fav="唱歌"; } function User(uname,pwd){ this.uname=uname; this.pwd=pwd; } //使用prototype Person.prototype=new User(); User.prototype.testU=function(){alter("我是user")}; //使用类 var p1=new Person("张三",32); var p2=new Person("李四",23)； p1.testU();
12.js中的自定义对象
创建自定义对象
对象的作用：用来存储整体数据
原因：很多时候我们没有办法预先知道一个对象应该有哪些属性，所以只有临时的创建一个对象来自定义属性存储数据，来保证数据完整性
应用：
Ajax使用
使用:
创建自定义对象
var 对象名=new Object()；
对象名.属性名1=属性值1；
对象名.属性名2=属性值2；
对象名.属性名3=属性值3；
......
var 对象名={}
对象名.属性名1=属性值1；
对象名.属性名2=属性值2；
对象名.属性名3=属性值3；
......
一般用来存储数据，不会在自定义对象中存储函数对象
js中的对象属性和内容是可以自定义扩充的，不是依赖于类的声明的，类只是对象公共部分的一种声明，是为了节省代码冗余
13.js的事件机制
概念：基于监听的，一个动作会触发其他事务的执行
作用：根据用户的行为触发响应的js函数的执行，实现网页和用户之间的互动
使用：
单双击事件：
单击事件：onclick
双击事件：ondblclick
鼠标移动事件：
鼠标悬停事件：onmouseover
鼠标移除事件：onmouseout
键盘事件
键盘下压事件：onkeydown
键盘弹起事件：onkeyup
焦点事件：
获取焦点：onfocus
失去焦点：onblur
值改变事件：
专门给select标签使用
onchange事件 当下拉框的值改变时触发
页面加载事件：
专门给body标签使用
onload 当页面加载成功后触发
注意：
事件是作为html标签的属性来使用
一个html标签可以同时使用多个事件，但是注意事件之间的相互干扰
14.js的常用方法和对象
作用：js将常用的功能封装好，调用即可，不用重复的封装
String对象
使用：字符串.函数名
大小写转换：
toUpperCase() 转换大写
toLowerCase() 转换小写
字符串截取：
substr(0,1) 从指定开始位置截取指定长度字符串
substring(0,1) 从指定为位置开始到指定位置结束的字符串（含头不含尾)
查找字符位置
indexOf 返回指定字符第一次出现的位置
lastIndexOf 返回指定字符最后一次出现的位置
//创建字符串 var str="abcdefg"; //大小写转换 alert(str.toUpperCase()+":"+str.toLowerCase()); //字符串截取 alert(str.substr(0,1)+str.substring(0,1));
Date对象
使用：
var 变量名=new Date();
注意：
获取的是客户端的时间，不能作为系统功能校验的时间
//创建对象日期 var d=new Date(); //操作时间和日期 //获取年份 alert(d.year());//返回从1900年算起距今的年份数 alert(d.getFullYear());//返回当前的年份 //获取月份 alert(d.getMonth()+1);//返回当前的月份数 //获取日期 alert(d.getDate());//返回当前的日期 //获取星期数 alert(d.getDay());//返回星期数，注意星期日返回0 //获取小时数 alert(d.getHours());//返回当前小时数 //获取分钟数 alert(d.getMinutes());//返回当期分钟数 //获取秒数 alert(d.getSeconds());//返回当前秒数
Math对象
使用：
Math.函数名()
random()
round()
ceil()
floor()
Global对象
//eval()方法:将字符串转换成js代码执行 eval("var a=123;"); //isNaN()：判断Number强转后的内容是否是数字 if(!isNaN(a)){ alert("是数字"); }else{ alert("不是数字")； } //parseInt("abc"); //NaN //parseInt("12abc");//12 //parseFloat();
15.js的window对象
BOM浏览器对象模型：是规范浏览器对js语言的支持（js调用浏览器本身的功能）
BOM的具体实现是window对象
window对象的使用
window对象不用new，直接使用即可，类似Math的使用方式，window关键字可以省略不写
框体方法
<script type="text/javascript">
//警告框
function testAlert(){
window.alert("aaa");
}
//确认框(点击确定返回true,取消返回false)
function testConfirm(){
window.confirm("你确认要删除吗？");
}
//提示框(点击确定放回当前用户录入的字符串，默认返回空字符串，点击取消返回null）
function testPrompt(){
window.prompt("你输入昵称：");
}
</script>
定时和间隔执行方法
<script type="text/javascript">
//定时执行 指定时间后执行指定的函数 参数1：函数对象 参数2：时间，单位毫秒 返回值：返回当前定时器的id
function testSetTimeout(){
window.setTimeout(function(){
alert("我是定时执行");
},3000);
}
//间隔执行 每间隔指定的时间执行指定的函数 参数1：函数对象 参数2：时间，单位毫秒 返回值：返回当前间隔器的id
function testSetInterval(){
window.setInterval(function(){
alert("我是间隔执行");
},2000);
}
//停止指定的定时方法 参数：定时器的id
function testClearTimeout(){
window.clearTimeout(id);
}
//停止指定的间隔方法 参数：间隔器的id
function testClearInterval(){
window.clearInterval(id);
}
</script>
子窗口方法
son.html:
<html> <head> <title>son</title> <meta charset="UTF-8"/> <script type="text/javascript"> //倒计时功能 function testTime(){ window.setInterval(function(){ var span=document.getElementById("timeSpan"); span.innerHTML=span.innerHTML-1; //关闭子页面 if(span.innerHTML==0){ window.close(); } },1000); } </script> </head> <body onload="testTime"> <h3>son</h3> <hr/> <b>欢迎来到本页面，<span id="timeSpan" style="color: red;font-size: 20px;">5</span>秒后页面关闭</b> </body> </html>
window.open('子页面的资源(相对路径)','打开方式','配置')；
<script type="text/javascript"> function testOpen(){ window.open('son.html','newwindow','height=100,width=400,top=100px,left=320px,toolbar=yes,menubar=yes,scrollbars=yes,resizable=no,location=yes,status=yes'); } </script>
子页面调用父页面的函数
window.opener.父页面的函数
<html> <head> <title>son</title> <meta charset="UTF-8"/> <script type="text/javascript"> //倒计时功能 function testTime(){ window.setInterval(function(){ var span=document.getElementById("timeSpan"); span.innerHTML=span.innerHTML-1; //关闭子页面 if(span.innerHTML==0){ window.close(); } },1000); } //调用父页面函数 function testFa(){ window.opener.testFather(); } </script> </head> <body onload="testTime"> <h3>son</h3> <hr/> <b>欢迎来到本页面，<span id="timeSpan" style="color: red;font-size: 20px;">5</span>秒后页面关闭</b> <input type="button" name="" id="" value="调用父页面函数" onclick="testFa"/> </body> </html>
<script type="text/javascript"> function testOpen(){ window.open('son.html','newwindow','height=100,width=400,top=100px,left=320px,toolbar=yes,menubar=yes,scrollbars=yes,resizable=no,location=yes,status=yes'); } function testFather(){ alert("父页面")； } </script>
js的window对象的常用属性
地址栏属性--location
作用：资源跳转方式，动态修改地址栏信息
window.location.href="新的资源路径"
window.location.reload()重新加载页面资源
function testLocation(){ window.location.href="http://www.baidu.com"; } function testLocation(){ //刷新 window.location.reload(); }
历史记录属性
window.history.forwad() 页面资源前进，历史记录的前进
window.history.back() 页面资源后退，历史记录后退
window.history.go(index) 跳转到指定的历史记录资源
注意：
window.history.go(0);相当于刷新
window.history.go(1);前一页
function testHistory(){ window.history.forward(); }
屏幕属性
window.screen.width;获取屏幕的宽度分辨率
window.screen.height;获取屏幕的高度分辨率
function testScreen(){ var x=window.screen.width; var y=window.screen.height; alert(x+":"+y); }
浏览器配置属性
window.navigator.userAgent：获取浏览器属性
function testNa(){ alert(window.navigator.userAgent); }
主题面板属性（document）
16.document对象
概念：
浏览器对外提供的支持js的用来操作HTML文档的一个对象，此对象封存HTML文档的所有信息
使用：
（1）获取HTML元素对象
直接获取方式：
通过id
function testGetEleById(){ var inp=window.document.getElementById(""); alert(inp); }
通过name属性值
function testGetEleByName(){ var favs=window.document.getElementByName(""); alert(favs); }
通过标签名
function testGetEleByTagName(){ var inps=window.document.getElementByTagName(""); alert(inps); }
通过class属性
function testGetEleByClassName(){ var inps=window.document.getElementByClassName(""); alert(inps); }
间接获取方式：
父子关系
function testParent(){ //获取父级元素对象 var showdiv=document.getElementById("showdiv"); //获取所有的子元素对象数组 var childs=showdiv.childNodes; alert(childs); }
子父关系
function testChild(){ //获取子元素对象 var inp=document.getElementById("inp"); //获取父元素对象 var div=inp.parentNode; alert(div); }
兄弟关系
function testBorther(){ //兄获取弟 var inp=document.getElementById("inp"); var preEle=inp.previousSibling;//第获取兄 var nextEle=inp.nextSibling;//兄获取第 }
（2）操作HTML元素对象的属性
获取元素对象
操作元素属性
获取
元素对象名.属性名//返回当前属性的属性值
元素对象名.getAttribute("属性名");//返回自定义属性的值
修改
元素对象名.属性名=属性值
元素对象名.setAttribute("属性名","新的值");//修改自定义属性的值
注意：
尽量不要修改元素的id值和name属性值
使用自定义方式获取固有属性，value的值获取的是默认值，不能够获取到实时的用户数据
function testFiled(){ //获取元素对象 var inp=document.getElement(""); //获取元素的属性值 alert(inp.type+":"+inp.name+":"+inp.id+":"+inp.value); }
function testFiled2(){ //获取元素对象 var inp=document.getElementById(""); //修改元素属性 inp.value="哈哈"； inp.type="button"; }
声明函数--自定义属性 function testOwnField(){ //获取元素对象 var inp=document.getElementById(""); //获取自定义属性的值 alert(inp.getAttribute("abc")); } //修改 function testOwnField2(){ //获取元素对象 var inp=document.getElementById(""); //修改自定义属性的值 inp.setAttribute("属性名","新的值"); }
（3）操作HTML元素对象的内容和样式
操作元素内容
获取元素对象
获取
元素对象名.innerHTML//返回当前元素的所有内容，包括HTML标签
元素对象名.innerText//返回当前元素的文本内容，不包括HTML标签
修改
元素对象名.innerHTML="新的值"//会将原有内容覆盖，并且HTML标签会被解析
元素对象名.innerHTML=元素对象名.innerHTML+"新的值"//追加
元素对象名.innerText="新的值"//会将原有内容覆盖，但是HTML标签不会被解析，会作为普通文本显示
//获取元素内容 function getContext(){ //获取元素对象 var div=document.getElementById(""); //获取元素内容 div.innerHTML; div.innerText; } //获取元素内容 function updateContext(){ //获取元素对象 var div=document.getElementById(""); //修改元素内容 div.innerHTML="12332"； div.innerHTML="<b>12332</b>"； }
操作元素样式--style方式
function testOperCss(){ //获取元素对象 var showdiv=document.getElementById(""); //添加元素样式 showdiv.style.backgroundColor="red"; //修改 showdiv.style.border="solid 2px red"; //删除 showdiv.style.border=""; }
操作元素样式--className方式
function testOperCss2(){ //获取元素对象 var div=document.getElementById(""); //获取 div.className //修改类选择器样式 div.className="新的值"; //添加类选择器样式 div.className="新的值"; //删除 div.className=""; }
（4）操作HTML的文档结构
增加节点
删除节点
第一种方式：使用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); }
第二种方式：
function testOper2(){ //获取元素对象 var showdiv=document.getElementById(""); //创建input元素对象 var inp=document.createElement("input"); inp.type="file"; //创建按钮元素对象 var btn=document.createElement("input"); btn.type="button"; btn.value="删除"; btn.onclick=fuction(){ showdiv.removeChild(inp); showdiv.removeChild(btn); showdiv.removeChild(br); } //创建换行符 var br=document.createElement("br"); //将创建的元素对象存放在div种 showdiv.appendChild(inp); showdiv.appendChild(btn); showdiv.appendChild(br); }
（5）document操作Form元素
获取表单对象
使用id: var fm=documentElementById("fm");
使用name属性：var frm=document.frm;
获取form下的所有表单元素对象集合
表单对象.elements
form表单的常用方法
表单对象.submit();//提交表单
表单对象.reset();//清空表单
form表单的属性操作
表单对象.action="新的值";//动态的改变数据的提交路径
表单对象.method="新的值";//动态的改变提交方式
form表单元素的通用属性
readonly:不可以更改，但是数据可以提交
disabled：不可以进行任何操作，数据不会提交
function testForm(){ //获取form表单对象 var fm=documentElementById("fm"); //获取form表单元素对象集合 fm.elements
（6）document操作表单元素
js操作多选框、单选框
被选中状态下在js中checked属性值为true,未选中状态为false
js操作下拉框
被选中的option对象在js中selected属性值为true,未选中状态为false
function testCheckBox(){ //获取所有的多选元素对象数组 var favs=document.getElementsByName("fav"); //遍历数组 for(var i=0;i<favs.length;i++){ if(favs[i].checked){ ... } } } function testSel(){ //获取下拉框对象 var sel=document.getElementsByName("***"); //获取option对象集合 var os=sel.options; for(var i=0;i<os.length;i++){ if(os[i].select){ ... } } }
（7）document对象实现form表格校验
通过监听事件+正则进行逻辑判断
（8）document操作table表格
行对象.rowIndex//返回行对象的角标
删除行：表格对象.deleteRow(要删除的行对象的角标);
<tr id="t1">
<td>java从入门到放弃</td>
<td>wollo<td>
<td>43.50</td>
<td id="ceil">3</td>
<td align="center">
<input type="button" name="" id="" value="修改数量" onclick="updateRow(this)"/>
<input type="button" name="" id="" value="删除" onclick="delRow(this)"/>
</td>
</tr>
<script type="text/javascript">
function delRow(btn){
//获取table对象
var ta=document.getElementById("ta");
//获取需要删除的行对象
var tr=btn.parentNode.parentNode;
//删除行
ta.deleteRow(tr.rowIndex);
}
</script>
修改行
function updateRow(btn){ //获取单元格对象 //获取行对象 var tr=btn.parentNode.parentNode; var cell=tr.cells[3]; //判断单元格内容 if(!isNaN(Nummber(cell.innerHTML))){ //修改单元格内容 cell.innerHTML="<input type='text' value='" +cell.innerHTML+ "' onblur='updateRow2(this)'/>"; } } function updateRow2(inp){ //获取单元格对象 var cell=inp.parentNode; //实现保存 cell.innerHTML="inp.value"; }
选择删除
function chooseDel(){ //获取表格对象 var ta=document.getElementById("ta"); //获取要删除的行号 var chks=document.getElementsById("chks"); for(var i=0;i<chks.length;i++){ if(chks[i].checked){ //删除行 ta.deleteRow(i--); } } }
添加行
function addRow(){ //获取表格对象 var ta=document.getElementById("ta"); //添加行 var tr=ta.insertRow(1); //添加单元格 var cell0=tr.insertCell(0); cell0.innerHTML="<input type='checkbox' name='chk'/>"; tr.insertCell(1); cell1.innerHTML="<input ... />"; tr.insertCell(2); cell2.innerHTML="<input ... />"; tr.insertCell(3); cell3.innerHTML="<input ... />"; tr.insertCell(4); cell4.innerHTML="<input ... />"; tr.insertCell(5); cell5.style.textAlign="center"; cell5.innerHTML="<input type='button' value='修改数量' onclick='updateRow(this)' /><input type='button' value='删除' onclick='delRow(this)' />"; }
