JS总结概要
一 、概述
1.什么是JavaScript?
JS，是JavaScript的缩写形式，而JavaScript是一种基于对象和事件驱动并且具有相对安全性的客户端脚本语言。
它在Web开发中JS占据着举足轻重的地位，所有交互、逻辑层的代码都应该由它来实现。
2.JavaScript语法特点
- 区分大写小，这一点不同于HTML。
- 结尾的分号可有可无。
- 变量是弱类型的：变量在定义时统一采用var，类型在赋值时决定。
3.UI线程
浏览器中都有一个用于页面展示的线程，叫做UI线程，向服务器提交以后，UI线程清空页面，等待加载服务器的反馈，如果等待时间过长，页面将出现空白。
4.this
主要用在方法中，代表当前对象，即方法的直接调用者。
二 、数据类型
1.JavaScript的数据类型
字符串、数字、布尔、数组、对象、Null、Undefined
2.变量定义
-
全局变量：在函数外声明的变量为全局变量，在整个页面范围有效。为一个未声明的变量赋值，该变量转化为全局变量。
- 局部变量：在函数内部声明的变量为局部变量，只在函数内部有效。
- this：如果在函数内部声明变量时采用this引用，该变量在函数外部可以通过对象引用。
3.String
常用知识点：
length：获取字符串的长度。
==：在JS中通过“==”对比两个字符串是否相等。
indexOf(subStr)：指定字符第一次出现的索引值。
lastIndexOf(subStr)：指定字符最后一次出现的索引值。
substr(begin[len])：从指定位置开始获取指定长度的字符。
substring(begin[end])：获取指定索引区间的字符。
replace(regExp,substr)：用指定字符替换满足格式的字符。
concat(str01...)：连接多个字符串，返回一个新的字符串。
split(delim[limit])：使用指定分隔符分割字符，将分割结果以数组形式返回，limit是分割次数，可选项。
4.Number
toFixed(n)：保留n个小数
5.Math
random()：随机返回一个0-1的数字。
round(x)：四舍五入。
max(x...)：获取最大值。
min(x...)：获取最小值。
6.Date
getTime()：获取从1970-01-01至今的毫秒数。
getFullYear()：获取此时的四位年份。
getMonth()：获取此时的月份。
getDate()：获取此时所属月份第几天。
getDay()：获取此时所属星期的第几天，范围0-6。
getHours()：获取此时的小时数。
getMinutes()：获取此时的分钟数。
getSeconds()：获取此时的秒数。
7.RegExp
var re = /^1\d{10}$/
re.test(str)；
常用方法：
test(str)：判断字符串是否满足指定的格式。
8.Array
⑴数据类型
不同与java语言，JS中的数组在创建时不需要指定长度与数据类型，可以存储多种类型数据。
⑵创建（3种方式）
var arr01=[数组中的值];//创建时赋值
var arr01=new Array(数组中的值);//创建时赋值
//先声明，后赋值
var arr01=new Array();
arr01[0]=1;
arr01[1]=2;
var arr01=new Array(6);//创建时指定数组长度
⑶常用操作
arr[0]：获取指定索引位置的元素，也可以为指定索引位置赋值。
arr.length：获取数组长度。
push(data)：向数组尾部添加元素并返回操作完成后的数组长度。
unshift(data)：向数组头部添加一个元素并返回数组长度。
pop()：删除数组的最后一个元素并返回删除的元素。
shift()：删除并返回数组的第一个元素。
for(index in arr)：遍历数组，arr[index]获取数组中的元素。
sort(function(a,b){return a-b;})：如果数组中存储的是字符，不需要指定函数，按照字母升序排序；如果数组中存储的是数字，需要设定排序函数，a-b升序排列，b-a降序排列。
reverse()：反转排序。
join(connector)：使用指定的连接符将数组连接成字符串，未指定连接符时默认采用","作为连接符。
toString()：等效于join()，将数组转化为一个由","连接的字符串。
slice(begin,end)：获取指定索引范围的元素，包含begin,不包含end。
splice(begin,howmany,newValue...)：从指定索引位置（包含该位置）开始删除howwmany个元素，插入新的元素。
concat(anotherArr...)：将参数数组的元素依次追加到该数组中并返回一个新的数组，原数组不变。
9.Object
⑴用于自定义对象，对象的创建方式：
//第一种方式,对象的声明与实例化一体
var obj={name:"张三",age:20,myFunction:function(){}};
//第二种方式,将函数当做构造方法
function person(name,age){
this.name=name;
this.age=age;
this.myfunction=function(){
alert(this.name);
}
}
var tom=new function("tom",20);
//第三种方式
person=function(){
this.name=name;
this.age=age;
this.myfunction:function(){
}
}
var tom=new function("tom",20);
⑵fn01:fn02的含义
将fn02赋值给fn01，fn01拥有与fn02完全相同的内容。
三、 属性
用户描述对象的特征，实例化对象。
常用属性：
-
href="#"：跳到页面开头。
- title作为元素的文本直接显示，元素无法直接显示文本时，当鼠标停留在上方时作为提示信息显示。
四 、window
浏览器窗口对象，是一个全局对象，是所有对象的顶级对象，引用属性或者函数时可以省略。
1.常用属性
- document：一个代表窗口中全部HTML元素的对象。
- closed：boolean类型，用于判断当前窗口是否已关闭。
- location：获取当前页面的URL；访问指定的资源，该资源可以是HTML，也可以是Servlet或者其他服务器资源，在当前页面中打开。location=url与location.href=url功能相同。
- history：表示当前窗口浏览记录的对象。在形成了浏览记录的前提下，可以跳转到前后页面，history.go(-1)跳转到上一个页面，history.go(1)跳转到下一个页面。
- parent：表示包含当前窗口的父窗口。
- opener：表示打开当前窗口的父窗口，常用语父子窗口通信。
2.常用方法：
alert(content):弹出一个警告对话框。 confirm(content)：弹出一个确认对话框，返回确认结果，true或者false。 prompt：提示对话框，用于用户输入，返回输入结果。 setTimeout()：定时执行。 setInterval()：周期性执行。 open():在新窗口中加载指定的URL。 close():关闭当前窗口。 parseInt()：将字符创转化为int数字。 eval：将普通字符串解析成JS代码。 typeof:返回数据的类型。 isNaN：判断数据是否是数字。
五、 DOM
Document Object Model是一种操作文档的技术，将文档视作按树形分层结果排列的对象，document是一个代表该文档的对象。
1.元素
文档中的标签节点。
子节点：元素节点、文本节点、注释节点，不包括属性节点。
2.创建对象
document.createElement(tagName)：根据标记名创建元素，作为参数的标记不带<>。
3.获取对象
- document.all.id：根据id获取对象。
- formId.tagId:通过id获取表单下的元素，也可以通过"formName.tagName"的方式获取表单下的元素。
- document.getElementById(id):根据id获取对象。
- document.getElementsByName(name):根据name获取对象，因为可能存在多个对象name相同，所以获取的对象是复数。
- document.getElementsByTagName(tagName)：通过标签名称获取对象。
4.属性
- document.location：同document.location.href作用相同，用于访问指定资源，该资源可以是HTML，也可以是Servlet以及其他服务器资源，不能获取当前页面的URL。
5.常用方法
-
document.write(content)：向页面输出。
六 、函数
在JS中调用函数不必像在java中那样必须为每一个形参赋值，只需为需要的形参赋值即可，其他形参位可以空着。每一个函数都有其对应的作用范围，不同作用范围的函数定义在不同的节点上。
1.常用函数
javascript:void(0)：保留超链接样式，只执行js代码，不进行页面跳转。
2.动态添加函数
动态地向元素添加函数有两种方式：
⑴使用JS：
使用JS获取对象以后，通过对象调用函数不包含括号），将自定义的函数function赋给该函数
obj.action=function(){};
⑵使用jQuery：
$(selector).action(function(){});
两种方式不能混用，即不能这样使用：$(selector).action=function(){}。
七 、事件
动作引发的行为称作事件，可以为一个事件添加多个函数，多个函数按照添加顺序依次执行。不同的元素对应的事件不同。
1.常用事件：
- onclick：鼠标单击时触发。
- onchange：下拉列表框的选项发生改变时触发。
- onblur：失去焦点时触发。
- onfocus：获得焦点时触发。
- onmouseover：鼠标移动到元素上时触发。
- onmousemove：鼠标在元素上移动时触发。
- onmouseout：鼠标离开元素时触发。
- onselect：选中文本域时触发。
- change:该事件仅适用于文本域（text field），以及 textarea 和 select 元素。(注意：当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生。)
八 表单提交
1.按钮提交
单击submit按钮，提交表单。
2.代码提交
执行document.forms["formName"].submit()代码，通过代码提交表单。
九 父子窗口通信
父子窗口通信指的是一个窗口向打开该窗口的窗口传递信息，即由子窗口向父窗口传递信息，而由父窗口向子窗口传递信息可以通过QueryString完成。
子窗口向父窗口传递信息的关键是在子窗口中获取父窗口对象，通过window.opener获得父窗口对象，然后可以像在父窗口中一样操作了。
浙公网安备 33010602011771号