1、数组
1、关联数组
var arr = [];
arr["key1"] = value1;
for(var i in arr){
i : 既能表示索引下标也能表示字符串下标
}
2、API
1、toString()
2、join()
3、concat()
4、reverse()
会改变现有数组的结构
5、sort()
默认按照Unicode码排序
按数字方式排序,需要指定排序函数
1、声明排序函数
function sortAsc(a,b){
return a-b;
}
arr.sort(sortAsc);
2、匿名函数
arr.sort( function(a,b){return b-a;} );
6、进出栈操作
1、push() : 尾部增加,返回新长度
2、pop() : 尾部删除,返回删除元素
3、unshift() : 头部增加,返回新长度
4、shift() : 头部删除,返回删除元素
7、二维数组
var arr = [
[1,2,3,4],
[5,6,7,8],
[8,7,6,5],
[4,3,2,1]
];
2、字符串
1、声明字符串
var str1 = "";
var str2 = String("");
var str3 = new String("");
2、length 属性
3、常用函数
1、大小写转换
1、toLowerCase()
2、toUpperCase()
2、获取指定位置的字符或Unicode码
1、charAt(index)
2、charCodeAt(index)
3、检索字符串
1、indexOf(value,fromIndex)
2、lastIndexOf(value,fromIndex)
4、截取子字符串
1、substring(start,end)
从start到end-1的子字符串,如果省略end的话,则截取到字符串结尾
5、分割字符串
1、split(seperator)
返回拆分后的数组
6、模式匹配
1、replace(substr/regexp,replacement)
2、match(substr/regexp)
3、search(substr/regexp)
3、内置对象
1、RegExp
1、声明RegExp对象
1、var regExp = /pattern/flags
2、var regExp = new RegExp("pattern","flags");
2、函数
1、test(string)
返回 true 或 false
2、exec(string)
返回满足格式的字符串的对象
2、Math对象
Math.PI
Math.pow(x,y);x的y次方
Math.abs() 求绝对值
Math.random() 获取随机数
Math.round() 四舍五入到整数
3、Date对象
1、创建Date对象
var now = new Date();
var date = new Date("2018/1/9 10:00:00");
2、方法
1、读取自1970.1.1以来到时间对象所经过的毫秒数
getTime()
2、读取当前年份
getFullYear()
3、读取年份
getYear()
返回自1900年到日期对象所经过的年数
4、读取月份
getMonth()
返回:0-11表示1-12月
5、读取日
getDate()
6、读取星期
getDay()
返回 0-6表示 日-六
7、获取时分秒
getHours()
getMinutes()
getSeconds()
8、转换为字符串
1、toString()
2、toLocaleTimeString()
返回 时分秒
3、toLocaleDateString()
返回 年月日
===============================================
1、外部对象
1、BOM 和 DOM
BOM :Browser Object Model - 浏览器对象模型
将浏览器比喻成一个对象,可以通过该对象灵活的操控浏览器:地址栏,历史记录,...
DOM :Document Object Model - 文档对象模型
将整个HTML文档比喻成一个对象,可以通过该对象灵活的操控文档中的内容
2、window对象
1、作用
表示整个浏览器窗口
JS中一部分的全局函数,属性都是属于window的成员。在使用这些成员时可以省略window
window.alert() --> alert()
window.prompt() --> prompt()
2、属性
1、document :表示窗口中的HTML文档对象,同时也是DOM中的顶级元素
2、history:当前窗口所浏览过的历史记录
3、location:当前窗口的地址栏对象
4、screen:当前屏幕对象
5、navigator:浏览器的相关信息
3、window中的对话框
1、警告框
window.alert() / alert()
2、输入框
window.prompt() / prompt()
3、确认框
window.confirm() / confirm()
按"确定"按钮的话,则返回 true
其余操作 返回 false
4、window中的定时器
1、定时器的分类
1、周期性定时器
每间隔一段时间,就执行一遍程序,反复执行
2、一次性定时器
在指定的时间间隔之后,只执行一次操作
2、周期性定时器
1、声明定时器
var ret = setInterval(fun,time);
fun:要周期性执行的操作,可以是一个匿名函数
time:时间间隔周期,以毫秒为单位
ret:返回已创建好的定时器对象
2、清除定时器
clearInterval(timer);
timer:要停止的定时器对象
3、一次性定时器
1、声明定时器
var ret = setTimeout(fun,time);
fun:等待一定时间后要执行的一次操作,匿名函数
time:等待时长,以毫秒为单位
ret:已启动的定时器对象
2、清除定时器
clearTimeout(timer);
5、window的属性详解
1、screen
作用:获取客户端显示器的相关信息
属性:
1、width / height
2、availWidth / avialHeight
2、history
1、作用
包含当前窗口所访问过的URL地址们
2、属性 & 方法
1、属性
lenght : 访问过的URL数量
2、方法
1、back() -- 后退
2、forward() -- 前进
3、go(num)
去往历史记录中的第num个页面
go(1) : 前进一步
go(-1): 后退一步
3、location
1、作用
表示浏览器地址栏的信息
2、属性 & 方法
1、href
表示当前窗口中正在浏览的地址
如果为 href 设置值的话,相当于实现浏览器跳转的功能
2、reload()
重新加载当前网页,等同于刷新
4、navigator
1、作用
包含浏览器的相关信息
2、属性
1、userAgent
显示浏览器的相关信息
3、document对象(重点)
1、document的概述
document 是DOM中的顶级对象,封装了所有和HTML文档相关的属性,方法和事件。网页加载时,会自动创建document对象。
网页在加载HTML的时候,会在内存中形成一颗节点树(DOM树),DOM树的根就是document。页面上的每一个元素就是DOM树上的每一个节点。
DOM中所提供的操作:
1、查找节点的信息
2、读取节点的信息
3、修改节点的信息
4、删除节点
5、创建节点
2、查找节点
1、通过元素的id查找
var elem = document.getElementById("元素ID");
元素ID:要获取的元素的ID值
elem:所得到的元素对象 - DOM对象/元素
DOM对象的属性:
1、innerHTML
修改(获取)或设置当前DOM对象的HTML文本值
2、innerText
修改(获取)或设置当前DOM对象的文本值
表单控件对象的属性
1、value
3、读取节点的信息
1、节点类型
1、元素节点
表示页面上的一个元素
2、属性节点
表示元素的一个属性
3、文本节点
表示元素内的文本
4、注释节点
表示网页上的一个注释
5、文档节点
表示html文档
属性:nodeType
值:
返回1:元素节点
返回2:属性节点
返回3:文本节点
返回8:注释节点
返回9:文档节点
2、节点名称
属性:nodeName
元素节点 或 属性节点 :标签名 或 属性名
文本节点:永远都是#text
文档节点:永远都是#document
注释节点:永远都是#comment
4、获取 或 设置 元素节点的属性
1、方法
1、getAttribute(attrName)
作用:获取指定属性的值
attrName :要获取的属性的名称
返回值:attrName属性的值
2、setAttribute(attrName,attrValue)
作用:修改指定属性的值
attrName:要修改的属性名
attrValue:要设定的值
3、removeAttribute(attrName)
作用:将 attrName 属性从当前节点中移除出去
练习:
1、创建一个网页 012-dom-attribute.html
2、创建a标记,链接地址为:http://www.baidu.com
3、创建一个按钮,显示的文本为 修改
4、点击按钮时
将超链接地址修改为:http://www.qq.com
将超链接文本修改为:腾讯
5、元素节点的样式
1、使用 setAttribute() 设置 class 属性的值
elem.setAttribute("class","class属性值");
2、使用元素的 className 属性修改class的值
elem.className = '类选择器名称';
3、自定义元素样式
elem.style.css属性名 = 值;
注意:
如果css属性名称中包含-的话,连字符(-)要取消,并且后面的第一个字符变大写
ex:
elem.style.color="red";
elem.style.fontSize="18px";
elem.style.borderRightColor="red";
6、查询节点
1、通过 id 查询
var elem=document.getElementById(id);
2、根据层级节点查询
1、parentNode
根据当前元素的层级结构,返回父元素节点
2、childNodes
根据当前元素的层级结构,返回多个子节点(子节点数组)
注意:
能够获取文本节点,元素节点,注释节点
如果只需要某一种节点的话,需要使用nodeType进行判断
3、通过标签名称进行查询
语法:document|elem.getElementsByTagName(tagName);
返回值:包含指定标记们的数组
4、通过元素的name属性来查询节点
语法:document|elem.getElementsByName(name)
返回值:返回包含指定name属性值的元素的数组
5、通过元素的class值查询节点
语法:document|elem.getElementsByClassName(className)
1、关联数组
var arr = [];
arr["key1"] = value1;
for(var i in arr){
i : 既能表示索引下标也能表示字符串下标
}
2、API
1、toString()
2、join()
3、concat()
4、reverse()
会改变现有数组的结构
5、sort()
默认按照Unicode码排序
按数字方式排序,需要指定排序函数
1、声明排序函数
function sortAsc(a,b){
return a-b;
}
arr.sort(sortAsc);
2、匿名函数
arr.sort( function(a,b){return b-a;} );
6、进出栈操作
1、push() : 尾部增加,返回新长度
2、pop() : 尾部删除,返回删除元素
3、unshift() : 头部增加,返回新长度
4、shift() : 头部删除,返回删除元素
7、二维数组
var arr = [
[1,2,3,4],
[5,6,7,8],
[8,7,6,5],
[4,3,2,1]
];
2、字符串
1、声明字符串
var str1 = "";
var str2 = String("");
var str3 = new String("");
2、length 属性
3、常用函数
1、大小写转换
1、toLowerCase()
2、toUpperCase()
2、获取指定位置的字符或Unicode码
1、charAt(index)
2、charCodeAt(index)
3、检索字符串
1、indexOf(value,fromIndex)
2、lastIndexOf(value,fromIndex)
4、截取子字符串
1、substring(start,end)
从start到end-1的子字符串,如果省略end的话,则截取到字符串结尾
5、分割字符串
1、split(seperator)
返回拆分后的数组
6、模式匹配
1、replace(substr/regexp,replacement)
2、match(substr/regexp)
3、search(substr/regexp)
3、内置对象
1、RegExp
1、声明RegExp对象
1、var regExp = /pattern/flags
2、var regExp = new RegExp("pattern","flags");
2、函数
1、test(string)
返回 true 或 false
2、exec(string)
返回满足格式的字符串的对象
2、Math对象
Math.PI
Math.pow(x,y);x的y次方
Math.abs() 求绝对值
Math.random() 获取随机数
Math.round() 四舍五入到整数
3、Date对象
1、创建Date对象
var now = new Date();
var date = new Date("2018/1/9 10:00:00");
2、方法
1、读取自1970.1.1以来到时间对象所经过的毫秒数
getTime()
2、读取当前年份
getFullYear()
3、读取年份
getYear()
返回自1900年到日期对象所经过的年数
4、读取月份
getMonth()
返回:0-11表示1-12月
5、读取日
getDate()
6、读取星期
getDay()
返回 0-6表示 日-六
7、获取时分秒
getHours()
getMinutes()
getSeconds()
8、转换为字符串
1、toString()
2、toLocaleTimeString()
返回 时分秒
3、toLocaleDateString()
返回 年月日
===============================================
1、外部对象
1、BOM 和 DOM
BOM :Browser Object Model - 浏览器对象模型
将浏览器比喻成一个对象,可以通过该对象灵活的操控浏览器:地址栏,历史记录,...
DOM :Document Object Model - 文档对象模型
将整个HTML文档比喻成一个对象,可以通过该对象灵活的操控文档中的内容
2、window对象
1、作用
表示整个浏览器窗口
JS中一部分的全局函数,属性都是属于window的成员。在使用这些成员时可以省略window
window.alert() --> alert()
window.prompt() --> prompt()
2、属性
1、document :表示窗口中的HTML文档对象,同时也是DOM中的顶级元素
2、history:当前窗口所浏览过的历史记录
3、location:当前窗口的地址栏对象
4、screen:当前屏幕对象
5、navigator:浏览器的相关信息
3、window中的对话框
1、警告框
window.alert() / alert()
2、输入框
window.prompt() / prompt()
3、确认框
window.confirm() / confirm()
按"确定"按钮的话,则返回 true
其余操作 返回 false
4、window中的定时器
1、定时器的分类
1、周期性定时器
每间隔一段时间,就执行一遍程序,反复执行
2、一次性定时器
在指定的时间间隔之后,只执行一次操作
2、周期性定时器
1、声明定时器
var ret = setInterval(fun,time);
fun:要周期性执行的操作,可以是一个匿名函数
time:时间间隔周期,以毫秒为单位
ret:返回已创建好的定时器对象
2、清除定时器
clearInterval(timer);
timer:要停止的定时器对象
3、一次性定时器
1、声明定时器
var ret = setTimeout(fun,time);
fun:等待一定时间后要执行的一次操作,匿名函数
time:等待时长,以毫秒为单位
ret:已启动的定时器对象
2、清除定时器
clearTimeout(timer);
5、window的属性详解
1、screen
作用:获取客户端显示器的相关信息
属性:
1、width / height
2、availWidth / avialHeight
2、history
1、作用
包含当前窗口所访问过的URL地址们
2、属性 & 方法
1、属性
lenght : 访问过的URL数量
2、方法
1、back() -- 后退
2、forward() -- 前进
3、go(num)
去往历史记录中的第num个页面
go(1) : 前进一步
go(-1): 后退一步
3、location
1、作用
表示浏览器地址栏的信息
2、属性 & 方法
1、href
表示当前窗口中正在浏览的地址
如果为 href 设置值的话,相当于实现浏览器跳转的功能
2、reload()
重新加载当前网页,等同于刷新
4、navigator
1、作用
包含浏览器的相关信息
2、属性
1、userAgent
显示浏览器的相关信息
3、document对象(重点)
1、document的概述
document 是DOM中的顶级对象,封装了所有和HTML文档相关的属性,方法和事件。网页加载时,会自动创建document对象。
网页在加载HTML的时候,会在内存中形成一颗节点树(DOM树),DOM树的根就是document。页面上的每一个元素就是DOM树上的每一个节点。
DOM中所提供的操作:
1、查找节点的信息
2、读取节点的信息
3、修改节点的信息
4、删除节点
5、创建节点
2、查找节点
1、通过元素的id查找
var elem = document.getElementById("元素ID");
元素ID:要获取的元素的ID值
elem:所得到的元素对象 - DOM对象/元素
DOM对象的属性:
1、innerHTML
修改(获取)或设置当前DOM对象的HTML文本值
2、innerText
修改(获取)或设置当前DOM对象的文本值
表单控件对象的属性
1、value
3、读取节点的信息
1、节点类型
1、元素节点
表示页面上的一个元素
2、属性节点
表示元素的一个属性
3、文本节点
表示元素内的文本
4、注释节点
表示网页上的一个注释
5、文档节点
表示html文档
属性:nodeType
值:
返回1:元素节点
返回2:属性节点
返回3:文本节点
返回8:注释节点
返回9:文档节点
2、节点名称
属性:nodeName
元素节点 或 属性节点 :标签名 或 属性名
文本节点:永远都是#text
文档节点:永远都是#document
注释节点:永远都是#comment
4、获取 或 设置 元素节点的属性
1、方法
1、getAttribute(attrName)
作用:获取指定属性的值
attrName :要获取的属性的名称
返回值:attrName属性的值
2、setAttribute(attrName,attrValue)
作用:修改指定属性的值
attrName:要修改的属性名
attrValue:要设定的值
3、removeAttribute(attrName)
作用:将 attrName 属性从当前节点中移除出去
练习:
1、创建一个网页 012-dom-attribute.html
2、创建a标记,链接地址为:http://www.baidu.com
3、创建一个按钮,显示的文本为 修改
4、点击按钮时
将超链接地址修改为:http://www.qq.com
将超链接文本修改为:腾讯
5、元素节点的样式
1、使用 setAttribute() 设置 class 属性的值
elem.setAttribute("class","class属性值");
2、使用元素的 className 属性修改class的值
elem.className = '类选择器名称';
3、自定义元素样式
elem.style.css属性名 = 值;
注意:
如果css属性名称中包含-的话,连字符(-)要取消,并且后面的第一个字符变大写
ex:
elem.style.color="red";
elem.style.fontSize="18px";
elem.style.borderRightColor="red";
6、查询节点
1、通过 id 查询
var elem=document.getElementById(id);
2、根据层级节点查询
1、parentNode
根据当前元素的层级结构,返回父元素节点
2、childNodes
根据当前元素的层级结构,返回多个子节点(子节点数组)
注意:
能够获取文本节点,元素节点,注释节点
如果只需要某一种节点的话,需要使用nodeType进行判断
3、通过标签名称进行查询
语法:document|elem.getElementsByTagName(tagName);
返回值:包含指定标记们的数组
4、通过元素的name属性来查询节点
语法:document|elem.getElementsByName(name)
返回值:返回包含指定name属性值的元素的数组
5、通过元素的class值查询节点
语法:document|elem.getElementsByClassName(className)