JS基础（一）

1、JS脚本放置位置

页面内的JS脚本中，各种公共函数和变量应放在head标签之间，而将页面加载期间执行的代码、dom对象初始化以及与dom相关的全局引用赋值操作放在body标签之间，如果没有特殊要求，不妨放在body标签之前。

2、js命名规范和代码注释

JS区分大小写，包括数字、字母、下划线（_）、美元符（$），小写字符命名变量，保留字可根据系统默认大小写来输入；类和构造函数使用大写首字符

单行注释，//注释内容；多行注释，/*注释内容*/

3、变量作用域

函数外var全局变量，函数内var局部变量；不适用var声明的都是局部变量

4、with语句（一般不建议使用）

<script type="text/javascript" language="javascript">
with(document.getElementById("box").style){
	    borderColor="red"; 
	    borderWidth="1px";
	    borderStyle="solid";
	    width="400px";
	    height="200px";
}
</script>

5、数据类型和转化

基本数据类型：数值（都是浮点型）、字符串、布尔型
引用数据类型：对象、数组、函数
特殊类型：Null类型只有一个值：null；未定义的值：undefined
数值+“”=字符；布尔+“”=字符；
字符*1=数值；布尔*1=数值；parseInt/parseFloat(字符)=数值；
!!数值=布尔；!!字符=布尔；

6、函数定义

使用function语句声明：命名函数，function f() { }；匿名函数，var f=function() { }
使用Function对象构造：var say = function(name, say){document.write('<h1>' + name + ' ： ' + say + '</h1>'); }

7、函数分类（函数可作参数、表达式、返回值）

闭包函数：函数里面包含另一个函数
高阶函数：函数作为参数
函数柯里化：函数作为返回值

8、对象和数组

对象是无序的、已经命名的数据集合，var point={z:{a:1,b:2};x:2.3,y:-1.2}; var i=point["z"]["a"];var j=point.z.b;
数组是有序的数据集合，与对象可相互转化，但是数组拥有大量方法，适合完成一些复杂的运算，var a=new Array(1,2,3,"4","5");var a=[1,2,3,"4","5"];

9、数组常用方法

length(属性)	var a = [1, 2, 3, 4, 5]; a.length = 4; document.write(a);
push/pop	var a = []; //定义一个空数组 a.push(1,2,3); //得到数组a[1,2,3] a.push(4,5); //得到数组a[1,2,3,4,5] a.pop();//得到数组a[1,2,3,4]
unshift/shift	var a = []; //定义一个空数组 a.unshift(1,2,3); //得到数组a[1,2,3] a.unshift(4,5); //得到数组a[4,5,1,2,3] a.shift(); //得到数组a[5,1,2,3]
splice	var a = [1,2,3,4,5,6]; var b = a.splice(2,2); document.write(a + "<br />");//输出[1,2,5,6] document.write(b);//输出[3,4]
splice	var a = [1,2,3,4,5,6]; var b = a.splice(2,2,7,8,9); document.write(a + "<br />");//输出[1,2,7,8,9,5,6] document.write(b);//输出[3,4]
join	var a = [1,2,3,4,5];a = a.join("-");document.write("a类型 = " + typeof(a)+"<br />");//a类型=string document.write("a的值 = " + a);//a的值=1-2-3-4-5
split	var a = [1,2,3,4,5];a = a.join("-");var s = a.split("-");document.write("s类型 = " + typeof(s)+"<br />");//a类型=object document.write("s的值 = " + s);//a的值=1,2,3,4,5
reverse	var a = [1,2,3,4,5];var a = a.reverse();document.write(a);//输出[5,4,3,2,1]
sort	var a = [3,2,5,1,4]; var f = function(x,y){ return y-x; }; var b = a.sort(f); document.write(b);//输出[5,4,3,2,1]
concat	var a = [1,2,3,4,5];var b = a.concat([4,5],[1,[2,3]]);document.write(b);//输出[1,2,3,4,5,4,5,1,2,3]
slice	var a = [1,2,3,4,5,6,7,8,9];var b = a.slice(2,5);document.write(b);//输出[3,4,5]

10、检测数据类型

值（value）	typeof value(表达式返回值)	value.constructor(构造函数的属性值)
var value=1	"number"	Number
var value="a"	string	String
var value="true"	boolean	Boolean
var value={}	"object"	Object
var value=new Object()	"object"	Object
var value=[]	"object"	Array
var value=new Array()	"object"	Array
var value=function(){}	"function"	Function
function className(){}	"object"	className

function typeOf(o){
    var _toString = Object.prototype.toString; 	
    // 获取对象的toString()方法引用
    // 列举基本数据类型和内置对象类型，可以进一步补充该数组的检测数据类型范围
    var _type ={
        "undefined" : "undefined",
        "number" : "number",
        "boolean" : "boolean",
        "string" : "string",
        "[object Function]" : "function",
        "[object RegExp]" : "regexp",
        "[object Array]" : "array",
        "[object Date]" : "date",
        "[object Error]" : "error"
    }
    return _type[typeof o] || _type[_toString.call(o)] || (o ? "object" : "null"); 
}

var a = Math.abs;
alert(typeOf(a));	//"function"

11、数值计算与类型转换（当对象与数值进行加号运算时，则会尝试将对象转化为数值，然后参与求和运算。如果转换不成功，则执行字符串连接操作）

值（value）	字符串操作环境	数字运算环境	逻辑运算环境	对象运算环境
undefined	"undefined"	NaN	false	Error
null	"null"	0	false	Error
非空字符串	不转换	字符串对应的数字值或NaN	true	String
空字符串	不转换	0	false	String
0	"0"	不转换	false	Number
NaN	"NaN"	不转换	false	Number
Infinity	"Infinity"	不转换	true	Number
Number.POSITION_INFINITY	"infinity"	不转换	true	Number
Number.NEGATIVE_INFINITY	"infinity"	不转换	true	Number
Number.MAX_VALUE	"1.7976931348623157e+308"	不转换	true	Number
Number.MIN_VALUE	"5e-324"	不转换	true	Number
其它所有数字	"数字的字符串"	不转换	true	Number
true	"true"	1	不转换	Boolean
false	"false"	0	不转换	Boolean
对象	toString()	valueOf()或toString()或NaN	true	不转换

12、字符串替换（正则表达式）

<script>
var s="javascript";
var b=s.replace(/(java)(script)/,"$2-$1")//输出script-java
alert(b);

var b=s.replace(/java/,"$&");//输出javascript
alert(b);

var b=s.replace(/java/,"$`");//左侧文本 输出script
alert(b);
var b=s.replace(/script/,"$`");//输出javajava
alert(b);

var b=s.replace(/java/,"$'");//右侧文本 输出scriptsctipt
alert(b);

var b=s.replace(/java/,"$$");//输出$script
alert(b);
</script>

13、增强数组排序

<script>
/*function f(a,b){
	var a=a%2;
	var b=b%2;
	if(a==0) return 1;
	if(b==0) return -1;
}
var a=[3,1,2,4,5,7,6,8,0,9];
a.sort(f);
alert(a);

function f(a,b){
	var a=a%2;
	var b=b%2;
	if(a==0) return -1;
	if(b==0) return 1;
}
var a=[3,1,2,4,5,,7,6,8,0,9];
a.sort(f);
alert(a);

var a=['aB','Ab','Ba','bA'];
a.sort();
alert(a);*/
function f(a,b){
   var a=a.toLowerCase;
   var b=b.toLowerCase;
   if(a>b) return 1;
   else
    return -1;
}
var a=['aB','Ab','Ba','bA'];
a.sort(f);
alert(a);

function f(a,b){
	if(a>Math.floor(a)) return 1;
	if(b>Math.floor(b)) return -1;
}
var a=[3.555,1.234,3,2.111,5,7,3]
a.sort(f);
alert(a);
</script>

14、浏览器对象模型（BOM）

包含对象：

用户对象：在JS脚本中定义的对象
内置对象：由系统预定义并内置到JS内的对象，如Object、Array、Function、Date、Math、String、Number、RegExp等
宿主对象：捆绑到浏览器内的API组件定义的对象。这些对象与JS语言本身没有任何直接关系，但在JS脚本中可以访问和操作它们，如Window、Document、Navigator、Screen、Location、History、Form等

BOM作用：

弹出新的浏览器窗口，移动、关闭浏览器窗口以及调整窗口大小（窗口对象）
提供浏览器详细信息（导航对象）
提供装载到浏览器中页面的详细信息（定位对象）
提供用户屏幕分辨率详细信息（屏幕对象）
对Cookie的支持

15、BOM操作浏览器常用方法

打开窗口：window.open(url,name,features,replace)

var url="http://www.baidu.com/";
var features="height=400,width=800,top=10,left=10,toolbar=no,menubar=no,scrollbar=no,resizable=no,location=no,status=no";
document.write('<a href="http://www.sina.com.cn/ target="newW">切换到新浪</a>');
var me=window.open(url,'newW',features);
setTimeout(function(){me.close();},60000);

三种人机交互窗口：alert()、confirm()、prompt()

var user=prompt("请输入你的用户名：");
if(!!user){
    var ok=confirm("你输入的用户名为：\n"+user+"\n请确认。");
    if(ok){
        alert("欢迎你：\n"+user);
    }
    else{
        user=prompt("请重新输入你的用户名：");
        alert("欢饮你：\n"+user);
    }
}
else{
    user=prompt("请输入你的用户名：");
}

获取URL查询字符串信息

 1 var queryString=function(){
 2     var q=location.search.substring(1);
 3     var a=q.split('&');
 4     var o={};
 5     for(var i=0;i<a.length;i++){
 6         var n=a[i].indexOf('=');
 7         if(n==-1) continue;
 8         var v1=a[i].substring(0,n);
 9         var v2=a[i].substring(n+1);
10         o[v1]=unescape(v2);
11     }
12     return o;
13 }
14 var f1=queryString();
15 for(var i in f1){
16     document.write(i+"="+f1[i]+'<br/>');
17 }
18 </script>
19 </head>
20 <body>
21 <a href="?id=123&name=location">获取查询字符串</a>

设计窗口居中和弹跳窗口

availHeight和availWidth显示web浏览器屏幕可用高度和宽度
availLeft和availTop屏幕最左侧x坐标和y坐标
moveTo()、moveBy()、resizeTo()、resizeBy()，by相对，移动指定个长度单位；to绝对，移动到指定坐标

 1 <script>
 2 function openW(url){
 3     var w=screen.availWidth/2;
 4     var h=screen.availHeight/2;
 5     var t=(screen.availHeight-h)/2;
 6     var l=(screen.availWidth-w)/2;
 7     var p="top="+t+",left="+l+",width="+w+",height="+h; 
 8     var win=window.open(url,"url",p);
 9     win.focus();
10 }
11 openW("http://www.baidu.com/");
12 </script>
13 
14 <script type="text/javascript" language="javascript">
15 window.onload=function(){
16     timer=window.setInterval("jump()",1000);
17 }
18 function jump(){
19     window.resizeTo(200,200);
20     x=Math.ceil(Math.random()*1024);
21     y=Math.ceil(Math.random()*760);
22     window.moveTo(x,y);
23 }
24 </script>

16、DOM是Document Object Modal(文档对象模型)的简写，它表示访问和操作文档（如HTML、XML文档）的API（应用程序接口）

遍历文档

<script type="text/javascript" language="javascript">
function count(n){
    var num=0;
    if(n.nodeType==1) num++;
    var son=n.childNodes;
    for(var i=0;i<son.length;i++) num+=count(son[i]);
    return num;
}
window.onload=function(){
    alert("当前文档包含"+count(document)+"个元素");
}
</script>

动态增加文档内容

window.onload=function(){
      var ul=document.getElementsByTagName("ul")[0];
      var lis=ul.getElementsByTagName("li");
      lis[0].onclick=function(){
          this.innerText="谢谢";
      }
      lis[1].onclick=function(){
          this.innerHTML="<h2>我是一名初学者</h2>";
      }
      lis[2].onclick=function(){
          this.outerText="我是学生";
      }
      lis[3].onclick=function(){
          this.outerHTML="<h2>当然喜欢</h2>";
      }
}

17、操作节点和属性

<script>
//获取节点
var p=document.getElementsByTagName("p")[0];
alert(p.innerHTML);
p.innerText=p.innerText;
//获取节点属性
var box=document.getElementById("box");var info="nodeName:"+box.nodeName;
info+="<br>nodeType:"+box.nodeType;
info+="<br>parentNode:"+box.parentNode.nodeName;
info+="<br>childNodes:"+box.childNodes[0].nodeName;
document.write(info);
//设置节点属性
var p=document.getElementsByTagName("p");
alert(p[4].innerHTML);
for(var i=0;i<p.length;i++){
    p[i].setAttribute("class","blue");
}
//克隆节点、true为复制节点包含所有内容
window.onload=function(){
    var p=document.createElement("p");
    var h1=document.createElement("h1");
    var txt=document.createTextNode("hello world");
    p.appendChild(txt);
    h1.appendChild(p);
    document.body.appendChild(h1);
    var new_h1=h1.cloneNode(true);
    document.body.appendChild(new_h1);
}
//insertbefore 把节点放到父节点指定子节点前面
window.onload=function(){
   var ok=document.getElementById("ok");
   ok.onclick=function(){
       var red=document.getElementById("red");
       var blue=document.getElementById("blue");
       var h1=document.getElementsByTagName("h1")[0];
       red.insertbefore(blue,h1);
   }
}
//删除子节点
window.onload=function(){
   var ok=document.getElementById("delete");
   ok.onclick=function(){
      var blue=document.getElementById("blue");
      (blue.parentNode).removeChild(blue);
   }   
}
//替换节点 用h2替换h1
window.onload=function(){
   var ok=document.getElementById("ok");
   ok.onclick=function(){
      var red=document.getElementById("red");
      var h1=document.getElementsByTagName("h1")[0];
      var blue=document.getElementById("blue");
      var h2=document.createElement("h2")
      red.replaceChild(h2,h1);
   }   
}
window.onload=function(){
   var ok=document.getElementById("ok");
   ok.onclick=function(){
      var red=document.getElementById("red");
      var blue=document.getElementById("blue");
      var h1=document.getElementsByTagName("h1")[0];
      var del_h1=red.replaceChild(blue,h1);  
      red.parentNode.insertBefore(del_h1,red);   
   }
}
//获取和设置属性、属性值
/*window.onload=function(){
    var red=document.getElementById("red");
    alert(red.getAttribute("id"));
    var blue=document.getElementById("blue");
    alert(blue.id);
}
window.onload=function(){
    var red=document.getElementById("red");
    var blue=document.getElementById("blue");
    red.setAttribute("title","这是红色盒子");
    blue.setAttribute("title","这是蓝色盒子");
}*/
window.onload=function(){
    var hello=document.createTextNode("Hello World！");
    var h1=document.createElement("h1");
    //var h2=document.createElement("h2");
    h1.setAttribute("title","您好！欢饮光临！");
    //h2.title="这是h2的title";
    h1.appendChild(hello);
    //h2.appendChild(hello);
    document.body.appendChild(h1);
}
//增加和删除属性值
window.onload=function(){
var table=document.getElementsByTagName("table")[0];
var del=document.getElementById("del");
var reset=document.getElementById("reset");
del.onclick=function(){
    table.removeAttribute("border");
}
reset.onclick=function(){
    table.setAttribute("border","2");
}
}
</script>

18、JS事件模型和事件流

基本事件模型：通过简单的事件属性为指定标签绑定事件处理函数，属性较弱，一般不建议使用
标准事件模型：W3C制定
IE事件模型

多个对象同时相应一个事件的时候，哪个对象优先相应，哪个对象后续响应？决定这种响应顺序的机制称为事件流

冒泡型事件流（IE支持：div->body->document）：由特殊到一般，从下往上。
捕获型事件流：（document->body->div）从一般到特殊，从上往下。
标准事件流：W3C定义的标准事件流同时支持以上两种事件流，但是捕获型事件流先发生，即从document开始再返回document结束。

19、基本事件模型的两种绑定方式

//静态绑定
<button  id="btn" onclick="alert('你单击的一次！');">按钮</button><!--单引号里只能双引号 双引号里只能单引号-->
//动态绑定
<script>
    var button=document.getElementById("btn");
    btn.onclick=function(){
        alert("你单击的一次！")
    }
</script>

20、标准事件模型和IE事件模型的注册、注销

//标砖事件模型
<body>
<h2>标准事件模型的注册和注销</h2>
<input id="a" type="button" value="点我"/>
<input id="b" type="button" value="删除事件"/>
<script>
   var a=document.getElementById("a");
   var b=document.getElementById("b");
   function ok(){
       alert("您好！欢饮光临！");
   }
   function delete_event(){
       a.removeEventListener("click",ok,false);
   }
   a.addEventListener("click",ok,false);
   b.addEventListener("click",delete_event,false);
</script>
</body>
//IE事件模型
<body>
<p id="p1">IE事件模型的注册和注销</p>
<script>
/*var p1=document.getElementById("p1");
p1.attachEvent("onmouseover",function(){
   p1.style.background='blue';
})
p1.attachEvent("onmouseout",function(){
   p1.style.background='red';
})*/
var p1=document.getElementById("p1");
var f1=function(){
   p1.style.background='blue';
};
var f2=function(){
   p1.style.background='red';
   p1.detachEvent("onmouseover",f1);
   p1.detachEvent("onmouseout",f2);
};
p1.attachEvent("onmouseover",f1);
p1.attachEvent("onmouseout",f2);

</script>
</body>
//兼容IE和标准
<body>
<p id="p1">IE和标准事件模型都兼容</p>
<script>
var p1=document.getElementById("p1");
var f1=function(){
   p1.style.background='blue';
};
var f2=function(){
   p1.style.background='red';
   if(p1.detachEvent){
   p1.detachEvent("onmouseover",f1);
   p1.detachEvent("onmouseout",f2);
}
  else{
      p1.removeEventListener("mouseover",f1);
      p1.removeEventListener("mouseover",f2);
  }
};
if(p1.attachEvent){
p1.attachEvent("onmouseover",f1);
p1.attachEvent("onmouseout",f2);
}
else{
    p1.addEventListener("mouseover",f1);
    p1.addEventListener("mouseout",f2);
}
</script>
</body>

posted @ 2018-11-20 22:02 agasha 阅读(191) 评论(0) 编辑收藏举报

刷新页面返回顶部

agasha