JS基本語法+實例

JS基本語法

parseInt() 將字符串 轉換爲整型

var str = '100cm';var val = parseInt(str);console.log(val+'---------'+typeof val);//100---------number

parseFloat() 將字符串轉換爲浮點型

var str = '1.2';var val = parseFloat(str);console.log(val+'---------'+typeof val);//1.2---------number

Number() 將任意類型轉換 爲數字類型

var val=null;var newVal = Number(val);console.log(newVal+'--------'+typeof newVal);//0--------number

Boolean() 強制將其他類型轉換爲布爾值

var val = null;var newVal = Boolean(val);console.log(newVal+'--------'+typeof newVal);//false--------boolean

String() 將其他數據類型轉換爲字符串值

var val = undefined; var newVal = String(val);console.log(newVal+'--------'+typeof newVal);//undefined--------string

toString() 返回對象的字符串格式

var now=new Date();console.log(now.toString());

() 返回對象的本地字符串格式

var now=new Date();console.log(now.toLocaleString());

valueOf() 返回對象的原始值.
var now=new Date();console.log(now.valueOf());

pop() 在數組的結尾處彈出一個元素

var arr = ['a','b','c'];var last=arr.pop();console.log(last);//c

push() 在數組的結尾處添加元素

var arr = ['a','b','c'];var num=arr.push('d');console.log(num);//4

shift() 在數組的開頭處移除一個元素

var arr = ['a','b','c'];var first=arr.shift();console.log(first);//a

unshift()在數組的開頭處添加元素 父

var arr = ['a','b','c'];var num=arr.unshift(1,2,3);console.log(num);//6

concat() 數組連接方法

var arr1=['a','b','c'];var arr2=['d','e'];var newArr=arr1.concat(arr2,'f'); console.log(newArr);//["a", "b", "c", "d", "e", "f"]

join() 數組元素連接方法,使用指定的字符串將數組元素進行連接

var arr1=['a','b','c'];var str=arr1.join('--');console.log(str);//a--b--c

reverse() 數組反轉方法

var arr1=['a','b','c'];var newArr=arr1.reverse();console.log(newArr);//["c", "b", "a"]

slice() 返回數組中的一段

var arr1=['a','b','c','d','e'];var newArr = arr1.slice(2,4);console.log(newArr);//["c", "d"]

sort() 數組排序函數

var arr = ['Z','A','q','S','a',3,'D','T','M',1,32,6,1,];var arr1 = arr.sort();console.log(arr1);//[1, 1, 3, 32, 6, "A", "D", "M", "S", "T", "Z", "a", "q"]

splice() 數組的萬能方法

 增刪改    
var arr = ['關羽','張飛','趙雲','黃忠','馬超'];添加var ele=arr.splice(2,0,'劉備','劉嬋');
console.log(arr);//["關羽", "張飛", "劉備", "劉嬋", "趙雲", "黃忠", "馬超"]
刪var ele=arr.splice(2,2);console.log(ele);//["趙雲", "黃忠"] 
改var ele=arr.splice(2,1,'趙cloud','張fly');console.log(arr);//["關羽", "張飛", "趙cloud", "張fly", "黃忠", "馬超"]

getFullYear() 獲取完整的時間年份

var now = new Date();var year=now.getFullYear();

getYear() 獲取三位數或者兩位數的時間年份

var year=now.getYear();

getMonth() 獲取月份 0-11

var mon=now.getMonth();

getDate() 獲取月中第幾天 1-31

var date=now.getDate();

getHours() 獲取小時數 0-23 24開始進入下一天

var hour=now.getHours();

getMinutes() 獲取分鐘數 0-59

var min=now.getMinutes();

getSeconds() 獲取秒數0-59

var sec=now.getSeconds();

getMilliseconds() 獲取毫秒數0-999

var msec=now.getMilliseconds();

getDay() 獲取星期幾 0-6 表示 周天-週六

var day=now.getDay();

setFullYear() 設置完整的時間年份

now.setFullYear(1999);

setMonth() 設置月份 0-11

now.setMonth(11);

setDate() 設置月中第幾天 1-31

now.setDate(30);

setHours() 設置小時數 0-23 24開始進入下一天

now.setHours(12);

setMinutes() 設置分鐘數 0-59

now.setMinutes(34);

setSeconds() 設置秒數0-59

    now.setSeconds(45);

setMilliseconds() 設置毫秒數0-999

    now.setMilliseconds(123);

getTime() 獲取當前的時間戳(毫秒)

    console.log(now.getTime());

setTime() 設置當前的時間戳(毫秒)

now.setTime(192391234);

parse() 將時間格式字符串解析爲時間戳.

var datestring = "November 1, 1997 10:15 AM";Date.parse(datestring)

toDateString() 返回完整時間的日期部分 年月日

console.log(now.toDateString())

toTimeString() 返回完整時間的時間部分 時分秒 時區

    console.log(now.toTimeString())

getTimezoneOffset() 獲取當前時區的偏移值

"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);
}
"

eval() 將JS代碼字符串當做代碼來執行

var str='window.alert("1111");';eval(str);

Math對象 固有對象

abs() 獲取絕對值的方法  Math.abs(-99);//99
ceil() 向上取整方法   Math.ceil(250.51325123);//251
floor() 向下取整方法  Math.floor(250.51325123);//250
round() 四捨五入方法  Math.round(250.51325123*10000)/10000;//250.5133
max() 獲取N個數值中的最大值   Math.max(123,3,634,23,454,123,56,124,3457);//3457
min() 獲取N個數值中的最小值   Math.min(123,3,634,23,454,123,56,124,3457);//3
random() 隨機獲取0-1之間的小數,包含0但是不包含1.    Math.random();
sqrt() 開平方根 Math.sqrt(4);//2
pow() 計算一個數的N次方 Math.pow(2,10);//1024
String對象原型  
charAt() 返回指定位置的字符  var str='ABCDEFGHIJKLMNOPQRSTUVWXYZ';var result=str.charAt(4);//E
charCodeAt() 返回指定位置的字符的ASCII碼   var result=str.charCodeAt(0);//65

concat() 字符串連接方法

var str = '6月8日魔獸電影開播';var str2= '沒有時間去看,怎麼辦';var result=str.concat(str2);//6月8日魔獸電影開播沒有時間去看,怎麼辦

indexOf() 獲取第一次出現指定字符的位置

var url='https://www.kengni.com/abc/efg/doubi.php';var pos=url.indexOf(':');//5

lastIndexOf() 獲取最後一次出現指定字符的位置.

var pos=url.lastIndexOf('.');

slice() 字符串切割方法,使用方法和數組的slice一致

var str='ABCDEFGHIJKLMNOPQRSTUVWXYZ';var result=str.slice(10,5);

substr() 字符串切割方法

var result=str.substr(5,10);

substring() 字符串切割方法

    var result=str.substring(10,5);

match() 進行一次正則匹配操作

"function MatchDemo(){
   var r, re;         // 聲明變量。
   var s = ""The rain in Spain falls mainly in the plain"";
   re = /ain/i;    // 創建正則表達式模式。
   r = s.match(re);   // 嘗試匹配搜索字符串。
   return(r);         // 返回第一次出現 ""ain"" 的地方。
}
"

replace() 正則或者字符串替換操作

var r, re = "Spain";r = "The rain in Spain".replace(re, "Canada");

search() 返回正則表達式匹配的第一個字符串的位置

"function SearchDemo(){
   var r, re;                   // 聲明變量。
   var s = ""The rain in Spain falls mainly in the plain."";
   re = /falls/i;            // 創建正則表達式模式。
   r = s.search(re);            // 查找字符串。
   return(r);                   // 返回 Boolean 結果。
}
"

BOM中常用的方法和屬性

resizeTo() 將瀏覽器調整到制定的大小

window.resizeTo(300,300);

resizeBy() 將瀏覽器在當前大小的情況下調整制定的高度和寬度

window.resizeBy(-100,-100);

moveTo() 將瀏覽器調整到制定的座標

moveTo(-200,-200);

moveBy() 將瀏覽器的位置在當前位置基礎上調整制定的長度

moveBy(100,0);

setInterval() 循環執行方法

setInterval(function(){ document.write('<HR />');},1000);

clearInterval() 終止循環的辦法

clearInterval(循環變量);

setTimeout() 定時執行方法

setTimeout(function(){ console.log('到點了,該吃藥了!');},10000);

clearTimeout(); 終止定時執行

clearTimeout(定時變量);

scrollTo() 將滾動條移動到制定的位置

 window.scrollTo(0,1500);

scrollBy() 將滾動條在當前位置基礎上移動制定長度

"setInterval(function(){
scrollBy(0,1);
   },50);"

open() 打開一個新頁面

window.open('2.html','_blank','height=300,width=300,left=300,top=300,location=no,resizable=no');

close() 關閉也一個打開的頁面

"setTimeout(function(){
window.close();
   },5000);"

focus() 獲取焦點方法

"setTimeout(function(){
//3秒後頁面獲取焦點
window.focus();
   },3000);"

blur() 失去焦點方法

"setTimeout(function(){
//3秒後頁面失去焦點
//window.blur();
   },3000);"

屬性

innerWidth 表示頁面視窗的寬度(白色區域)

alert(innerWidth+'---'+innerHeight);

innerHeight 表示頁面視窗的高度(白色區域)

alert(innerWidth+'---'+innerHeight);

history子對象

history 瀏覽器歷史記錄對象
    "setTimeout(function(){
history.go(1);
   },5000)"

length 表示當前頁面的瀏覽歷史個數

document.write(history.length);

forward() 打開歷史記錄前第N個頁面

/history.forward(1)

back()打開歷史記錄後第N個頁面

history.back(2)

go() 打開當前頁面的前後N各頁面

history.go(1);

DOM

節點的成員屬性

firstChild 獲取節點的第一個子節點

var text=love.firstChild;

lastChild 獲取節點的最後一個子節點

var e = txt.lastChild;  

childNodes 獲取節點的所有節點集合

"var relation=document.getElementById('relation');
   console.log(relation.childNodes.length);"

parentNode 獲取一個節點的父節點

console.log(relation.parentNode.nodeName);

previousSibling 獲取上一個兄弟節點

console.log(relation.previousSibling.firstChild.nodeValue);

nextSibling 獲取下一個兄弟節點

console.log(relation.nextSibling);

節點的成員方法

appendChild() 在節點的子節點列表的最後添加一個子節點.

"var method=document.getElementById('method');
   var input = document.createElement('input');
   method.appendChild(input);"

insertBefore() 在節點的子節點列表的制定節點之前添加一個子節點

method.insertBefore(input,method.childNodes[1]);

hasChildNodes() 檢測一個節點是否具有子節點

method.hasChildNodes()

removeChild() 移除節點的指定子節點

method.removeChild(method.childNodes[1])

replaceChild() 使用指定節點替換另一個制定的子節點

method.replaceChild(input,method.childNodes[1]);

cloneNode() 克隆節點

"var relation =document.getElementById('relation');
   var newRel=relation.cloneNode(true);"

document文檔節點

獲取元素節點的方法

getElementById() 通過ID獲取元素節點

var ele=document.getElementById('ele');

getElementsByTagName() 通過標籤名獲取節點列表集合

"var divs=document.getElementsByTagName('div');
   console.log(divs.length);"

getElementsByName() 通過Name屬性獲取元素節點集合

"var sexs=document.getElementsByName('user');

console.log(sexs);”

創建節點的方法

createElement() 創建一個元素節點

var b=document.createElement('b');

createAttribute() 創建一個屬性節點

"var classAttr=document.createAttribute('class');
   classAttr.value='on';"

createTextNode() 創建一個文本節點

var newtext=document.createTextNode('First');

文檔流操作

write() 向頁面中輸入文本流

document.write('哈哈');

writeln() 向頁面中輸入文本流,並且添加

\n  document.writeln('哈哈');

open() 打開一個文檔流

document.open();

close() 關閉一個文檔流

document.close();