忘记密码   免费注册 查看新帖 | 论坛精华区

ChinaUnix.net

  平台 论坛 博客 认证专区 大话IT 视频 徽章 文库 沙龙 自测 下载 频道自动化运维 虚拟化 储存备份 C/C++ PHP MySQL 嵌入式 Linux系统
最近访问板块 发新帖
查看: 8890 | 回复: 1

JS入门经典 [复制链接]

论坛徽章:
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之间的随机小数。
保留两位小数:
  1. Function round(num){
  2. return Math.round(num*100)/100;
  3. }
  4. 生成随机数
  5. Function rand(num){
  6. Return Math.floor(Math.random()*num)+1;
  7. }
复制代码
11, With关键字
With关键字指定一个对象,后面跟着大括号的一个语句块,对于语句块中的每一条语句,没有指定对象的属性都将被假定为该对象的属性。从而可以节约写的代码的时间。
  1. var str = “abcdefg”;
  2. With(str){
  3. Alert(toUpperCase()+“,”+length);
  4. }
复制代码
12, Date对象
Date对象的创建:
  1. Var date = new Date() // 创建当前时间。
  2. Var date = new Date(2011, 9, 20);
  3. Var date = new Date(2011, 9, 20, 15, 30, 20);
  4. setDate():设置某日
  5. setMonth():设置某月
  6. setFullYear():设置某年
  7. setTime():设置时间
  8. setHours():设置小时
  9. setMinutes():设置分钟
  10. setSeconds():设置秒
  11. getDate():获取某日
  12. getMonth():获取某月
  13. getFullYear():获取某年
  14. getTime():获取时间
  15. getHours():获取小时
  16. getMinutes():获取分钟
  17. getSeconds():获取秒
复制代码
根据日期排序时间
  1. var arr = new Array();
  2. arr[0] = new Date();
  3. arr[1] = new Date(2001, 3, 28);
  4. arr[2] = new Date(2002, 6, 25);
  5. arr[3] = new Date(2002, 6, 24);

  6. alert(arr[1].getDate());

  7. function arcompare(da, db){
  8. return da.getDate() - db.getDate();
  9. }

  10. arr.sort(arcompare);

  11. 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—元素出现的对象。

按键显示
  1. function displaykey(e){

  2. if(e.keyCode) var keycode = e.keyCode;
  3. else keycode = e.which;
  4. var charvar = String.fromCharCode(keycode);
  5. var ke = document.getElementById("keydis");
  6. ke.innerHTML += charvar;
  7. }

  8. 14, 打开和关闭窗口,调整窗口大小和位置。
  9. Window.open():打开窗口。
  10. Window.close():关闭窗口。
  11. Window.moveTo(x,y):移动窗口的位置—绝对
  12. Window.moveBy(x,y):移动窗口的位置—相对
  13. Window.resizeTo(w,h):调整窗口的大小—绝对
  14. Window.resizeBy(w,h):调整窗口的大小—相对

  15. var newwin;

  16. function opnewwin(){
  17. newwin = window.open("", "nwin", "toolbar=no, status=no, width=200, height=100");

  18. }

  19. function closenewwin(){
  20. newwin.close();
  21. }

  22. function movenewwin(){
  23. var w = document.theform.w.value;
  24. var h = document.theform.h.value;
  25. var x = document.theform.x.value;
  26. var y = document.theform.y.value;
  27. if(w && h){
  28. newwin.resizeTo(w, h);
  29. }
  30. if(x && y){
  31. newwin.moveTo(x, y);
  32. }
  33. }

  34. <form name="theform">
  35. <input type="button" value="OPEN NEW WIN" onclick="opnewwin()"/>
  36. <input type="button" value="CLOSE NEW WIN" onclick="closenewwin()"/>
  37. <br />
  38. width:<input type="text" name="w"/>
  39. height:<input type="text" name="h"/><br />
  40. x-postion:<input type="text" name="x"/>
  41. y-postion:<input type="text" name="y"/><br />
  42. <input type="button" value="go" onclick="movenewwin()"/>
  43. </form>
复制代码
15, Js超时功能
Var indent = window.setTimeOut(“alert(‘aa’)”, 1000);//1000毫秒后执行一次alert
Window.clearTimeOut(ident);//停止超时事件

刷新
  1. Var count = 0;
  2. Function updatePage(){
  3. Count++;
  4. Var id = window.setTimeOut(“updatePage()”,1000);
  5. }
复制代码
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:文本输入中文本被选择时发生的事件

焦点事件
  1. function focusinput(){
  2. alert("请先输入用户名");
  3. document.theform.inp.focus();
  4. }

  5. <form name="theform">
  6. 用户名:<input name="inp" type="text" />
  7. 密码:<input name="in" type="text" onfocus="focusinput()" />

  8. </form>
复制代码
19, Js改变CSS样式
document.getElementById(id).style.css=value

改变CSS颜色
  1. function changesele(){
  2. var val = document.theform.sele.value;
  3. document.getElementById("div").style.color=val;
  4. }
  5. <div id="div">test color</div>
  6. <form name="theform">
  7. <select name="sele" onchange="changesele()">
  8. <option value="blue">blue</option>
  9. <option value="red">red</option>
  10. <option value="gray">gray</option>
  11. </select>
  12. </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的参数,则该副本包括原始节点的所有子节点。

树形菜单:
  1. <script type="text/javascript" language="javascript">
  2. function menuli(obj){
  3. var pid = obj.getAttribute("id");
  4. var cid = pid + "-" + "menu";
  5. var cul = document.getElementById(cid);
  6. var pval = obj.firstChild.nodeValue.substring(3)
  7. if(cul.style.display=="none"){
  8. var pr = "[-] " + pval;
  9. obj.firstChild.nodeValue = pr;
  10. cul.style.display = "block";
  11. }else{
  12. var pj = "[+] " + pval;
  13. obj.firstChild.nodeValue = pj;
  14. cul.style.display = "none";
  15. }
  16. }
  17. </script>


  18. <div>
  19. <ul>
  20. <li><a id="one" href="#" onclick="menuli(this)">[-] one menu</a>
  21. <ul id="one-menu">
  22. <li><a href="#">one child1</a></li>
  23. <li><a href="#">one child2</a></li>
  24. </ul>
  25. </li>
  26. <li><a id="two" href="#" onclick="menuli(this)">[-] two menu</a>
  27. <ul id="two-menu">
  28. <li><a href="#">two child1</a></li>
  29. <li><a href="#">two child2</a></li>
  30. </ul>
  31. </li>
  32. </ul>
  33. </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);

添加单击事件
  1. <div id="clickid">aaa</div>
  2. <script type="text/javascript" language="javascript">

  3. var obj = document.getElementById("clickid");
  4. //功能检测技术
  5. if(obj.addEventListener){
  6. alert("a");
  7. obj.addEventListener("click", clickfun, false);
  8. }else if(obj.attachEvent){
  9. obj.attachEvent("onclick", clickfun);
  10. }

  11. function clickfun(){
  12. alert("click");
  13. }
  14. </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属性指定一个函数来设置错误处理程序。一旦指定了错误处理程序,当脚本运行出错时,浏览器将会调用这个指定的函数,而不是弹出常规的错误对话框。
  1. <script language="javascript" type="text/javascript">
  2. function errmsg(message, url, line){
  3. alert("there is error:"+message+"=="+line+"=="+url);
  4. return true;
  5. }
  6. window.onerror = errmsg;

  7. obj.get();
  8. </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:同样是获取窗口/元素的大小,这个属性的大小包括边框和滚动条。

  1. <style>
  2. #de{ position:relative; border:solid 1px gray; width:100px; height:100px; overflow:hidden;}
  3. #te{ position:absolute; top:100px; left:5px;}
  4. </style>


  5. <body>
  6. <div>
  7. <p>jjd jl fsa lwe jdlkjew lj jwke ml wej </p>
  8. </div>

  9. <div id="de">
  10. <div id="te">
  11. <p>adf dfasdf</p>
  12. <p>dfd jj njkjlkj j ljl jlkj j ljlj j</p>
  13. <p>jlkj jlkj l kj kllj </p>
  14. </div>
  15. </div>
  16. <script language="javascript" type="text/javascript">

  17. var $ = function (id){
  18. return document.getElementById(id);
  19. }

  20. var de = $("de"),
  21. te = $("te");

  22. var teh = te.offsetHeight,
  23. deh = de.offsetHeight;


  24. var tetop = deh;

  25. function scrolld(){
  26. if(--tetop < 0-teh){
  27. tetop = deh;
  28. te.style.top = tetop;
  29. window.setTimeout("scrolld();", 30);
  30. }else{
  31. te.style.top = tetop;
  32. window.setTimeout("scrolld();", 30);
  33. }
  34. }

  35. window.setTimeout("scrolld();", 30);

  36. </script>
  37. </body>
复制代码
获取对象的位置
offsetLeft和offsetTop:获取对象的相对位置,获取位置是比较麻烦,因为其存在浏览器兼容问题,不同的浏览器参照物可能不同,对于 IE 来说,他相对于 parentNode,对于其他浏览器来说,它相对于某个 position 不等于 static 的祖先节点。
不过,幸运的是所有浏览器都有一个 offsetParent 来指向它的参照物。那们,我们就可以轻松地获取到元素相对于其参考物的位置。写一个循环,直接其指向浏览器窗口的边缘。
  1. function(){
  2. var culeft = 0, cutop = 0;
  3. if(obj.offsetParent){
  4. culeft = obj.offsetLeft;
  5. cutop = obj.offsetTop;
  6. obj = obj.offsetParent;
  7. }
  8. return [culeft, cutop];
  9. }
  10. 居中显示边距=======================================================
  11. <style>
  12. #did{ position:absolute; width:500px; border: solid 1px #aaa; padding: 10px;}
  13. </style>

  14. <body>
  15. <div>
  16. <ul>
  17. <li>aaaaaaaaaaaaaaa</li>
  18. <li>aaaaaaaaaaaaaaa</li>
  19. <li>aaaaaaaaaaaaaaa</li>
  20. </ul>
  21. </div>
  22. <div id="did">
  23. whith:<span id="w"></span>---height:<span id="h"></span>
  24. left:<span id="l"></span>---top:<span id="t"></span>
  25. <p>jdfdsljf jsdflj dsfjsdaf sdljf  djflsd j dfljds fdljf sdlfjd fljds fj</p>

  26. </div>

  27. <script type="text/javascript" language="javascript">
  28. var $ = function(id){
  29. return document.getElementById(id);
  30. }

  31. var htmlobj = document.documentElement,
  32. divobj = $("did"),
  33. divwid = $("w"),
  34. divhid = $("h"),
  35. divlid = $("l"),
  36. divtid = $("t");

  37. var divw = divobj.offsetWidth,
  38. divh = divobj.offsetHeight;

  39. var setdiv = function (){
  40. var htmlw = htmlobj.clientWidth,
  41. htmlh = htmlobj.clientHeight;

  42. var marginx = htmlw > divw ? -(divw/2) : 0,
  43. marginy = htmlh > divh ? -(divh/2): 0;

  44. var left = marginx == 0 ? 0 : "50%",
  45. top = marginy == 0 ? 0 : "50%";

  46. divobj.style.left = left;
  47. divobj.style.top = top;
  48. divobj.style.marginLeft = marginx;
  49. divobj.style.marginTop = marginy;
  50. }

  51. var getdiv = function(){
  52. var culeft = 0, cutop = 0, obj = divobj;
  53. if(obj.offsetParent){
  54. culeft = obj.offsetLeft;
  55. cutop = obj.offsetTop;
  56. obj = obj.offsetParent;
  57. }
  58. divlid.innerHTML = culeft;
  59. divtid.innerHTML = cutop;
  60. }

  61. window.onresize = function(){
  62. setdiv();
  63. getdiv();
  64. }

  65. </script>

  66. </body>
复制代码
29, Js控制css样式文件有效性
  1. <link rel="stylesheet" href="test25-1.css" type="text/css"  disabled="disabled"/>
  2. <link rel="stylesheet" href="test25-2.css" type="text/css" />
  3. <script language="javascript" type="text/javascript">

  4. function clickstyle(n){
  5. var lin = document.getElementsByTagName("link");

  6. for(var i = 0; i < lin.length; i++){
  7. if(i == n){
  8. lin[n].disabled = true;
  9. }else{
  10. lin[i].disabled = false;
  11. }
  12. }
  13. }

  14. </script>
复制代码
30, Eval函数
eval:将一个字符串作为javascript语句执行。
  1. eval("x=10;y=20;document.write(x*y)"); 200
  2. document.write(eval(“2+2”)); 4
  3. var x = 10;
  4. document.write(eval(x+17)); 27
复制代码

论坛徽章:
0
发表于 2011-12-24 21:30 |显示全部楼层
谢谢分享  希望于楼主多多交流
您需要登录后才可以回帖 登录 | 注册

本版积分规则

SACC2017购票7.8折优惠进行时

2017中国系统架构师大会(SACC2017)将于10月19-21日在北京新云南皇冠假日酒店震撼来袭。今年,大会以“云智未来”为主题,云集国内外顶级专家,围绕云计算、人工智能、大数据、移动互联网、产业应用等热点领域展开技术探讨与交流。本届大会共设置2大主会场,18个技术专场;邀请来自互联网、金融、制造业、电商等多个领域,100余位技术专家及行业领袖来分享他们的经验;并将吸引4000+人次的系统运维、架构师及IT决策人士参会,为他们提供最具价值的交流平台。
----------------------------------------
优惠时间:2017年8月2日前

活动链接>>
  

北京皓辰网域网络信息技术有限公司. 版权所有 京ICP证:060528号 北京市公安局海淀分局网监中心备案编号:1101082001
广播电视节目制作经营许可证(京) 字第1234号 中国互联网协会会员  联系我们:
感谢所有关心和支持过ChinaUnix的朋友们 转载本站内容请注明原作者名及出处

清除 Cookies - ChinaUnix - Archiver - WAP - TOP