论坛徽章:: 0

电梯直达

1楼 [收藏(0)] [报告]

发表于 2011-12-01 15:38 |只看该作者 |倒序浏览

本帖最后由凝望长空于 2011-12-01 15:40 编辑

JS入门经典

1， JS支持三种对象类型
（1） JS内置对象（如Date，Array， String， Math等）。
（2）文档对象模型（DOM ）。
（3）自定义对象。

2， html中运行js脚本的顺序。
（1） html中先执行<head>内的JS，无论该js是嵌入代码或是指向一个js文件，因为这些脚本不能再web页面上建立输出，所以这个位置可定义以后要使用的函数。
（2） html中后执行<body>内的JS，body中的js安先后顺序执行。
（3） html中最后执行js事件处理程序，如可以在<head>中定义事件处理函数，并在html事件处理程序中使用它们。

3， DOM对象
为了操作浏览器和文档，js使用分层的父对象和子对象，这就是DOM。dom不是js语言的一部分，而是内置在浏览器中的一个应用程序的api接口，该对象的组织类似一个树型结构，表示一个web文档的所有内容和组件，Dom对象拥有属性（描述页面或文档的变量）和方法（允许操作web页面）。

4， Window对象
在浏览器对象层次的最顶层是window对象，它表示一个浏览器窗口。

5， Window子对象
Document：document对象代表一个web文档或一个页面。
History：history对象保存着当前地址之前和之后访问过的网址信息，它包括达到前一个地址和后一个地址的方法。
Location：location对象存储的是窗口的当前url网址的信息。

6， JS的数据类型
数字：支持整数和浮点数。
布尔数：真或假两个值。
字符串：一个或多个字符组成。
空值：关键字null。

7，数据类型的转换
字符串转换为数字类型
ParseInt()：将一个字符串转换为整数值。
parseFloat()：将一个字符串转换为浮点小数值。
Var strvar = “30 day”
Var numvar = parseInt(strvar);
Numvar的值为：30；
字符串转换为数字函数从字符串的开始处寻找适当的数字，如果没有发现一个有效数字，函数将返回一个特殊值NAN，意思是非数字。

8，子字符串的使用
toUpperCase()：将字符串内所有字符转换为大写
tolowerCase()：将字符串内所有字符转换为小写
substring(n , m)：返回一个子字符串，索引从0开始，返回从n（包含第n个）到m（不包含第m个）之间的字符串。
charAt(n)：返回一个字符，索引从0开始，返回第n个字符。
indexOf(str)：查找子字符串，返回子字符串在字符串中的索引值，索引从0开始。
indexOf(str , n)：查找子字符串，返回子字符串在字符串中的索引值，索引从n开始。
lastIndexOf(str)：查找子字符串，返回子字符串在字符串中最后一个的索引值。
split(str)：将一个字符串按照分隔符str分割字符串，返回分割后的字符串数组。

9，数组的使用
join(str)：将一个数组按照连接符str连接数组，返回连接后的字符串。
reverse：返回反转后的数组。
sort()：将一个数组安升降排序。
sort(funcompare)：将一个数组按照funcompare函数比较排序。

10， Math内置对象
Math.ceil(n) >= n：将一个数向上舍入到上一个整数。
Math.floor(n)<=n：将一个数向下舍入到下一个整数。
Math.round(n)：将一个数舍入到最接近的整数。
Math.random()：可以生成0到1之间的随机小数。
保留两位小数：

Function round(num){
return Math.round(num*100)/100;
}
生成随机数
Function rand(num){
Return Math.floor(Math.random()*num)+1;
}

复制代码

11， With关键字
With关键字指定一个对象，后面跟着大括号的一个语句块，对于语句块中的每一条语句，没有指定对象的属性都将被假定为该对象的属性。从而可以节约写的代码的时间。

var str = “abcdefg”;
With（str）{
Alert(toUpperCase()+“,”+length);
}

复制代码

12， Date对象
Date对象的创建：

Var date = new Date() // 创建当前时间。
Var date = new Date(2011, 9, 20);
Var date = new Date(2011, 9, 20, 15, 30, 20);
setDate()：设置某日
setMonth()：设置某月
setFullYear()：设置某年
setTime()：设置时间
setHours()：设置小时
setMinutes()：设置分钟
setSeconds()：设置秒
getDate()：获取某日
getMonth()：获取某月
getFullYear()：获取某年
getTime()：获取时间
getHours()：获取小时
getMinutes()：获取分钟
getSeconds()：获取秒

复制代码

根据日期排序时间

var arr = new Array();
arr[0] = new Date();
arr[1] = new Date(2001, 3, 28);
arr[2] = new Date(2002, 6, 25);
arr[3] = new Date(2002, 6, 24);
alert(arr[1].getDate());
function arcompare(da, db){
return da.getDate() - db.getDate();
}
arr.sort(arcompare);
alert(arr[1].getDate());

复制代码

13， Event对象
Event属性：不同浏览器的event对象属性不同
IE：
event.button—按下鼠标键，对于鼠标左键，这个属性值为1，而对于鼠标右键通常为2；
event.clientX—事件发生位置的X轴坐标（列，以像素为单位）。
event.clientY—事件发生位置的Y轴坐标（行，以像素为单位）。
event.ctlKey—表示事件发生时是否按下CTRL键
event.altKey—表示事件发生时是否按下ATL键

event.shiftKey—表示事件发生时是否按下SHIFT键
event.keyCode—表示按键的Unicode码。
event.srcElement—元素出现的对象。
Firefox：
event.button—按下鼠标键，对于鼠标左键，这个属性值为0，而对于鼠标右键通常为2；
event.modifiers—表示事件发生时按下了那一个修饰键。（atl，ctrl， shift）
event.pageX—事件发生位置的X轴坐标（列，以像素为单位）。
event.pageY—事件发生位置的Y轴坐标（列，以像素为单位）。
event.which—表示按键的Unicode码。
event.target—元素出现的对象。

按键显示

function displaykey(e){
if(e.keyCode) var keycode = e.keyCode;
else keycode = e.which;
var charvar = String.fromCharCode(keycode);
var ke = document.getElementById("keydis");
ke.innerHTML += charvar;
}
14，打开和关闭窗口，调整窗口大小和位置。
Window.open()：打开窗口。
Window.close()：关闭窗口。
Window.moveTo(x,y)：移动窗口的位置—绝对
Window.moveBy(x,y)：移动窗口的位置—相对
Window.resizeTo(w,h)：调整窗口的大小—绝对
Window.resizeBy(w,h)：调整窗口的大小—相对
var newwin;
function opnewwin(){
newwin = window.open("", "nwin", "toolbar=no, status=no, width=200, height=100");
}
function closenewwin(){
newwin.close();
}
function movenewwin(){
var w = document.theform.w.value;
var h = document.theform.h.value;
var x = document.theform.x.value;
var y = document.theform.y.value;
if(w && h){
newwin.resizeTo(w, h);
}
if(x && y){
newwin.moveTo(x, y);
}
}
<form name="theform">
<input type="button" value="OPEN NEW WIN" onclick="opnewwin()"/>
<input type="button" value="CLOSE NEW WIN" onclick="closenewwin()"/>
<br />
width:<input type="text" name="w"/>
height:<input type="text" name="h"/><br />
x-postion:<input type="text" name="x"/>
y-postion:<input type="text" name="y"/><br />
<input type="button" value="go" onclick="movenewwin()"/>
</form>

复制代码

15， Js超时功能
Var indent = window.setTimeOut(“alert(‘aa’)”, 1000);//1000毫秒后执行一次alert
Window.clearTimeOut(ident);//停止超时事件

刷新

Var count = 0;
Function updatePage(){
Count++;
Var id = window.setTimeOut(“updatePage()”,1000);
}

复制代码

16， Window显示对话框
Window对话框有三种：
Window.alert(msg)：消息对话框
Window.confirm(msg)：确认对话框
Window.prompt(msg，default)：输入对话框

17，获取表单中元素
document.getElementById(Id)；//返回具有指定id属性的元素
document.getElementsByTagName(tag)；//返回具有指定标签名的所有元素的一个数组。可以使用同配符（*）返回含有文档中所有节点的一个数组。
document.formName.elementName；//

18， Text和textarea事件
focus()：设置文本输入焦点事件
blur()：设置文本输入焦点离开事件
select()：设置文本选择事件

onFocus：文本输入焦点时发生的事件
onBlur：文本输入失去焦点时发生的事件
onChange：文本改变后失去失去光标时发生的事件
onSelect：文本输入中文本被选择时发生的事件

焦点事件

function focusinput(){
alert("请先输入用户名");
document.theform.inp.focus();
}
<form name="theform">
用户名：<input name="inp" type="text" />
密码：<input name="in" type="text" onfocus="focusinput()" />
</form>

复制代码

19， Js改变CSS样式
document.getElementById(id).style.css=value

改变CSS颜色

function changesele(){
var val = document.theform.sele.value;
document.getElementById("div").style.color=val;
}
<div id="div">test color</div>
<form name="theform">
<select name="sele" onchange="changesele()">
<option value="blue">blue</option>
<option value="red">red</option>
<option value="gray">gray</option>
</select>
</form>

复制代码

在一些CSS属性的名称中间有连字符，比如border-color等，在js中使用这类属性时，连字符隔开的两部分要合并在一起，连字符后半部分采用首字母大写形式。如borderColor。

20，节点属性和操作方法
节点属性：
nodeName：节点名称，如<div>标签名称为DIV，<input>标签名称为INPUT，文档节点document名称为#document，文本节点的名称为#text。
nodeType：描述节点类型的一个整数，1表示正常的html标签，3表示文本节点，9表示文档节点。
nodeValue：是文本节点包含的实际文本，这个属性对于其他类型的节点无效。
InnerHTML：是任意节点的html内容。

firstChild：是节点的第一个子对象。
lastChild：是节点的最后一个子对象。
childNodes：是节点的所有子节点的数组
previousSibling：是节点之前的兄弟节点。
nextSibling：是节点之后的兄弟节点。
parentNode：是节点的父节点。

document节点的操作方法：
createTextNode(text); 创建一个文本节点。
createElement(tag); 创建一个html元素。
页面中的节点方法：
appendChild(new); 把指定的新节点添加在该对象所有现有节点自后。
insertBefore(new,old); 把指定的新子节点插入到指定的原有子节点之前。
replaceChild(new,old); 把新节点替换指定的原有子节点。
removeChild(node); 从对象中删除一个子节点。
hasChildNodes();判断对象是否含有子节点，有返回true，无返回false。
cloneNode(); 为某个现有节点创建一个副本，如果传入true的参数，则该副本包括原始节点的所有子节点。

树形菜单：

<script type="text/javascript" language="javascript">
function menuli(obj){
var pid = obj.getAttribute("id");
var cid = pid + "-" + "menu";
var cul = document.getElementById(cid);
var pval = obj.firstChild.nodeValue.substring(3)
if(cul.style.display=="none"){
var pr = "[-] " + pval;
obj.firstChild.nodeValue = pr;
cul.style.display = "block";
}else{
var pj = "[+] " + pval;
obj.firstChild.nodeValue = pj;
cul.style.display = "none";
}
}
</script>
<div>
<ul>
<li><a id="one" href="#" onclick="menuli(this)">[-] one menu</a>
<ul id="one-menu">
<li><a href="#">one child1</a></li>
<li><a href="#">one child2</a></li>
</ul>
</li>
<li><a id="two" href="#" onclick="menuli(this)">[-] two menu</a>
<ul id="two-menu">
<li><a href="#">two child1</a></li>
<li><a href="#">two child2</a></li>
</ul>
</li>
</ul>
</div>

复制代码

21，添加多事件处理程序
Window.addEventListener(“name”, fun, boolean); 为事件（name事件名称）添加事件（fun事件处理函数），boolean标明事件处理标志位，指明如何处理多个事件，一般设置为false。IE6,IE7和IE8没有提供对它的支持。
Window.removeEventListener(“name”, fun, boolean); 为事件（name事件名称）删除事件（fun事件处理函数）。
Window.attanchEvent(“name”,fun); IE6,IE7和IE8支持该事件添加函数。
Window.detachEvent(“name”, fun);

Window.addEventListener(“click”, clickfun, false);
Window.attanchEvent(“onClick”, clickfun);

添加单击事件

<div id="clickid">aaa</div>
<script type="text/javascript" language="javascript">
var obj = document.getElementById("clickid");
//功能检测技术
if(obj.addEventListener){
alert("a");
obj.addEventListener("click", clickfun, false);
}else if(obj.attachEvent){
obj.attachEvent("onclick", clickfun);
}
function clickfun(){
alert("click");
}
</script>

复制代码

22，浏览器信息。
navigator导航器对象，js通过该对象可以读取用户浏览器的信息。
navigator.userAgent; 用户代理头信息，请求web页面时，浏览器发送给web服务器的字符串。
navigator.appName; 浏览器的名称。
Navigator.appVersion; 浏览器版本号。
Navigator.appCodeName; 浏览器内部代码名称。
Navigator.language; 浏览器使用语言。如en_US表示为U.S
Navigator.platform; 计算机平台系统。

跨浏览器的js支持可以使用：功能检测技术。

23，为不支持JS的浏览器提供支持
使用<noscript>标签，当浏览器不支持js时该标签内的信息会显示。

24， JS代码风范
多注释，少逻辑。
每句js语句以分号结束。
变量声明用var关键字。
多调试用alert。

25， Js错误处理
使用window.onerror属性指定一个函数来设置错误处理程序。一旦指定了错误处理程序，当脚本运行出错时，浏览器将会调用这个指定的函数，而不是弹出常规的错误对话框。

<script language="javascript" type="text/javascript">
function errmsg(message, url, line){
alert("there is error："+message+"=="+line+"=="+url);
return true;
}
window.onerror = errmsg;
obj.get();
</script>

复制代码

上面定义的errmsg为window.onerror的错误处理函数。如果该函数的返回值为true，则表示函数已对错误进行了处理，并且屏蔽了默认错误处理或对话框。相反如果返回false，则退出函数后，仍然会进行默认错误处理。

使用try和catch来处理错误代码
try{
obj.get();
}catch(err){
alert(err.description);
}

26， Ajax
Ajax过程
创建请求：
Ajaxreq = new XMLHttpRequest();
Ajaxreq = new ActiveXObject(“Microsoft.XMLHTTP”);//兼容IE5和IE6
打开URL：
Ajaxreq.open(“GET”, “url?para”, true);
Ajaxreq.open(“POST”,”url”,true);

发送请求：
Ajaxreq.send(null);
Ajaxreq.send(para); //post提交参数
等待响应：
Ajaxa.onreadystatechange = ajaxResponse;//响应函数
解释响应数据：
Ajaxreq.readyState
0（未初始化）：对象创建成功，但未调用open
1（初始化）：open方法调用成功，但尚未发送至服务器
2（请求发送成功）：send方法调用成功，请求已经发送至服务器
3（数据下载中）：服务器已经返回信息，并且开始下载数据
4（请求结束）：服务器下载数据成功，或者网络连接中断请求出错。

27， Image对象。
Image对象的属性：
Complete：该属性用于指示图像是否已经被完全加载，该属性是一个boolean值。
Height和width：该属性给出了图像的尺寸信息。
Hspace和vspace：给出图像的位置信息。
Name：表示图像的属性。
Src：表示他图像的源或url。

28， Js获取窗口或对象的大小，位置
获取窗口或对象的大小
clientWidth和clientHeight：获取窗口/元素的可视区域大小，不包含滚动条和边框。
offsetWidth和offsetHeight：同样是获取窗口/元素的大小，这个属性的大小包括边框和滚动条。

<style>
#de{ position:relative; border:solid 1px gray; width:100px; height:100px; overflow:hidden;}
#te{ position:absolute; top:100px; left:5px;}
</style>
<body>
<div>
<p>jjd jl fsa lwe jdlkjew lj jwke ml wej </p>
</div>
<div id="de">
<div id="te">
<p>adf dfasdf</p>
<p>dfd jj njkjlkj j ljl jlkj j ljlj j</p>
<p>jlkj jlkj l kj kllj </p>
</div>
</div>
<script language="javascript" type="text/javascript">
var $ = function (id){
return document.getElementById(id);
}
var de = $("de"),
te = $("te");
var teh = te.offsetHeight,
deh = de.offsetHeight;
var tetop = deh;
function scrolld(){
if(--tetop < 0-teh){
tetop = deh;
te.style.top = tetop;
window.setTimeout("scrolld();", 30);
}else{
te.style.top = tetop;
window.setTimeout("scrolld();", 30);
}
}
window.setTimeout("scrolld();", 30);
</script>
</body>

复制代码

获取对象的位置
offsetLeft和offsetTop：获取对象的相对位置，获取位置是比较麻烦，因为其存在浏览器兼容问题，不同的浏览器参照物可能不同，对于 IE 来说，他相对于 parentNode，对于其他浏览器来说，它相对于某个 position 不等于 static 的祖先节点。
不过，幸运的是所有浏览器都有一个 offsetParent 来指向它的参照物。那们，我们就可以轻松地获取到元素相对于其参考物的位置。写一个循环，直接其指向浏览器窗口的边缘。

function(){
var culeft = 0, cutop = 0;
if(obj.offsetParent){
culeft = obj.offsetLeft;
cutop = obj.offsetTop;
obj = obj.offsetParent;
}
return [culeft, cutop];
}
居中显示边距=======================================================
<style>
#did{ position:absolute; width:500px; border: solid 1px #aaa; padding: 10px;}
</style>
<body>
<div>
<ul>
<li>aaaaaaaaaaaaaaa</li>
<li>aaaaaaaaaaaaaaa</li>
<li>aaaaaaaaaaaaaaa</li>
</ul>
</div>
<div id="did">
whith:<span id="w"></span>---height:<span id="h"></span>
left:<span id="l"></span>---top:<span id="t"></span>
<p>jdfdsljf jsdflj dsfjsdaf sdljf djflsd j dfljds fdljf sdlfjd fljds fj</p>
</div>
<script type="text/javascript" language="javascript">
var $ = function(id){
return document.getElementById(id);
}
var htmlobj = document.documentElement,
divobj = $("did"),
divwid = $("w"),
divhid = $("h"),
divlid = $("l"),
divtid = $("t");
var divw = divobj.offsetWidth,
divh = divobj.offsetHeight;
var setdiv = function (){
var htmlw = htmlobj.clientWidth,
htmlh = htmlobj.clientHeight;
var marginx = htmlw > divw ? -(divw/2) : 0,
marginy = htmlh > divh ? -(divh/2): 0;
var left = marginx == 0 ? 0 : "50%",
top = marginy == 0 ? 0 : "50%";
divobj.style.left = left;
divobj.style.top = top;
divobj.style.marginLeft = marginx;
divobj.style.marginTop = marginy;
}
var getdiv = function(){
var culeft = 0, cutop = 0, obj = divobj;
if(obj.offsetParent){
culeft = obj.offsetLeft;
cutop = obj.offsetTop;
obj = obj.offsetParent;
}
divlid.innerHTML = culeft;
divtid.innerHTML = cutop;
}
window.onresize = function(){
setdiv();
getdiv();
}
</script>
</body>

复制代码

29， Js控制css样式文件有效性

<link rel="stylesheet" href="test25-1.css" type="text/css" disabled="disabled"/>
<link rel="stylesheet" href="test25-2.css" type="text/css" />
<script language="javascript" type="text/javascript">
function clickstyle(n){
var lin = document.getElementsByTagName("link");
for(var i = 0; i < lin.length; i++){
if(i == n){
lin[n].disabled = true;
}else{
lin[i].disabled = false;
}
}
}
</script>