Javascript进阶

数组

创建新数组
var myarr/数组名/=new Array(3/存储元素个数/)/创建一个新的空数组/;
myarr[0]=88;
myarr[1]=99;
myarr[2]=100;
赋值
var myarr=[1,2,3,4,];
或var myarr=new Array(1,2,3,4);
数组属性（length）
var myarr=[1,2,3,4];
document.wrie(myarr.length);
myarr.length=6;/增大数组长度/
二维数组
①
var myarr=new Array(); //先声明一维
for(var i=0;i<2;i++){ //一维长度为2
myarr[i]=new Array(); //再声明二维
for(var j=0;j<3;j++){ //二维长度为3
myarr[i][j]=i+j; // 赋值，每个数组元素的值为i+j
}
}
②
var myarr=[0,1,2][1,2,3];

流程控制语句

①if②if else③switch④for⑤while⑥break⑦continue

函数

function sub2()                     //定义函数 {   sub=5-2;   alert("5和2的差:"+sub); }

事件

function openwin(){ window.open(‘http://www.imooc.com‘,’_blank’,’height=600,width=400,top=100,toolbar=no,left=0,menubar=no,scrollbars=no,status=no’);}

 <input name="点击我" type="button" value="点击我"onclick="openwin()"/>

对象

1、定义

JavaScript 中的所有事物都是对象，如:字符串、数值、数组、函数等，每个对象带有属性和方法。

对象的属性
反映该对象某些特定的性质的，如：字符串的长度、图像的长宽等；
语法：objectName.propertyName
例：
var myarray=new Array(6);//定义数组对象
var myl=myarray.length;//访问数组长度length属性
执行后，myl=6。
对象的方法
能够在对象上执行的动作。例如，表单的“提交”(Submit)，时间的“获取”(getYear)等；
语法：objectName.methodName()
var mystr=”Hello world!”;//创建一个字符串
var request=mystr.toUpperCase(); //使用字符串对象方法
执行后，request的值是“Hello world!”

Date日期对象

定义
①var Udate=new Date(); //使 Udate 成为日期对象，并且已有初始值：当前时间(当前电脑系统时间)。顺序：星期 月 日 年 时间 时区。
②var d = new Date(2012, 10, 1); //2012年10月1日
var d = new Date(‘Oct 1, 2012’); //2012年10月1日

get/setFullYear()
var mydate=new Date();//当前时间2014年3月6日
document.write(mydate+”
”);//输出当前时间
document.write(mydate.getFullYear()+”
”);//输出当前年份
mydate.setFullYear(81); //设置年份
document.write(mydate+”
”); //输出年份被设定为 0081年。
结果
Thu Mar 06 2014 10:57:47 GMT+0800
2014
Thu Mar 06 0081 10:57:47 GMT+0800

get/setDay
var weekday = [“星期日”, “星期一”, “星期二”, “星期三”, “星期四”, “星期五”, “星期六”];
document.write(weekday[currentDate.getDay());
//转化成星期几的算法

get/setTime()

<script type="text/javascript">var mydate=new Date();document.write("当前时间："+mydate+"<br>");mydate.setTime(mydate.getTime() + 60 * 60 * 1000);document.write("推迟一小时时间：" + mydate);</script>1h=60min;1min=60s;1s=1000ms;

String字符串对象

属性
var mystr=”Hello World!”;
var myl=mystr.length;
对象
var mystr=”Hello world!”;
var mynum=mystr.toUpperCase();//大写
var mynum=mystr.toLowerCase();//小写

返回指定位置的字符

<script type="text/javascript">  var mystr="I love JavaScript!"  document.write(mystr.charAt(2));</script>结果为：l

返回指定的字符串首次出现的位置
stringObject.indexOf(substring, startpos)
//substring:必需，规定需检索的字符串。
//startpos：可选，开始地址。

字符串分割split()
stringObject.split(separator,limit)
//separator：必需，指定的位置分割。
//limit：可选，分割的次数。

提取字符串substring()
stringObject.substring(startPos,stopPos)
//startPos:起始位置
//stopPot：结束位置

提取指定数目的字符substr()
stringObject.substr(startPos,length)

Math对象

实例

var mypi=Math.PI;
var myabs=Math.abs(-15);
document.write(mypi);
document.write(myabs);

结果
3.141592653589793
15

属性

方法

注：round(-5.5)=-5;round(5.5)=6;

数组对象

定义
var 数组名= new Array();
var 数组名 =new Array(n);
var 数组名 = [<元素1>, <元素2>, <元素3>…];

属性：length

方法

①数组连接concat()
arrayObject.concat(array1,array2,……arrayN)
②指定分隔符连接数组join
separator:可选，指定要使用的分隔符。默认逗号。
arrayObject.join(分隔符);
③颠倒数组元素顺序reverse()
arrayObject.reverse()
④选定元素slice（）
array.object(start,end);
start:必需。包含
end:非必需。不包含
⑤数组排序sort()
arrayObject.sort(方法函数：可选。默认unicode)；
function sortNum(a,b) {
return a-b;
}
若返回值<=-1，则表示 A 在排序后的序列中出现在 B 之前。
若返回值>-1 && <1，则表示 A 和 B 具有相同的排序顺序。
若返回值>=1，则表示 A 在排序后的序列中出现在 B 之后。

浏览器对象

window对象

js计时器

计时器setIntervall()
语法：setIntervall(代码，交互时间）;
返回值：一个可以传递给 clearInterval() 从而取消对”代码”的周期性执行的值。
显示时间函数

  var attime;  function clock(){    var time=new Date();              attime=time.getHours()+":"+time.getMinutes()+":"+time.getSeconds();    document.getElementById("clock").value = attime;  }  setInterval(clock,1000); 

取消计时器clearInterval(id_of_setInterval)

计时器setTimeout()
setTimeout(代码，交互时间)；

取消计时器clearTimeout(id_of_setTimeout)

History对象

window.history.[属性|方法];

属性
length:返回浏览器历史中的URL数量。
方法
back():加载history列表的前一个URL。window.history.back()=windows.history.go(-1);
forward():加载history列表的下一个URL。window.history.forward()=windows.history.go(+1);
go():加载history列表的中的某个具体的页面。windows.history.go(number);

location对象

获取窗体的URL，并且可以用于解析URL。

对象属性图示

属性

方法

navigator对象

Navigator 对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本。

对象属性

userAgent
语法：navigator.userAgent();
几种浏览器的user_agent。（360兼容模式用的IE，极速模式用的chrome的内核）

判断使用的是什么浏览器的函数

  function validB(){     var u_agent =navigator.userAgent;     var B_name="不是想用的主流浏览器!";     if(u_agent.indexOf("Firefox")>-1){         B_name="Firefox";     }else if(u_agent.indexOf("Chrome")>-1){         B_name="Chrome";     }else if(u_agent.indexOf("MSIE")>-1&&u_agent.indexOf("Trident")>-1){         B_name="IE(8-10)";      }        document.write("浏览器:"+B_name+"<br>");        document.write("u_agent:"+u_agent+"<br>");   } 

screen对象

用于获取用户的屏幕信息

语法：
windows.screen.属性
属性：

DOM对象

示例代码

dom节点层次图

dom节点包括
1、元素节点：上图中

等都是元素节点，即标签。
2、文本节点：向用户展示的内容如

….

中的js、dom、css等 文本。
3、属性节点：元素属性，如标签的链接属性href=”http//imooc.com”。

遍历节点树

以上图ul节点为例，父节点body，子节点三个li，兄弟节点h2，p。

dom操作

注意：前两个为document操作。

1、getElementsByName方法
语法：getElementsByName();
注意：name属性可能不唯一，可能返回一组数组。

2、getElementsByTagName方法
标签名，如p，a，img等。

3、区别getElementById、getElementsByName、getElementsByTagName
身份证号码、名字、老人\小孩

4、getAttribute()方法
通过元素节点的属性获取属性的值
语法：elementNode.getAttribute(name)。
elementNode：使用getElementById/Name/TagName获取的到的元素节点。
name：想要查询元素节点的属性名字。

5、setAttribute()方法
增加一个指定名称和值的新属性，或者把一个现有的属性设置为指定的值。
语法：elementNode.setAttributte(name ,value);
name：要设置的属性名。
value：要设置的属性值。

节点属性

1、nodeName属性：节点的名称，只读的。
元素节点的nodeName与标签名相同；
属性节点的nodeName是属性的名称；
文本节点的nodeName永远是#text；
文档节点的nodeName永远是#document；

2、nodeValue属性：节点的值
元素节点的nodeValue是undefined或者是null；
文本节点的nodeValue是文本自身；
属性节点的nodeValue是属性的值；

3、nodeType属性：节点的类型，只读
元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9

访问子节点childNodes
语法：elementNode.childNodes；
注意：如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。

访问子节点第一项和最后一项first/lastNodes
语法：node.first/lastChild；
说明：与elementNode.childNodes[0]和elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。

访问父节点parentNode
获取指定 节点的父节点。
语法：elementNode.parentNode;
注意：父节点只有一个。
访问祖节点：elementNode.parentNode.parentNode。

innerHTML
设置或者返回表格行间的开始和结束标签之间的HTML。
tablerowObject.innerHTML=HTML。

访问 兄弟节点
① nextSibling 属性可返回某个节点之后紧跟的节点（处于同一树层级中）。
语法：nodeObject.nextSibling；
②previousSibling 属性可返回某个节点之前紧跟的节点（处于同一树层级中）。
语法：nodeObject.previousSibling：
注意：若无此节点，则该属性返回NULL。

插入节点appendChild()
在指定节点的最后一个子节点列表之后添加一个新的子节点。
语法：node.appendChild(newnode)；

插入节点insertBefore()
insertBefore() 方法可在已有的子节点前插入一个新的子节点。
语法：node.insertBefore(newnode,node)；
newnode：要插入的新节点；
node：指定此节点前插入新节点。

删除节点removeChild()
removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。
语法：nodeObject.removeChild(node)；
node：必需，指定要删除的节点。

替换元素节点replaceChild()
replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。
语法：node.replaceChild(newnode,oldnode)；
newnode：必需，用于替换oldnode的对象。
oldnode：必需，被newnode替换的对象。
注意：newnode必须先被建立。
方法：var newnode=document.createElement(“p”);
var newnodeText=document.createTextNode(“JavaScript”);
newnode.appendChild(newnodeText);

创建元素节点creatElement()
createElement()方法可创建元素节点。此方法可返回一个 Element 对象。
语法：document.createElement(tagName)。
tagName：字符串值，用来指明创建元素的类型。

创建文本节点createTextNode()
createTextNode() 方法创建新的文本节点，返回新创建的 Text 节点。
语法：document.createTextNode(data)；
data : 字符串值，可规定此节点的文本。

浏览器窗口可视区域大小
获得浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）的方法：
var w= document.documentElement.clientWidth
|| document.body.clientWidth;
var h= document.documentElement.clientHeight
|| document.body.clientHeight;

网页尺寸scrollHeight和scrollWidth
scrollHeight和scrollWidth，获取网页内容高度和宽度。
var w=document.documentElement.scrollWidth
|| document.body.scrollWidth;
var h=document.documentElement.scrollHeight
|| document.body.scrollHeight;

网页尺寸offsetHeight和offsetWidth
offsetHeight和offsetWidth，获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)。
offsetHeight=clientHeight+滚动条+边框。
var w= document.documentElement.offsetWidth
|| document.body.offsetWidth;
var h= document.documentElement.offsetHeight
|| document.body.offsetHeight;