关闭

温故而知新----javascript

标签: javascript
58人阅读 评论(0) 收藏 举报
分类:

一、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("<p>字体变大: " + txt.big() + "</p>");
document.write("<p>字体缩小: " + txt.small() + "</p>");
document.write("<p>字体加粗: " + txt.bold() + "</p>");
document.write("<p>斜体: " + txt.italics() + "</p>");
document.write("<p>固定定位: " + txt.fixed() + "</p>");
document.write("<p>加删除线: " + txt.strike() + "</p>");
document.write("<p>字体颜色: " + txt.fontcolor("green") + "</p>");
document.write("<p>字体大小: " + txt.fontsize(6) + "</p>");
document.write("<p>下标: " + txt.sub() + "</p>");
document.write("<p>上标: " + txt.sup() + "</p>");
document.write("<p>链接: " + txt.link("http://www.w3cschool.cc") + "</p>");
document.write("<p>闪动文本: " + txt.blink() + " (不能用于IE,Chrome,或者Safari)</p>");

(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 对象

<select id="mySelect">
<option>苹果</option>
<option>梨子</option>
<option>香蕉</option>
<option>橙子</option>
</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 对象

<table id="myTable" border="1">
<tr>
  <td>行 1</td>
  <td><input type="button" value="删除" onclick="deleteRow(this)"></td>
</tr>

<tr id="tr1">
    <td>Peter</td>
    <td>Griffin</td>
</tr>

</table>

(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

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:2682次
    • 积分:113
    • 等级:
    • 排名:千里之外
    • 原创:8篇
    • 转载:6篇
    • 译文:0篇
    • 评论:0条
    文章存档