`

javascript基础知识大集锦(1)

    博客分类:
  • JS
阅读更多
转载:http://www.iteye.com/topic/867588

主要知识点:js数组,数字函数,字符串函数,表单验证,hashMap,堆栈,日期函数,call函数 等。
next:js正则表达式,闭包,apply,callee,事件相关函数,Cookie等

1.javascript的数组API
//定义数组
        var pageIds = new Array();
        pageIds.push('A');

        数组长度
        pageIds.length;

//shift:删除原数组第一项,并返回删除元素的值;如果数组为空则返回undefined 
var a = [1,2,3,4,5]; 
var b = a.shift(); //a:[2,3,4,5]   b:1 

//unshift:将参数添加到原数组开头,并返回数组的长度 
var a = [1,2,3,4,5]; 
var b = a.unshift(-2,-1); //a:[-2,-1,1,2,3,4,5]   b:7 
//注:在IE6.0下测试返回值总为undefined,FF2.0下测试返回值为7,所以这个方法的返回值不可靠,需要用返回值时可用splice代替本方法来使用。 

//pop:删除原数组最后一项,并返回删除元素的值;如果数组为空则返回undefined 
var a = [1,2,3,4,5]; 
var b = a.pop(); //a:[1,2,3,4]   b:5 

//push:将参数添加到原数组末尾,并返回数组的长度 
var a = [1,2,3,4,5]; 
var b = a.push(6,7); //a:[1,2,3,4,5,6,7]   b:7 

//concat:返回一个新数组,是将参数添加到原数组中构成的 
var a = [1,2,3,4,5]; 
var b = a.concat(6,7); //a:[1,2,3,4,5]   b:[1,2,3,4,5,6,7] 

//splice(start,deleteCount,val1,val2,):从start位置开始删除deleteCount项,并从该位置起插入val1,val2, 
var a = [1,2,3,4,5]; 
var b = a.splice(2,2,7,8,9); //a:[1,2,7,8,9,5]   b:[3,4] 
var b = a.splice(0,1); //同shift 
a.splice(0,0,-2,-1); var b = a.length; //同unshift 
var b = a.splice(a.length-1,1); //同pop 
a.splice(a.length,0,6,7); var b = a.length; //同push 

//reverse:将数组反序 
var a = [1,2,3,4,5]; 
var b = a.reverse(); //a:[5,4,3,2,1]   b:[5,4,3,2,1] 

//sort(orderfunction):按指定的参数对数组进行排序 
var a = [1,2,3,4,5]; 
var b = a.sort(); //a:[1,2,3,4,5]   b:[1,2,3,4,5] 

//slice(start,end):返回从原数组中指定开始下标到结束下标之间的项组成的新数组 
var a = [1,2,3,4,5]; 
var b = a.slice(2,5); //a:[1,2,3,4,5]   b:[3,4,5] 

//join(separator):将数组的元素组起一个字符串,以separator为分隔符,省略的话则用默认用逗号为分隔符 
var a = [1,2,3,4,5]; 
var b = a.join("|"); //a:[1,2,3,4,5]   b:"1|2|3|4|5" 


2.dom最常用API

document方法: 
getElementById(id) Node 返回指定结点的引用 
getElementsByTagName(name) NodeList 返回文档中所有匹配的元素的集合 
createElement(name) Node Node 
createTextNode(text) Node 创建一个纯文本结点 
ownerDocument Document 指向这个节点所属的文档 
documentElement Node 返回html节点 
document.body Node 返回body节点 

element方法: 
getAttribute(attributeName) String 返回指定属性的值 
setAttribute(attributeName,value) String 给属性赋值 
removeAttribute(attributeName) String 移除指定属性和它的值 
getElementsByTagName(name) NodeList 返回结点内所有匹配的元素的集合 

node方法: 
appendChild(child) Node 给指定结点添加一个新的子结点 
removeChild(child) Node 移除指定结点的子结点 
replaceChild(newChild,oldChild) Node 替换指定结点的子结点 
insertBefore(newChild,refChild) Node 在同一层级的结点前面插入新结点 
hasChildNodes() Boolean 如果结点有子结点则返回true 

node属性: 
nodeName String 以字符串的格式存放结点的名称 
nodeType String 以整型数据格式存放结点的类型 
nodeValue String 以可用的格式存放结点的值 
parentNode Node 指向结点的父结点的引用 
childNodes NodeList 指向子结点的引用的集合 
firstChild Node 指向子结点结合中的第一个子结点的引用 
lastChild Node 指向子结点结合中的最后一个子结点的引用 
previousSibling Node 指向前一个兄弟节点;如果这个节点就是兄弟节点,那么该值为null 
nextSibling Node 指向后一个兄弟节点;如果这个节点就是兄弟节点,那么该值为null 


3.网上搜藏的一个map对象:

function HashMap()   
 {   
     /** Map 大小 **/  
     var size = 0;   
     /** 对象 **/  
     var entry = new Object();   
        
     /** 存 **/  
     this.put = function (key , value)   
     {   
         if(!this.containsKey(key))   
         {   
             size ++ ;   
         }   
         entry[key] = value;   
     }   
        
     /** 取 **/  
     this.get = function (key)   
     {   
         return this.containsKey(key) ? entry[key] : null;   
     }   
        
     /** 删除 **/  
     this.remove = function ( key )   
     {   
         if( this.containsKey(key) && ( delete entry[key] ) )   
         {   
             size --;   
         }   
     }   
        
     /** 是否包含 Key **/  
     this.containsKey = function ( key )   
     {   
         return (key in entry);   
     }   
        
     /** 是否包含 Value **/  
     this.containsValue = function ( value )   
     {   
         for(var prop in entry)   
         {   
             if(entry[prop] == value)   
             {   
                 return true;   
             }   
         }   
         return false;   
     }   
        
     /** 所有 Value **/  
     this.values = function ()   
     {   
         var values = new Array();   
         for(var prop in entry)   
         {   
             values.push(entry[prop]);   
         }   
         return values;   
     }   
        
     /** 所有 Key **/  
     this.keys = function ()   
     {   
         var keys = new Array();   
         for(var prop in entry)   
         {   
             keys.push(prop);   
         }   
         return keys;   
     }   
        
     /** Map Size **/  
     this.size = function ()   
     {   
         return size;   
     }   
        
     /* 清空 */  
     this.clear = function ()   
     {   
         size = 0;   
         entry = new Object();   
     }   
 }   
    
 var map = new HashMap();   
    
 /*  
 map.put("A","1");  
 map.put("B","2");  
 map.put("A","5");  
 map.put("C","3");  
 map.put("A","4");  
 */  
 /*  
 alert(map.containsKey("XX"));  
 alert(map.size());  
 alert(map.get("A"));  
 alert(map.get("XX"));  
 map.remove("A");  
 alert(map.size());  
 alert(map.get("A"));  
 */  
    
 /** 同时也可以把对象作为 Key **/  
 /*  
 var arrayKey = new Array("1","2","3","4");  
 var arrayValue = new Array("A","B","C","D");  
 map.put(arrayKey,arrayValue);  
 var value = map.get(arrayKey);  
 for(var i = 0 ; i < value.length ; i++)  
 {  
     //alert(value[i]);  
 }  
 */  
 /** 把对象做为Key时 ,自动调用了该对象的 toString() 方法 其实最终还是以String对象为Key**/  
    
 /** 如果是自定义对象 那自己得重写 toString() 方法 否则 . 就是下面的结果 **/  
    
 function MyObject(name)   
 {   
     this.name = name;   
 }   
    
 /**  
 function MyObject(name)  
 {  
     this.name = name;  
       
     this.toString = function ()  
     {  
         return this.name;  
     }  
 }  
 **/  
 var object1 = new MyObject("小张");   
 var object2 = new MyObject("小名");   
    
 map.put(object1,"小张");   
 map.put(object2,"小名");   
 alert(map.get(object1));   
 alert(map.get(object2));   
 map.remove("xxxxx");   
 alert(map.size());   
    
 /** 运行结果 小名 小名 size = 1 **/  
    
 /** 如果改成复写toString()方法的对象 , 效果就完全不一样了 **/  
    
 </script>  


4.常用的数字函数:

·数字型(Number) 
  1.声明 
    var i = 1; 
    var i = new Number(1); 

  2.字符串与数字间的转换 
    var i = 1; 
    var str = i.toString();     //结果: "1" 
    var str = new String(i);    //结果: "1" 
    i = parseInt(str);          //结果: 1 
    i = parseFloat(str);        //结果: 1.0 
    
    //注意: parseInt,parseFloat会把一个类似于"32G"的字符串,强制转换成32 

  3.判断是否为有效的数字 
    var i = 123;  var str = "string"; 
    if( typeof i == "number" ){ }   //true 
    
    //某些方法(如:parseInt,parseFloat)会返回一个特殊的值NaN(Not a Number) 
    //请注意第2点中的[注意],此方法不完全适合判断一个字符串是否是数字型!! 
    i = parseInt(str); 
    if( isNaN(i) ){ } 
    
  4.数字型比较 
    //此知识与[字符串比较]相同 

  5.小数转整数 
    var f = 1.5; 
    var i = Math.round(f);  //结果:2 (四舍五入) 
    var i = Math.ceil(f);   //结果:2 (返回大于f的最小整数) 
    var i = Math.floor(f);  //结果:1 (返回小于f的最大整数) 

  6.格式化显示数字 
    var i = 3.14159; 
    
    //格式化为两位小数的浮点数 
    var str = i.toFixed(2);     //结果: "3.14" 
    
    //格式化为五位数字的浮点数(从左到右五位数字,不够补零) 
    var str = i.toPrecision(5); //结果: "3.1415" 

  7.X进制数字的转换 
    //不是很懂 -.- 
    var i = parseInt("0x1f",16); 
    var i = parseInt(i,10); 
    var i = parseInt("11010011",2); 

  8.随机数 
    //返回0-1之间的任意小数 
    var rnd = Math.random(); 
    //返回0-n之间的任意整数(不包括n)    
    var rnd = Math.floor(Math.random() * n) 


5.网上搜藏的js堆栈:

function stack(){
      if(this.top==undefined){
      //初始化堆栈的顶部指针和数据存放域
            this.top=0;
            this.unit=new Array();
      }
      this.push=function(pushvalue){
      //定义压入堆栈的方法            
            this.unit[this.top]=pushvalue;
            this.top+=1;            
      }
      this.readAllElements=function(){
      //定义读取所有数据的方法
            if(this.top==0){
                  alert("当前栈空,无法读取数据");
                  return("");
            }
            var count=0;
            var outStr="";
                        
            for(count=0;count<this.top;count++){
                  outStr+=this.unit[count]+",";
            }            
            return(outStr);
      }
      this.pop=function(){
      //定义弹出堆栈的方法
            if(this.top==0){
                  alert("当前栈空,无法弹出数据");
                  return("");
            }
            var      popTo=this.unit[this.top-1];
            this.top--;
            return(popTo);
            /* 从堆栈弹出数据,顶部指针减一,不过这里没有做到资源的释放,也
            就是说数据仍然存在于this.unit的数组中,只不过无法访问罢了。目前
            我也没想到好的办法解决。*/
      }
}

6.最常用的JavaScript日期函数:


·日期型(Date) 
  1.声明 
    var myDate = new Date();    //系统当前时间  
    var myDate = new Date(yyyy, mm, dd, hh, mm, ss); 
    var myDate = new Date(yyyy, mm, dd); 
    var myDate = new Date("monthName dd, yyyy hh:mm:ss"); 
    var myDate = new Date("monthName dd, yyyy"); 
    var myDate = new Date(epochMilliseconds); 

  2.获取时间的某部份 
    var myDate = new Date(); 
    myDate.getYear();       //获取当前年份(2位) 
    myDate.getFullYear();   //获取完整的年份(4位,1970-????) 
    myDate.getMonth();      //获取当前月份(0-11,0代表1月) 
    myDate.getDate();       //获取当前日(1-31) 
    myDate.getDay();        //获取当前星期X(0-6,0代表星期天)   
    myDate.getTime();       //获取当前时间(从1970.1.1开始的毫秒数)   时间戳!!
    myDate.getHours();      //获取当前小时数(0-23) 
    myDate.getMinutes();    //获取当前分钟数(0-59) 
    myDate.getSeconds();    //获取当前秒数(0-59) 
    myDate.getMilliseconds();   //获取当前毫秒数(0-999) 
    myDate.toLocaleDateString();    //获取当前日期 
    myDate.toLocaleTimeString();    //获取当前时间 
    myDate.toLocaleString( );       //获取日期与时间 

  3.计算之前或未来的时间 
    var myDate = new Date(); 
    myDate.setDate(myDate.getDate() + 10);  //当前时间加10天 
    //类似的方法都基本相同,以set开头,具体参考第2点 

  4.计算两个日期的偏移量 
    var i = daysBetween(beginDate,endDate); //返回天数 
    var i = beginDate.getTimezoneOffset(endDate); //返回分钟数 

  5.检查有效日期 
    //checkDate() 只允许"mm-dd-yyyy"或"mm/dd/yyyy"两种格式的日期 
    if( checkDate("2006-01-01") ){ } 
    
    //正则表达式(自己写的检查 yyyy-mm-dd, yy-mm-dd, yyyy/mm/dd, yy/mm/dd 四种) 
    var r = /^(\d{2}|\d{4})[\/-]\d{1,2}[\/-]\d{1,2}$/; 
    if( r.test( myString ) ){ } 

7.最常用字符串函数API:

·字符串(String) 
  1.声明 
    var myString = new String("Every good boy does fine."); 
    var myString = "Every good boy does fine."; 

  2.字符串连接 
    var myString = "Every " + "good boy " + "does fine."; 
    var myString = "Every ";  myString += "good boy does fine."; 

  3.截取字符串 
    //截取第 6 位开始的字符 
    var myString = "Every good boy does fine."; 
    var section = myString.substring(6);    //结果: "good boy does fine." 
    
    //截取第 0 位开始至第 10 位为止的字符 
    var myString = "Every good boy does fine."; 
    var section = myString.substring(0,10); //结果: "Every good" 
    
    //截取从第 11 位到倒数第 6 位为止的字符 
    var myString = "Every good boy does fine."; 
    var section = myString.slice(11,-6);    //结果: "boy does" 
    
    //从第 6 位开始截取长度为 4 的字符 
    var myString = "Every good boy does fine."; 
    var section = myString.substr(6,4);     //结果: "good" 

  4.转换大小写 
    var myString = "Hello"; 
    var lcString = myString.toLowerCase();  //结果: "hello" 
    var ucString = myString.toUpperCase();  //结果: "HELLO" 

  5.字符串比较 
    var aString = "Hello!"; 
    var bString = new String("Hello!"); 
    if( aString == "Hello!" ){ }    //结果: true 
    if( aString == bString ){ }     //结果: true 
    if( aString === bString ){ }    //结果: false (两个对象不同,尽管它们的值相同) 

  6.检索字符串 
    var myString = "hello everybody."; 
    // 如果检索不到会返回-1,检索到的话返回在该串中的起始位置 
    if( myString.indexOf("every") > -1 ){ } //结果: true 

  7.查找替换字符串 
    var myString = "I is your father."; 
    var result = myString.replace("is","am");   //结果: "I am your father." 

  8.特殊字符: 
    \b : 后退符         \t : 水平制表符 
    \n : 换行符         \v : 垂直制表符 
    \f : 分页符         \r : 回车符 
    \" : 双引号         \' : 单引号 
    \\ : 反斜杆 

  9.将字符转换成Unicode编码 
    var myString = "hello"; 
    var code = myString.charCodeAt(3);  //返回"l"的Unicode编码(整型) 
    var char = String.fromCharCode(66); //返回Unicode为66的字符 

  10.将字符串转换成URL编码 
    var myString = "hello all"; 
    var code = encodeURI(myString);     //结果: "hello%20all" 
    var str = decodeURI(code);          //结果: "hello all" 
    //相应的还有:  encodeURIComponent()  decodeURIComponent() 


8.数学函数:

·Math对象 
  1. Math.abs(num) : 返回num的绝对值 
  2. Math.acos(num) : 返回num的反余弦值 
  3. Math.asin(num) : 返回num的反正弦值 
  4. Math.atan(num) : 返回num的反正切值 
  5. Math.atan2(y,x) : 返回y除以x的商的反正切值 
  6. Math.ceil(num) : 返回大于num的最小整数 
  7. Math.cos(num) : 返回num的余弦值 
  8. Math.exp(x) : 返回以自然数为底,x次幂的数 
  9. Math.floor(num) : 返回小于num的最大整数 
  10.Math.log(num) : 返回num的自然对数 
  11.Math.max(num1,num2) : 返回num1和num2中较大的一个 
  12.Math.min(num1,num2) : 返回num1和num2中较小的一个 
  13.Math.pow(x,y) : 返回x的y次方的值 
  14.Math.random() : 返回0到1之间的一个随机数 
  15.Math.round(num) : 返回num四舍五入后的值 
  16.Math.sin(num) : 返回num的正弦值 
  17.Math.sqrt(num) : 返回num的平方根 
  18.Math.tan(num) : 返回num的正切值 
  19.Math.E : 自然数(2.718281828459045) 
  20.Math.LN2 : 2的自然对数(0.6931471805599453) 
  21.Math.LN10 : 10的自然对数(2.302585092994046) 
  22.Math.LOG2E : log 2 为底的自然数(1.4426950408889634) 
  23.Math.LOG10E : log 10 为底的自然数(0.4342944819032518) 
  24.Math.PI : π(3.141592653589793) 
  25.Math.SQRT1_2 : 1/2的平方根(0.7071067811865476) 
  26.Math.SQRT2 : 2的平方根(1.4142135623730951) 


9.浏览器特征函数:

1.浏览器名称 
    //IE : "Microsoft Internet Explorer" 
    //NS : "Netscape" 
    var browserName = navigator.appName; 

  2.浏览器版本 
    bar browserVersion = navigator.appVersion; 

  3.客户端操作系统 
    var isWin = ( navigator.userAgent.indexOf("Win") != -1 ); 
    var isMac = ( navigator.userAgent.indexOf("Mac") != -1 ); 
    var isUnix = ( navigator.userAgent.indexOf("X11") != -1 ); 

  4.判断是否支持某对象,方法,属性 
    //当一个对象,方法,属性未定义时会返回undefined或null等,这些特殊值都是false 
    if( document.images ){ } 
    if( document.getElementById ){ } 

  5.检查浏览器当前语言 
    if( navigator.userLanguage ){ var l = navigator.userLanguage.toUpperCase(); } 

  6.检查浏览器是否支持Cookies 
    if( navigator.cookieEnabled ){ } 
分享到:
评论

相关推荐

    javascript基础知识大集锦

    javascript基础知识大集锦javascript基础知识大集锦javascript基础知识大集锦javascript基础知识大集锦

    javascript基础知识大集锦(一) 推荐收藏

    主要知识点:js数组,数字函数,字符串函数,表单验证,hashMap,堆栈,日期函数,call函数 等。

    javascript基础知识大集锦(二) 推荐收藏

    正则表达式 call(),apply(),callee,caller,cookie方法,setInterval(),clearInterval(),setTimeout() ,clearTimeout()

    javascript试题集锦

    让基础学生 巩固 提炼 js技术 ,达到自己的新境界,同时可以训练自己js的知识体系

    前端面试常见问题集锦册

    这些问题可以涉及到前端开发的基础知识、实际项目经验、算法与数据结构、框架的使用等方面。 集锦册: 这意味着这是一本集结了前端面试中常见问题的书籍或资源。集锦册的概念是将一系列相关的问题或知识点集中整理...

    javascrip上百技术总集

    -(4) JavaScript面向对象的支持--(5) JavaScript面向对象的支持--(6) JavaScript精简学习1:基础知识 JavaScript精简学习2:浏览器输出 JavaScript精简学习3:图像 JavaScript精简学习4:表单 ...

    Python入门教程丨1300多行代码,让你轻松掌握基础知识点.pdf

    Python⼊门教程⼁1300多⾏代码,让你轻松掌握基础知识点 欢迎点击右上⾓关注⼩编,除了分享技术⽂章之外还有很多福利,私信学习资料可以领取包括不限于Python实战演练、PDF电⼦⽂档、⾯ 试集锦、学习资料等。...

    全栈开发速学速查手册集锦

    知识体系:《Awesome Lists | CS 资料集锦》、《Awesome CheatSheets | 速学速查手册》、《Awesome Interviews | 求职面试必备》、《Awesome RoadMaps | 程序员进阶指南》、《Awesome MindMaps | 知识脉络思维脑图》...

    色色整理的PHP面试题集锦

    PHP 基础知识部分 1. 求$a的值 复制代码 代码如下: $a = “hello”; $b = &$a; unset($b); $b = “world”; echo $a; 2. 求$b的值 复制代码 代码... javascript 基础知识部分 1. 谈谈js实现继承的几种方式,并写出demo 2

    asp.net知识库

    技术基础 New Folder ...知识集锦:三分钟全面了解 Blog 和 RSS C#+ASP.NET开发基于Web的RSS阅读器 ASP.NET RSS Toolkit(RSS工具) Serialize Your Deck with Positron [XML Serialization, XSD, C#]...

    java面试题目与技巧1

    │ │ javascript资料(源码,教材,ppt).rar │ │ │ └─javascript资料(源码,教材,ppt) │ 00s.jpg │ 10fdada.gif │ 1102485678850.gif │ 1102513845804.gif │ 1102525271916.gif │ 1102554652413.gif ...

    CodeBlog:Code代码博客

    Vue知识集锦 Vue-cli2.9 + webpack4.0升级 服务器发布Vue项目指南 加快Vue项目的开发速度 Electron客户端相关:laptop: Electron入门 Electron-builder打包详解 Electron单例检测 Webpack部分相关:ticket: 不得不了解...

    java面试题以及技巧

    │ │ javascript资料(源码,教材,ppt).rar │ │ │ └─javascript资料(源码,教材,ppt) │ 00s.jpg │ 10fdada.gif │ 1102485678850.gif │ 1102513845804.gif │ 1102525271916.gif │ 1102554652413.gif ...

    java面试题及技巧4

    │ │ javascript资料(源码,教材,ppt).rar │ │ │ └─javascript资料(源码,教材,ppt) │ 00s.jpg │ 10fdada.gif │ 1102485678850.gif │ 1102513845804.gif │ 1102525271916.gif │ 1102554652413.gif ...

    java面试题及技巧3

    │ │ javascript资料(源码,教材,ppt).rar │ │ │ └─javascript资料(源码,教材,ppt) │ 00s.jpg │ 10fdada.gif │ 1102485678850.gif │ 1102513845804.gif │ 1102525271916.gif │ 1102554652413.gif ...

    java面试题以及技巧6

    │ │ javascript资料(源码,教材,ppt).rar │ │ │ └─javascript资料(源码,教材,ppt) │ 00s.jpg │ 10fdada.gif │ 1102485678850.gif │ 1102513845804.gif │ 1102525271916.gif │ 1102554652413.gif ...

Global site tag (gtag.js) - Google Analytics