分享

javascript笔记

 司马小贼 2018-02-28

最近整理了javascript的一些知识点~

引入js的用法:

  1. <!doctype html>  
  2. <html lang="en">  
  3.  <head>  
  4.   <meta charset="UTF-8">  
  5.   <meta name="Generator" content="EditPlus?">  
  6.   <title>index </title>  
  7.   <script type="text/javascript" src="results.js"/></script>  
  8.   <link rel="result.css" type="text/css"/>  
  9. </head>  
  10. <body>  
  11.   <p id="dateField"> </p>  
  12. </body>  
  13. </html>  

Date对象:

[javascript] view plain copy
print?
  1. var myDate=new Date();  
  2. var dateString=myDate.toLocaleDateString()+"  "+myDate.toLocaleTimeString();  
  3. var dateLoc=document.getElementById("dateField");  
  4. dateLoc.innerHTML="Hello-Page Rendered on"+dateString;  

倒计时到将来某一天:

[javascript] view plain copy
print?
  1. var today=new Date();  
  2. var then=new Date();  
  3. then.setFullYear(2012,0,1);  
  4. var diff=then.getTime()-today.getTime();  //getTime()得到的是以毫秒为单位。  
  5. diff=Math.floor(diff/(1000*60*60*24));  
  6. var dateLoc=document.getElementById("dateFiled");  
  7. dateLoc.innerHTML="There are"+diff+"days until 1/1/2012";  

计算渲染时间:

[javascript] view plain copy
print?
  1. var started=new Date();  
  2.   
  3. var now=started.getTime();  
  4. var bottom=new Date();  
  5. var diff=(bottom.getTime()-now)/1000;  
  6. var finaltime=diff.toPrecision(5);  
  7. var dateLoc=document.getElementById("dateFiled");  
  8. dateLoc.innerHTML="Page rendered in"+finaltime+"seconds.";  

拖迟:

[javascript] view plain copy
print?
  1. for(var i=0;i<100000;i++){  
  2. //delay  
  3. }  

正则表达式:

[javascript] view plain copy
print?
  1. var myString="http://www.";  
  2. var myRegex=/http:\/\/\w+\.(.*)/;  
  3. var results=myRegex.exec(myString);  
  4. alert(results[1]);  

match 方法:

[javascript] view plain copy
print?
  1. var emailAddr="suehring@braingia.com";  
  2. var myRegex=/\.com/;  
  3. var checkMatch=emailAddr.match(myRegex);  
  4. alert(checkMatch[0]);  

判断一个给定的email地址是否包含字符串.com

[javascript] view plain copy
print?
  1. var emailAddr="suehring@braingia.com";  
  2. var myRegex=/\.com/;  
  3. var checkMatch=emailAddr.match(myRegex);  
  4. if(checkMatch!==null){  
  5. alert(checkMatch[0]);  
  6. }  

search方法:(返回的是第一次匹配的索引值(位置))

[javascript] view plain copy
print?
  1. var emailAddr="suehring@braingia.com";  
  2. var myRegex=/\.com/;  
  3. var searchResult=emailAddr.search(myRegex);  
  4. alert(checkMatch[0]);  

replace方法:

[javascript] view plain copy
print?
  1. var emailAddr="suehring@braingia.com";  
  2. var myRegex=/\.com$/;  
  3. var replaceWith=".net";  
  4. var result=emailAddr.match(myRegex);  
  5. alert(result);  

使用detele操作符:

[javascript] view plain copy
print?
  1. <span style="font-family:SimSun;font-size:12px;">var star={};  
  2. star["Polaris"]=new object;  
  3. star["Mizar"]=new object;  
  4. star["Aldebaran"]=new object;  
  5. star["Rigel"]=new object;  
  6. star["Polaris"].constellation="Ursa Minor";  
  7. star["Mizar"].constellation="Ursa Minor";  
  8. star["Aldebaran"].constellation="Ursa Minor";  
  9. star["Rigel"].constellation="Ursa Minor";  
  10. detele(star["Polaris"].constellation);  
  11.    
  12. for(starName in star){  
  13. var para=document.createElement('p');  
  14. para.id=starName;  
  15. para.appendChild(document.createTextNode(starName+":"+star[starName].constellation));  
  16. document.getElementsByTagName("body")[0].appendChild(para);  
  17. }</span>  

for in 循环:

[javascript] view plain copy
print?
  1. for(var myProp in myObject){  
  2. alert(myProp+" ="+myObject[myProp]);  
  3. }  
  4. var star=new object;  
  5. star.name="";  
  6. star.type="";  
  7. star.constellation="";  
  8. for(var starProp in star){  
  9. alert(starProp+"="+star[starProp]);  
  10. }  
表单验证:

  1. <!doctype html>  
  2. <html lang="en">  
  3.  <head>  
  4.   <meta charset="UTF-8">  
  5.   <meta name="Generator" content="EditPlus®">  
  6.   <title>情感分析结果</title>  
  7.   <script type="text/javascript" src="results.js"/></script>  
  8.   <link rel="result.css" type="text/css"/>  
  9.  </head>  
  10.  <body>  
  11.  <form id="myfrom" action="#" onsubmit="return alertName();">  
  12.  <p>Username:<input id="nametext" name="username" type="text"/></p>  
  13.  <p><input type="submit"/></p>  
  14.  </form>  
  15.  </body>  
  16. </html>  
  17. function alertName(){  
  18. var name=document.forms[0].nametext.value;  
  19. if(name=="steve"){  
  20. alert("Hello Steve. Welcome to Machine");  
  21. }  
  22. else if(name=="nancy"){  
  23. alert("Hello Tim.");  
  24. }  
  25. else{  
  26. alert("Hello"+name);  
  27. }  
  28. return true;  
  29. }  

Window对象的一些属性:

close:窗口关闭时设置为true

defaultStatus:用来设置出现在浏览器状态栏中的默认文本;

name:窗口第一次被打开时所设置的窗口的名字;

opener:引用创建这个窗口的窗口;

parent:常常和帧一起使用,指创建特定窗口的窗口,或者该帧的上一级窗口;

status:常常用来设置当访问者悬停在链接这样的元素上的时候状态栏中的文本;

top:最高或最顶层的父窗口;


window对象的一些方法:

addEventListener():跨浏览器(除了Internet Explorer)事件处理程序方法。

attachEvent():跨浏览器Internet Explorer事件处理程序方法。

blur():把键盘输入的焦点从浏览器窗口移开。

focus():把键盘输入的焦点移动到浏览器窗口。

close():关闭浏览器窗口。

detachEvent():跨浏览器Internet Explorer事件处理程序删除方法。

removeEventListener():跨浏览器(除了Internet Explorer)事件处理程序删除方法。

open():打开一个窗口。

print():导致调用浏览器的打印函数,其行为就像有人点击了浏览器的print按钮。


Window对象移动和调整窗口大小的方法:

moveBy():用来把窗口移动到一个相对位置

moveTo():用来把窗口移动到一个特定位置

resizeBy():用来按一相对量改变窗口大小

resizeTo():用来把窗口大小改变到一个特定大小

Window对象中与定时器相关的方法:

clearInterval():

clearTimeout():

setInterval():

setTimeout():


获取有关屏幕的信息:

availHeight/availWidth(可用高度)/colorDepth/height/width(总高度)

e.g:alert(screen.availHeight);


获取元素:

getElementById()getElementsByTagName()

HTML集合:

Document.anchors

Document.forms

Document.images

Document.links


Window尺寸:

var w=window.innerWidth

|| document.documentElement.clientWidth

|| document.body.clientWidth;

 

var h=window.innerHeight

|| document.documentElement.clientHeight

|| document.body.clientHeight;


    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多