温故而知新----javascript

一、javascript 实例

1、用javascript 输出文本

document.write(Date());

2、用javascript改变html元素

document.getElementById("demo").innerHTML = "";

3、换行警告框

alert("Hello\nHow are you?");

4、确认框

var r = confirm("按下按钮")；

r = true : 按下了 “确定” 按钮

r = false : 按下了 “取消” 按钮

5、try catch

try {

}catch(err){

     alert( "错误描述："+err.message);

}

2）onerror = handler(msg,url,l)

   ....

    txt+="错误: " + msg + "\n";
    txt+="URL: " + url + "\n";
    txt+="行: " + l + "\n\n";

  ....

6、字符串对象

（1）字符串长度，txt.length

（2）给字符串添加样式

var txt = "Hello World!";
document.write("

字体变大: " + txt.big() + "

");
document.write("

字体缩小: " + txt.small() + "

");
document.write("

字体加粗: " + txt.bold() + "

");
document.write("

斜体: " + txt.italics() + "

");
document.write("

固定定位: " + txt.fixed() + "

");
document.write("

加删除线: " + txt.strike() + "

");
document.write("

字体颜色: " + txt.fontcolor("green") + "

");
document.write("

字体大小: " + txt.fontsize(6) + "

");
document.write("

下标: " + txt.sub() + "

");
document.write("

上标: " + txt.sup() + "

");
document.write("

链接: " + txt.link("http://www.w3cschool.cc") + "

");
document.write("

闪动文本: " + txt.blink() + " (不能用于IE,Chrome,或者Safari)

");

（3）indexOf() : 返回字符串中指定文本首次出现的位置

    var str="Hello world, welcome to the universe.";
    var n=str.indexOf("ello"); //1

    var n=str.indexOf("zhasoahn"); //-1

（4）replace

   var str=document.getElementById("demo").innerHTML;
    var n=str.replace("Microsoft","W3CSchool");

 

7、Date(日期)对象

var d=new Date();

（1）显示今天的日期时间
document.write(d);

（2）1970年1月1号至今的毫秒数

d.getTime();

（3）使用 setFullYear() 设置具体的日期

注：JavaScript月数是从0至11。10是11月
     d.setFullYear(2016,7,29);

（4）

var weekday=new Array(7);
    weekday[0]="周日";
    weekday[1]="周一";
    weekday[2]="周二";
    weekday[3]="周三";
    weekday[4]="周四";
    weekday[5]="周五";
    weekday[6]="周六";
    var x = document.getElementById("demo");
    x.innerHTML=weekday[d.getDay()];

8、Array（数组）对象

var fruits = ["Banana", "Orange", "Apple", "Mango"];

1）var family = parents.concat(brothers, children);

2）join：用数组元素组成字符串

     fruits.join();

3）pop()：删除数组最后一个元素

      fruits.pop();

4）push :数组末尾添加新的元素

     fruits.push("Kiwi");

5）shift：删除数组的第一个元素

     fruits.shift();

6）reverse：反转一个数组中的元素的顺序

    fruits.reverse();  

7）slice：从一个数组中选择元素

    fruits.slice(1,3);//Orange,Lemon

7）sort: 数组排序（按字母顺序升序）- sort()

             数字排序（按数字顺序升序）- sort()  

8）splice：在数组的第2位置添加一个元素 - splice()

      fruits.splice(2,0,"Lemon","Kiwi"); //Banana,Orange,Lemon,Kiwi,Apple,Mango

9）转换数组到字符串 -toString()

      fruits.toString();

10）在数组的开头添加新元素 - unshift()

      fruits.unshift("Lemon","Pineapple");

注意: unshift()方法不能用于 Internet Explorer 8 之前的版本，插入的值将被返回成undefined。

9、History对象

返回一个url的历史清单

window.history.length

window.history.back()

window.history.forword()

window.history.go(-2)

10、Document 对象

(1)锚

文档中锚的数量：document.anchors.length

文档中锚第一个锚的内容：document.anchors[0].innerHTML

(2) 表单

document.forms.length

document.forms[0].name

（3）图像

document.images.length

document.images[0].id

（4）链接

document.links.length

（5）文档中所有cookies的名称/值对

document.cookie

（6）域名

document.domain

（7）文档最后一次修改时间

document.lastModified

11、Event对象

键盘键的keycode

（1）

function whichButton(event){
    alert(event.keyCode);
}

（2）鼠标指针的 x 和 y 坐标

function show_coords(event){
    var x=event.clientX;
    var y=event.clientY;
    alert("X coords: " + x + ", Y coords: " + y);
}

（3）指针相对于屏幕的 x 和 y 坐标。

function coordinates(event){
    x=event.screenX
    y=event.screenY
    alert("X=" + x + " Y=" + y)
}

（4）是否按下 shift 键

function isKeyPressed(event){
    if (event.shiftKey==1){
        alert(" shift 键被按下!");
    }
    else{
        alert(" shift 键没被按下!");
    }
}

（5）event.type

//mousedown

12、Option and Select 对象

苹果
梨子
香蕉
橙子

（1）下拉列表数量

document.getElementById("mySelect").length

（2）修改为多行列表

function changeSize(){
    document.getElementById("mySelect").size=4;
}

（3）弹出选中项

function getIndex(){
    var x=document.getElementById("mySelect");
    alert(x.selectedIndex);
}

（4）弹出选中项文本

x.options[x.selectedIndex].text

（5）移除你的选项

x.remove(x.selectedIndex);

13、Table, TableHeader, TableRow, TableData 对象

 
 

    
    

行 1
Peter	Griffin

（1）创建标题

function createCaption(){
    var x=document.getElementById('myTable').createCaption();
    x.innerHTML="表的标题";
}

(2)删除表格中的行

function deleteRow(r){
    var i=r.parentNode.parentNode.rowIndex;
    document.getElementById('myTable').deleteRow(i);
}

（3）添加表格中的行

function insRow(){
    var x=document.getElementById('myTable').insertRow(0);
    var y=x.insertCell(0);
    var z=x.insertCell(1);
    y.innerHTML="新单元格1";
    z.innerHTML="新单元格2";
}

（4）添加单元格

function insCell(){
    var x=document.getElementById('tr1').insertCell(0);
    x.innerHTML="The famous";
}

（5）

document.getElementById('header').align="left";

document.getElementById('tr2').vAlign="top";

（6）

function setColSpan(){
    var x=document.getElementById('myTable').rows[0].cells;
    x[0].colSpan="2";
    x[1].colSpan="6";
}

14、JavaScript 数据类型

String

Number

Boolean

Object

Array

Null

undefined