JavaScript 常用函数总结 · p1p

javascript函数：　　·常规函数　　·数组函数　　·日期函数　　·数学函数　　·字符串函数　　.cookie函数　　.DOM 函数 **1.常规函数** 　　javascript常规函数包括以下9个函数：　　(1)alert函数：显示一个警告对话框，包括一个OK按钮。　　(2)confirm函数：显示一个确认对话框，包括OK、Cancel按钮。　　(3)escape函数：将字符转换成Unicode码。　　(4)eval函数：计算表达式的结果。　　(5)isNaN函数：测试是(true)否(false)不是一个数字。　　(6)parseFloat函数：将字符串转换成符点数字形式。　　(7)parseInt函数：将符串转换成整数数字形式(可指定几进制)。　　(8)prompt函数：显示一个输入对话框，提示等待用户输入。例如： ~~~ 1 alert("输入错误"); 2 prompt("请输入您的姓名","姓名"); 3 confirm("确定否！"); ~~~ 　　(9)unescape函数：解码由escape函数编码的字符。　　(10)toFixed 函数:这个函数牛逼就是转化小数点几位的 checkprice.toFixed(2)；将checkprice转化为有小数点后两位的值 * * * 　**　2.数组函数** 　　javascript数组函数包括以下4个函数：　　(1)join函数：转换并连接数组中的所有元素为一个字符串。例: ~~~ 1 　　　　function JoinDemo() 2 　　　　{ 3 　　　　　var a, b; 4 　　　　　a = new Array(0,1,2,3,4); 5 　　　　　b = a.join("-");//分隔符 6 　　　　　return(b);//返回的b=="0-1-2-3-4" 7 　　　　} ~~~ (2)length函数：返回数组的长度。例： ~~~ 1 　　　　function LengthDemo() 2 　　　　{ 3 　　　　　var a, l; 4 　　　　　a = new Array(0,1,2,3,4); 5 　　　　　l = a.length; 6 　　　　　return(l);//l==5 7 　　　　} ~~~ (3)reverse函数：将数组元素顺序颠倒。例： ~~~ 　　　function ReverseDemo() 　　　{ 　　　　var a, l; 　　　　a = new Array(0,1,2,3,4); 　　　　l = a.reverse(); 　　　　return(l); 　　　} ~~~ (4)sort函数：将数组元素重新排序。例： ~~~ 1 　　　　function SortDemo() 2 　　　　{ 3 　　　　　var a, l; 4 　　　　　a = new Array("X" ,"y" ,"d", "Z", "v","m","r"); 5 　　　　　l = a.sort(); 6 　　　　　return(l); 7 　　　　} ~~~ （5）push函数:将新元素添加到一个数组中，并返回数组的新长度值。例: ~~~ 1 <script type="text/javascript"> 2 var my_array = new Array('1','2','3','4'); 3 my_array.push('5','6','7','8'); 4 alert(my_array.length);　　　　//将返回8 数组中添加了4个元素 5 </script> ~~~ （6）unshift函数：将指定的元素插入数组开始位置并返回该数组。例： ~~~ <script type="text/javascript"> var my_array = new Array('1','2','3','4'); my_array.unshift('0');　　//在数组前面追加元素 alert(my_array.length); //返回5 </script> ~~~ (7) pop函数:移除数组中的最后一个元素并返回该元素。例: ~~~ 1 <script type="text/javascript"> 2 var my_array = new Array('1','2','3','411'); 3 alert(my_array.pop());　　　　//返回411 4 alert(my_array.length);　　　//返回3 5 </script> ~~~ (8)shift函数:移除数组中的第一个元素并返回该元素。例: ~~~ 1 <script type="text/javascript"> 2 var my_array = new Array('1','2','3','4'); 5 alert(my_array.shift());　　//返回1 6 alert(my_array.length);　　 //返回3 7 </script> ~~~ (9)Obj.slice(start,end) 返回一个数组的一段，得到一个新数组。注意不包括 end 对应的元素，如果省略 end 将复制 start 之后的所有元素,例如： ~~~ 1 <script type="text/javascript"> 2 var my_array = new Array('1','2','3','4'); 5 var new_array = my_array.slice(0,2);　　//返回0-2个元素 6 var new_array = my_array.slice(0,-1);　//返回除了最后一个之外的元素 7 var new_array = my_array.slice(0);　　 //返回第0以后的所有的元素 8 for(var i =0;i<new_array.length;i++){ 9 alert(new_array[i]); 10 } 13 </script> ~~~ (10)Obj.concat(item1,item2,item3,item4,item5......) 返回一个新数组，这个新数组是由两个或更多数组（也可以是一个变量）组合而成的,。例: ~~~ 1 <script type="text/javascript"> 2 var my_array = new Array('1','2','3','4'); 3 var my_array1 = new Array('5','6'); 4 var my_array2 = new Array('7','8'); 5 var my_array3 = new Array('9'); 6 var my_name = 'SmarTop'; //也可以是一个字符串 7 var my_age = 26; //也可以是一个数字 8 var new_array = my_array.concat(my_array1,my_array2,my_array3,my_name,my_age); 9 alert(new_array); 10 </script> ~~~ **3.日期函数** 　　javascript日期函数包括以下20个函数：　　(1)getDate函数：返回日期的"日"部分，值为1～31。例： ~~~ 1 　　　function DateDemo() 2 　　　{ 3 　　　　var d, s = "Today's date is: "; 4 　　　　d = new Date(); 5 　　　　s += (d.getMonth() + 1) + "/"; 6 　　　　s += d.getDate() + "/"; 7 　　　　s += d.getYear(); 8 　　　　return(s); 9 　　　} ~~~ 　　(2)getDay函数：返回星期几，值为0～6，其中0表示星期日，1表示星期一，...，6表示星期六。例： ~~~ 1 　　　function DateDemo() 2 　　　{ 3 　　　　var d, day, x, s = "Today is: "; 4 　　　　var x = new Array("Sunday", "Monday", "Tuesday"); 5 　　　　var x = x.concat("Wednesday","Thursday", "Friday"); 6 　　　　var x = x.concat("Saturday"); 7 　　　　d = new Date(); 8 　　　　day = d.getDay(); 9 　　　　return(s += x[day]); 10 　　　} ~~~ 　　(3)getHouse函数：返回日期的"小时"部分，值为0～23。例。 ~~~ 1 　　　function TimeDemo() 2 　　　{ 3 　　　　var d, s = "The current local time is: "; 4 　　　　var c = ":"; 5 　　　　d = new Date(); 6 　　　　s += d.getHours() + c; 7 　　　　s += d.getMinutes() + c; 8 　　　　s += d.getSeconds() + c; 9 　　　　s += d.getMilliseconds(); 10 　　　　return(s); 11 　　　} ~~~ 　 (4)getMinutes函数：返回日期的"分钟"部分，值为0～59。见上例。　　(5)getMonth函数：返回日期的"月"部分，值为0～11。其中0表示1月，2表示3月，...，11表示12月。见前面的例子。　　(6)getSeconds函数：返回日期的"秒"部分，值为0～59。见前面的例子。　　(7)getTime函数：返回系统时间。 ~~~ 1 　　　function GetTimeTest() 2 　　　{ 3 　　　　var d, s, t; 4 　　　　var MinMilli = 1000 * 60; 5 　　　　var HrMilli = MinMilli * 60; 6 　　　　var DyMilli = HrMilli * 24; 7 　　　　d = new Date(); 8 　　　　t = d.getTime(); 9 　　　　s = "It's been " 10 　　　　s += Math.round(t / DyMilli) + " days since 1/1/70"; 11 　　　　return(s); 12 　　　} ~~~ 　　(8)getTimezoneOffset函数：返回此地区的时差(当地时间与GMT格林威治标准时间的地区时差)，单位为分钟。 ~~~ 1 　　　function TZDemo() 2 　　　{ 3 　　　　var d, tz, s = "The current local time is "; 4 　　　　d = new Date(); 5 　　　　tz = d.getTimezoneOffset(); 6 　　　　if (tz < 0) 7 　　　　s += tz / 60 + " hours before GMT"; 8 　　　　else if (tz == 0) 9 　　　　s += "GMT"; 10 　　　　else 11 　　　　s += tz / 60 + " hours after GMT"; 12 　　　　return(s); 13 　　　} ~~~ 　　(9)getYear函数：返回日期的"年"部分。返回值以1900年为基数，例如1999年为99。前面有例子。　　(10)parse函数：返回从1970年1月1日零时整算起的毫秒数(当地时间)。 ~~~ 1 　　　function GetTimeTest(testdate) 2 　　　{ 3 　　　　var d, s, t; 4 　　　　var MinMilli = 1000 * 60; 5 　　　　var HrMilli = MinMilli * 60; 6 　　　　var DyMilli = HrMilli * 24; 7 　　　　d = new Date(); 8 　　　　t = Date.parse(testdate); 9 　　　　s = "There are " 10 　　　　s += Math.round(Math.abs(t / DyMilli)) + " days " 11 　　　　s += "between " + testdate + " and 1/1/70"; 12 　　　　return(s); 13 　　　} ~~~ 　　(11)setDate函数：设定日期的"日"部分，值为0～31。　　(12)setHours函数：设定日期的"小时"部分，值为0～23。　　(13)setMinutes函数：设定日期的"分钟"部分，值为0～59。　　(14)setMonth函数：设定日期的"月"部分，值为0～11。其中0表示1月，...，11表示12月。　　(15)setSeconds函数：设定日期的"秒"部分，值为0～59。　　(16)setTime函数：设定时间。时间数值为1970年1月1日零时整算起的毫秒数。　　(17)setYear函数：设定日期的"年"部分。　　(18)toGMTString函数：转换日期成为字符串，为GMT格林威治标准时间。　　(19)setLocaleString函数：转换日期成为字符串，为当地时间。　　(20)UTC函数：返回从1970年1月1日零时整算起的毫秒数，以GMT格林威治标准时间计算。 * * * 　　**4.数学函数** 　　javascript数学函数其实就是Math对象，它包括属性和函数(或称方法)两部分。其中，属性主要有下列内容。　　Math.e:e(自然对数)、Math.LN2（2的自然对数)、Math.LN10(10的自然对数)、Math.LOG2E(e的对数，底数为2)、 Math.LOG10E(e的对数，底数为10)、Math.PI(π)、Math.SQRT1\_2(1/2的平方根值)、Math.SQRT2(2的平方根值)。　　函数有以下18个：　　(1)abs函数：即Math.abs(以下同)，返回一个数字的绝对值。　　(2)acos函数：返回一个数字的反余弦值，结果为0～π弧度(radians)。　　(3)asin函数：返回一个数字的反正弦值，结果为-π/2～π/2弧度。　　(4)atan函数：返回一个数字的反正切值，结果为-π/2～π/2弧度。　　(5)atan2函数：返回一个坐标的极坐标角度值。　　(6)ceil函数：返回一个数字的最小整数值(大于或等于)。　　(7)cos函数：返回一个数字的余弦值，结果为-1～1。　　(8)exp函数：返回e(自然对数)的乘方值。　　(9)floor函数：返回一个数字的最大整数值(小于或等于)。　　(10)log函数：自然对数函数，返回一个数字的自然对数(e)值。　　(11)max函数：返回两个数的最大值。　　(12)min函数：返回两个数的最小值。　　(13)pow函数：返回一个数字的乘方值。　　(14)random函数：返回一个0～1的随机数值。　　(15)round函数：返回一个数字的四舍五入值，类型是整数。　　(16)sin函数：返回一个数字的正弦值，结果为-1～1。　　(17)sqrt函数：返回一个数字的平方根值。　　(18)tan函数：返回一个数字的正切值。 * * * 　**　5.字符串函数** (1)concat函数:将两个或多个字符的文本组合起来，返回一个新的字符串。 ~~~ 1 var a = "hello"; 2 var b = ",world"; 3 var c = a.concat(b); 4 alert(c); 5 //c = "hello,world" ~~~ (2)indexOf函数：返回字符串中一个子串第一处出现的索引（从左到右搜索）。如果没有匹配项，返回 -1 。 ~~~ 1 var index1 = a.indexOf("l"); 2 //index1 = 2 3 var index2 = a.indexOf("l",3);　　//3表示从第三个开始向右搜索 4 //index2 = 3 ~~~ (3)lastIndexOf:返回字符串中一个子串第一处出现的索引（从右到左搜索）。如果没有匹配项，返回 -1 。 ~~~ 1 var index1 = lastIndexOf('l'); 2 //index1 = 3 3 var index2 = lastIndexOf('l',2)//3表示从第三个开始向左搜索 4 //index2 = 2 ~~~ (4)charAt：返回字符串中指定的某个字符。 ~~~ var get_char = a.charAt(0); //get_char = "h" ~~~ (4)match：检查一个字符串匹配一个正则表达式内容，如果么有匹配返回 null。 ~~~ 1 var re = new RegExp(/^\w+$/);　　　　　　//存储检索模式 2 var is_alpha1 = a.match(re); 3 //is_alpha1 = "hello" 4 var is_alpha2 = b.match(re); 5 //is_alpha2 = null ~~~ (5)substring:返回位于**String**对象中指定位置的子字符串。 ~~~ 1 var sub_string1 = a.substring(1); 2 //sub_string1 = "ello" 3 var sub_string2 = a.substring(1,4); 4 //sub_string2 = "ell" ~~~ (6)substr：返回字符串的一个子串，传入参数是起始位置和长度 ~~~ 1 var sub_string1 = a.substr(1); 2 //sub_string1 = "ello" 3 var sub_string2 = a.substr(1,4);　　　　//长度 4 //sub_string2 = "ello" ~~~ (7)replace：用来查找匹配一个正则表达式的字符串，然后使用新字符串代替匹配的字符串。 ~~~ 1 var r, re; // 声明变量。 2 var ss = "The man hit the ball with the bat.\n"; 3 ss += "while the fielder caught the ball with the glove."; 4 re = /The/g; // 创建正则表达式模式。 5 r = ss.replace(re, "A"); // 用 "A" 替换 "The"。 ~~~ ~~~ 1 var r, re; // 声明变量。 2 var ss = "The rain in Spain falls mainly in the plain."; 3 re = /(\S+)(\s+)(\S+)/g; // 创建正则表达式模式。 4 r = ss.replace(re, "$3$2$1"); // 交换每一对单词。 ~~~ (8)search：执行一个正则表达式匹配查找。如果查找成功，返回字符串中匹配的索引值。否则返回 -1 。 ~~~ 1 var index1 = a.search(re); 2 //index1 = 0 3 var index2 = b.search(re); 4 //index2 = -1 ~~~ (9)slice:提取字符串的一部分，并返回一个新字符串（与 substring 相同）。 ~~~ 1 var sub_string1 = a.slice(1); 2 //sub_string1 = "ello" 3 var sub_string2 = a.slice(1,4); 4 //sub_string2 = "ell" ~~~ (10)split:通过将字符串划分成子串，将一个字符串做成一个字符串数组。 ~~~ 1 var arr1 = a.split("");　　//使用分割的字符 2 //arr1 = [h,e,l,l,o] 3 length ~~~ (11)length:返回字符串的长度，所谓字符串的长度是指其包含的字符的个数。 ~~~ 1 var len = a.length(); 2 //len = 5 ~~~ (12)toLowerCase:将整个字符串转成小写字母。 ~~~ 1 var lower_string = a.toLowerCase(); 2 //lower_string = "hello" ~~~ (13)toUpperCase:将整个字符串转成大写字母。 ~~~ 1 var upper_string = a.toUpperCase(); 2 //upper_string = "HELLO" ~~~ **6****.cookie函数** **7.DOM 函数** **1.查询:** **1)标准的DOM API:** ~~~ <input type="checkbox" name="hobby" id="hobby1"> 音乐 <input type="checkbox" name="hobby" id="hobby2"> 登山 <input type="checkbox" name="hobby" id="hobby3"> 游泳 <input type="checkbox" name="hobby" id="hobby4"> 阅读 <input type="checkbox" name="hobby" id="hobby5"> 打球 <input type="checkbox" name="hobby" id="hobby6"> 跑步 <input type="button" value = "全选" id="button1"> <input type="button" value = "全不选" id="button1"> <div class="example">我是第一个元素</div> <div class="example">我是第二个元素<p class="text">我是文档</p></div> ~~~ 　　1. document.getElementsByTagName("input")，结果为获取所有标签为input的元素，共8个　　2. document.getElementsByName("hobby")，结果为获取属性name="hobby"的元素，共6个。　　3. document.getElementById("hobby6")，结果为获取属性id="hobby6"的元素，只有一个，"跑步"这个复选项。　　4. document.getElementsByClassName("example")，结果为获取属性class="example"的元素，共2个。　　5. document.querySelectorAll("div.text") 结果为获取属性class="example" p的的元素，共1个。 **2)亲属访问**:**** ~~~ 父节点.firstChild　　　　　　　　　获取父节点的第一个子节点父节点.lastChild　　　　　　　　　获取父节点的最后一个子节点 node.parentNode　　　　　　　　当前节点的父节点 node.previousSibling　　　　　　当前节点的上一个兄弟节点 node.nextSibling　　　　　　　　当前节点的下一个兄弟节点 node.attributes　　　　　　　　　获取属性集合 node.childNodes　　　　　　　　获取子元素集合 ~~~ **3)属性获取**:**** ~~~ getAttribute 获取属性值 getAttributeNode 获取属性节点 ~~~ #### 2、增加 **1.创建DOM节点**:**** ~~~ document.createElement 　　　　　　　　创建元素节点　 document.createTextNode　　　　　　　　创建文本节点 document.createAttribute　　　　　　　创建属性节点 innerHTML innerText cloneNode 参数为Boolean类型，设置为 true，克隆节点及其属性，以及后代，设置为 false，只需要克隆节点及其后代 ~~~ **2.在创建的DOM中加入属性** **3.将节点插入到某个DOM中**:**** ~~~ appendChild　　　　　　　　　　追加到元素的结尾处 insertBefore　　　　　　　　　　将元素插入到某一元素的前面语法：当前节点的父元素.insertBefore(newItem,existingItem); innerHTML ~~~ **4.其他:** ~~~ style的操作 setAttribute（属性名,属性值） ~~~ **3.删除** **1.删除元素** ~~~ removeChild removeAttributeNode ~~~ #### 4.修改 **1)修改结点:** **2)修改样式**:**** ~~~ style.xxx = xxx setAttribute ~~~ **3)修改文本**:**** ~~~ innerHTML innerText 早期火狐浏览器不支持同节点操作，先删除在添加 nodeValue ~~~ **4)修改属性**:**** ~~~ 属性名 = xxx setAttribute ~~~ **getBoundingClie** **8.BOM** ****1)Window对象**** ~~~ moveBy //从当前位置水平移动窗体x个像素，垂直移动窗体y个像素 moveTo //移动窗体左上角到相对于屏幕左上角的(x,y)点 moveBy //相对窗体当前的大小，宽度调整w个像素，高度调整h个像素 resizeTo //把窗体宽度调整为w个像素，高度调整为h个像素 scrollTo scrollBy focus //焦点 blur //失去焦点 open //打开 close //关闭 openr //对新建窗体的引用 alert confirm prompt //弹出消息对话框 defaultStatus status setTimeout clearTimeout setInterval clearInterval ~~~ 2.**document对象：** ~~~ document.write document.writeln document.open document.close document.body.scrollLeft document.body.scrollTop document.documentElement.scrollLeft document.documentElement.scrollTop ~~~ 3)**location对象** ~~~ window.location.hash window.location.host window.location.hostname window.location.href //这个是常用的 window.location.pathname window.location.port window.location.protocal window.location.search ~~~ 3)**navigator****对象** **4)**screen对象**** ~~~ screen.height screen.left screen.top screen.width ~~~ **5)**history对象**** ~~~ go方法 history.go(-1); history.go(1); history.go(2); history.back(); history.forward(); //前进一页 ~~~