javaScript學習基礎知識彙總
•一：學習要求
•熟悉html，div+css
•肯做練習
•好了，沒有第三條，不要求會html5、css3，不要求數學好英語棒，不要求你有程式基礎，不要求你邏輯性很好，認真聽講，多做練習，足以。
•二：開發工具
•能寫程式碼就行，沒有要求，按自己習慣來。
•一個簡單的JS過程
•元素①，當 點選它/ 移上去/… 的時候②，做出一些反應/執行一條命令③
①：JS如何獲取元素
JS裡面獲取元素的方法有很多，我們先了解一種最簡單常見的獲取ID：
document.getElementById(' '); //注意大小寫
②：JS的事件
通過 滑鼠、鍵盤、頁面變化 等都會產生事件，
比如：onclick ondblclick onmouseover onmousedown onmouseup
onkeypress onkeydown onkeyup onresize onload ……
③：函式--（反應/命令）
function 名字(){ }; // 比如：function aaa(){ };
函式是不會主動執行的，執行函式的方法有很多種…
直接呼叫 aaa();
事件呼叫 元素.事件 = aaa;
•定義變數 var
var btn = document.getElementById('btn');
•script標籤放置的位置
window.onload的使用
•
• JS對HTML元素屬性的操作
–讀、寫過程
–注意事項：
•1. 駝峰命名
•2.class不能直接寫，className
•3. 操作的樣式較多，一般用css代替
•4. 相對路徑地址、顏色值不能用來判斷
•5.input的type可以改變但是不相容IE6 7 8
元素的浮動屬性是不相容IE6 7 8 （ie：styleFloat 非ie:cssFloat）
採用其他的方式規避這些不相容的效果。
- 元素屬性[]的用法
js資料型別：
typeof 可以檢視資料型別；
var a = 123; // number 數字型別
var b = '阿飛'; // string 字串
var c = true; // boolean 布林值，兩個值 true false
var d = function(){} // function 函式
var e = [1,2,3,'',true,function(){}] // object 物件
var e = document // object 物件
var e = { } // object 物件
varf = null // object 物件
varg ; // undefined 未定義
資料型別之間的轉換：
顯式型別轉換：
Number(); parseInt(); parseFloat();
隱式型別轉換：
+ // 100 + ‘1’ ==> ‘1001’ 變字串
-* / % ++ -- // '200' - 3 ==> 197 變數字
>< // '10' > 2 true '10' > '2' false 字串比較對應位置比較
== ！ ！= ===// 轉成布林值
NaN：
（ not a number ）typeof NaN==> number
isNaN() :
isnot a number // 是不是（is） 不是數字啊？
//是數字 false
//不是數字 true
//根據Number() 轉換以後 再判斷是不是數字
function(){}
傳參：
所有資料型別都可以當引數傳遞；
多個引數’, ‘隔開；
function(){}
傳參：
所有資料型別都可以當引數傳遞；多個引數’, ‘隔開；
實參，形參，不定參：
a('阿飛' ); // ‘阿飛’ 實參
functiona( name ){ // name 形參
alert(name )
}
//arguments 不定參
return:
作用域：
瀏覽器在讀js程式碼時候的步驟：
先找var function
再逐行執行程式碼
注：JS中執行程式碼是 1.定義 var .. function... ... 2.執行表示式 +-*/= == ++ -- alert(); 先定義再執行
作用域鏈：
從內往外找:子級中找不到變數則往父類中找；而父類不可以到子級中找
要找函式內的變數；
字串的操作：/***********************************************55g這個知識點很重要******************************************/
長度：str.length;
返回某位置的字元：str.charAt( ); //括號裡寫要找的位置（根據下標查詢對應的字元)
返回字元編碼：str.charCodeAt(); //括號裡寫要找的位置(根據下標返回對應字元的Unicode編碼)
返回字元：String.fromCharCode(, ); //括號裡面寫編碼 可多個
返回某個字元位置（左→右）：str.indexOf(); //括號裡面寫某個字元 找不到返回-1
（‘aa’,5）//從第5位開始找aa，第二引數為負數，當成0
返回某個字元位置（右→左）：str.lastIndexOf();
擷取字串：str.substring(); // (0,5)從0到5;(5,0)從0到5;(-2,5)從0到5
：str.slice( ); //(0,5)從0到5;(5,0)找不到；(-2,5）倒數第二位
拆分字串：str.split(); // ('.')以.為界限分割，返回一個數組；第二引數為長度
轉換成大寫：str.toUpperCase();//
轉換成小寫：str.toLowerCase();
以下為字串操作的補充:
String物件屬性
(1) length屬性
length算是字串中非常常用的一個屬性了，它的功能是獲取字串的長度。當然需要注意的是js中的中文每個漢字也只代表一個字元，這裡可能跟其他語言有些不一樣。
var str = 'abc'; console.log(str.length);
(2) prototype屬性
prototype在面向物件程式設計中會經常用到，用來給物件新增屬性或方法，並且新增的方法或屬性在所有的例項上共享。因此也常用來擴充套件js內建物件，如下面的程式碼給字串添加了一個去除兩邊空格的方法：
String.prototype.trim = function(){
return this.replace(/^\s*|\s*$/g, '');
}
String物件方法
1.獲取類方法
(1) charAt()
stringObject.charAt(index)
charAt()方法可用來獲取指定位置的字串，index為字串索引值，從0開始到string.leng – 1，若不在這個範圍將返回一個空字串。如：
var str = 'abcde'; console.log(str.charAt(2)); //返回c console.log(str.charAt(8)); //返回空字串
(2) charCodeAt()
stringObject.charCodeAt(index)
charCodeAt()方法可返回指定位置的字元的Unicode編碼。charCodeAt()方法與charAt()方法類似，都需要傳入一個索引值作為引數，區別是前者返回指定位置的字元的編碼，而後者返回的是字元子串。
var str = 'abcde'; console.log(str.charCodeAt(0)); //返回97
(3) fromCharCode()
String.fromCharCode(numX,numX,…,numX)
fromCharCode()可接受一個或多個Unicode值，然後返回一個字串。另外該方法是String 的靜態方法，字串中的每個字元都由單獨的數字Unicode編碼指定。
String.fromCharCode(97, 98, 99, 100, 101) //返回abcde
2.查詢類方法
(1) indexOf() ------------返回的是下標
stringObject.indexOf(searchvalue,fromindex)
indexOf()用來檢索指定的字串值在字串中首次出現的位置。它可以接收兩個引數，searchvalue表示要查詢的子字串，fromindex表示查詢的開始位置，省略的話則從開始位置進行檢索。
var str = 'abcdeabcde';
console.log(str.indexOf('a')); // 返回0
console.log(str.indexOf('a', 3)); // 返回5
console.log(str.indexOf('bc')); // 返回1
(2) lastIndexOf()方法
stringObject.lastIndexOf(searchvalue,fromindex)
lastIndexOf()語法與indexOf()類似，它返回的是一個指定的子字串值最後出現的位置，其檢索順序是從後向前。(返回最後出現改指定字串的下標)
var str = 'abcdeabcde';
console.log(str.lastIndexOf('a')); // 返回5
console.log(str.lastIndexOf('a', 3)); // 返回0 從第索引3的位置往前檢索
console.log(str.lastIndexOf('bc')); // 返回6
(3) search()方法
stringObject.search(substr) stringObject.search(regexp)
search()方法用於檢索字串中指定的子字串，或檢索與正則表示式相匹配的子字串。它會返回第一個匹配的子字串的起始位置，如果沒有匹配的，則返回-1。
var str = 'abcDEF';
console.log(str.search('c')); //返回2
console.log(str.search('d')); //返回-1
console.log(str.search(/d/i)); //返回3
(4) match()方法
stringObject.match(substr) stringObject.match(regexp)
match()方法可在字串內檢索指定的值，或找到一個或多個正則表示式的匹配。
如果引數中傳入的是子字串或是沒有進行全域性匹配的正則表示式，那麼match()方法會從開始位置執行一次匹配，如果沒有匹配到結果，則返回null。否則則會返回一個數組，該陣列的第0個元素存放的是匹配文字，除此之外，返回的陣列還含有兩個物件屬性index和input，分別表示匹配文字的起始字元索引和stringObject 的引用(即原字串)。
var str = '1a2b3c4d5e';
console.log(str.match('h')); //返回null
console.log(str.match('b')); //返回["b", index: 3, input: "1a2b3c4d5e"]
console.log(str.match(/b/)); //返回["b", index: 3, input: "1a2b3c4d5e"]
如果引數傳入的是具有全域性匹配的正則表示式，那麼match()從開始位置進行多次匹配，直到最後。如果沒有匹配到結果，則返回null。否則則會返回一個數組，陣列中存放所有符合要求的子字串，並且沒有index和input屬性。
var str = '1a2b3c4d5e'; console.log(str.match(/h/g)); //返回null console.log(str.match(/\d/g)); //返回["1", "2", "3", "4", "5"]
3.擷取類方法
(1) substring()
stringObject.substring(start,end)
substring()是最常用到的字串擷取方法，它可以接收兩個引數(引數不能為負值)，分別是要擷取的開始位置和結束位置，它將返回一個新的字串，其內容是從start處到end-1處的所有字元。若結束引數(end)省略，則表示從start位置一直擷取到最後。
var str = 'abcdefg'; console.log(str.substring(1, 4)); //返回bcd(含頭不含尾) console.log(str.substring(1)); //返回bcdefg(如果只有一個引數則表示從該下標到字串結尾) console.log(str.substring(-1)); //返回abcdefg，傳入負值時會視為0
(2) slice()
stringObject.slice(start,end)
slice()方法與substring()方法非常類似，它傳入的兩個引數也分別對應著開始位置和結束位置。而區別在於，slice()中的引數可以為負值，如果引數是負數，則該引數規定的是從字串的尾部開始算起的位置。也就是說，-1 指字串的最後一個字元。
var str = 'abcdefg'; console.log(str.slice(1, 4)); //返回bcd(正規擷取法也遵循含頭不含尾的規則) console.log(str.slice(-3, -1)); //返回ef(如果是負數則從最後一位開始數，最後一位為-1，也遵循含頭不含尾的規則） console.log(str.slice(1, -1)); //返回bcdef console.log(str.slice(-1, -3)); //返回空字串，若傳入的引數有問題，則返回空（擷取規則都是從左往右截)
(3) substr()
stringObject.substr(start,length)(第一個引數為擷取開始的下標位置，第二個為從下標開始擷取的長度)
substr()方法可在字串中抽取從start下標開始的指定數目的字元。其返回值為一個字串，包含從 stringObject的start（包括start所指的字元）處開始的length個字元。如果沒有指定 length，那麼返回的字串包含從start到stringObject的結尾的字元。另外如果start為負數，則表示從字串尾部開始算起。
var str = 'abcdefg'; console.log(str.substr(1, 3)) //返回bcd console.log(str.substr(2)) //返回cdefg console.log(str.substr(-2, 4)) //返回fg，目標長度較大的話，以實際擷取的長度為準
4.其他方法
(1) replace()方法
stringObject.replace(regexp/substr,replacement)
replace()方法用來進行字串替換操作，它可以接收兩個引數，前者為被替換的子字串（可以是正則），後者為用來替換的文字。****************55g
如果第一個引數傳入的是子字串或是沒有進行全域性匹配的正則表示式，那麼replace()方法將只進行一次替換（即替換最前面的），返回經過一次替換後的結果字串。
var str = 'abcdeabcde';
console.log(str.replace('a', 'A'));
console.log(str.replace(/a/, 'A'));
如果第一個引數傳入的全域性匹配的正則表示式，那麼replace()將會對符合條件的子字串進行多次替換，最後返回經過多次替換的結果字串。
var str = 'abcdeabcdeABCDE'; console.log(str.replace(/a/g, 'A')); //返回AbcdeAbcdeABCDE console.log(str.replace(/a/gi, '$')); //返回$bcde$bcde$BCDE
(2) split()方法
stringObject.split(separator,howmany)
split()方法用於把一個字串分割成字串陣列。第一個引數separator表示分割位置(參考符)，第二個引數howmany表示返回陣列的允許最大長度(一般情況下不設定)。
var str = 'a|b|c|d|e';
console.log(str.split('|')); //返回["a", "b", "c", "d", "e"]
console.log(str.split('|', 3)); //返回["a", "b", "c"]
console.log(str.split('')); //返回["a", "|", "b", "|", "c", "|", "d", "|", "e"]
也可以用正則來進行分割
var str = 'a1b2c3d4e'; console.log(str.split(/\d/)); //返回["a", "b", "c", "d", "e"]
(3) toLowerCase()和toUpperCase()
stringObject.toLowerCase() stringObject.toUpperCase()
toLowerCase()方法可以把字串中的大寫字母轉換為小寫，toUpperCase()方法可以把字串中的小寫字母轉換為大寫。
var str = 'JavaScript'; console.log(str.toLowerCase()); //返回javascript console.log(str.toUpperCase()); //返回JAVASCRIPT
for in 遍歷的方法：
JSON:
varjson = {name = '阿飛', age = 18}
varjson1 = {'name' = '阿飛', 'age' = 18}
forin 遍歷
for(var key in json){ alert(json[key])//遍歷出key取value }
js中操作json資料以下為補充:
/*****************************js中json資料的操作*********************************************/
JSON(JavaScript Object Notation) 是一種輕量級的資料交換格式，採用完全獨立於語言的文字格式，是理想的資料交換格式。同時，JSON是 JavaScript 原生格式，這意味著在 JavaScript 中處理 JSON資料不須要任何特殊的 API 或工具包。
本文主要是對JS操作JSON的要領做下總結。
在JSON中，有兩種結構：物件和陣列。
1. 一個物件以“{”（左括號）開始，“}”（右括號）結束。每個“名稱”後跟一個“:”（冒號）；“‘名稱/值’ 對”之間運用 “,”（逗號）分隔。 名稱用引號括起來；值如果是字串則必須用括號，數值型則不須要。例如：
var o={"xlid":"cxh","xldigitid":123456,"topscore":2000,"topplaytime":"2009-08-20"}；
2. 陣列是值（value）的有序集合。一個數組以“[”（左中括號）開始，“]”（右中括號）結束。值之間運用 “,”（逗號）分隔。
例如：
var jsonranklist=[{"xlid":"cxh","xldigitid":123456,"topscore":2000,"topplaytime":"2009-08-20"},{"xlid":"zd","xldigitid":123456,"topscore":1500,"topplaytime":"2009-11-20"}];
為了方便地處理JSON資料，JSON提供了json.js包，下載地址：http://www.json.org/json.js
在資料傳輸流程中，json是以文字，即字串的形式傳遞的，而JS操作的是JSON物件，所以，JSON物件和JSON字串之間的相互轉換是關鍵。例如：
JSON字串:
var str1 = '{ "name": "cxh", "sex": "man" }';
JSON物件:
var str2 = { "name": "cxh", "sex": "man" };
一、JSON字串轉換為JSON物件
要運用上面的str1，必須運用下面的要領先轉化為JSON物件：
//由JSON字串轉換為JSON物件
var obj = eval('(' + str + ')');
或者
var obj = str.parseJSON(); //由JSON字串轉換為JSON物件
或者
var obj = JSON.parse(str); //由JSON字串轉換為JSON物件
然後，就可以這樣讀取：
Alert(obj.name);
Alert(obj.sex);
特別留心：如果obj本來就是一個JSON物件，那麼運用 eval（）函式轉換後（哪怕是多次轉換）還是JSON物件，但是運用 parseJSON（）函式處理後會有疑問（丟擲語法異常）。
二、可以運用 toJSONString()或者全域性要領 JSON.stringify()將JSON物件轉化為JSON字串。
例如： var last=obj.toJSONString(); //將JSON物件轉化為JSON字元
或者 var last=JSON.stringify(obj); //將JSON物件轉化為JSON字元
alert(last);
留心：
上面的多個要領中，除了eval()函式是js自帶的之外，其他的多個要領都來自json.js包。新版本的 JSON 修改了 API，將 JSON.stringify() 和 JSON.parse() 兩個要領都注入到了 Javascript 的內建物件裡面，前者變成了 Object.toJSONString()，而後者變成了 String.parseJSON()。如果提示找不到toJSONString()和parseJSON()要領，則說明您的json包版本太低。
三、JSON 合併函式
//Json合併
var extend =function(des, src, override){
if(src instanceof Array){
for(var i = 0, len = src.length; i < len; i++)
extend(des, src[i], override);
}
for( var i in src){
if(override || !(i in des)){
des[i] = src[i];
}
}
return des;
}
四、JSON排序函式
//函式功能：json 排序
// filed:(string)排序欄位，
// reverse: (bool) 是否倒置(是，為倒序)
// primer (parse)轉換型別
// Json.sort(sortBy('CourseLength', false, parseInt));
var sortBy = function (filed, rev, primer) {
rev = (rev) ? -1 : 1;
return function (a, b) {
a = a[filed];
b = b[filed];
if (typeof (primer) != "undefined") {
a = primer(a);
b = primer(b);
}
if (a < b) {
return rev * -1;
}
if (a > b) {
return rev * 1;
}
return 1;
}
}
/*****************************js中json資料的操作*********************************************/
Js中陣列的操作：
定義：var arr = [1,2,3]; // vararr = new Array(1,2,3);
陣列長度 ： arr.length // 可讀可寫
新增值： arr.push(); // 後面新增，返回陣列長度
arr.unshift(); //前面新增，返回陣列長度
刪除： arr.pop(); //刪除陣列最後一個，返回刪除的那個
arr.shift(); //刪除陣列第一個，返回刪除的那個
splice ：arr.splice( ); //(0,1); 從第0位開始刪除1個,返回刪除的那個
//(0,1,'a');把第0位開始的第一位替換為'a',
// (0,0,'a'); 在第0位後面新增'a'
小案例：取出字串中的數字（非正則）
<script>
var ss="sfaf236dafs4631fafdfadf516fadfdsf45265416daf";
var len = ss.length;
var s="";
var sss=new Array();
for(var i=0;i<len;i++){
if(ss.charAt(i)==parseInt(ss.charAt(i))){
s+=ss.charAt(i);
}else{
if(ss.charAt(i-1)==parseInt(ss.charAt(i-1))){
sss.push(s);
s="";
// s+=",";
}
}
}
alert(sss);
排序：arr.sort(); // 按照字元編碼來排序*********************55g
// 可傳函式引數
//倒序 可以用reverse
兩陣列拼接：concat(); // arr1.concat(arr2)
變為字串：jion(); //arr.jion('a' )以a為界限符拼成字串
js中陣列排序問題：如何生成隨機序列（特效會用到)*********? 55g
案例：圖片隨機定位，切換
js中運算子：
算數運算子 + - * / % ++ -- （運算優先順序 () ）
複製運算子 = += -= *= /= %=
比較運算子 < > <= >= == != === !==
邏輯運算子 && || ！
條件運算子 ( * )? * : *
移位運算子 & | ^ ~ << >>
案例：全選反選
(function(){})()
列子：
obj.checked = 'checked'/true;//選擇
obj.checked = !obj.checked;//反選
給元素設定屬性：
為標籤元素設定屬性有4種方法；
1.obj.style.屬性 =屬性值
2.obj.style.cssText=多個屬性值
3.obj.className='on';//通過對標籤新增class屬性 ，通過class屬性設定CSS（也可以新增ID)
4.可以對<style></style>標籤設ID 獲取 styleObj.innerHTML+=樣式表示式
css樣式的優先順序（數值為優先權重，越高則優先順序越高):
1.內聯樣式 1000
2.ID樣式 100
3.class樣式/偽類 10
4.標籤樣式 1
.style.width= '100px'
.cssText= 'width:100px'
獲取元素屬性：
getComputedStyle(obj ).width // 得到元素最終寬度 IE6 7 8不相容
currentStyle.width// 相容IE6 7 8，不相容別的瀏覽器
獲取元素屬性：
getComputedStyle(obj ).width // 得到元素最終寬度 IE6 7 8不相容
currentStyle.width// 相容IE6 7 8，不相容別的瀏覽器
js方法：//此方法相容性寫法；可以通過元素標籤物件獲取其相關屬性的值。一般情況下需要對返回的屬性值進行parseInt()處理；*****************************55g
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
通過class獲取元素； 相容寫法：
getElementsByClassName()//擴充套件方法
var divs = getClassNames('tabs_div' , 'div');
function getClassNames(classStr,tagName){
if (document.getElementsByClassName) {
return document.getElementsByClassName(classStr)
}else {
var nodes = document.getElementsByTagName(tagName),ret = [];
for(i = 0; i < nodes.length; i++) {
if(hasClass(nodes[i],classStr)){
ret.push(nodes[i])
}
}
return ret;
}
}
function hasClass(tagStr,classStr){
var arr=tagStr.className.split(/\s+/ ); //這個正則表示式是因為class可以有多個,判斷是否包含
for (var i=0;i<arr.length;i++){
if (arr[i]==classStr){
return true ;
}
}
return false ;
}
//不相容IE 6 7 8
/**************************************js中的運動框架**********************************************/
setInterval setTimeout 時間運動框架*************************55g
注意：定時器不適合用於寫時間表示，定時器時間過長會有時間不準確的缺點；
vartime =setInterval(function(){} , 2000);
// 每隔2000毫秒執行一次 function，如果不清楚，會一直執行下去
clearInterval('time' )
// 清楚定時器
vartime1 = setTimeout(function(){} , 2000);
// 2000毫秒後執行一次function，只執行一次
clearTimeout('time1' )
// 清楚定時器
（
window.location.href='http://www.baidu.com';
window.open('http://www.baidu.com' )
）
運動框架分：1速度版運動框架 2.時間版運動框架*
時間版運動框架；
tween演算法（flash運用的運動演算法，JQ也是基於這個寫的）
四個引數分別是：
t：currenttime（當前時間）；
b：beginningvalue（初始值）；
c：change in value（變化量）；
d：duration（持續時間）。
/**************************************js中的運動框架**********************************************/
JS中系統時間的獲取:
通過系統時間物件： var date = new Date();
具體的獲取方法：
getFullYear();
getMonth();
getDate();
getDay();
getHours();
getMinutes();
getSeconds();
getTime()；
myDate.getMilliseconds(); //獲取當前毫秒數(0-999)
myDate.toLocaleDateString(); //獲取當前日期
var mytime=myDate.toLocaleTimeString(); //獲取當前時間
myDate.toLocaleString( ); //獲取日期與時間
/********************************************操作例項*****************************/
日期時間指令碼庫方法列表
Date.prototype.isLeapYear 判斷閏年
Date.prototype.Format 日期格式化
Date.prototype.DateAdd 日期計算
Date.prototype.DateDiff 比較日期差
Date.prototype.toString 日期轉字串
Date.prototype.toArray 日期分割為陣列
Date.prototype.DatePart 取日期的部分資訊
Date.prototype.MaxDayOfDate 取日期所在月的最大天數
Date.prototype.WeekNumOfYear 判斷日期所在年的第幾周
StringToDate 字串轉日期型
IsValidDate 驗證日期有效性
CheckDateTime 完整日期時間檢查
daysBetween 日期天數差
js程式碼：
//---------------------------------------------------
// 判斷閏年
//---------------------------------------------------
Date.prototype.isLeapYear = function()
{
return (0==this.getYear()%4&&((this.getYear()%100!=0)||(this.getYear()%400==0)));
}
//---------------------------------------------------
// 日期格式化
// 格式 YYYY/yyyy/YY/yy 表示年份
// MM/M 月份
// W/w 星期
// dd/DD/d/D 日期
// hh/HH/h/H 時間
// mm/m 分鐘
// ss/SS/s/S 秒
//---------------------------------------------------
Date.prototype.Format = function(formatStr)
{
var str = formatStr;
var Week = ['日','一','二','三','四','五','六'];
str=str.replace(/yyyy|YYYY/,this.getFullYear());
str=str.replace(/yy|YY/,(this.getYear() % 100)>9?(this.getYear() % 100).toString():'0' + (this.getYear() % 100));
str=str.replace(/MM/,this.getMonth()>9?this.getMonth().toString():'0' + this.getMonth());
str=str.replace(/M/g,this.getMonth());
str=str.replace(/w|W/g,Week[this.getDay()]);
str=str.replace(/dd|DD/,this.getDate()>9?this.getDate().toString():'0' + this.getDate());
str=str.replace(/d|D/g,this.getDate());
str=str.replace(/hh|HH/,this.getHours()>9?this.getHours().toString():'0' + this.getHours());
str=str.replace(/h|H/g,this.getHours());
str=str.replace(/mm/,this.getMinutes()>9?this.getMinutes().toString():'0' + this.getMinutes());
str=str.replace(/m/g,this.getMinutes());
str=str.replace(/ss|SS/,this.getSeconds()>9?this.getSeconds().toString():'0' + this.getSeconds());
str=str.replace(/s|S/g,this.getSeconds());
return str;
}
//+---------------------------------------------------
//| 求兩個時間的天數差 日期格式為 YYYY-MM-dd
//+---------------------------------------------------
function daysBetween(DateOne,DateTwo)
{
var OneMonth = DateOne.substring(5,DateOne.lastIndexOf ('-'));
var OneDay = DateOne.substring(DateOne.length,DateOne.lastIndexOf ('-')+1);
var OneYear = DateOne.substring(0,DateOne.indexOf ('-'));
var TwoMonth = DateTwo.substring(5,DateTwo.lastIndexOf ('-'));
var TwoDay = DateTwo.substring(DateTwo.length,DateTwo.lastIndexOf ('-')+1);
var TwoYear = DateTwo.substring(0,DateTwo.indexOf ('-'));
var cha=((Date.parse(OneMonth+'/'+OneDay+'/'+OneYear)- Date.parse(TwoMonth+'/'+TwoDay+'/'+TwoYear))/86400000);
return Math.abs(cha);
}
//+---------------------------------------------------
//| 日期計算
//+---------------------------------------------------
Date.prototype.DateAdd = function(strInterval, Number) {
var dtTmp = this;
switch (strInterval) {
case 's' :return new Date(Date.parse(dtTmp) + (1000 * Number));
case 'n' :return new Date(Date.parse(dtTmp) + (60000 * Number));
case 'h' :return new Date(Date.parse(dtTmp) + (3600000 * Number));
case 'd' :return new Date(Date.parse(dtTmp) + (86400000 * Number));
case 'w' :return new Date(Date.parse(dtTmp) + ((86400000 * 7) * Number));
case 'q' :return new Date(dtTmp.getFullYear(), (dtTmp.getMonth()) +
Number*3, dtTmp.getDate(), dtTmp.getHours(), dtTmp.getMinutes(),
dtTmp.getSeconds());
case 'm' :return new Date(dtTmp.getFullYear(), (dtTmp.getMonth()) +
Number, dtTmp.getDate(), dtTmp.getHours(), dtTmp.getMinutes(),
dtTmp.getSeconds());
case 'y' :return new Date((dtTmp.getFullYear() + Number),
dtTmp.getMonth(), dtTmp.getDate(), dtTmp.getHours(), dtTmp.getMinutes(),
dtTmp.getSeconds());
}
}
//+---------------------------------------------------
//| 比較日期差 dtEnd 格式為日期型或者有效日期格式字串
//+---------------------------------------------------
Date.prototype.DateDiff = function(strInterval, dtEnd) {
var dtStart = this;
if (typeof dtEnd == 'string' )//如果是字串轉換為日期型
{
dtEnd = StringToDate(dtEnd);
}
switch (strInterval) {
case 's' :return parseInt((dtEnd - dtStart) / 1000);
case 'n' :return parseInt((dtEnd - dtStart) / 60000);
case 'h' :return parseInt((dtEnd - dtStart) / 3600000);
case 'd' :return parseInt((dtEnd - dtStart) / 86400000);
case 'w' :return parseInt((dtEnd - dtStart) / (86400000 * 7));
case 'm' :return (dtEnd.getMonth()+1)+((dtEnd.getFullYear()-dtStart.getFullYear())*12) - (dtStart.getMonth()+1);
case 'y' :return dtEnd.getFullYear() - dtStart.getFullYear();
}
}
//+---------------------------------------------------
//| 日期輸出字串，過載了系統的toString方法
//+---------------------------------------------------
Date.prototype.toString = function(showWeek)
{
var myDate= this;
var str = myDate.toLocaleDateString();
if (showWeek)
{
var Week = ['日','一','二','三','四','五','六'];
str += ' 星期' + Week[myDate.getDay()];
}
return str;
}
//+---------------------------------------------------
//| 日期合法性驗證
//| 格式為：YYYY-MM-DD或YYYY/MM/DD
//+---------------------------------------------------
function IsValidDate(DateStr)
{
var sDate=DateStr.replace(/(^\s+|\s+$)/g,''); //去兩邊空格;
if(sDate=='') return true;
//如果格式滿足YYYY-(/)MM-(/)DD或YYYY-(/)M-(/)DD或YYYY-(/)M-(/)D或YYYY-(/)MM-(/)D就替換為''
//資料庫中，合法日期可以是:YYYY-MM/DD(2003-3/21),資料庫會自動轉換為YYYY-MM-DD格式
var s = sDate.replace(/[\d]{ 4,4 }[\-/]{ 1 }[\d]{ 1,2 }[\-/]{ 1 }[\d]{ 1,2 }/g,'');
if (s=='') //說明格式滿足YYYY-MM-DD或YYYY-M-DD或YYYY-M-D或YYYY-MM-D
{
var t=new Date(sDate.replace(/\-/g,'/'));
var ar = sDate.split(/[-/:]/);
if(ar[0] != t.getYear() || ar[1] != t.getMonth()+1 || ar[2] != t.getDate())
{
//alert('錯誤的日期格式！格式為：YYYY-MM-DD或YYYY/MM/DD。注意閏年。');
return false;
}
}
else
{
//alert('錯誤的日期格式！格式為：YYYY-MM-DD或YYYY/MM/DD。注意閏年。');
return false;
}
return true;
}
//+---------------------------------------------------
//| 日期時間檢查
//| 格式為：YYYY-MM-DD HH:MM:SS
//+---------------------------------------------------
function CheckDateTime(str)
{
var reg = /^(\d+)-(\d{ 1,2 })-(\d{ 1,2 }) (\d{ 1,2 }):(\d{ 1,2 }):(\d{ 1,2 })$/;
var r = str.match(reg);
if(r==null)return false;
r[2]=r[2]-1;
var d= new Date(r[1],r[2],r[3],r[4],r[5],r[6]);
if(d.getFullYear()!=r[1])return false;
if(d.getMonth()!=r[2])return false;
if(d.getDate()!=r[3])return false;
if(d.getHours()!=r[4])return false;
if(d.getMinutes()!=r[5])return false;
if(d.getSeconds()!=r[6])return false;
return true;
}
//+---------------------------------------------------
//| 把日期分割成陣列
//+---------------------------------------------------
Date.prototype.toArray = function()
{
var myDate = this;
var myArray = Array();
myArray[0] = myDate.getFullYear();
myArray[1] = myDate.getMonth();
myArray[2] = myDate.getDate();
myArray[3] = myDate.getHours();
myArray[4] = myDate.getMinutes();
myArray[5] = myDate.getSeconds();
return myArray;
}
//+---------------------------------------------------
//| 取得日期資料資訊
//| 引數 interval 表示資料型別
//| y 年 m月 d日 w星期 ww周 h時 n分 s秒
//+---------------------------------------------------
Date.prototype.DatePart = function(interval)
{
var myDate = this;
var partStr='';
var Week = ['日','一','二','三','四','五','六'];
switch (interval)
{
case 'y' :partStr = myDate.getFullYear();break;
case 'm' :partStr = myDate.getMonth()+1;break;
case 'd' :partStr = myDate.getDate();break;
case 'w' :partStr = Week[myDate.getDay()];break;
case 'ww' :partStr = myDate.WeekNumOfYear();break;
case 'h' :partStr = myDate.getHours();break;
case 'n' :partStr = myDate.getMinutes();break;
case 's' :partStr = myDate.getSeconds();break;
}
return partStr;
}
/********************************************操作例項*****************************/
newDate();
建立一個時間點：
1）new Date("month dd,yyyy hh:mm:ss");
2）new Date("month dd,yyyy");
3）new Date(yyyy,mth,dd,hh,mm,ss);
4）new Date(yyyy,mth,dd);
5）new Date(ms);
month:用英文 表示月份名稱，從January到December
mth:用整數表示月份，從0（１月）到１１（１２月）
dd:表示一個 月中的第幾天，從1到31
yyyy:四位數表示的年份
hh:小時數，從0（午夜）到23（晚11點）
mm: 分鐘數，從0到59的整數
ss:秒數，從0到59的整數
ms:毫秒數，為大於等於0的整數
JS中的DOM物件: document object model;
DOM節點相關操作；
NodeType:節點型別有12種（常見的有元素節點1、文字節點3、屬性節點2）；
childNodes：（子節點集合）
IE678只包含元素，其他包含文字和元素（包括非標準元素）；
可以用.length得到長度；
children：（只包含元素節點，推薦使用）；
firstChild：（第一個子節點）IE678只會是元素，其他可能是文字或元素；
列子:
/*********************firstChild****************/
alert( obj.firstChild.nodeType )
alert( obj.firstElementChild.nodeType )
firstChild 和 childNodes一樣存在相容問題
firstElementChild
IE 6 7 8裡面沒有這個屬性
firstElementChild：IE678沒有這個屬性，其他第一個元素節點；
相容性寫法:
if ( obj.firstElementChild )
{
obj.firstElementChild.style.color = 'red';
}else{
obj.firstChild.style.color = 'red';
}
if ( obj.children )
{
obj.children[oList.children.length-1].style.color = 'red';
}
/*********************firstChild****************/
lastChild/ lastElementChild : （最後一個子節點）；
nextSibling/ nextElementChild：(下一個節點);
列子:
if ( oList.nextElementSibling )
{
oList.nextElementSibling.style.color = 'red';
}else{
if ( oList.nextSibling.nodeType == 1 )
{
oList.nextSibling.style.color = 'red';
}
}
previousSibling/ previousElementSibling：（上一個節點）；
列子:
oList.previousSibling.style.color = 'red';
parentNode：（元素的父節點）
offsetParent：（元素有定位屬性的父節點）
元素.offsetParent
得到的是第一個定位父元素，找不到就是body
在IE7 ，得到的是第一個layout屬性變化的父元素;IE7中每個元素都有一個預設的layout屬性
相容性寫法:
function siblings( obj , fn ){
var oLiParChild = obj.parentNode.children
for ( var i=0;i<oLiParChild.length;i++ )
{
if ( oLiParChild[i] != obj )
{
fn.call(oLiParChild[i]);//call方法詳見event事件中物件指向的講解
}
}
}
offsetLeft/ offsetTop
元素.offsetLeft
//父級沒有定位的時候
在其他瀏覽器，得到的是到HTML的距離
//父級有定位
得到的是元素到offsetParent的距離
//元素自己有定位：
得到的是元素到定位父級的距離
offset函式功能 ：得到obj到頁面頂部的絕對距離
function offset( obj ){
var pos = {'left' : 0,'top' : 0};
while ( obj )
{
pos.left += obj.offsetLeft;
pos.top += obj.offsetTop;
obj = obj.offsetParent;//迴圈知道找到頂層物件
}
return pos;
}
height;clientHeight;offsetHeight;之間的區別：
alert( obj.style.height ) 樣式高度
alert( obj.clientHeight ) 可視區高度 樣式+padding
alert( obj.offsetHeight ) 實際高度 樣式+padding+border
元素屬性的操作：
<div id="box" style="" class="wrap" afei="handsome"></div>
alert( oBox.attributes[3].name )
oBox['afei'] = 'ww'//
. [] 不能修改或者讀取自定義屬性的
alert( oBox.getAttribute('afei') );
//oBox.setAttribute( 'afei' , 'aaaaaa' )
//oBox.removeAttribute( 'afei' )
由於相容性問題。在JS中常用的是obj.parentNode,和obj.children；常用的節點是元素節點
BOM : (Browser Object Model)
（對瀏覽器的一些操作）
window.open();
//開啟一個新視窗，引數1：[href] ， 引數2：[target] :引數1是開啟的連線路徑；引數2是開啟的方式。
open();//可以不用window物件也可以執行
引數1 ： 地址路徑 ， 不寫開啟空白頁
引數2 ： 【target】，不寫在新視窗開啟
close();
//返回新視窗的window物件；
window.close();
//關閉視窗，瀏覽器禁止問題，作用不大
window.navigator.userAgent //瀏覽器資訊；通過這個方法可以的到瀏覽器的版本用於提供相容性問題的解決方案
列子：
if(window.navigator.userAgent.indexOf('MSIE') != -1 )
{
alert('我是IE');
}else
{
alert('我不是IE')
}
window.location //地址資訊 ['href'] ['search'] ['hash']
滾動距離
document.body.scrollTop //scrollLeft
函式列子：
document.onclick = function(){
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
//alert( scrollTop );
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
};
document.documentElement.scrollTop //scrollLeft
//視窗改變事件
window.onresize = function(){}
函式列子：
var i = 0;
window.onresize = function(){
document.title = i++
}
window.onscroll = function(){
document.title = i++
}
window.onscroll = function(){}
clientHeight / offsetHeight / scrollHeight 區別
var oBox = document.getElementById('box');
//alert( getStyle( oBox , 'height' ) ); // 100px
//alert( oBox.clientHeight) // 120
//alert( oBox.offsetHeight ) // 124
alert( oBox.scrollHeight ) // 120 279 290 286 287 340 340//再不同的瀏覽器中值不同
function getStyle( obj , attr ){//獲取元素物件對應的屬性值
return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle(obj,0)[attr];
}
表單操作:
可以用過name名獲取改變值；
form.user.value= 'afei';
表單事件：
onchange// 表單值改變時觸發
onchange對不同型別元素物件的表現 :
text - 當表單value值改變的時候觸發
radio - 選中的時候觸發
checkbox - 選擇反選都觸發
select - 切換觸發
onsubmit// 提交表單是觸發
onreset// 重置時觸發
document.getElementsByTagName('select')[0].onchange = function(){
alert( this.value );
};
oForm.onsubmit = function(){
if ( oInp[0].value == '' )
{
alert('使用者名稱不能為空')
}
}
oForm.onreset = function(){
alert( 1 )
}
*/
oInp[0].onfocus = function(){
if ( this.value == "請輸入使用者名稱" )
{
this.value = '';
}
}
oInp[0].onblur = function(){
if ( this.value == '' )
{
this.value = "請輸入使用者名稱" ;
}
}
/*
document.onclick = function(){
oInp[0].focus();
}
*/
//oInp.blur();
document.getElementById('btn').onclick = function(){
oInp[10].select();
}
onfocus //獲得焦點觸發
onblur // 失去焦點觸發
.focus().blur() .select()
event事件物件:
事件物件-- 當事件發生時和該事件相關的一些資訊；
不同瀏覽器的相容問題；
event是一個物件，有很多屬性，常用的比如clientX , clientY;
event,事件物件的屬性具體運用：
// onmousemove 滑鼠移動的時候觸發
document.onmousemove = function( ev ){
var ev = ev || event;
var x = ev.clientX;
var y = ev.clientY;
var oDiv = document.createElement('div');
oDiv.style.cssText = 'width:3px;height:3px;position:fixed;top:'+y+'px;left:'+x+'px;background:red;';
document.body.appendChild( oDiv );
}
詳述:
event : 事件物件 -- 當一個事件發生的時候，儲存這個事件的相關資訊
ie / chrome : event ,初始的內容
ie : null chrome : undefined
firefox : event沒有
只有在事件發生時，event才有意思
ie 8- 在事件發生的時候直接用 event
chrome ：可以直接event或者事件函式的第一個引數
firefox ：事件函式的第一個引數
function fn( ev ){//通過這個方法可以獲取事件物件的所有屬性
var ev = ev || event;
for ( var key in ev )
{
// key 屬性名 ev[key] 值
document.write( key + ' = ' + ev[key] + '<br>' );
}
}
//fn();
document.onclick = fn;
在chrom中可以正常獲取，具體資訊如下：