javascript知识点总结

1 javascript语法基本要素:

  标识符 关键字 数据类型 变量 注释 运算符和表达式 语句

for(var i=1;i<=9;i++){
    //console.log(i);
    for(var j=1;j<=i;j++){
        document.write(i+"*"+j+"="+i*j+"\n");
    }
    document.write("<br/>");
}
99乘法表
var i=30;
switch(i){
    case 10:
        document.write(i);
        break;
    case  20:
        document.write(i);
        break;
    default:
        alert(i);
        break;
}
switch语句
var unsorted = [1,2,15,12,65];
for (var i = 0; i < unsorted.length; i++){
     for (var j = i; j < unsorted.length; j++){
         if (unsorted[i] > unsorted[j]) {
             int temp = unsorted[i];
             unsorted[i] = unsorted[j];
             unsorted[j] = temp;
          }
      }
}
for(var a=0;a<unsorted.length;a++){
    document.writeln(unsorted[a]);
}
冒泡排序

2 javascript本地对象:

  Array对象:使用单独的变量名存储一系列的值,利用索引来区分它们。

var sub = ["html","css","javascript"];
//join()
document.write(sub.join()+"<br/>");
//sort()
sub.sort();
document.write(sub.sort()+"<br/>");
//concat()
var sub2 = ["chinese","english","math"]
var subresult = sub.concat(sub2);
document.write(subresult+"<br/>");
//slice() 0表示起始位置 2两个元素
document.write(subresult.slice(0,2));
//其它数组对象的方法 toString() reverse() splice() push() pop() unshift() shift()
数组方法

  Date对象:获取日期和时间

//声明一个当前时间
var myDate = new Date(); 
//日期to方法组 toString toTimeString toDateString toGMTString toUTCString toLocalString toLocalTimeString toLocalDateString
document.write(myDate.toDateString());
//日期get方法组 getDate getDay getMonth getFullYear getYear getHours getMinutes getSeconds getMilliseconds getTime
//日期set方法组 setDate setMonth setFullYear setYear setHours setMinutes setSeconds setMilliseconds setTime
日期时间方法

  String对象:unicode字符系列

//String属性
var str = "hello world";
document.writeln(str.length);
//String的方法:
//charAt indexOf lastIndexOf substr substring match replace search split 
//charCodeAt concat fromCharCode loacleCompare slice
document.writeln(str.charAt(0));
document.writeln(str.indexOf("o"));
document.writeln(str.lastIndexOf('o'));
字符串方法

  Global对象:它是预定义对象,可以访问其它预定义的对象函数和属性,它的所有成员都是静态的。

document.write(isNaN(123));//非数字检测
var x= 10;
document.write(eval("x+17"));//计算字符串
//parseFloat parseInt 字符串转换
//解码某个编码url decodeURI 字符串编码encodeURI 
全局函数

  Math对象

document.write("数学圆周率:"+Math.PI+"自然对数:"+Math.E);
document.write("2的自然对数:"+Math.LN2);
document.write("10的自然对数:"+Math.LN10);
document.write("返回2为底的e的对数:"+Math.LOG2E);
document.write("返回10为底的e的对数:"+Math.LOG10E);
document.write(Math.SQRT2);//返回2的平方根
数学对象属性
document.write(Math.round(15.6));//四舍五入
//向上取整 ceil floor向下取整 max最高值 min最低值 random随机数
//sqrt某数的平方根 abs绝对值 pow(x,y)x的y次幂 exp(x) x的指数 log(x)自然对数底为e sin cos asin acos tan
数学对象方法

  Function对象:

  RegExp对象:正则表达式,用一个特殊字符串去验证另一个字符串的合法性。

3 javascript宿主对象:

 BOM

 window对象时顶层对象模型,代表一个浏览器窗口或者一个框架。window对象是全局对象。

//alert()
var name = window.prompt("请输入你的名字:","");
if(name!=null&&name!=""){
    document.write("hello"+name);
}
var r = confirm("是否关闭浏览器");
if(r==true){
    window.close();
}
window.open("http://www.sina.com");
window.open("http://www.sina.com");
//setInterval clearInterval setTimeout clearTimeout
//scrollBy 按指定像素值滚动内容 scrollTo把内容滚动到指定坐标 blur focus print 
window对象的方法
//clsed name opener parent self top status window screenX screenY screenLeft screenTop
//document history location navigator screen frames
window对象的属性

 navigator对象有浏览器中脚本运行时引擎自动创建,包含有关客户机浏览器的信息。

   screen对象同样是引擎自动创建,包含浏览器显示屏幕的有关信息。

   history对象由一系列url组成,它们是用户在一个浏览器窗口内已访问的url

 DOM:文档对象模型采用层次化树形结构,以树节点的方式组织文档中的内容。应用dom可以对文档节点进行访问和修改。

//1 all集合属性仅有ie浏览器具有
if(document.all){
    alert("ie浏览器");
}else{
    alert("其它浏览器");
}
// 2title属性生成网页标题
document.title = "dom文档对象模型";
// 3body访问body元素
var i = document.body.offsetWidth;
alert(i);
// 4domain cookie referer URL
文档对象属性
//1获取文档节点 getElementById getElementsByName getElementsByTagName
//2输出html内容
document.write("<hr/>");
文档对象方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>获取元素</title>

</head>

<body>
    <input type="text" id="text1" name="txtName" value="1"/>
    <script>
        var i = document.getElementById("text1");
        alert(i.value); 
    </script>
</body>
</html>
获取文档元素的值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>获取元素修改元素</title>
</head>
<body>
    <a href="#">hello world</a>
    <a href="#" id="tmall">淘宝</a>
    <script>
        //获取页面元素的内容
        var objJP = document.getElementsByTagName("a");
        alert(objJP[0].innerText);
        alert(objJP[0].innerHTML);
        //修改html的元素内容
        document.getElementById("tmall").innerHTML = "helo";
    </script>
</body>
</html>
innerTextAndinnerHtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>获取元素修改元素</title>
</head>
<body>
    <a href="#">hello world</a>
    <a href="#" id="tmall">淘宝</a>
    <a href="#">京东</a>
    <script>
        document.getElementById("tmall").style.color = "orange";
        var _a = document.getElementsByTagName("a");
        for(var i=0;i<_a.length;i++){
            _a[i].style.textDecoration = 'none';
        }
    </script>
</body>
</html>
style改变元素样式
scrollLeft水平滚动距离
scrollTop垂直滚动距离
clientWidth网页可见区域宽度
clientHeight网页可见区域高度
body对象属性

4 自定义对象

5 事件驱动编程

posted @ 2016-08-02 13:53  0胖嘟嘟二狗子0  阅读(145)  评论(0编辑  收藏  举报