Ⅰ.在head标签中使用script标签进行js代码域的声明
①语法
<script type="text/javascript" >js代码</script>
②特点
这种方法声明的js代码只能作用于当前HTML文件
Ⅱ.在head标签中使用script标签引入外部声明好的js文件
①语法
<script src="相对路径" type="text/javascript" charset="utf-8"></script>
②特点
可以实现js代码的重复使用，减少代码冗余
js的代码域和css一样可以声明在HTML文档中的任意位置，但一般声明在head标签中
Ⅲ.alert函数
alert(内容);
用来设置网页弹窗
(1)注释
js的注释和java中的注释是一样的用//或者/**/
(2)变量
变量的类型:var
var 变量名=值;
Ⅰ.js是一种弱类型的语言,它的变量声明只需要var关键字即可,这个变量可以存储任意类型的数据
Ⅱ.js的变量名是区分大小写的
Ⅲ.字符串可以使用双引号也可以使用单引号
Ⅳ.js中可以声明两个同名的变量，但是后面声明的会将前面的声明覆盖
(3)数据的类型(变量没类型但数据有类型)
数据类型:
基础类型
number:数字类型
string:字符/字符串类型
boolean:布尔类型
对象类型
object:对象
(4)数据类型判断关键字typeof
语法:typeof 变量名;
(5)数据类型的强转
Ⅰ.使用Number()函数，将其他数据类型转换为数值类型，转换失败返回NaN(not a number)
但是NaN也是number类型的
Ⅱ.使用Boolean()函数，将其他数据类型转换为布尔类型，变量有值返回true，无值返回false
(6)特殊值
null: 空对象，被赋值为null的变量显示的数据类型是object，用于和undefined进行区分
undefined:变量声明后没赋值，默认的值和类型都是undefined
一个没定义过的变量typeof一下显示的也是undefined，所以以后不要把undefined作为判断条件，尽量给变量赋初始值
(1)算数运算符(★)
加法:+
减法:-
乘法:*
除法:/
余数:%
number类型和number类型
number类型和boolean类型，boolean的true相当于1，false相当于0
number类型和string类型的数字(-,*,/,%)
string类型的数字和string的数字(-,*,/,%)
string类型的数字和boolean类型(-,*,/,%)
注意：
只要+法操作数中有一个是string类型，那么返回的就是字符串拼接的结果，字符串不会做加法，只会拼接
即算数运算符中如果两边的数据有不是number类型的，会自动调用Number()函数强转后再进行运算
只有字符串的加法会变成拼接
且如果转换失败也是返回NaN
(2)逻辑运算符(和java一样)
与:&&,&
或:||,|
非:!
单与和单或返回的是1或0
双与和双或返回的是true或false，结果没差别
(3)关系运算符(也是和java一样)
!=,>,<,>=,<=之类的
(4)自增自减运算符(还是和java一样)
++,--
(5)js的==和===运算符(★)
Ⅰ.等值运算符==
基础类型
先判断两个数据的类型，如果类型相同则直接比较内容
如果类型不同则先使用Number()进行强转后再进行比较
Ⅱ.等同运算符===
只有类型和内容都一致才返回true
Ⅲ.注意
null和undefined做==判断时返回true
(1)js的逻辑结构
Ⅰ.if结构
单分支结构
if(判断条件){执行体}
双分支结构
if(判断条件){执行体}else{执行体}
多分支结构
if(判断条件){执行体}else if(判断条件){执行体}...else{执行体}
Ⅱ.switch结构
switch(变量){
case 值1:
执行体1;
break;
case 值2:
执行体2;
break;
...
defaule:
执行体
break;
}
注意：
switch判断的变量可以是number类型也可以是string类型，但是不要混用
因为switch是用===进行判断的，所以类型不同也不行
(2)js的循环结构
Ⅰ.for(){}循环
Ⅱ.while(){}循环
Ⅲ.do{}while()循环
(1)数组的声明
Ⅰ.方式一
var arr=new Array();//声明一个空数组对象
Ⅱ.方式二
var arr=new Array(length);//声明一个指定长度的数组
Ⅲ.方式三(最常用)
var arr=[元素列表];//声明和初始化同时完成
Ⅳ.注意
js在声明数组时可以不用声明数组长度，数组的长度是不固定的，会随着元素的数量而改变，不存在数组越界
(2)数组的赋值和取值
Ⅰ.赋值
语法：数组名[角标]=值;//角标可以是任意的正整数和0
js中的数组可以存储任意类型的数据，因为var什么类型都能存
Ⅱ.取值
数组名[角标];//返回当前角标存储的值
如果角标未被赋值，返回undefined
(3)数组length的作用
Ⅰ.作用1
数组名.length;//返回当前数组的长度
Ⅱ.作用2
数组名.length=len;//动态改变数组的长度
注意：
len>原有长度，用空进行填充
len<原有长度，则多出来的数据会被丢掉
(4)数组的遍历
普通for循环
for(var i=0;i<arr.length;i++){
alert(arr[i]);
}
升级版的for循环
for(var i in arr){
alert(i);//i是角标
}
(1)数组的合并，concat()方法
var b=arr.concat(数组1/变量1,数组2/变量2);
会形成一个新数组b
(2)将数组转换成字符串，join()方法
var b=arr.join("间隔符");
会把数组中的元素用指定的间隔符连接起来，形成一个字符串
(3)弹出数组最后一个元素，pop()方法
var b= arr.pop();
移除数组最后一个元素，并返回该元素
(4)数组的追加，push()方法
var b=arr.push(元素);
追加的元素可以是一个数组，但是js会把这当成一个数组对象进行插入
(5)弹出数组的第一个元素，shift()方法
var b=arr.shift();
移除数组第一个元素，并返回该元素
(6)在数组开始位置插入元素，unshift()方法
var b=arr.unshift(元素);
(7)移除指定位置的元素并返回这些元素，splice()方法
arr.aplice(start,deleteCount);
从start开始移除deleteCount数量的元素
其他不常用的自己查api
(1)作用
功能代码块的封装，减少代码冗余
(2)函数的声明
Ⅰ.方式一
function 函数名(形参列表){
执行体
}
//调用
函数名(实参列表);
Ⅱ.方式二
var 函数名=new Function("形参1","形参2",...,"执行体");
这种方式说明在js中函数是作为对象存在的
Ⅲ.方式三
var 函数名=new Function("形参1","形参2",...){
执行体
}
(3)函数的返回值
在js中如果函数有返回值，则直接返回返回值
如果没有返回值返回的是undefined
相当于其实函数都有一个变量来表示返回值，只不过没有return语句时返回值未被赋值，所以返回undefined
(4)注意
Ⅰ.js的形参列表中不需要写变量类型，直接写变量名就行了
Ⅱ.js的代码声明区域和执行区域是一起的，都是在js的代码域中
Ⅲ.函数的声明本质上是声明了一个变量，指向了函数对象
函数声明其实就是调用了构造方法Function,用括号里面的东西当作实参，创建了一个函数对象
三种声明方式只是写法不同，本质上都是一样的
Ⅳ.js中的函数在调用时，形参可以不赋值，不会报错
js中的函数在调用时，形参赋值可以不赋完，也不会报错
相当于其实每个形参都有个默认值undefined
所以就不存在函数重载这一说法了
(5)函数的执行符
js中的函数执行符()
没有小括号只有函数名其实就是一个变量，
加上小括号函数才会被执行
(6)函数作为实参传递
因为函数其实就是一个对象，所以函数是可以作为实参传递给另一个函数的
常用写法：
function testObj2(fn){
fn();
}
testObj2(function(){
alert("开发常用的使用方式");
});
(1)类的声明
js中类的声明和函数的声明关键字是一样的都是function
语法：
function 类名(形参1,形参2,...){
this.属性1=值1;
this.属性1=值1;
...
this.函数1=function(形参列表){执行体}
...
}
属性和函数都不需要声明，直接赋值就行了
例子：
function Person(name,age){
this.name=name;
this.age = age;
this.fav="唱歌";
this.test=function(a){
alert(a);
}
}
类其实也可以看成是对象，java万物皆对象，所以才有反射
js中的类其实相当于一个比较特殊的函数，都是封装只不过有点区别
(2)使用类
var 对象名=new 类名(实参列表);
注意：
js中类的内容只是对象的公共部分，每个对象还可以自定义的进行扩充
如：var p1=new Preson("张三",23);
p1.sex="男";
虽然Person中没有sex属性，但是我们还是可以给它添加
可以这么说，类中的只是这些对象的公共属性和函数部分，每个对象还可以自己扩充
(3)类的“继承”，和java中的不一样，比较像是链条
Ⅰ.使用prototype属性实现不同对象的数据共享
js中每当我们new一个类的对象，都会把类中的属性和函数都新建一遍，即每个对象都会有自己的存储空间
这点和java不一样
如果我们想对象的函数或属性都是同一个，降低内存占用，可以使用prototype属性
例如：Person.prototype.test(){执行体};
当对象调用方法时会先去自己的存储区域查找，如果找不到会到类的公共存储区域prototype中查找，这个比较类似java中的static
Ⅱ.js中类的继承
其实就是在类的prototype区域中声明其他类的对象
这样js如果在对象的单独区域中找不到相应的属性或函数就会去prototype公共区域中找
就会找到其他类，又会到其他类中找，这样效果就像是一个链条，有点继承的意思
因为之前说了类的对象可以自己增添属性
那么我们创建一个空类的对象，然后自己加东西就相当于自定义对象了
(1)创建自定义对象
var obj=new Object();
Object是js中内容最少的类，可以看成是空类
(2)作用
很多时候我们没有办法提前预知一个类中有哪些属性和方法
所以只能创建一个自定义对象，自定义的进行数据的整体存储，以保证数据的完整性
(1)String对象(和java中的差不多)
String对象用于操作字符串
语法：字符串.函数():即可
大小写转换：
toUpperCase();//把字符串转换成大写
toLowerCase();//把字符串转换成小写
字符串截取：
substr(start,cutCount);//从start开始，截取cutCount数量的子字符串
substring(start,end);//截取从start开始到end结束的子字符串(包头不包尾)
查找字符位置
indexOf("内容");//返回指定字符第一次出现的位置
lastIndexOf("内容");//返回指定字符最后一次出现的次数
(2)Date对象
Date对象，用于获取事件信息，值得注意的是Date获取的是客户端的事件，用户可以更改的
语法：var 变量名=new Date();
变量名.函数();
获取年份：
getYear();
获取当前年份：
getFullYear();
获取当前月份数：
getMonth()+1;//注意要+1，因为它的月份数是从0开始的
获取日期：
getDate();
获取星期数：
getDay();
获取小时数:
getHours();
获取分钟数：
getMinutes();
获取秒数：
getSeconds();
(3)Math对象
语法：Math.函数名();
产生随机数
Math.random();//返回从0~1之间的随机数
向下取整
Math.floor(数值);
(4)Global对象
Global类不能用new创建对象，它在引擎初始化时自动被创建
语法：直接写，函数名()，即可；
把字符串当作js代码执行
eval("js代码");
判断是否是数字
isNaN(内容);//用于判断括号内的内容用Number()强转后是否为NaN;
(1)作用
在js中结合函数使用
Ⅰ.js中添加事件的第一种方式：
在HTML的标签中添加事件属性，属性为事件的类型，属性值为要监听执行的函数
Ⅱ.方式二：用document来添加
Ⅲ.标签不一定要为button
Ⅳ.一个标签可以添加多种事件
Ⅴ.同一种事件也可以添加多个函数，函数之间用;隔开
Ⅵ.js中的事件只在当前HTML中有效
(2)单双击事件
单击：onclick 当鼠标单击时触发
双击：ondbclick 当鼠标双击时触发
(3)鼠标事件
鼠标悬停事件：onmouseover 当鼠标悬停在某个元素上时触发
鼠标移动事件：onmousemove 当鼠标在某个元素上移动时除法
鼠标移出事件：onmouseout 当鼠标从某个元素上移出时触发
(4)键盘事件
键盘弹起事件：onkeyon 当键盘在某个元素上弹起时触发
键盘下压事件：onkeydown 当键盘在某个元素上被按压时触发
(5)焦点事件
获取焦点事件：onfocus 当某个元素获取焦点时触发
失去焦点事件：onblur 当某个元素失去焦点时触发
(6)页面加载事件
onload 页面加载成功后才执行
(7)值改变事件
onchange 一般是加给下拉框
(8)给合适的标签添加合适的事件
onchange------select下拉框
onload--------body标签
(9)给HTML元素添加多个事件时，要注意事件之间的冲突
如：单双击事件
当事件的触发条件又相互重叠的部分，就可能出现冲突
(10)事件的阻断
当事件所监听的函数将返回值返回给事件时
false:会阻断当前事件所在的HTML标签的功能
true:会继续执行当前事件所在的HTML标签功能
(11)超链接调用js函数
<a href="javascript:函数名()">方式</a>
BOM对象模型，是用于规范浏览器对js语言的支持(js调用浏览器本身的功能)
BOM的具体实现时window对象
下面这些函数和对象也是写在函数中结合事件来使用的
(1)window对象的常用方法
Ⅰ.window方法的调用不需要new对象出来，跟Math一样直接window.方法()即可，且window可以省略
Ⅱ.框体方法
①警告框(就是我们之前一直用的alert方法)
window.alert(内容);
没有返回值
②确认框
window.confirm(内容);
点击确定返回true，点击取消返回false
③提示框
window.prompt(内容);
点击确定，返回当前录入的数据，没有录入默认返回空字符串
点击取消，返回null
Ⅲ.定时和间隔执行方法
var id;
var ids;
①定时执行，指定的事件后执行指定的函数
id=window.setTimeout(函数,毫秒数);
②间隔执行，每间隔指定的时间执行指定的函数
ids=window.setInterval(函数,毫秒数);
这个自己没法停下来的，除非关闭浏览器
上面这两个方法的返回值都是自己定时器的id号码
③停止定时执行
window.clearTimeout(id);
④停止间隔执行
window.clearInterval(ids);
这两个方法是停止指定id的定时器
Ⅳ.子窗口方法
①.打开子窗口
window.open('要打开的资源路径','打开方式','height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no');
实现效果比较类似于电路模拟系统里的信号表图像啥的
②.关闭子窗口
window.close();
这个方法只能关闭用open方法打开的页面，但是可以通过
self.close()
方法关闭不是由open方法打开的页面
Ⅴ.子页面调用父页面的函数(★)
①语法
window.opener.父页面的函数();
这个可以实现在子页面更改父页面的信息，例如在子页面更新了个人信息后，点击确定父页面会被刷新
(2)window对象的常用属性
Ⅰ.地址栏属性:location
①window.location.href="新的资源(本地/URL)"
本质上浏览器内部是自己定义了一个变量href来接收用户输入在地址栏的值
超链接实质上也是修改地址栏的值
那么我们直接手动改href的值也是可以实现页面的跳转的
②window.location.raload();
重新加载页面，即刷新
Ⅱ.历史记录属性
window.history.forward();//页面资源前进，相当于手动点击前进
window.history.back();//页面资源后退，相当于手动点击后退
window.history.go(index);//前进或后退指定页面数，前进index为正数，后退index为负数
window.history.go(0);//代表刷新
Ⅲ.屏幕属性
window.srceen.width;//获取屏幕的宽度分辨率
window.srceen.height;//获取屏幕的高度分辨率
Ⅳ.浏览器配置属性(现在用的不多了)
window.navigator.userAgent;
Ⅴ.主体面板属性(document)
(1)document对象的概念
浏览器对外提供的支持js的用来操作HTML文档的一个对象，此对象封存了HTML文档的所有信息
在用浏览器打开网页时，浏览器会创建一个document对象，然后将HTML文档中的信息封存进去
所以我们之后用get方法其实都是从document对象自己内部获取，而不是去HTML中获取
document改变不会影响HTML代码，改的是浏览器正在运行的那份代码
①直接获取方式
通过id
var a=window.document.getElementsId("id名");
通过name属性
var a=document.getElementsbyName("name属性值");
通过标签名
var a=document.getElementsByCTagName("标签,如input");
通过class属性
var a=document.getElementsClassName("标签类型,如.common");
返回使用了该类选择器的全部标签
②间接获取方式
父子关系,例子：
//先获取父级元素对象
var showdiv=document.getElementById("showdiv");
//获取所有子元素对象数组
var childs=showdiv.childNodes;
子父关系
//先获取子元素对象
var inp=document.getElementById("inp");
//获取所有父级元素对象数组
var div=inp.parentNode;
兄弟关系
//先获取元素对象
var inp=document.getElementById("inp");
//获取所有兄弟元素对象数组
var preEle=inp.previousSibling;//弟获取兄
var newEle=inp.nextSibling;//兄获取弟
①获取固有属性
元素对象名.属性名;//返回当前对象的相应属性
②修改固有属性(id和name一般不要动)
元素对象名.属性名=值;
③获取自定义属性的值
元素对象名.getAttribute("自定义属性名");
④修改自定义属性的值
元素对象名.setAttribute("自定义属性名",值);
注意：使用getAttribute方法去获取固有属性，只能拿到默认值，不能拿到用户实时修改的数据
①获取元素的内容
元素对象名.innerHTML;//返回当前元素对象的所有内容，包括HTML标签
元素对象名.innerText;//返回当前元素对象的文本内容，不包括HTML标签
②修改元素的内容
方式一：
元素对象名.innerHTML="新的值";
如果新的值中有HTML的标签，会被解析执行
且这种方式会把原有的值覆盖
元素对象名.innerHTML=元素对象名.innerHTML+"值";//追加
方式二：
元素对象名.innerText="新的值";
如果新的值中有HTML的标签，不会被解析执行，会被当成普通文本
且这种方式会把原有的值覆盖
元素对象名.innerText=元素对象名.innerText+"值";//追加
通过style属性
①添加或修改元素样式
元素对象名.style.属性名="值";
②删除元素样式
元素对象名.style.属性名="";
HTML标签中的属性都存在元素对象的style属性中
所以以上这些方式其实都是更改的元素对象标签中的属性，并不能更改css代码域中声明的样式
这里的属性名是把HTML属性的-去掉，然后变成驼峰式的;
通过className
①添加类选择器样式或修改类选择器样式
元素对象名.className="值";
不是改css中的类选择器样式，是更改这个元素对象使用的类选择器样式
相当于更改这个元素对象标签中的class属性
②删除类选择器样式
元素对象名.className="";
方式一：使用innerHTML
①增加节点
div.innerHTML=div.innerHTML+"内容";
②删除节点
父节点.removeChild(子节点对象);//删除指定的子节点
table不能用这种方式，table有它自己固定的方式
方式二：自己创建标签对象加到document中
①增加节点
var obj=document.createElement("标签");
元素对象名.appendChild(obj);
②删除节点
元素对象名.removeChild(obj);
(1)获取form表单对象
Ⅰ.方式一：使用id
var fm=document.getElementByid("id号");
Ⅱ.方式二：使用name
var fm=docnment.name值;
这两种方式获得到的对象是一样的
(2)获取form对象下的所有表单元素对象集合
var a=fm.elements;
(3)form表单的常用方法
Ⅰ.提交表单数据(★)
表单对象.submit();
这样我们在js中就可自定义提交，不需要每次都写一个submit按钮了
而且这样使得我们的提交可控，在js中我们可以添加提交条件
Ⅱ.清空表单数据
表单对象.reset();
(4)form表单的属性操作
表单对象名.action="值";//动态的改变数据的提交路径
表单对象名.method="值";//动态的改变数据的提交方式
(5)表单元素的常用属性补充
只读模式
readonly="readonly";
不可以更改，但是可以提交
关闭模式
disable="disable";
不可以进行任何操作，数据不会提交
164
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
