js day4

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)