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函數：顯示一個輸入對話框，提示等待用戶輸入。例如：

alert("輸入錯誤");
prompt("請輸入您的姓名","姓名");
confirm("確定否！");

　　(9)unescape函數：解碼由escape函數編碼的字符。

　　(10)toFixed 函數:這個函數牛逼 就是轉化小數點幾位的 checkprice.toFixed(2)； 將checkprice轉化為有小數點后兩位的值

---

　　2.數組函數
　　javascript數組函數包括以下4個函數：
　　(1)join函數：轉換並連接數組中的所有元素為一個字符串。例:

　　　　function JoinDemo()
　　　　{
　　　　　var a, b;
　　　　　a = new Array(0,1,2,3,4);
　　　　　b = a.join("-");//分隔符
　　　　　return(b);//返回的b=="0-1-2-3-4"
　　　　} 

(2)length函數：返回數組的長度。例：

　　　　function LengthDemo()
　　　　{
　　　　　var a, l;
　　　　　a = new Array(0,1,2,3,4);
　　　　　l = a.length;
　　　　　return(l);//l==5
　　　　} 

(3)reverse函數：將數組元素順序顛倒。例：

　　　function ReverseDemo()
　　　{
　　　　var a, l;
　　　　a = new Array(0,1,2,3,4);
　　　　l = a.reverse();
　　　　return(l);
　　　} 

(4)sort函數：將數組元素重新排序。例：

　　　　function SortDemo()
　　　　{
　　　　　var a, l;
　　　　　a = new Array("X" ,"y" ,"d", "Z", "v","m","r");
　　　　　l = a.sort();
　　　　　return(l);
　　　　}

（5）push函數:將新元素添加到一個數組中，並返回數組的新長度值。例:

 

<script type="text/javascript">
    var my_array = new Array('1','2','3','4');
    my_array.push('5','6','7','8');
    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函數:移除數組中的最后一個元素並返回該元素。例:

<script type="text/javascript">
    var my_array = new Array('1','2','3','411');
    alert(my_array.pop());　　　　//返回411 4     alert(my_array.length);　　　//返回3 5 </script>

(8)shift函數:移除數組中的第一個元素並返回該元素。例:

<script type="text/javascript">
    var my_array = new Array('1','2','3','4');
    alert(my_array.shift());　　//返回1
    alert(my_array.length);　　 //返回3
</script>

(9)Obj.slice(start,end) 返回一個數組的一段，得到一個新數組。注意不包括 end 對應的元素，如果省略 end 將復制 start 之后的所有元素,例如：

<script type="text/javascript">
    var my_array = new Array('1','2','3','4');
    var new_array = my_array.slice(0,2);　　//返回0-2個元素
    var new_array = my_array.slice(0,-1);　//返回除了最后一個之外的元素
    var new_array = my_array.slice(0);　　 //返回第0以后的所有的元素
    for(var i =0;i<new_array.length;i++){
        alert(new_array[i]);
    }
</script>

(10)Obj.concat(item1,item2,item3,item4,item5......) 返回一個新數組，這個新數組是由兩個或更多數組（也可以是一個變量）組合而成的,。例:

<script type="text/javascript">
    var my_array = new Array('1','2','3','4');
    var my_array1 = new Array('5','6');
    var my_array2 = new Array('7','8');
    var my_array3 = new Array('9');
    var my_name = 'SmarTop';    //也可以是一個字符串
    var my_age = 26;            //也可以是一個數字
    var new_array = my_array.concat(my_array1,my_array2,my_array3,my_name,my_age);
    alert(new_array);
</script>

 

 

 

 

3.日期函數
　　javascript日期函數包括以下20個函數：
　　(1)getDate函數：返回日期的"日"部分，值為1～31。例：

　　　function DateDemo()
　　　{
　　　　var d, s = "Today's date is: ";
　　　　d = new Date();
　　　　s += (d.getMonth() + 1) + "/";
　　　　s += d.getDate() + "/";
　　　　s += d.getYear();
　　　　return(s);
　　　} 

　　(2)getDay函數：返回星期幾，值為0～6，其中0表示星期日，1表示星期一，...，6表示星期六。例：

　　　function DateDemo()
　　　{
　　　　var d, day, x, s = "Today is: ";
　　　　var x = new Array("Sunday", "Monday", "Tuesday");
　　　　var x = x.concat("Wednesday","Thursday", "Friday");
　　　　var x = x.concat("Saturday");
　　　　d = new Date();
　　　　day = d.getDay();
　　　　return(s += x[day]);
　　　} 

　　(3)getHouse函數：返回日期的"小時"部分，值為0～23。例。 

　　　function TimeDemo()
　　　{
　　　　var d, s = "The current local time is: ";
　　　　var c = ":";
　　　　d = new Date();
　　　　s += d.getHours() + c;
　　　　s += d.getMinutes() + c;
　　　　s += d.getSeconds() + c;
　　　　s += d.getMilliseconds();
　　　　return(s);
　　　} 

 　  (4)getMinutes函數：返回日期的"分鍾"部分，值為0～59。見上例。
　　(5)getMonth函數：返回日期的"月"部分，值為0～11。其中0表示1月，2表示3月，...，11表示12月。見前面的例子。
　　(6)getSeconds函數：返回日期的"秒"部分，值為0～59。見前面的例子。
　　(7)getTime函數：返回系統時間。

　　　function GetTimeTest()
　　　{
　　　　var d, s, t;
　　　　var MinMilli = 1000 * 60;
　　　　var HrMilli = MinMilli * 60;
　　　　var DyMilli = HrMilli * 24;
　　　　d = new Date();
　　　　t = d.getTime();
　　　　s = "It's been "
　　　　s += Math.round(t / DyMilli) + " days since 1/1/70";
　　　　return(s);
　　　} 

　　(8)getTimezoneOffset函數：返回此地區的時差(當地時間與GMT格林威治標准時間的地區時差)，單位為分鍾。

　　　function TZDemo()
　　　{
　　　　var d, tz, s = "The current local time is ";
　　　　d = new Date();
　　　　tz = d.getTimezoneOffset();
　　　　if (tz < 0)
　　　　s += tz / 60 + " hours before GMT";
　　　　else if (tz == 0)
　　　　s += "GMT";
　　　　else
　　　　s += tz / 60 + " hours after GMT";
　　　　return(s);
　　　} 

　　(9)getYear函數：返回日期的"年"部分。返回值以1900年為基數，例如1999年為99。前面有例子。
　　(10)parse函數：返回從1970年1月1日零時整算起的毫秒數(當地時間)。

　　　function GetTimeTest(testdate)
　　　{
　　　　var d, s, t;
　　　　var MinMilli = 1000 * 60;
　　　　var HrMilli = MinMilli * 60;
　　　　var DyMilli = HrMilli * 24;
　　　　d = new Date();
　　　　t = Date.parse(testdate);
　　　　s = "There are "
　　　　s += Math.round(Math.abs(t / DyMilli)) + " days "
　　　　s += "between " + testdate + " and 1/1/70";
　　　　return(s);
　　　} 

　　(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函數:將兩個或多個字符的文本組合起來，返回一個新的字符串。

var a = "hello";
var b = ",world";
var c = a.concat(b);
alert(c);
//c = "hello,world"

(2)indexOf函數：返回字符串中一個子串第一處出現的索引（從左到右搜索）。如果沒有匹配項，返回 -1 。

 

var index1 = a.indexOf("l");
//index1 = 2
var index2 = a.indexOf("l",3);　　//3表示從第三個開始向右搜索 4 //index2 = 3

 

 

(3)lastIndexOf:返回字符串中一個子串第一處出現的索引（從右到左搜索）。如果沒有匹配項，返回 -1 。

 

var index1 = lastIndexOf('l');
//index1 = 3
var index2 = lastIndexOf('l',2)//3表示從第三個開始向左搜索
//index2 = 2

 

 

(4)charAt：返回字符串中指定的某個字符。

 

var get_char = a.charAt(0);
//get_char = "h"

 

(4)match：檢查一個字符串匹配一個正則表達式內容，如果么有匹配返回 null。

var re = new RegExp(/^\w+$/);　　　　　　//存儲檢索模式 2 var is_alpha1 = a.match(re);
//is_alpha1 = "hello"
var is_alpha2 = b.match(re);
//is_alpha2 = null

(5)substring:返回位於 String 對象中指定位置的子字符串。

var sub_string1 = a.substring(1);
//sub_string1 = "ello"
var sub_string2 = a.substring(1,4);
//sub_string2 = "ell"

(6)substr：返回字符串的一個子串，傳入參數是起始位置和長度

var sub_string1 = a.substr(1);
//sub_string1 = "ello"
var sub_string2 = a.substr(1,4);　　　　//長度 4 //sub_string2 = "ello"

(7)replace：用來查找匹配一個正則表達式的字符串，然后使用新字符串代替匹配的字符串。

   var r, re;                    // 聲明變量。
   var ss = "The man hit the ball with the bat.\n";
   ss += "while the fielder caught the ball with the glove.";
   re = /The/g;             // 創建正則表達式模式。
   r = ss.replace(re, "A");    // 用 "A" 替換 "The"。

   var r, re;                      // 聲明變量。
   var ss = "The rain in Spain falls mainly in the plain.";
   re = /(\S+)(\s+)(\S+)/g;        // 創建正則表達式模式。
   r = ss.replace(re, "$3$2$1");   // 交換每一對單詞。

(8)search：執行一個正則表達式匹配查找。如果查找成功，返回字符串中匹配的索引值。否則返回 -1 。

var index1 = a.search(re);
//index1 = 0
var index2 = b.search(re);
//index2 = -1

(9)slice:提取字符串的一部分，並返回一個新字符串（與 substring 相同）。

 

var sub_string1 = a.slice(1);
//sub_string1 = "ello"
var sub_string2 = a.slice(1,4);
//sub_string2 = "ell"

 

(10)split:通過將字符串划分成子串，將一個字符串做成一個字符串數組。

var arr1 = a.split("");　　//使用分割的字符 2 //arr1 = [h,e,l,l,o]
length

(11)length:返回字符串的長度，所謂字符串的長度是指其包含的字符的個數。

var len = a.length();
//len = 5

(12)toLowerCase:將整個字符串轉成小寫字母。

var lower_string = a.toLowerCase();
//lower_string = "hello"

(13)toUpperCase:將整個字符串轉成大寫字母。

var upper_string = a.toUpperCase();
//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();    //前進一頁