JavaScript 常用函数总结

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.
";
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();    //前进一页

原文地址:https://www.cnblogs.com/subtract/p/4224297.html