JavaScript笔记

JavaScript

JavaScript=ECMAScript（语法）BOM+DOM
DOM: Document Object Model, 文档对象模型
BOM: Browser Object Model即浏览器对象模型
JavaScript的注释:// 单行注释 /**/ 多行注释
JavaScript的语法:ECMAScript中一切（变量、函数名和操作符）都区分大小写。
JavaScript的数据类型
ECMAScript中有5种简单数据类型（也称为基本数据类型）：Undefined、
Null、Boolean、Number和String。(还有一种复杂数据类型：Object)
Typeof
语法：typeof 变量 或 typeof(变量)
功能：检测变量类型
undefined
undefined类型只有一个值，即特殊的undefined。
Null
null值表示一个空对象指针，如果定义的变量准备在将来用于保存对
象，那么最好将改变始化为null而不是其他值。
说明：undefined==null返回结果是true。
Number
Number：表示整数和浮点数
NaN：即非数值（Not a Number）是一个特殊的数值
说明：任何涉及NaN的操作（例如NaN/10）都会返回NaN；NaN与任
何值都不相等，包括NaN本身。
isNaN（）
语法：isNaN(n)
功能：检测n是否是“非数值”
返回值：boolean
3个函数把字符串转换为数值：
parseInt（） parseFloat（） Number（）
parseInt（） ：
说明： parseInt（）提供第二个参数：转换时使用的基数,（即多少进制)
parseFloat（）：
说明：从取有效数字字符开始，直到遇到非数字字符或第二个小数点结束。
Number（）
说明：Number()只能用于纯数值字符串或(boolean值，boolean返回0或1)；
parseInt()、parseFloat()、Number()都会忽略字符串开头的空格和0，如果
遇到第一个有效字符为字母，则返回NaN
toString（）
str.toString（）
功能：将str转换为字符串
返回值：str的一个副本
说明： 其中null或undefined没有toString()方法，强制使用会报错。
String（）
String（str）
功能：将str转换为字符串
返回值：str的一个副本
说明：String（）能够将任何类型的值转换为字符串。

比较操作符
>、<、>=、<=、、=、！=、！==
==：相等，只比较值是否相等
=：相等，比较值相等的同时比较数据类型是否相等
！=：不相等，比较值是否不相等
！：不全相等，比较值不相等或比较数据类型不相等，只要有一个不等
则返回true；
返回值：boolean型
逻辑操作符：
其中null、NaN、undefined隐式转换都为false;
&&：与
||：或
！：非
逻辑与：&&
说明：逻辑与操作不一定返回boolean值,可能返回操作数，它遵循下列
规则：
1、如果第一个操作数隐式类型转换后为true，则返回第二个操作数，依
次类推
2、返回第一个隐式类型转换后为false的操作数
逻辑或：||
说明：逻辑或操作不一定返回boolean值,可能返回操作数，它遵循下
列规则：
1、返回第一个隐式类型转换后为true的操作数。
2、如果第一个操作数隐式类型转换后为false，则返回第二个操作数
逻辑非： ！
说明： 1、无论操作数是什么数据类型，逻辑非都会返回一个布尔值，
并且可以同时使用两个逻辑非操作符。

prompt（）
语法：prompt（）
功能：弹出输入框
返回值：点击确定，返回输入内容；点击取消，返回null
alert（）
功能：弹出警告对话框
返回值：undefined
length
语法：string.length
功能：获取string字符串的长度
返回值：number
获取星期
语法：new Date（）.getDay（）
功能：获取星期,周日为0；
返回值：number(0-6)
获取几号
语法：new Date（）.getDate（）
功能：获取日期
返回值：number(1~31)

输出
语法：document.write(“内容”)
功能：向浏览器输出内容

for与while的区别
for：适合已知循环次数的循环体
while：适合未知循环次数的循环体

continue语句
continue：结束本次循环，继续开始下一次。

函数：使用function声明，后跟一组参数一级函数体，语法如下：
function functionName([arg0,arg1,…argn]){
statements
}
返回值：任何函数都可以通过return语句后跟要返回的值来实现返回
值；函数调用时，参数可以不传或传超过定义参数的个数。
arguments
ECMAScript中的参数在内部用一个数组来表示，在函数体内通
过arguments对象来访问这个数组参数。
说明：arguments对象只是与数组类似，并不是Array的实例；[] 语法访
问它的每一个元素；length属性确定传递参数的个数。

JavaScript中的数组
Array构造函数：
语法：new Array（）
读取和设置值时，使用方括号[]并提供相应的索引
当把一个值放在超出当前数组大小的位置上时，会重新计算数组长度
值，长度值等于最后一项索引加1。
push（） //末位插入元素
arrayObject.push(newele1，newele2，…，neweleX)
功能：把它的参数顺序添加到arrayObject的尾部。
返回值：把指定的值添加到数组后的新长度
unshift（） //首位插入元素
arrayObject.unshift(newele1，newele2，…，neweX)
功能：把它的参数顺序添加到arrayObject的开头
返回值：把指定的值添加到数组后的新长度。
pop（） //删除末位元素
arrayObject.pop（）
功能：删除arrayObject的最后一个元素
返回值：被删除的那个元素
shift（） //删除首个数组项
arrayObject.shift（）
功能：删除arrayObject中的第一个元素
返回值：被删除的那个元素
join（） //数组改为字符串
arrayObject.join(separator)
功能：用于把数组中的所有元素放入一个字符串，原数组不改变。
返回值：字符串。
reverse（） //逆序
stringObject.reverse（）
功能：用于颠倒数组中元素的顺序，原数组顺序改变。
返回值：数组。
sort（） //排序
arrayObject.sort(sortby)
功能：用于对数组的元素进行排序，原数组顺序改变。
返回值：数组。
1、即使数组中的每一项都是数值，sort（）方法比较的也是字符串。
2、sort（）方法可以接收一个比较函数作为参数，数组项有字符会出
错，函数作为参数只需要写函数名，例如.sort(compare)。
数组的操作方法：
concat（） //链接
arrayObject.concat(arrayX，arrayX，….，arrayX)
功能：用于连接两个或多个数组，原数组不改变。
返回值：连接后的数组。
slice（） //切片
arrayObject.slice(start，end)
功能：切片，从数组中返回选定的元素，原数组不改变
参数：
start（必需）如果是负数，那么它规定从数组尾部(即开始位置为数组长
度length+(负数)为开始坐标)开始算起的位置。
end参数是数组片断结束处的数组下标。如果没有指定end，那么切分的
数组包含从 start 到数组结束的所有元素。
返回值：切片选中的数组
splice（） //删除
splice arrayObject.splice(index，count)
功能：删除从index处开始的零个或多个元素，原数组改变。
返回值：被删除的元素数组。
说明：count是要删除的项目数量，如果设置为 0，则不会删除项目。
如果不设置，则删除从index开始的所有值。
splice（） //插入
arrayObject.splice(index，0，item1，….，itemX)
功能：在指定位置插入值，原数组改变
参数：Index：起始位置；0：要删除的项数；item1…itemX：要插入的项
返回值：被删除的元素数组。
splice() //替换
arrayObject.splice(index，count，item1，…，itemX)
功能：在指定位置插入值，且同时删除任意数量的项
参数：Index：起始位置；count：要删除的项；item1….itemX：要插入的项
返回值：从原始数组中删除的项（如果没有删除任何项，则返回空数组）
数组实例添加的两个位置方法：
indexOf（） //从前向后查找
arrayObject.indexOf(searchvalue，startIndex)
功能：从数组的开头（位置0）开始向后查找
参数：；searchvalue：必须，要查找的项；startIndex：可选，起点位置索引。
返回值：number，查找的项在数组中的位置，没有找到的情况下返回-1。
lastIndexOf（） //从后向前查找
arrayObject.lastIndexOf(searchvalue，startIndex)
功能：从数组的末尾开始向前查找
参数：searchvalue：必须，要查找的项；startIndex：可选，起点位置索引。
返回值：number，查找的项在数组中的位置，没有找到的情况下返回-1
1、匹配时会使用全等操作符，即要求查找的项必须严格相等。
2、数组的位置方法是ECMAScript5为数组实例新增的，所以支
持的浏览器只有：IE9+、Firefox2+、Safari3+、Opera9.5和Chrome。
String：
charAt（） //字符查找
stringObject.charAt(index)
功能：返回stringObject中index位置的字符。
。
charCodeAt（） //字符/查找，返回unicode
stringObject.charCodeAt(index)
功能返回stringObject中index位置字符的字符编码
ECMAScript5中可使用“方括号加字符索引”来访问字符串中特定的字
符，但是IE7及更早的浏览器会返回undefined。
indexOf（） //从前向后查找字符串
stringObject.indexOf(“0”)
功能：从一个字符串中搜索给定的子字符串，返回子字符串的位置。
返回值：数值，如果没有找到该子字符串，则返回-1。
lastIndexOf（） //从后向前查找字符串
stringObject.lastIndexOf(“o”)
功能：从一个字符串中搜索给定的子字符串，返回子字符串的位置
返回值：数值，如果没有找到该子字符串，则返回-1
String切片：
slice（） //字符串切片
stringValue.slice(start,end)
说明：当参数为负数时，会将传入的负值与字符串的长度相加，原字符
串不变。
substring（） //字符串切片
stringValue.substring(start,end)
说明：语法及功能同slice（）完全一样。
区别在于：当参数为负数时，自动将参数转换为 0；会将较小的数作为
开始位置，将较大的数作为结束位置，原字符串不变。
substr（） //字符串切片
stringValue.substr(start,len)
功能：截取子字符串。
说明：len：可选，表示截取的字符总数，省略时截取至字符串的末尾。
当start为负数时，会将传入的负值与字符串的长度相加，原字符串不变。
所有的切片都是原字符串不变，返回切片的字符串。
split（） //字符串该数组
stringObject.split(separator)
功能：把一个字符串分隔成字符串数组，sseparator需要是字符串内的字
符，并且分隔后字符该字符消失，原字符串不变。
返回值：分隔后的数组Array
说明：separator：必需，分隔符。
replace（） //字符串替换
stringObject.replace(regexp/substr,replacement)
功能：在字符串中用一些字符替换另一些字符，或替换一个与正则表达
式匹配的子串，原字符串不变。
返回值：替换后的新字符串String
参数：regexp：必需。规定子字符串或要替换的模式的 RegExp 对象。
replacement：：必需。一个字符串值。
.toUpperCase（） //字符串转大写
stringValue.toUpperCase（）
功能：把字符串转换为大写，原字符串不变。

.toLowerCase（） //字符串转小写
stringValue.toLowerCase（）
功能：把字符串转换为小写，原字符串不变。
Math方法：
Math.min（） //取最小值
Math.min(num1，num2，…，numN)
功能：求一组数中的最小值；返回值：Number
Math.max（） //取最大值
Math.max(num1，num2，…，numN)
功能：求一组数中的最大值；返回值：Number
Math.ceil（） //向上取整
Math.ceil(num)
功能：向上取整，即返回大于num的最小整数；返回值：Number
Math.floor（） //向下取整
Math.floor(num)
功能：向下取整，返回num的整数部分；返回值：Number
Math.round（） //四舍五入
Math.round(num)
功能：将数值四舍五入为最接近的整数；返回值：Number
Math.abs（） //取绝对值
Math.abs(num)
功能：返回num的绝对值；返回值：Number
Math.random（） //随机函数
Math.random（）
功能：返回大于等于0小于1的一个随机数；返回值：Number。
n到m之间随机整数的公式：random=Math.floor(Math.random（）*(m-n+1)+n)；

date（）方法：
new Date（）
功能：创建一个日期时间对象
返回值：不传参的情况下，返回当前的日期时间对象。
说明：如果想根据特定的日期和时间创建日期对象，必须传入表示该日
期的毫秒数或者是一组用逗号隔开的表示年月日时分秒的参数。
获取年月日时分秒及星期的方法
1、getFullYear（）：返回4位数的年份
2、getMonth（）：返回日期中的月份，返回值为0-11
3、getDate（）：返回月份中的天数
4、getDay（）：返回星期，返回值为0-6
5、getHours（）：返回小时
6、getMinutes（）：返回分
7、getSeconds（）：返回秒
8、getTime（）：返回表示日期的毫秒数
设置年月日时分秒及星期的方法
1、setFullYear(year)：设置4位数的年份
2、setMonth(mon)：设置日期中的月份，从0开始，0表示1月
3、setDate（）：设置日期
4、setDay（）：设置星期，从0开始，0表示星期日
5、setHours（）：设置小时
6、setMinutes（）：设置分
7、setSeconds（）：设置秒
8、setTime（）：以毫秒数设置日期，会改变整个日期

DOM：
语法：document.getElementById(“id”)
功能：返回对拥有指定ID的第一个对象的引用
返回值：DOM对象

 document.getElementsByTagName(“tag”)
 功能：返回一个对所有tag标签引用的集合
 返回值：数组

动态元素设置CSS样式
ele.style.styleName=styleValue
功能：设置ele元素的CSS 样式
说明：样式的名称不能使用“-”连字符形式font-size，要使用驼峰命名形
式fontSize；ele必须是DOM元素，通过getElementsByTagName(“tag”)获取到的是数组，数组项才是DOM对象；同时document代表从页面中
获取元素，如果是从页面中获取了DOM对象，再获取DOM对象中的DOM对象，则需要省略document，例如var lis=document.getElementById(“list”)
.getElementsByTagName(“li”),意思是获取id为list的DOM对象中的”li”DOM对象（稍后研究）。
DOM元素上添加删除获取属性
.innerHTML
ele.innerHTML //获取HTML代码
功能：返回ele元素开始和结束标签之间的HTML

 ele.innerHTML=”html”   //设置HTML代码
 功能：设置ele元素开始和结束标签之间的HTML内容为html

.className
ele.className //获取class属性
功能：返回ele元素的class属性

 ele.className=”cls”   //设置class属性
 功能：设置ele元素的class属性为cls，即为ele添加class属性或修改类名。

获取属性
.getAttribute（）
ele.getAttribute(“attribute”) //获取HTML属性
功能：获取ele元素的attribute属性
说明： ele是要操作的DOM对象；attribute是要获取的html属性（如：id、type）

 ele.setAttribute(“attribute”,value)   //设置HTML属性
 功能：在ele元素上设置属性
 说明： ele是要操作的DOM 对象；attribute为要设置的属性名称；value为设置的attribute属性的值

删除属性
.removeAttribute()
ele.removeAttribute(“attribute”) //删除HTML属性
功能：删除ele上的attribute属性
说明： ele是要操作的DOM对象；attribute是要删除的属性名称

JavaScript事件
DOM0级事件
语法：ele.事件=执行脚本
功能：在DOM对象上绑定事件
说明：执行脚本可以是一个匿名函数，也可以是一个函数的调用。
鼠标事件：
onload：页面加载时触发
onclick：鼠标点击时触发
onmouseover：鼠标划过时触发
onmouseout：鼠标离开时触发
onfocus：获得焦点时触发
onblur：失去焦点时触发
onchange：域的内容改变时发生
onsubmit：表单中的确认按钮被点击时发生
onmousedown：鼠标按钮在元素上按下时触发
onmousemove：在鼠标指针移动时发生
onmouseup：在元素上松开鼠标按钮时触发
onresize：当调整浏览器窗口的大小时触发
onscroll：拖动滚动条滚动时触发
键盘事件与keyCode属性：
onkeydown：在用户按下一个键盘按键时发生
onkeypress：在键盘按键被按下并释放一个键时发生
onkeyup：在键盘按键被松开时发生
keyCode：返回onkeypress、onkeydown 或 onkeyup事件触发的键的值
的字符代码，或者的键的代码。
this指向
在事件触发的函数中，this是对该DOM对象的引用。

 当父元素绑定了事件，子元素通过冒泡也会绑定该事件，通过阻止冒泡可以阻止该行为，例如对最外层子元素设置：
 DOM.onmouseout=function(e){
e.stopPropagation();

JavaScript BOM
window
window是浏览器的一个实例，在浏览器中，window对象有双重角色，
它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规
定的Global对象。
.alert() //弹出警告窗
window.alert(“content”)
功能：显示带一段消息和一个确认按钮的警告框
.confirm（） //弹出确认框
window.confirm(“message”)
功能：显示一个带有指定消息和OK及取消按钮的对话框
返回值：如果用户点击确认按钮，则confirm()返回true；如果用户点击
取消按钮，则confirm()返回false
.prompt() //弹出消息框
window.prompt(“text，defaultText”)
说明：text：要在对话框中显示的纯文本（而不是HTML格式的文本）
defaultText:默认的输入文本
返回值：如果用户单击提示框的取消按钮，则返回null;如果用户单击确
认按钮，则返回输入字段当前显示的文本
.open() //打开新链接
window.open(pageUR，name，parameters)
功能：打开一个新的浏览器窗口或查找一个已命名的窗口
说明：pageURL：子窗口路径；name:子窗口句柄；parameters:窗口参数
.close() //关系浏览器
window.close()
功能：关闭浏览器窗口
setTimeout（） //超时调用
setTimeout(code，millisec)
功能：在指定的毫秒数后调用函数或计算表达式
说明： code表示要调用的函数或要执行的JavaScript代码串；millisec
表示在执行代码前需等待的毫秒数，多次调用可以让code自身再次调
用setTimeout()
clearTimeout() //清除超时调用
clearTimeout(id_of_settimeout)
功能：取消由setTimeout()方法设置的timeout
说明：id_of_settimeout:由setTimeout()返回的ID值，该值标识要取消的
延迟执行代码块
setInterval() //间歇调用
setInterval(code，millisec)
功能：每隔指定的时间执行一次代码
说明：code表示要调用的函数或要执行的代码串；millisec表示周期性执
行或调用code之间的时间间隔，以毫秒计
location：
location对象提供了与当前窗口中加载的文档有关的信息，还提供了一些
导航的功能，它既是window对象的属性，也是document对象的属性。
location对象的常用属性
.href
location.href
功能：返回当前加载页面的完整URL
说明：location.href与window.location.href等价
.hash
location.hash
功能：返回URL中的hash（#号后 跟零或多个字符），如果不包含则返
回空字符串。
.host
location.host
功能：返回服务器名称和端口号（如果有）
.hostname
location.hostname
功能：返回不带端口号的服务器名称。
.pathname
location.pathname
功能：返回URL中的目录和（或）文件名。
.port
location.port
功能：返回URL中指定的端口号，如果没有，返回空字符串。
.protocol
location.protocol
功能：返回页面使用的协议。
.search
location.search
功能：返回URL的查询字符串。这个字符串以问号开头。

位置操作
改变浏览器位置的方法：

.replace()
location.replace(url)
功能：重新定向URL。
说明：使用location.replace不会在历史记录中生成记录。
reload()
location.reload()
功能：重新加载当前显示的页面。
说明：location.reload()有可能从缓存中加载；location.reload(true)从服务器重新加载

history历史对象
.back()
回到历史记录的上一步
说明：相当于使用了history.go(-1)
.forward()
location.forward()
功能：回到历史记录的下一步
说明：相当于使用了history.go(1)
.go（）
history.go(n)
功能：回到历史记录的后n步

Screen对象及其常用属性
.availWidth
screen.availWidth
功能：返回可用的屏幕宽度
.availHeight
screen.availHeight
功能：返回可用的屏幕高度
Navigator对象的userAgent属性
UserAgent：用来识别浏览器名称、版本、引擎 以及操作系等信息内容。

使用魔法模板: