js之行

一：数组

//数组的构造的第一种方法
var arr=[1,2,3]
var arr=[1,"2",true]
//数组的构造的第二种方法
var arr1=new Array(5);//表示创建一个长度为5的数组
alert("arr1:"+arr1.length)//输出数组的长度
//数组的构造的第三种方法
var arr2=new Array(1,2,3);

二：方法的构造

//方法构造的第一种方法
function 方法名(参数列表){
方法体；
返回值（可有可无）
}
//实例1 无参
function test(){
alert("aaa");
}
//调用
test();
//实例2 有参
function test2(a,b){
var sum=a+b;
alert(sum);
}
//调用
test(2,3);

//方法构造的第二种方法

//匿名函数
var add=function(参数列表){
方法体和返回值;
}
//实例
var add3= function(m,n){
alert(m+n);
}

//调用
add3(5,6);

三：js的全局变量和局部变量
**全局变量：在js页面标签中定义一个变量，这个变量在页面中的js部分都可以使用
- 在方法的外部使用，在方法的内部使用，在另一个Script标签使用
**局部变量：在方法内部定义一个变量，只能在方法内部使用
- 在方法外部调用这个变量会出错

四：js的String对象
创建String对象
var Str="";
String属性
length 长度
方法
（1）和html相关的方法
- bold();//加粗
var str1="sss";
document.write(Str1.blid);
- fontcolor();//设置字符串的颜色
document.write(Str1.fontcolor("red"));
- fontsize();//范围数字1-7,设置字体的大小
document.write(Str1.fontsize(2));
- link();//让字符串显示成超链接
document.write(Str1.link("hello.html"));
- sub();//下标 
document.write(Str1.sub()); //几次方
- sup();//上标
var str2="sss";
document.write(Str1.sup());
（2）与java相似的方法
var str1="abc";
var str2="def";
- concat();//连接字符串的方法
document.write(Str1.concat(str2));//abcdef

- indexOf();//返回字符串的位置
document.write(Str1.indexOf("a"));
//字符串不存在返回-1
- split();//切分字符串，切分为数组
var str3="d-e-f";
var arr1=Str3.split("-");
document.write(Str3.length);
- replace();//将指定得字符串替换成你将要换成的字符串
document.write(str1.replace("a","ttt"));
- substr();和subString();
var str4="abcdefghuiop";
document.write(str4.sunstr(5,3));//fgh[5,3]
//从第五位开始向后截取3位
document.write(str4.sunstrng(5,3));//fg
//从第几位开始到第几位结束，但不包含最后一位[5,3)
五,js 的Array对象
**创建数组
-var arr1=[1,2,3];
-var arr2=new Array(3);
-var arr3=new Array(1,32,3);
**方法
-conact();//数组的连接
var arr1=[1,2,3];
var arr2=[4,5,6];
document.write(arr1.concat(arr2));//1,2,3,4,5,6
-join();//根据一个指定的字符进行数组分割
document.write(arr1.join("-"));//1-2-3
-push();//向数组的末尾添加一个或多个元素，返回新的数组长度
document.write(arr1.push("qwe"));//1,2,3,qwe
document.write(arr1.push(arr2));
//把数组arr2添加到arr1之后，新的数组长度为四，因为是把数组arr2整体当成一个元素添加到了arr1中
-pop();//删除最后一个元素并返回
document.write(arr1.pop());//返回3
-reverse();//倒序
document.write(arr1.reverse());
六.js的date对象
** js获取当前时间
var date=new Date();
document.write(date);//未格式化的时间
document.write(date.toLocaleString());//格式化后的时间
-getFullYear();//获取当前的年份
document.write(date.getFullYear());
-getMonth();//获取当前月份，注意，获取的月份是（0-11）
var month=date.getMonth();
document.write(month+1);
-getDay();//获取当前的星期，注意，获取的星期是（0-6）
-getDate();//获取当前的天
-getHours();//获取 当前的小时
-getMinutes();//获取当前的分钟
-getSeconds();//获取当前的秒
-getTime();//获取毫秒数
七
**数学
var mm=10.4;
-cell(x);//向上舍入
document.write(Math.ceil(mm));//11
-floor(x);//向下舍入
document.write(Math.fllor(mm));//10
-round(x);//四舍五入
document.write(Math.round(mm));//10
-random();//得到随机数（0-1），是伪随机数
document.write(Math.random());//小数0.23131441
document.write(Math.floor(Math.random()*10));//0-9
-Max(x,y);//返回最大值
-pow(x,y);//返回x的y次方

八.js的重载
** js的重载是否存在？不存在
**会调用最近的方法（面试题）
（1）js里面不存在重载
（2）但是可以通过其他方法来模拟重载 arguments数组
九.js的bom对象
** broswer object model
--对象
**navigater：//获取浏览器的名称
document.write(navigater.appName);
**screen:获取屏幕的信息
document.write(screen.height);
document.write(screen.weight);
**location:请求的URL地址   
-href属性：
***获取请求的url地址
document.write(location.href);
***设置URL地址
一个页面中设置一个按钮，连接到另一个页面
鼠标点击事件 οnclick="js的方法";
**history：请求URL的历史记录
//<input οnclick=" back();">
-到访问的上一个页面
function back(){
history.back();
//history.go(-1);//等同于back();方法
}
-到访问的下一个页面
function next(){
history.forward();
//history.go(1);//等同于forward();方法
}
**window（重点）
*窗口对象
*顶层对象(所有的bom对象都是在window里面操作)
**方法
-window.alert();//在窗口弹出一个页面
-window.confirm();//确认提示框
-var flag=window.confirm("是否删除");
alert(flag);//true
-window.prompt();//输入对话框
window.prompt(text，defaulttext);
window.prompt("显示输入提示","默认值");
window.prompt("请输入：","0");
-open();//
window.open("连接到新的地址","","窗口特征，比如高和款等信息");
window.open("hello.html","","heigth=200,weight=300");
-close();//关闭窗口，兼容性比较差
-做定时器
** setInterval("js代码",毫秒数);
window.setInterval("alert('123')",3000);//每三秒就执行一次alert方法
** setTimeout("js代码",毫秒数);//在指定的毫秒数之后去执行，但是只执行一次
window.setTimeout("alert('123')",3000);//在三秒之后执行alert，但是只执行一次
** clearInterval();//清除setInterval的方法 
var clear1=window.setInterval("alert('123')",3000);\
function clear1(){
clearInterval(clear1);
}
** clearTimeout();//清除setTimeout的方法 
var clear1=window.setTimeout("alert('123')",3000);
function clear2(){
clearTimeout(clear1);
}
十.js的dom对象
* dom : document object model
** 文档
超文本标记文档 html xml
** 对象 
提供了属性和方法
** 模型
提供属性和方法操作超文本标记性文档
*** 可以使用js里面的dom对象进行操作
*** 想要对标记性超文本文档进行操作，首先需要对标记性超文本型文档里面所有的内容封装成对象
--需要把html里面的标签、属性、文本内容封装成对象
*** 解析过程
根据html的成绩结构，在内存中分配一个树形结构，需要把html中的每一个部分都封装成一个对象
-document对象：整个文档
-element对象：标签对象
-属性对象
-文本对象
--Node节点对象：这个对象时这些对象的父对象
*** 如果在这些对象里面找不到相对应的方法，这个时候需要到Node对象里面去找
* DHTML:是很多技术的简称
** html：封装数据
** css：使用属性和属性值设置样式
** dom：操作html文档(标记性文档)
** JavaScript：专门指的是js的语法语句
十一.document对象：整个文档
* 表示整个文档
** 常用方法
- write方法
（1）向页面输出变量值
document.write(str1);
（2）向页面输出html代码
document.write("<hr/>");
- getElementById();//通过id得到标签，返回的是一个对象
<input type="text" id="nameid" value="aaa"/>
var input=document.getElementById("nameid");//获取的是标签中的id值
//得到input里面的value值
alert(input.value);
//向input里面设置一个value值
input.value="bbbb";
- getElementsByName();//通过标签的name属性值来得到标签，返回的是一个数组
<input type="text" name="name1" value="aaa"/>
<input type="text" name="name1" value="bbb"/>
<input type="text" name="name1" value="ccc"/>
<input type="text" name="name1" value="ddd"/>
var input=document.getElementsByName("name1");
alert(input.length);
//遍历数组
for(var i=0;i<input.length;i++){
var in=nput[i];//每次循环得到的是input的对象
alert(in.value);//得到每个input标签的value值
}
- getElementsByTagName(“标签名称”);//返回的是一个数组
<input type="text" name="name1" value="aaa"/>
<input type="text" name="name1" value="bbb"/>
<input type="text" name="name1" value="ccc"/>
<input type="text" name="name1" value="ddd"/>
var in=document.getElementsByTagName("input");//传递的参数是标签名称
alert(in.length);
//遍历集合，每次得一个input标签
for(var i=0;i<in.length;i++){
var ip=in[i];
alert(ip.value);
}
*** 注意地方
//只有一个标签，这个标签只能通过name获取到，这个使用getElementByName返回的是一个数组
<input type="text" name="name1" value="aaa"/>
var in=document.getElementsByName("name1")[0];
alert(in.value);
//通过input标签获取
var in=document.getElementsByName("input")[0];
alert(in.value);
十二.window弹窗案例 
//实现s1的方法
//需要把num1和num2赋值到window页面
//跨页面操作  opener：创建这个窗口的窗口  得到window页面
<script type="text/javascript">
function s1(num1,num2){
var pwin=window.opener;//得到window的页面
pwin.document.getElementById("nameId").value=num1;
pwin.document.getElementById("pwdId").value=num2;
window.close();
}
</script> 
十三：元素对象（element） 
** 要操作element对象，首先要获取element
** 方法
<input type="text" name="nameid" id="inid" value="aaa"/>
获取值
var input=document.getElementById("inid");
alert(input.getAttribute("value"));
设置值
input.setAttribute("参数名","haha");
input.setAttribute("class","haha");
删除属性,但是不能删除value属性
input.removeAttribute("name");
** 获取标签下面的子标签 childNodes()（兼容性差），getElementsByTagName()(兼容性高)
<ul id="ulid">
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
//获取ul标签
var ul1=document.getElementById("ulid");
//返回的是一个集合
//获取ul下面的子标签,兼容性差
var lis=ulid.childNodes;
alert(lis.length);
//获取ul下面的子标签
var lis1=ulid.getElementsByTagName("li")
alert(lis.length);
** Node对象属性1
***nodeName 节点名称
***nodeType 节点类型
***nodeValue 节点值
**标签节点对应的值
<span id="spanid">haha<span/>
var span1=document.getElementById("spanid");
alert(span1.nodeName); // SPAN 大写标签名称
alert(span1.nodeType); // 1
alert(span1.nodeValue); // null
//属性节点对应的值
var id1=spqn1.getAttributeNode("id");
alert(id1.nodeName); // id
alert(id1.nodeType); // 2
alert(id1.nodeValue); // spanid
//获取文本对象
var test1=span1.firstChild;
//文本节点对应的值
alert(test1.nodeType); // 3
alert(test1.nodeName); // #text
alert(test1.nodeValue); // haha
** Node对象属性2
<ul id="ulid">
<li id="li1">111</li>
<li id="li2">222</li>
<li id="li3">333</li>
</ul>
var li1=document.getElementById("li1");
* 父节点 ul是li的父节点
parentNode：父节点
var ul1=li1.parentNode;
//得到ul
alert(ul1.id);
* 子节点 li是ul的子节点 
childNodes：得到所有的子节点，但是兼容性差
firstChild：第一个子节点
//获取ul的第一个子节点
//得到ul
var ul1=document.getElementById("ulid");
var li1=ul1.firstChild;
alert(li1.id); // li1
lastChild：最后一个子节点
//获取ul的最后一个子节点
//得到ul
var ul1=document.getElementById("ulid");
var li4=ul1.lastChild;
alert(li4.id); // li4
* 同辈对象 
nextSibling：下一个兄弟节点
previousSibling：上一个兄弟节点
//获取li的id是li3的上个和先一个兄弟节点
var li=document.getElementById("li3");
alert(li.nextSibling.id); // li4
alert(li.previousSibling.id); // li2

十四.操作dom树
<div id="div1id">
<ul id="ulid">
<li id="li1">111</li>
<li id="li2">222</li>
<li id="li3">333</li>
</ul>
</div>
<div id="div2id">

</div>
**apendChild方法
- 添加子节点到末尾，类似于剪切
//获取div2id的id
var div2=document.getElementById("div2id");
//获取ulid的id
var ul1=document.getElementById("ulid");
//把ulid中的li标签添加到div2中
ulid.apendChild(div2id);
** insertBefore(newNode,oldNode)方法
- 在么某个节点之前插入一个新的节点
//在<li id="li3">333</li>之前添加一个<li >000</li>
<ul id="ulid">
<li id="li1">111</li>
<li id="li2">222</li>
<li id="li3">333</li>
</ul>
<input type="button" value="添加" οnclick="insert1();"/>

function insert1(){ 
//获取li3的标签
var li3=document.getElementById("li3");
//获取ulid的标签
var ulid=document.getElementById("ulid");
//创建li标签
var li4=document.createElement("li");
//创建文本
var text4=document.createTextNode("000");
//把文本添加到ul标签里面（在<li id="li3">333</li>之前添加一个<li >000</li>）
ulid.insertBefore(li4,li3);
}
** 不存在 insertAfter();方法 

** removeChild(); 删除节点 
//删除li id="li3">333</li> 
//获取里标签
var li3=document.getElementById("li3"); 
//获取父节点  通过id获取或者是通过parentNode获取
var ulid=document.getElementById("ulid"); 
ulid.remove(li3);
** replaceChild(newNode,oldNode);//替换节点，通过父节点进行替换
//替换<li id="li3">333</li>为<li id="li4">444</li>
<ul id="ulid">
<li id="li1">111</li>
<li id="li2">222</li>
<li id="li3">333</li>
</ul>
<input type="button" value="替换" οnclick="replace1();"/>

function replace1(){
//获取li3的标签
var li3=document.getElementById("li3");
//创建新的标签
var li4=document.createElement("li");
//创建新的标签文本
var text4=document.createTextNode("444");
//把文本添加到标签
li4.apendChild(text4);
//获取ulid标签
var uid=document.getElementById("ulid");
//执行替换方法
uid.replaceChild(li4,li3);

}

** 赋值节点
***cloneNode(boolean);
<ul id="ulid">
<li id="li1">111</li>
<li id="li2">222</li>
<li id="li3">333</li>
</ul>
<div id="divv">
</div>
<input type="button" value="复制" οnclick="cloneNode1();"/>

function cloneNode1(){
//复制<li id="li3">333</li>到div中
//获取ulid标签
var ulid=document.getElementById("ulid");
//执行复制方法
var copyul=ulid.cloneNode(true);
//获取divv的标签
var divv=document.getElementById("divv");
//把复制的ul标签放在新的div里面
divv.apendChild(copyul);
}
** 操作dom树的总结
* 获取节点使用方法
getElementById();//通过节点的id属性，查找相应的节点
getElementsByName();//通过节点的name属性，查找相应的节点
getElementsByTagName();//通过节点名称，查找相应的节点
*插入节点的方法
insertBefore方法：
appendChild方法：添加到末尾
*删除方法
removeChild方法：通过父节点删除
* 替换节点的方法
replaceChild方法：通过父节点进行替换
十五.innerHTML属性
* 这个属性不是dom树的组成部分，但是大多数浏览器都支持的属性
第一个作用：获取文本的内容
<span id="spanid">haha</span>

//获取span标签
var span1=document.getElementById("spanid");
//获取标签的文本内容
alert(span1.innerHTML);
第二个作用：向标签里面设置内容（可以是HTML代码）
<span id="spanid">haha</span>

<div id="divid">

</div>

//获取span标签
var span1=document.getElementById("spanid");
//获取div的标签
var div1=document.getElementById("divid");
//向div1标签里面设置内容（可以是HTML代码）
div1.innerHTML="<h2>hehehe</h2>";

* 案例
* 得到当前时间
var date =new date();
var d1= date.toLocaleString();

*需要每一秒获取时间
setInterval方法，定时器
*显示到页面上
每一秒向div写一次时间
* 使用innerHTML属性

<div id="divid"></div>

οnlοad="getd1();";

function getd1(){
//获取当前时间
var date = new Date();
//格式化当前时间
var d1 = date.toLocaleString();
//获取div的id
var divv = document.getElementById("divid");
//添加到div中
divv.innerHTML = d1;

}
//使用定时器实现每一秒写一次时间
setInterval("getd1();",1000);