<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var arr = [
[1, 2, 2],
[3, 4, 5, 5],
[6, 7, 8, 9, [11, 12, [12, 13, [14]]]], 10
];
var newArr = [];
function changeArr(arr) {
for(var i = 0; i < arr.length; i++) {
//遍歷arr陣列得每一個元素,這裡也可以用forEach
if(arr[i] instanceof Array) {
//判斷元素是否為陣列
changeArr(arr[i])
//元素為陣列則繼續呼叫changeArr方法遍歷
} else {
newArr.push(arr[i])
//元素不是陣列則可以直接push進新陣列
}
}
//此上的判斷也可以直接用三元表示式
}
changeArr(arr);
console.log(newArr); //[1, 2, 2, 3, 4, 5, 5, 6, 7, 8, 9, 11, 12, 12, 13, 14, 10]
</script>
</head>
<body>
</body>
</html>
方案一（僅去重）：
var rusultArr=newArr.reduce(function(rusultArr,a){
if(rusultArr.indexOf(a)==-1){
rusultArr.push(a)
}
return rusultArr
},[])
方案二（去重加排序）：
rusultArr=Array.from(new Set(newArr)).sort(function(a,b){return a-b})
複製程式碼truncate方法：用於對字串進行截斷處理。當超過限定長度，預設新增3個點號。
function truncate(target, length, truncation) {
length = length || 30;
truncation = truncation === void(0) ? '...' : truncation;
return target.length > length ?
target.slice(0, length - truncation.length) + truncation : String(target);
}
camelize方法：轉換為駝峰風格。
function camelize(target) {
if (target.indexOf('-') < 0 && target.indexOf('') < 0) {
return target;//提前判斷，提高getStyle等的效率
}
return target.replace(/[-][^-]/g, function(match) {
return match.charAt(1).toUpperCase();
});
}
underscored方法：轉換為下劃線風格。
function underscored(target) {
return target.replace(/([a-z\d])([A-Z])/g, '$1$2').
replace(/-/g, '').toLowerCase();
}
dasherize方法：轉換為連字元風格，即CSS變數的風格。
function dasherize(target) {
return underscored(target).replace(//g, '-');
}
capitalize方法：首字母大寫。
function capitalize(target) {
return target.charAt(0).toUpperCase() + target.substring(1).toLowerCase();
}
複製程式碼POST和GET的區別，HTTP狀態碼
POST和GET的區別
GET在瀏覽器回退時是無害的，而POST會再次提交請求
GET產生的URL地址可以被收藏，而POST不可以
GET請求會被瀏覽器主動快取，而POST不會，除非手動設定
GET請求只能進行URL編碼，而POST支援多種編碼方式
GET請求引數會被完整保留在瀏覽器歷史記錄裡，而POST中的引數不會被保留
GET請求在URL中傳送的引數是有長度限制的，而POST沒有長度限制
對引數的資料型別，GET只能請求ASCII字元，而POST沒有限制
GET比POST更不安全，因為引數直接暴露在URL上，所以不能用來傳敏感資訊
GET引數通過URL傳遞，POST放在Request body中
HTTP狀態碼
1XX：指示資訊-表示請求已接受，繼續處理
2XX：成功-表示請求已被成功接收200 OK ：客戶端請求成功
206 Partial Content：客戶傳送一個帶有Range頭的GET請求，伺服器完成了它 播放視訊和音訊
3XX：重定向-要完成請求必須進行更進一步的操作301 Move Permanently：所請求的頁面已經轉移至新的URL
302 Found：所請求的頁面已經臨時轉移到新的URL
304 Not Modified：客戶端有緩衝的文件併發出一個條件性的請求，伺服器告訴客戶，原來緩衝的文件還可以繼續使用
4XX：客戶端錯誤-請求有語法錯誤或請求無法實現400 Bad Request：客戶端請求有語法錯誤，不能被伺服器所理解
401 Unauthorized：請求未經授權，這個狀態程式碼必須和WWW-Authenticate報頭域一起使用
403 Forbidden：對被請求頁面的訪問被禁止
404 Not Found：請求資源不存在
5XX：服務錯誤-伺服器未能實現合法的請求500 Internal Server Error：伺服器發生不可預期的錯誤原來緩衝的文件還可以繼續使用
503 Server Unavailable：請求未完成，伺服器臨時過載或當機，一段事件後恢復正常
複製程式碼有時可能需要在pagehide事件觸發時根據persisted的值採取不同的操作。
對於pageshow事件，如果頁面是從bfcache中載入的，那麼persisted的值就是true；
對於pagehide事件，如果頁面在載入之後會儲存在bfcache中，那麼persisted的值也會被設定為ture。
因此，當第一次觸發pageshow時，persisted的值一定是false，而在第一次觸發pagehide時，persisted就會變成true(除非頁面不會儲存在bfcache中)。指定了onunload事件處理程式的頁面會被自動排除在bfcache之外，即使事件處理程式是空的。
具體原因：
onunload最常用於撤銷在onload中所執行的操作，而跳過onload後再次顯示頁面很可能會導致頁面不正常。
微信後退不重新整理【JS不執行】：
+ var isPageHide = false;
+ window.addEventListener('pageshow', function () {
+ if (isPageHide) {
+ window.location.reload();
+ }
+ });
+ window.addEventListener('pagehide', function () {
+ isPageHide = true;
+ }); 複製程式碼var a = 1;
function foo() {
if (!a) {
var a = 2;
}
alert(a);
};
foo(); //2
複製程式碼大數相加 http://www.cnblogs.com/kindofblue/p/4672129.html
/*let a;
async function correct() {
try {
await Promise.reject('error1')
} catch (error) {
console.log(error);
}
a = await 1;
return a;
}
correct().then(v => console.log(a)); // 1
*/
let a;
async function f() {
await Promise.reject('error');
a = await 1; // 這段 await 並沒有執行
}
f().then(v => console.log(a));
複製程式碼@font-face {
font-family: 'source';
src: url('../fonts/source.eot');
src:
url('../fonts/source.eot?#font-spider') format('embedded-opentype'),
url('../fonts/source.woff2') format('woff2'),
url('../fonts/source.woff') format('woff'),
url('../fonts/source.ttf') format('truetype'),
url('../fonts/source.svg') format('svg');
font-weight: normal;
font-style: normal;
}
.home h1, .demo > .test {
font-family: 'source';
}
複製程式碼var EventUtil = { //事件處理程式
addHandler:function(element,type,handler){
if(element.addEventListener){//檢測是否存在DOM2
element.addEventListener(type,handler,false)
}else if(element.attachEvent){//存在ie
element.attachEvent('on'+type,handler)
}else{//DOM0
element['on'+type]=handelr;
}
},
removeHandler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent('on'+type,handler);
}else{
element['on'+type]=null;
}
}
}
複製程式碼建構函式
自己的想法
普通的函式就像是按步驟執行的動作，而建構函式更像是可更改零件的木偶，普通函式可以直接呼叫，但是建構函式需要new
因為建構函式也是函式，所以可以直接被呼叫，但是它的返回值為undefine，此時建構函式裡面的this物件等於全域性this物件
擴充套件例項和物件的區別，從定義上來講：1、例項是類的具象化產品，2、而物件是一個具有多種屬性的內容結構。funciton Foo(name,age){
this.name = name;
this.age = age;
this.class = 'class-1';
// return this //預設有這一行
}
var f = new Foo('zhangsan',20); //例項化物件
// var f1 = new Foo('lisi',22) //建立多個物件
建構函式-擴充套件
var a = {} 其實是 var a = new Object()的語法糖
var a = [] 其實是 var a = new Array()的語法糖
function Foo(){...}其實是 var Foo = new Function(...)
使用 instanceof 判斷一個函式是否是一個變數的建構函式如果想判斷一個變數是否為“陣列”：變數 instanceof Array
instanceof
用於判斷引用型別屬於哪個建構函式的方法
f instanceof Foo 的判斷邏輯是：
f的__proto__一層一層往上走，是否能對應到Foo.prototype
再試著判斷f instanceof Object
複製程式碼magin重疊：邊界疊加的大多數問題可以通過新增透明邊框或1px的補白來修復。
補充解決方案：
1.外層padding
2.透明邊框border:1pxsolidtransparent;
3.絕對定位postion:absolute:
4.外層DIVoverflow:hidden;
5.內層DIV 加float:left;display:inline;
6.外層DIV有時會用到zoom:1;
複製程式碼// Adding extend function to Object.prototype
Object.prototype.extend = function(obj) {
for (var i in obj) {
if (obj.hasOwnProperty(i)) {
this[i] = obj[i];
}
}
};
var objA = {"name": "colin", "car": "suzuki"};
var objB = {"name": "james", "age": 17};
objA.extend(objB);
objA; // {"name": "james", "age": 17, "car": "suzuki"};
// Lodash
_.assign(objA, objB);
//assign 實現淺複製
var _extends = Object.assign || function(target) {
for(var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for(var key in source) {
if(Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
複製程式碼function sum() {
var cur = Array.prototype.slice.call(arguments).reduce(function(a,b){
return a+b;
},0);
function add() {
return arguments.length==0 ? cur : (cur+=Array.prototype.slice.call(arguments).reduce(function(a,b){return a+b},0), add);
};
return arguments.length==0 ? 0 : add;
}
console.log(sum()); //0
console.log(sum(2)(3)()); //5
console.log(sum(2,3)()); //5
console.log(sum(2,3,5)()); //10
console.log(sum(2,3,5)(5)()); //15
console.log(sum(2,3,5)(5)(5,5)()); //25
function add() {
var a = arguments[0];
if(arguments.length == 2) {
return a + arguments[1];
} else {
return function(b) {
return a + b;
}
}
}
console.log(add(2, 3)); //5
console.log(add(2)(3)); //5
add(1)(2)(3)呼叫方式的方法:
var add = function(a){
return function(b){
return function(c){
return a+b+c;
};
};
};
add(1)(2)(3); //6
首先要一個數記住每次的計算值，所以使用了閉包，在tmp中記住了x的值，第一次呼叫add(),初始化了tmp，並將x儲存在tmp的作用鏈中，然後返回tmp保證了第二次呼叫的是tmp函式，後面的計算都是在呼叫tmp, 因為tmp也是返回的自己，保證了第二次之後的呼叫也是呼叫tmp，而在tmp中將傳入的引數與儲存在作用鏈中x相加並付給sum，這樣就保證了計算；
但是在計算完成後還是返回了tmp這個函式，這樣就獲取不到計算的結果了，我們需要的結果是一個計算的數字那麼怎麼辦呢，首先要知道JavaScript中，列印和相加計算，會分別呼叫toString或valueOf函式，所以我們重寫tmp的toString和valueOf方法，返回sum的值；
function add(x) {
var sum = x;
var tmp = function (y) {
sum = sum + y;
return tmp;
};
tmp.toString = function () {
return sum;
};
return tmp;
}
console.log(add(1)(2)(3)); //6
console.log(add(1)(2)(3)(4)); //10複製程式碼1. for of和迭代器
ES5中，forEach可以用來遍歷陣列元素，但它的缺陷是不能使用break語句中斷迴圈，也不能使用return語句返回到外層函式。
強大的for-of迴圈
for (let value of [1, 2, 3]) {
console.log(value); //輸出 1 2 3
}
最簡潔、最直接的遍歷陣列元素的語法
----------------------------------------------------------------------------------------------
這個方法避開了for-in迴圈的所有缺陷
與forEach()不同的是，它可以正確響應break、continue和return語句其它集合也支援for-of迴圈
for-of迴圈不僅支援陣列，還支援大多數類陣列物件，例如DOM的NodeList物件。
----------------------------------------------------------------------------------------------
它也支援字串：
for (let chr of "abc12") {
console.log(chr); // 輸出 "a" "b" "c" "1" "2"
}
另外還支援Map和Set物件的遍歷。
深入理解
正如其它語言中的for/foreach語句一樣，for-of迴圈語句通過方法呼叫來遍歷各種集合。陣列、Map、Set以及我們討論的其它物件有一個共同點，它們都有一個迭代器方法。
任何物件都可以有/新增迭代器方法。
就像為物件新增myObject.toString()方法，JS知道怎麼把這個物件轉化為字串;你為物件新增迭代器方法myObject[Symbol.iterator]()，JS也就知道了如何遍歷這個物件。
[Symbol.iterator]語法看起來很怪。Symbol是ES6引入的新型別，標準定義了全新的symbol（如Symbol.iterator），來保證不與任何已有程式碼產生衝突。
任何有迭代器方法[Symbol.iterator]()的物件都是可迭代的。 複製程式碼
前端如何設定快取
通過meta標籤的http-equiv屬性進行設定
<meta http-equiv="pragram" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, must-revalidate">
在ajax請求中通過setRequestHeaders這個方法設定如果還有其他的設定方法，歡迎留言指教。
複製程式碼var target = { a: 1 };
var source1 = { b: 2 };
var source2 = { c: 3 };
Object.assign(target, source1, source2); //改變了target ，注意和{...a,...b}的區別
target // {a:1, b:2, c:3} 複製程式碼
var a={
"a":{
"b":{
"c":100,
"d":200
}
}
};
var b={
"a":{
"b":{
"e":100
}
}
}
console.log({...{},...a,...b})
console.log(a)
//ES5
"use strict";
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var a = {
"a": {
"b": {
"c": 100,
"d": 200
}
}
};
var b = {
"a": {
"b": {
"e": 100
}
}
};
console.log(_extends({}, a, b));
console.log(a);
複製程式碼建構函式 new
JS中的函式即可以是建構函式又可以當作普通函式來呼叫，當使用new來建立物件時，
對應的函式就是建構函式，通過物件來呼叫時就是普通函式。
普通函式的建立有：顯式宣告、匿名定義、new Function() 等三種方式。
當通過new來建立一個新物件時，JS底層將新物件的原型鏈指向了建構函式的原型物件，
於是就在新物件和函式物件之間建立了一條原型鏈，通過新物件可以訪問到函式物件原型prototype中的方法和屬性。
1.建立一個新的空物件；
2.將this繫結到該物件；
3.新增一個名為__proto__的新屬性，並且指向建構函式的原型(prototype)；
4.返回該this物件。
複製程式碼
setTimeout(fn, 0) 的作用
setTimeout（0）單執行緒和非同步佇列
setTimeout和setInterval是JS內建的兩個定時器，使用很簡單，但這兩個方法背後的原理卻不簡單。
我們知道，JS是單執行緒語言，在瀏覽器中，當JS程式碼被載入時，瀏覽器會為其分配一個主執行緒來執行任務(函式)，
主執行緒會形成一個全域性執行環境，執行環境採用棧的方式將待執行任務按順序依次來執行。
但在瀏覽器中有一些任務是非常耗時的，比如http請求、定時器、事件回撥等，為了保證其他任務的執行效率不被影響，
JS在執行環境中維護了一個非同步佇列(也叫工作執行緒)，並將這些任務放入佇列中進行等待，這些任務的執行時機並不確定，
只有當主執行緒的任務執行完成以後，才會去檢查非同步佇列中的任務是否需要開始執行。這就是為什麼setTimeout(fn,0)
始終要等到最後執行的原因。關於單執行緒和非同步佇列問題請參考：setTimeout（0）
複製程式碼Array的reduce方法 //educe需要兩個引數，一個是回撥函式，
一個是初始值，沒有初始值，會預設把陣列第一個當初始值，並從第二個開始
arr.reduce(callback,[initialValue])
複製程式碼callback
執行陣列中每個值的函式，包含四個引數
accumulator上一次呼叫回撥返回的值，或者是提供的初始值（initialValue）
currentValue陣列中正在處理的元素
currentIndex資料中正在處理的元素索引，如果提供了
initialValue ，從0開始；否則從1開始array呼叫 reduce 的陣列
initialValue可選項，其值用於第一次呼叫 callback 的第一個引數。
複製程式碼var sum = [0, 1, 2, 3].reduce(function(a, b) {
return a + b;
}, 0);
// sum is 6
var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
var countedNames = names.reduce(function(allNames, name) {
if (name in allNames) {
allNames[name]++;
}
else {
allNames[name] = 1;
}
return allNames;
}, {}); //{}就是上面的allNames,這裡當做預設值
// countedNames is { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }
複製程式碼Array.from() //擴充套件運算子（…）也可以將某些資料結構轉為陣列
將兩類物件轉為真正的陣列：類似陣列的物件（array-like object）和可遍歷（iterable）的物件（包括ES6新增的資料結構Set和Map）
//類似陣列的物件
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
// ES5的寫法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
// ES6的寫法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
// NodeList物件
let ps = document.querySelectorAll('p');
Array.from(ps).forEach(function (p) {
console.log(p);
});
// arguments物件
function foo() {
var args = Array.from(arguments);
// ...
}
Array.of()
用於將一組值，轉換為陣列
Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1
複製程式碼深拷貝淺拷貝
1、淺拷貝 //Object.assign() //淺拷貝，類似{...obj1,...obj2} 都是淺拷貝
拷貝就是把父物件的屬性，全部拷貝給子物件。
接下來，我們看一個拷貝的例子：
function extendCopy(b) {
var a = {};
for (var i in b) {
a[i] = b[i];
}
return a;
}
呼叫的時候，這樣寫：
// 呼叫
var copyA = {
titleA: '標題A'
};
var copyB = extendCopy(copyA);
console.log(copyB.titleA); // 標題A
但是，這樣的拷貝有一個問題。那就是，如果父物件的屬性等於陣列或另一個物件，那麼實際上，子物件獲得的只是一個記憶體地址，而不是真正拷貝，因此存在父物件被篡改的可能。
接下來，我們看一個篡改的示例：
function extendCopy(b) {
var a = {};
for (var i in b) {
a[i] = b[i];
}
return a;
}
// 呼叫
var copyA = {
arrayA: [1, 2, 3, 4]
};
var copyB = extendCopy(copyA);
copyB.arrayA.push(5);
console.log(copyA.arrayA); // [1, 2, 3, 4, 5]
結果是增加了一個5。
所以，extendCopy() 只是拷貝了基本型別的資料，我們把這種拷貝叫做“淺拷貝”。
//陣列深拷貝 [].concat(arr1), var =[...arr1], arr1.slice(0)
2、深拷貝
function deepCopy(p, c) {
var c = c || {};
for (var i in p) {
if (typeof p[i] === 'object') {
c[i] = (p[i].constructor === Array) ? [] : {};
deepCopy(p[i], c[i]);
} else {
c[i] = p[i];
}
}
return c;
}
// 呼叫
var copyA = {
arrayA: [1, 2, 3, 4]
};
var copyB = deepCopy(copyA);
copyB.arrayA.push(5);
console.log(copyA.arrayA); // [1, 2, 3, 4]
複製程式碼Element.matches 精確匹配
document.getElementById('list').addEventListener('click', function (e) {
// 相容性處理
var event = e || window.event;
var target = event.target || event.srcElement;
if (target.matches('li.class-1')) {
console.log('the content is: ', target.innerHTML);
}
});
複製程式碼移動端touch事件(區分webkit 和 winphone)
當使用者手指放在移動裝置在螢幕上滑動會觸發的touch事件
以下支援webkit
touchstart——當手指觸碰螢幕時候發生。不管當前有多少隻手指
touchmove——當手指在螢幕上滑動時連續觸發。通常我們再滑屏頁面，會呼叫event的preventDefault()可以阻止預設情況的發生：阻止頁面滾動
touchend——當手指離開螢幕時觸發
touchcancel——系統停止跟蹤觸控時候會觸發。例如在觸控過程中突然頁面alert()一個提示框，此時會觸發該事件，這個事件比較少用TouchEvent
touches：螢幕上所有手指的資訊
targetTouches：手指在目標區域的手指資訊
changedTouches：最近一次觸發該事件的手指資訊
touchend時，touches與targetTouches資訊會被刪除，changedTouches儲存的最後一次的資訊，最好用於計算手指資訊引數資訊(changedTouches[0])
clientX、clientY在顯示區的座標
target：當前元素
全域性錯誤監控
監聽window上的error事件，過濾事件代理的error。
複製程式碼手動觸發一個dom事件，需要3步，如果你對document.createEvent,�不是很熟悉，可以點選檢視。
建立一個事件物件 document.createEvent(event)
初始化事件物件 event.initEvent(type, bubbles, true)
分發事件 dom.dispatchEvent(event)
複製程式碼Object.preventExtensions(obj) 讓一個物件變的不可擴充套件，也就是永遠不能再新增新的屬性。
Object.isExtensible(obj) 判斷一個物件是否是可擴充套件的
Object.seal(obj)讓一個物件密封(只能讀寫 不能新增)
Object.isSealed(obj)判斷一個物件是否密封
Object.isFrozen(arr) 讓一個物件被凍結(只能讀)
Object.isFrozen(obj)：判斷一個物件是否被凍結
Object.keys(obj) 返回一個由給定物件的所有可列舉自身屬性的屬性名組成的陣列
Object.getOwnPropertyNames(obj)：返回一個由指定物件的所有自身屬性的屬性名（包括不可列舉屬性）組成的陣列
Object.is(value1, value2)：判斷兩個值是否是同一個值,Object.is它用來比較兩個值是否嚴格相等，與嚴格比較運算子（===）的行為基本一致。
Object.create(proto [, propertiesObject ]) 是E5中提出的一種新的物件建立方式，第一個引數是要繼承的原型，如果不是一個子函式，可以傳一個null，第二個引數是物件的屬性描述符，這個引數是可選的。
Object.assign 把任意多個的源物件自身的可列舉屬性拷貝給目標物件，然後返回目標物件。【淺複製】
//var copy = Object.assign({}, obj);
Object.defineProperty() 定義單個物件屬性或方法(可以設定讀寫可列舉)
Object.defineProperties() 定義多個物件屬性或方法(可以設定讀寫可列舉)
Object.assign() //淺拷貝，類似{...obj1,...obj2} 都是淺拷貝
Object.assign方法用於物件的合併，將源物件（source）的所有可列舉屬性，複製到目標物件（target）
var target = { a: 1 };
var source1 = { b: 2 };
var source2 = { c: 3 };
Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}
//如果目標物件與源物件有同名屬性，或多個源物件有同名屬性，則後面的屬性會覆蓋前面的屬性。Object.assign方法實行的是淺拷貝，而不是深拷貝。也就是說，如果源物件某個屬性的值是物件，那麼目標物件拷貝得到的是這個物件的引用。
Object.assign方法實行的是淺拷貝，而不是深拷貝。也就是說，如果源物件某個屬性的值是物件，那麼目標物件拷貝得到的是這個物件的引用。
var obj1 = {a: {b: 1}};
var obj2 = Object.assign({}, obj1);
obj1.a.b = 2;
obj2.a.b // 2
對於這種巢狀的物件，一旦遇到同名屬性，Object.assign的處理方法是替換，而不是新增。
var target = { a: { b: 'c', d: 'e' } }
var source = { a: { b: 'hello' } }
Object.assign(target, source)
// { a: { b: 'hello' } }複製程式碼停止jq中的ajax請求用abort()函式
<html>
<head>
<mce:script type="text/javascript"><!--
var currentAjax = null;
function startAjax(){
//方法就是將XHR物件指向currentAjax，再呼叫currentAjax的.abort()來中止請求
currentAjax = $.ajax({
type:'POST',
beforeSend:function(){},
url:'test.php',
data:'username=xxx',
dataType:'JSON',
error:function(){alert('error')},
success:function(data){alert(data)}
});
}
function stopAjax(){
//如若上一次AJAX請求未完成，則中止請求
if(currentAjax) {currentAjax.abort();}
}
// --></mce:script>
</head>
<body>
<input type="button" value="觸發請求" onclick="startAjax()" />
<input type="button" value="停止請求" onclick="stopAjax()" />
</body>
</html>
複製程式碼JSONP 超時：
設定超時標誌位flag=false，當超時後將flag=true;
非同步載入JS檔案並執行回撥函式：
function loadJS(src, callback){
var script = document.createElement('script');
var head = document.getElementsByTagName('head')[0];
var loaded;
script.src = src;
if(typeof callback === 'function'){
script.onload = script.onreadystatechange = function(){
if(!loaded && (!script.readyState || /loaded|complete/.test(script.readyState))){
script.onload = script.onreadystatechange = null;
loaded = true;
callback();
}
}
}
head.appendChild(script);
}
加setTimeout 超時後，當超時後將標誌位設為true，在onload 裡面判斷flag為true的時候直接return 掉，
後面的回撥函式就不會執行了，JOSNP也就失去了作用！
//獲取元素的絕對位置
function getPosition(node) {
var width = node.offsetWidth; //元素寬度
var height = node.offsetHeight; //元素高度
var left = node.offsetLeft; //獲取元素相對於其根元素的left值var left
var top = node.offsetTop; //獲取元素相對於其根元素的top值var top
current = node.offsetParent; // 取得元素的offsetParent
// 一直迴圈直到根元素
while(current != null) {
left += current.offsetLeft;
top += current.offsetTop;
current = current.offsetParent;
}
return {
"width": width,
"height": height,
"left": left,
"top": top
};
}
複製程式碼// 動畫結束時事件
o.addEventListener("webkitAnimationEnd", function() {
console.log("動畫結束");
})
-webkit-animation動畫有三個事件：
開始事件: webkitAnimationStart
結束事件: webkitAnimationEnd
重複運動事件: webkitAnimationIteration// 動畫開始時事件
o.addEventListener("webkitAnimationStart", function() {
console.log("動畫開始");
})
// 動畫重複運動時事件
o.addEventListener("webkitAnimationIteration", function() {
console.log("動畫重複運動");
})
// 動畫結束時事件
o.addEventListener("webkitAnimationEnd", function() {
console.log("動畫結束");
})
首先我們需要在高度過渡動畫完成後執行數字跳動動畫，這裡我們需要監聽'transitionend'事件，對於這個事件需要特別注意的點：
每個過渡屬性完成後多會觸發一次transitionend；
transitionend事件支援冒泡，如果子元素也有過渡效果的話，一定要阻止冒泡。 // watch :
active (newValue) {
if (newValue) {
this.$refs.zfbitem.addEventListener('transitionend', this.transitionAction, false);
}
}
// methods:
transitionAction (e) {
//不再需要監聽時，一定要移除監聽
this.$refs.zfbitem.removeEventListener('transitionend', this.transitionAction, false);
this.numberBounce();
}
複製程式碼一、節點
1.1 節點屬性
Node.nodeName //返回節點名稱，只讀
Node.nodeType //返回節點型別的常數值，只讀
Node.nodeValue //返回Text或Comment節點的文字值，只讀
Node.textContent //返回當前節點和它的所有後代節點的文字內容，可讀寫
Node.baseURI //返回當前網頁的絕對路徑
Node.ownerDocument //返回當前節點所在的頂層文件物件，即document
Node.nextSibling //返回緊跟在當前節點後面的第一個兄弟節點
Node.previousSibling //返回當前節點前面的、距離最近的一個兄弟節點
Node.parentNode //返回當前節點的父節點
Node.parentElement //返回當前節點的父Element節點
Node.childNodes //返回當前節點的所有子節點
Node.firstChild //返回當前節點的第一個子節點
Node.lastChild //返回當前節點的最後一個子節點
//parentNode介面
Node.children //返回指定節點的所有Element子節點
Node.firstElementChild //返回當前節點的第一個Element子節點
Node.lastElementChild //返回當前節點的最後一個Element子節點
Node.childElementCount //返回當前節點所有Element子節點的數目。
1.2 操作
Node.appendChild(node) //向節點新增最後一個子節點
Node.hasChildNodes() //返回布林值，表示當前節點是否有子節點
Node.cloneNode(true); // 預設為false(克隆節點), true(克隆節點及其屬性，以及後代)
Node.insertBefore(newNode,oldNode) // 在指定子節點之前插入新的子節點
Node.removeChild(node) //刪除節點，在要刪除節點的父節點上操作
Node.replaceChild(newChild,oldChild) //替換節點
Node.contains(node) //返回一個布林值，表示引數節點是否為當前節點的後代節點。
Node.compareDocumentPosition(node) //返回一個7個位元位的二進位制值，表示引數節點和當前節點的關係
Node.isEqualNode(noe) //返回布林值，用於檢查兩個節點是否相等。所謂相等的節點，指的是兩個節點的型別相同、屬性相同、子節點相同。
Node.normalize() //用於清理當前節點內部的所有Text節點。它會去除空的文字節點，並且將毗鄰的文字節點合併成一個。
//ChildNode介面
Node.remove() //用於刪除當前節點
Node.before() //
Node.after()
Node.replaceWith()
1.3 Document節點
1.3.1 Document節點的屬性
document.doctype //
document.documentElement //返回當前文件的根節點
document.defaultView //返回document物件所在的window物件
document.body //返回當前文件的<body>節點
document.head //返回當前文件的<head>節點
document.activeElement //返回當前文件中獲得焦點的那個元素。
//節點集合屬性
document.links //返回當前文件的所有a元素
document.forms //返回頁面中所有表單元素
document.images //返回頁面中所有圖片元素
document.embeds //返回網頁中所有嵌入物件
document.scripts //返回當前文件的所有指令碼
document.styleSheets //返回當前網頁的所有樣式表
//文件資訊屬性
document.documentURI //表示當前文件的網址
document.URL //返回當前文件的網址
document.domain //返回當前文件的域名
document.lastModified //返回當前文件最後修改的時間戳
document.location //返回location物件，提供當前文件的URL資訊
document.referrer //返回當前文件的訪問來源
document.title //返回當前文件的標題
document.characterSet屬性返回渲染當前文件的字符集，比如UTF-8、ISO-8859-1。
document.readyState //返回當前文件的狀態
document.designMode //控制當前文件是否可編輯，可讀寫
document.compatMode //返回瀏覽器處理文件的模式
document.cookie //用來操作Cookie
1.3.2 Document節點的方法
（1）讀寫方法
document.open() //用於新建並開啟一個文件
document.close() //不安比open方法所新建的文件
document.write() //用於向當前文件寫入內容
document.writeIn() //用於向當前文件寫入內容，尾部新增換行符。
（2）查詢節點
document.querySelector(selectors) //接受一個CSS選擇器作為引數，返回第一個匹配該選擇器的元素節點。
document.querySelectorAll(selectors) //接受一個CSS選擇器作為引數，返回所有匹配該選擇器的元素節點。
document.getElementsByTagName(tagName) //返回所有指定HTML標籤的元素
document.getElementsByClassName(className) //返回包括了所有class名字元合指定條件的元素
document.getElementsByName(name) //用於選擇擁有name屬性的HTML元素（比如<form>、<radio>、<img>、<frame>、<embed>和<object>等）
document.getElementById(id) //返回匹配指定id屬性的元素節點。
document.elementFromPoint(x,y) //返回位於頁面指定位置最上層的Element子節點。
（3）生成節點
document.createElement(tagName) //用來生成HTML元素節點。
document.createTextNode(text) //用來生成文字節點
document.createAttribute(name) //生成一個新的屬性物件節點，並返回它。
document.createDocumentFragment() //生成一個DocumentFragment物件
（4）事件方法
document.createEvent(type) //生成一個事件物件，該物件能被element.dispatchEvent()方法使用
document.addEventListener(type,listener,capture) //註冊事件
document.removeEventListener(type,listener,capture) //登出事件
document.dispatchEvent(event) //觸發事件
（5）其他
document.hasFocus() //返回一個布林值，表示當前文件之中是否有元素被啟用或獲得焦點。
document.adoptNode(externalNode) //將某個節點，從其原來所在的文件移除，插入當前文件，並返回插入後的新節點。
document.importNode(externalNode, deep) //從外部文件拷貝指定節點，插入當前文件。
1.4 Element節點
1.4.1 Element節點的屬性
（1）特性屬性
Element.attributes //返回當前元素節點的所有屬性節點
Element.id //返回指定元素的id屬性，可讀寫
Element.tagName //返回指定元素的大寫標籤名
Element.innerHTML //返回該元素包含的HTML程式碼，可讀寫
Element.outerHTML //返回指定元素節點的所有HTML程式碼，包括它自身和包含的的所有子元素，可讀寫
Element.className //返回當前元素的class屬性，可讀寫
Element.classList //返回當前元素節點的所有class集合
Element.dataset //返回元素節點中所有的data-*屬性。
（2）尺寸屬性
Element.clientHeight //返回元素節點可見部分的高度
Element.clientWidth //返回元素節點可見部分的寬度
Element.clientLeft //返回元素節點左邊框的寬度
Element.clientTop //返回元素節點頂部邊框的寬度
Element.scrollHeight //返回元素節點的總高度
Element.scrollWidth //返回元素節點的總寬度
Element.scrollLeft //返回元素節點的水平滾動條向右滾動的畫素數值,通過設定這個屬性可以改變元素的滾動位置
Element.scrollTop //返回元素節點的垂直滾動向下滾動的畫素數值
Element.offsetHeight //返回元素的垂直高度(包含border,padding)
Element.offsetWidth //返回元素的水平寬度(包含border,padding)
Element.offsetLeft //返回當前元素左上角相對於Element.offsetParent節點的垂直偏移
Element.offsetTop //返回水平位移
Element.style //返回元素節點的行內樣式
（3）節點相關屬性
Element.children //包括當前元素節點的所有子元素
Element.childElementCount //返回當前元素節點包含的子HTML元素節點的個數
Element.firstElementChild //返回當前節點的第一個Element子節點
Element.lastElementChild //返回當前節點的最後一個Element子節點
Element.nextElementSibling //返回當前元素節點的下一個兄弟HTML元素節點
Element.previousElementSibling //返回當前元素節點的前一個兄弟HTML節點
Element.offsetParent //返回當前元素節點的最靠近的、並且CSS的position屬性不等於static的父元素。
1.4.2 Element節點的方法
（1）位置方法
getBoundingClientRect()
// getBoundingClientRect返回一個物件，包含top,left,right,bottom,width,height // width、height 元素自身寬高
// top 元素上外邊界距視窗最上面的距離
// right 元素右外邊界距視窗最上面的距離
// bottom 元素下外邊界距視窗最上面的距離
// left 元素左外邊界距視窗最上面的距離
// width 元素自身寬(包含border,padding)
// height 元素自身高(包含border,padding)
getClientRects() //返回當前元素在頁面上形參的所有矩形。
// 元素在頁面上的偏移量
var rect = el.getBoundingClientRect()
return {
top: rect.top + document.body.scrollTop,
left: rect.left + document.body.scrollLeft
}
（2）屬性方法
Element.getAttribute()：讀取指定屬性
Element.setAttribute()：設定指定屬性
Element.hasAttribute()：返回一個布林值，表示當前元素節點是否有指定的屬性
Element.removeAttribute()：移除指定屬性
（3）查詢方法
Element.querySelector()
Element.querySelectorAll()
Element.getElementsByTagName()
Element.getElementsByClassName()
（4）事件方法
Element.addEventListener()：新增事件的回撥函式
Element.removeEventListener()：移除事件監聽函式
Element.dispatchEvent()：觸發事件
//ie8
Element.attachEvent(oneventName,listener)
Element.detachEvent(oneventName,listener)
// event物件
var event = window.event||event;
// 事件的目標節點
var target = event.target || event.srcElement;
// 事件代理
ul.addEventListener('click', function(event) {
if (event.target.tagName.toLowerCase() === 'li') {
console.log(event.target.innerHTML)
}
});
（5）其他
Element.scrollIntoView() //滾動當前元素，進入瀏覽器的可見區域
//解析HTML字串，然後將生成的節點插入DOM樹的指定位置。
Element.insertAdjacentHTML(where, htmlString);
Element.insertAdjacentHTML('beforeBegin', htmlString); // 在該元素前插入
Element.insertAdjacentHTML('afterBegin', htmlString); // 在該元素第一個子元素前插入
Element.insertAdjacentHTML('beforeEnd', htmlString); // 在該元素最後一個子元素後面插入
Element.insertAdjacentHTML('afterEnd', htmlString); // 在該元素後插入
Element.remove() //用於將當前元素節點從DOM中移除
Element.focus() //用於將當前頁面的焦點，轉移到指定元素上
二、CSS操作
（1）類名操作
//ie8以下
Element.className //獲取元素節點的類名
Element.className += ' ' + newClassName //新增一個類名
//判斷是否有某個類名
function hasClass(element,className){
return new RegExp(className,'gi').test(element.className);
}
//移除class
function removeClass(element,className){
element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'),'');
}
//ie10
element.classList.add(className) //新增
element.classList.remove(className) //刪除
element.classList.contains(className) //是否包含
element.classList.toggle(className) //toggle class
（2）style操作
element.setAttribute('style','')
element.style.backgroundColor = 'red'
element.style.cssText //用來讀寫或刪除整個style屬性
element.style.setProperty(propertyName,value) //設定css屬性
element.style.getPropertyValue(property) //獲取css屬性
element.style.removeProperty(property) //刪除css屬性
操作非內聯樣式
//ie8
element.currentStyle[attrName]
//ie9+
window.getComputedStyle(el,null)[attrName]
window.getComputedStyle(el,null).getPropertyValue(attrName)
//偽類
window.getComputedStyle(el,':after')[attrName]
三、物件
3.1 Object物件
（1）生成例項物件
var o = new Object()
（2）屬性
Object.prototype //返回原型物件
（3）方法
Object.keys(o) //遍歷物件的可列舉屬性
Object.getOwnPropertyName(o) //遍歷物件不可列舉的屬性
物件例項的方法
valueOf()：返回當前物件對應的值。
toString()：返回當前物件對應的字串形式。
toLocaleString()：返回當前物件對應的本地字串形式。
hasOwnProperty()：判斷某個屬性是否為當前物件自身的屬性，還是繼承自原型物件的屬性。
isPrototypeOf()：判斷當前物件是否為另一個物件的原型。
propertyIsEnumerable()：判斷某個屬性是否可列舉。
3.2 Array物件
（1）生成例項物件
var a = new Array()
（2）屬性
a.length //長度
（3）Array.isArray()
Array.isArray(a) //用來判斷一個值是否為陣列
（4）Array例項的方法
[1, [2, [3, 4]]].toString() // "1,2,3,4"
a.valueof() //返回陣列本身
a.toString() //返回陣列的字串形式
a.push(value,vlaue....) //用於在陣列的末端新增一個或多個元素，並返回新增新元素後的陣列長度。
pop() //用於刪除陣列的最後一個元素，並返回該元素
join() //以引數作為分隔符，將所有陣列成員組成一個字串返回。如果不提供引數，預設用逗號分隔。
concat() //用於多個陣列的合併。它將新陣列的成員，新增到原陣列的尾部，然後返回一個新陣列，原陣列不變。
shift() //用於刪除陣列的第一個元素，並返回該元素。
unshift(value) //用於在陣列的第一個位置新增元素，並返回新增新元素後的陣列長度。
reverse() //用於顛倒陣列中元素的順序，返回改變後的陣列
slice(start_index, upto_index); //用於提取原陣列的一部分，返回一個新陣列，原陣列不變。第一個引數為起始位置（從0開始），第二個引數為終止位置（但該位置的元素本身不包括在內）。如果省略第二個引數，則一直返回到原陣列的最後一個成員。負數表示倒數第幾個。
splice(index, count_to_remove, addElement1, addElement2, ...); //用於刪除原陣列的一部分成員，並可以在被刪除的位置新增入新的陣列成員，返回值是被刪除的元素。第一個引數是刪除的起始位置，第二個引數是被刪除的元素個數。如果後面還有更多的引數，則表示這些就是要被插入陣列的新元素。
sort() //對陣列成員進行排序，預設是按照字典順序排序。排序後，原陣列將被改變。如果想讓sort方法按照自定義方式排序，可以傳入一個函式作為引數，表示按照自定義方法進行排序。該函式本身又接受兩個引數，表示進行比較的兩個元素。如果返回值大於0，表示第一個元素排在第二個元素後面；其他情況下，都是第一個元素排在第二個元素前面。
map() //對陣列的所有成員依次呼叫一個函式，根據函式結果返回一個新陣列。
map(elem,index,arr) //map方法接受一個函式作為引數。該函式呼叫時，map方法會將其傳入三個引數，分別是當前成員、當前位置和陣列本身。
forEach() //遍歷陣列的所有成員，執行某種操作,引數是一個函式。它接受三個引數，分別是當前位置的值、當前位置的編號和整個陣列。
filter() //引數是一個函式，所有陣列成員依次執行該函式，返回結果為true的成員組成一個新陣列返回。該方法不會改變原陣列。
some() //用來判斷陣列成員是否符合某種條件。接受一個函式作為引數，所有陣列成員依次執行該函式，返回一個布林值。該函式接受三個引數，依次是當前位置的成員、當前位置的序號和整個陣列。只要有一個陣列成員的返回值是true，則整個some方法的返回值就是true，否則false。
every() //用來判斷陣列成員是否符合某種條件。接受一個函式作為引數，所有陣列成員依次執行該函式，返回一個布林值。該函式接受三個引數，依次是當前位置的成員、當前位置的序號和整個陣列。所有陣列成員的返回值都是true，才返回true，否則false。
reduce() //依次處理陣列的每個成員，最終累計為一個值。從左到右處理（從第一個成員到最後一個成員）
reduceRight() //依次處理陣列的每個成員，最終累計為一個值。從右到左（從最後一個成員到第一個成員）
indexOf(s) //返回給定元素在陣列中第一次出現的位置，如果沒有出現則返回-1。可以接受第二個引數，表示搜尋的開始位置
lastIndexOf() //返回給定元素在陣列中最後一次出現的位置，如果沒有出現則返回-1。
3.3 Number物件
（1）生成物件
var n = new Number()
（2）Number物件的屬性
Number.POSITIVE_INFINITY：正的無限，指向Infinity。
Number.NEGATIVE_INFINITY：負的無限，指向-Infinity。
Number.NaN：表示非數值，指向NaN。
Number.MAX_VALUE：表示最大的正數，相應的，最小的負數為-Number.MAX_VALUE。
Number.MIN_VALUE：表示最小的正數（即最接近0的正數，在64位浮點數體系中為5e-324），相應的，最接近0的負數為-Number.MIN_VALUE。
Number.MAX_SAFE_INTEGER：表示能夠精確表示的最大整數，即9007199254740991。
Number.MIN_SAFE_INTEGER：表示能夠精確表示的最小整數，即-9007199254740991。
（4）Number物件例項的方法
toString() //用來將一個數值轉為字串形式.可以接受一個引數，表示輸出的進位制。如果省略這個引數，預設將數值先轉為十進位制，再輸出字串；否則，就根據引數指定的進位制，將一個數字轉化成某個進位制的字串。
toFixed() //用於將一個數轉為指定位數的小數，返回這個小數對應的字串。
toExponential() //用於將一個數轉為科學計數法形式。可傳入一個引數，參數列示小數點後有效數字的位數，範圍為0到20，超出這個範圍，會丟擲一個RangeError。
toPrecision() //用於將一個數轉為指定位數的有效數字。
3.4 String 物件
（1）生成例項物件
var s = new String()
（2）String物件的屬性
s.length //返回字串的長度
（3）方法
s.chatAt(index) //返回指定位置的字元 //"123456"[0] == "1"
s.fromCharCode() //該方法的引數是一系列Unicode碼點，返回對應的字串。
s.charCodeAt(index) //返回給定位置字元的Unicode碼點（十進位制表示）
s.concat(s2) //用於連線兩個字串
s.slice(start,end) //用於從原字串取出子字串並返回，不改變原字串。第一個引數是子字串的開始位置，第二個引數是子字串的結束位置（不含該位置）。如果引數是負值，表示從結尾開始倒數計算的位置，即該負值加上字串長度。
s.substring(start,end) //用於從原字串取出子字串並返回，不改變原字串.第一個參數列示子字串的開始位置，第二個位置表示結束位置。
s.substr(start,length) //用於從原字串取出子字串並返回，不改變原字串。第一個引數是子字串的開始位置，第二個引數是子字串的長度。如果第一個引數是負數，表示倒數計算的字元位置。如果第二個引數是負數，將被自動轉為0，因此會返回空字串。
s.indexOf(s) //返回給定元素在字串中第一次出現的位置，如果沒有出現則返回-1。可以接受第二個引數，表示搜尋的開始位置
s.lastIndexOf() //返回給定元素在字串中最後一次出現的位置，如果沒有出現則返回-1。
s.trim() //用於去除字串兩端的空格，返回一個新字串
s.toLowerCase() //用於將一個字串全部轉為小寫,返回一個新字串，不改變原字串。
s.toUpperCase() //全部轉為大寫
s.localeCompare(s2) //用於比較兩個字串。它返回一個整數，如果小於0，表示第一個字串小於第二個字串；如果等於0，表示兩者相等；如果大於0，表示第一個字串大於第二個字串。
s.match(regexp) //用於確定原字串是否匹配某個子字串，返回一個陣列，成員為匹配的第一個字串。如果沒有找到匹配，則返回null。
s.search() //返回值為匹配的第一個位置。如果沒有找到匹配，則返回-1。
s.replace(oldValue,newValue) //用於替換匹配的子字串，一般情況下只替換第一個匹配（除非使用帶有g修飾符的正規表示式）。
s.split() //按照給定規則分割字串，返回一個由分割出來的子字串組成的陣列。還可傳入第二個引數，決定了返回陣列的成員數。
3.5 Math物件
（1）屬性
Math.E：常數e。
Math.LN2：2的自然對數。
Math.LN10：10的自然對數。
Math.LOG2E：以2為底的e的對數。
Math.LOG10E：以10為底的e的對數。
Math.PI：常數Pi。
Math.SQRT1_2：0.5的平方根。
Math.SQRT2：2的平方根。
（2）數學方法
Math.abs()：返回引數的絕對值
Math.ceil()：向上取整，接受一個引數，返回大於該引數的最小整數。
Math.floor()：向下取整
Math.max(n,n1,...)：可接受多個引數，返回最大值
Math.min(n,n1,..)：可接受多個引數，返回最小值
Math.pow(n,e)：指數運算, 返回以第一個引數為底數、第二個引數為冪的指數值。
Math.sqrt()：返回引數值的平方根。如果引數是一個負值，則返回NaN。
Math.log()：返回以e為底的自然對數值。
Math.exp()：返回e的指數，也就是常數e的引數次方。
Math.round()：四捨五入
Math.random()：返回0到1之間的一個偽隨機數，可能等於0，但是一定小於1。
（3）三角函式方法
Math.sin()：返回引數的正弦
Math.cos()：返回引數的餘弦
Math.tan()：返回引數的正切
Math.asin()：返回引數的反正弦（弧度值）
Math.acos()：返回引數的反餘弦（弧度值）
Math.atan()：返回引數的反正切（弧度值）
3.6 JSON物件
（1）方法
JSON.stringify()
//用於將一個值轉為字串。該字串應該符合JSON格式，並且可以被JSON.parse方法還原。
//（JSON.stringify(obj, selectedProperties)）還可以接受一個陣列，作為第二個引數，指定需要轉成字串的屬性。
//還可以接受第三個引數，用於增加返回的JSON字串的可讀性。如果是數字，表示每個屬性前面新增的空格（最多不超過10個）；如果是字串（不超過10個字元），則該字串會新增在每行前面。
JSON.parse() //用於將JSON字串轉化成物件。
3.7 console物件
（1）方法
console.log(text,text2,...) //用於在console視窗輸出資訊。它可以接受多個引數，將它們的結果連線起來輸出。如果第一個引數是格式字串（使用了格式佔位符），console.log方法將依次用後面的引數替換佔位符，然後再進行輸出。
console.info() //在console視窗輸出資訊，同時，會在輸出資訊的前面，加上一個藍色圖示。
console.debug() //在console視窗輸出資訊，同時，會在輸出資訊的前面，加上一個藍色圖示。
console.warn() //輸出資訊時，在最前面加一個黃色三角，表示警告；
console.error() //輸出資訊時，在最前面加一個紅色的叉，表示出錯，同時會顯示錯誤發生的堆疊
console.table() //可以將複合型別的資料轉為表格顯示。
console.count() //用於計數，輸出它被呼叫了多少次。
console.dir() //用來對一個物件進行檢查（inspect），並以易於閱讀和列印的格式顯示。
console.dirxml() //用於以目錄樹的形式，顯示DOM節點。
console.assert() //接受兩個引數，第一個引數是表示式，第二個引數是字串。只有當第一個引數為false，才會輸出第二個引數，否則不會有任何結果。
//這兩個方法用於計時，可以算出一個操作所花費的準確時間。
console.time()
console.timeEnd()
//time方法表示計時開始，timeEnd方法表示計時結束。它們的引數是計時器的名稱。呼叫timeEnd方法之後，console視窗會顯示“計時器名稱: 所耗費的時間”。
console.profile() //用來新建一個效能測試器（profile），它的引數是效能測試器的名字。
console.profileEnd() //用來結束正在執行的效能測試器。
console.group()
console.groupend()
//上面這兩個方法用於將顯示的資訊分組。它只在輸出大量資訊時有用，分在一組的資訊，可以用滑鼠摺疊/展開。
console.groupCollapsed() //用於將顯示的資訊分組，該組的內容，在第一次顯示時是收起的（collapsed），而不是展開的。
console.trace() //顯示當前執行的程式碼在堆疊中的呼叫路徑。
console.clear() //用於清除當前控制檯的所有輸出，將游標回置到第一行。
正規表示式：
只允許輸入漢字：onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')"
只允許輸入數字：onkeyup="this.value=this.value.replace(/\D/g,'')"
[1, [2, [3, 4]]].toString() // "1,2,3,4"複製程式碼0、常用選擇器
$('#div1') //id為div1的節點，如<div id='div1'></div>
$('span') //所有的span結點，一個包裝集
$('p span') //p標籤下的所有span節點，後代節點
$('p>span') //p標籤下的所有span子節點，子代節點
$('.red') //使用樣式red的節點，如<span class="red"></span>
$('*') //所有節點
$("div,span,p.cls") //選取所有<div>，<span>和擁有class為cls的<p>標籤的一組元素
1、基本篩選器
$('span:first') //第一個節點
$('span:last') //最後一個節點
$("td:even") //索引為偶數的節點，從 0 開始
$("td:odd") //索引為奇數的節點，從 0 開始
$("td:eq(1)") //給定索引值的節點
$("td:gt(0)") //大於給定索引值的節點
$("td:lt(2)") //小於給定索引值的節點
$(":focus") //當前獲取焦點的節點
$(":animated") //正在執行動畫效果的節點
2、內容選擇器
$("div:contains('hello')") //包含hello文字的節點
$("td:empty") //不包含子節點或者文字的空節點
$("div:has(p)") //含有選擇器所匹配的節點
$("td:parent") //含有子節點或者文字的節點
3、表單選擇器
$("input:checked") //所有選中的節點
$("select option:selected") //select中所有選中的option節點
$(":input") //匹配所有 input, textarea, select 和 button 節點
$(":text") //所有的單行文字框
$(":password") //所有密碼框
$(":radio") //所有單選按鈕
$(":checkbox") //所有核取方塊
$(":submit") //所有提交按鈕
$(":reset") //所有重置按鈕
$(":button") //所有button按鈕
$(":file") //所有檔案域
4、篩選與查詢
$("p").eq(0) //當前操作中第N個jQuery物件,類似索引
$('li').first() //第一個節點
$('li').last() //最後一個節點
$(this).hasClass("node") //節點是否含有某個特定的類,返回布林值
$('li').has('ul') //包含特定後代的節點
$("div").children() //div中的每個子節點,第一層
$("div").find("span") //查詢div下的所有span節點
$("p").next() //緊鄰p節點後的一個同輩節點
$("p").nextAll() //p節點之後所有的同輩節點
$("#node").nextUntil("#node2") //id為"#node"節點之後到id為'#node2'之間所有的同輩節點,掐頭去尾
$("p").prev() //緊鄰p節點前的一個同輩節點
$("p").prevAll() //p節點之前所有的同輩節點
$("#node").prevUntil("#node2") //id為"#node"節點之前到id為'#node2'之間所有的同輩節點,掐頭去尾
$("p").parent() //每個p節點的父節點
$("p").parents() //每個p節點的所有祖先節點,body,html
$("#node").parentsUntil("#node2") //id為"#node"節點到id為'#node2'之間所有的父級節點,掐頭去尾
$("div").siblings() //所有的同輩節點,不包括自己
5、屬性操作
$("img").attr("src"); //返回文件中所有影像的src屬性值
$("img").attr("src","node.jpg"); //設定所有影像的src屬性
$("img").removeAttr("src"); //將文件中影像的src屬性刪除
$("input[type='checkbox']").prop("checked", true); //選中核取方塊
$("input[type='checkbox']").prop("checked", false); //不選中核取方塊
$("img").removeProp("src"); //刪除img的src屬性
6、樣式操作
$("p").addClass("selected"); //為p節點加上 'selected' 類
$("p").removeClass("selected"); //從p節點中刪除 'selected' 類
$("p").toggleClass("selected"); //如果存在就刪除,否則就新增HTML程式碼/文字/值
7、內容操作
$('p').html(); //返回p節點的html內容
$("p").html("Hello <b>hello</b>!"); //設定p節點的html內容
$('p').text(); //返回p節點的文字內容
$("p").text("hello"); //設定p節點的文字內容
$("input").val(); //獲取文字框中的值
$("input").val("hello"); //設定文字框中的內容
8、CSS操作
$("p").css("color"); //訪問檢視p節點的color屬性
$("p").css("color","red"); //設定p節點的color屬性為red
$("p").css({ "color": "red", "background": "yellow" }); //設定p節點的color為red，background屬性為yellow（設定多個屬性要用{}字典形式）
9、定位與偏移
$('p').offset() //節點在當前視口的相對偏移,物件 {top: 5, left: 9}
$('p').offset().top
$('p').offset().left
$("p").position() //節點相對父節點的偏移,對可見節點有效，Object {top: 5, left: 8}
$(window).scrollTop() //獲取滾輪滑的高度
$(window).scrollLeft() //獲取滾輪滑的寬度
$(window).scrollTop('25') //設定滾輪滑的高度為25
10、尺寸
$("p").height(); //獲取p節點的高度
$("p").width(); //獲取p節點的寬度
$("p:first").innerHeight() //獲取第一個匹配節點內部區域高度(包括補白、不包括邊框)
$("p:first").innerWidth() //獲取第一個匹配節點內部區域寬度(包括補白、不包括邊框)
$("p:first").outerHeight() //匹配節點外部高度(預設包括補白和邊框)
$("p:first").outerWidth() //匹配節點外部寬度(預設包括補白和邊框)
$("p:first").outerHeight(true) //為true時包括邊距
11、DOM內部插入
$("p").append("<b>hello</b>"); //每個p節點內後面追加內容
$("p").appendTo("div"); //p節點追加到div內後
$("p").prepend("<b>Hello</b>"); //每個p節點內前面追加內容
$("p").prependTo("div"); //p節點追加到div內前
12、DOM外部插入
$("p").after("<b>hello</b>"); //每個p節點同級之後插入內容
$("p").before("<b>hello</b>"); //在每個p節點同級之前插入內容
$("p").insertAfter("#node"); //所有p節點插入到id為node節點的後面
$("p").insertBefore("#node"); //所有p節點插入到id為node節點的前面
13、DOM替換
$("p").replaceWith("<b>Paragraph. </b>"); //將所有匹配的節點替換成指定的HTML或DOM節點
$("<b>Paragraph. </b>").replaceAll("p"); //用匹配的節點替換掉所有 selector匹配到的節點
14、DOM刪除
$("p").empty(); //刪除匹配的節點集合中所有的子節點，不包括本身
$("p").remove(); //刪除所有匹配的節點,包括本身
$("p").detach(); //刪除所有匹配的節點(和remove()不同的是:所有繫結的事件、附加的資料會保留下來)
15、DOM複製
$("p").clone() //克隆節點並選中克隆的副本
$("p").clone(true) //布林值指事件處理函式是否會被複制
16、DOM載入完成事件
$(document).ready(function(){
您的程式碼...
});
//縮寫
$(function($) {
您的程式碼...
});
17、繫結事件
//bind 為每個匹配節點繫結事件處理函式，繫結多個用{}。
$("p").bind("click", function(){
alert( $(this).text() );
});
$('#div1').bind({
"mouseover":function () {
$('#div1').parent().removeClass("hide");
},"mouseout":function () {
$('#div1').parent().addClass("hide");
}
});
$("p").one( "click", function(){}) //事件繫結後只會執行一次
$("p").unbind( "click" ) //反綁一個事件
// 與bind 不同的是當時間發生時才去臨時繫結。
$("p").delegate("click",function(){
您的程式碼
});
$("p").undelegate(); //p節點刪除由 delegate() 方法新增的所有事件
$("p").undelegate("click") //從p節點刪除由 delegate() 方法新增的所有click事件
$("p").click(); //單擊事件
$("p").dblclick(); //雙擊事件
$("input[type=text]").focus() //節點獲得焦點時,觸發 focus 事件
$("input[type=text]").blur() //節點失去焦點時,觸發 blur事件
$("button").mousedown()//當按下滑鼠時觸發事件
$("button").mouseup() //節點上放鬆滑鼠按鈕時觸發事件
$("p").mousemove() //當滑鼠指標在指定的節點中移動時觸發事件
$("p").mouseover() //當滑鼠指標位於節點上方時觸發事件
$("p").mouseout() //當滑鼠指標從節點上移開時觸發事件
$(window).keydown() //當鍵盤或按鈕被按下時觸發事件
$(window).keypress() //當鍵盤或按鈕被按下時觸發事件,每輸入一個字元都觸發一次
$("input").keyup() //當按鈕被鬆開時觸發事件
$(window).scroll() //當使用者滾動時觸發事件
$(window).resize() //當調整瀏覽器視窗的大小時觸發事件
$("input[type='text']").change() //當節點的值發生改變時觸發事件
$("input").select() //當input 節點中的文字被選擇時觸發事件
$("form").submit() //當提交表單時觸發事件
$(window).unload() //使用者離開頁面時
18、事件物件
$("p").click(function(event){
alert(event.type); //"click"
});
(evnet object)屬性方法：
event.pageX //事件發生時，滑鼠距離網頁左上角的水平距離
event.pageY //事件發生時，滑鼠距離網頁左上角的垂直距離
event.type //事件的型別
event.which //按下了哪一個鍵
event.data //在事件物件上繫結資料，然後傳入事件處理函式
event.target //事件針對的網頁節點
event.preventDefault() //阻止事件的預設行為(比如點選連結，會自動開啟新頁面)
event.stopPropagation() //停止事件向上層節點冒泡
19、動態事件繫結
$("p").on("click",'span',function(){
alert( $(this).text() );
});
//當p中增加span時仍然有效
20、動畫效果
$("p").show() //顯示隱藏的匹配節點
$("p").show("slow"); //參數列示速度,("slow","normal","fast"),也可為600毫秒
$("p").hide() //隱藏顯示的節點
$("p").toggle(); //切換 顯示/隱藏
$("p").slideDown("600"); //用600毫秒時間將段落滑下
$("p").slideUp("600"); //用600毫秒時間將段落滑上
$("p").slideToggle("600"); //用600毫秒時間將段落滑上，滑下淡入淡出
$("p").fadeIn("600"); //用600毫秒時間將段落淡入
$("p").fadeOut("600"); //用600毫秒時間將段落淡出
$("p").fadeToggle("600"); //用600毫秒時間將段落淡入,淡出
$("p").fadeTo("slow", 0.6); //用600毫秒時間將段落的透明度調整到0.6
21、工具方法
$("#form1").serialize() //序列表表格內容為字串。
$("select, :radio").serializeArray(); //序列化表單元素為陣列返回 JSON 資料結構資料
$.trim() //去除字串兩端的空格
$.each() //遍歷一個陣列或物件，for迴圈
$.inArray() //返回一個值在陣列中的索引位置，不存在返回-1
$.grep() //返回陣列中符合某種標準的節點
$.extend({a:1,b:2},{b:3,c:4},{c:5:d:6}) //將多個物件，合併到第一個物件{a:1,b:3,c:5,d:6}
$.makeArray() //將物件轉化為陣列
$.type() //判斷物件的類別（函式物件、日期物件、陣列物件、正則物件等等
$.isArray() //判斷某個引數是否為陣列
$.isEmptyObject() //判斷某個物件是否為空(不含有任何屬性)
$.isFunction() //判斷某個引數是否為函式
$.isPlainObject() //判斷某個引數是否為用"{}"或"new Object"建立的物件
$.support() //判斷瀏覽器是否支援某個特性
22、AJAX
//儲存資料到伺服器，成功時顯示資訊
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
//載入 feeds.html 檔案內容。
$("#feeds").load("feeds.html");
//請求 test.php 網頁，傳送2個引數，忽略返回值。
$.get("test.php", { name: "John", time: "2pm" } );
//從 Flickr JSONP API 載入 4 張最新的關於貓的圖片。
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format
=json&jsoncallback=?", function(data){
$.each(data.items, function(i,item){
$("<img/>").attr("src", item.media.m).appendTo("#images");
if ( i == 3 ) return false;
});
});
//載入並執行 test.js ，成功後顯示資訊
$.getScript("test.js", function(){
alert("Script loaded and executed.");
});
//向頁面 test.php 傳送資料，並輸出結果（HTML 或 XML，取決於所返回的內容）：
$.post("test.php", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});
//AJAX 請求完成時執行函式。
$("#msg").ajaxComplete(function(event,request, settings){
$(this).append("<li>請求完成.</li>");
});
//AJAX 請求失敗時顯示資訊。
$("#msg").ajaxError(function(event,request, settings){
$(this).append("<li>出錯頁面:" + settings.url + "</li>");
});
//AJAX 請求傳送前顯示資訊。
$("#msg").ajaxSend(function(evt, request, settings){
$(this).append("<li>開始請求: " + settings.url + "</li>");
});
//AJAX 請求開始時顯示資訊。
$("#loading").ajaxStart(function(){
$(this).show();
});
//AJAX 請求結束後隱藏資訊。
$("#loading").ajaxStop(function(){
$(this).hide();
});
//當 AJAX 請求成功後顯示訊息。
$("#msg").ajaxSuccess(function(evt, request, settings){
$(this).append("<li>請求成功!</li>");
});
//請求前過濾
$.ajaxPrefilter( function( options, originalOptions, jqXHR ) {
// Modify options, control originalOptions, store jqXHR, etc
});
//設定全域性 AJAX 預設選項，設定 AJAX 請求預設地址為 "/xmlhttp/"，禁止觸發全域性 AJAX 事件，用 POST 代替預設 GET 方法。其後的 AJAX 請求不再設定任何選項引數。
$.ajaxSetup({
url: "/xmlhttp/",
global: false,
type: "POST"
});
$.ajax({ data: myData });
JavaScript中巧用位運算
日常前端開發中我們很少用到位運算，容易讓人遺忘，讓我們一起回顧下一下js中的位運算。
位運算詳細說明檢視JavaScript|MDN
下面主要回顧一下一些常用的位運算的巧用。
將十進位制轉化為二進位制
var number = 3;
var result = number.toString(2);
var result2 = 14..toString(2); // "1110"
我們使用位運算來代替Math.floor()來向下取整
var data = 2.2352524535;
var result = data | 0; // 2
var re2 = ~~data; // 2
將顏色從RGA轉換為Hex格式
var color = {r: 186, g: 218, b: 85};
// RGB to HEX
var rgb2hex = function(r, g, b) {
return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).substr(1);
}
rgb2hex(color.r, color.g, color.b);//"#bada55"
區分兩個數的大小
// variables
var a = 9285;
var b = 3569;
// 取大
var max = a ^ ((a ^ b) & -(a < b));//9285;
// 取小
var min = b ^ ((a ^ b) & -(a < b);//3569
交換變數
var a = 10;
var b = 99;
a = (b^=a^=b)^a;
console.log(a) // 99
console.log(b) // 10
判斷正負
function isPos(n) {
return (n === (n >>> 0)) ? true : false;
}
isPos(-1); // false
isPos(1); // true
複製程式碼Document
每個在瀏覽器中載入的頁面都有一個document物件。通過document物件可以訪問頁面的內容（比如dom樹，和內部的元素）
document物件可以由以下幾種方法獲取
1. 通常情況下直接使用`document`或`window.document`取得`document`物件
2. 通過iframe的`contentDocument`屬性獲取
3. The responseXML of an XMLHttpRequest object
4. 通過`node`或`element`物件的`ownerDocument`屬性獲取
複製程式碼所有的document物件都是通過Document介面實現的
PropertiesDocument.body
返回當前文件的<body>或<frameset>元素，如果元素不存在則返回null
<body id="oldBodyElement"></body>複製程式碼例（在頁面載入完成後執行）：
alert(document.body.id); //'oldBodyElement'
// 建立一個新的body元素
var aNewBodyElement = document.createElement("body");
aNewBodyElement.id = "newBodyElement";
// 把建立好的body元素賦給document.body
document.body = aNewBodyElement;
alert(document.body.id); //"newBodyElement"複製程式碼給文件設定一個新的body需要先刪除已經存在的<body>元素
它是一個只讀屬性，返回文件的根節點元素（例如對於html文件來說，返回的是<html>元素）
例：
var rootElement = document.documentElement;
var firstTier = rootElement.childNodes;
// 遍歷根節點的直接子元素
for (var i = 0; i < firstTier.length; i++) {
// 對每一個直接子元素做些事情
// as firstTier[i]
}複製程式碼Notes：
* 這個屬性可以很方便的獲取文件的直接子元素
* html文件只包含一個子節點`<html>`，xml文件通常會包含多個子節點。
* 通常要使用`document.documentElement`而不是`document.firstChild`去獲取根節點元素
複製程式碼返回當前文件中form元素的集合（一個HTMLCollection物件）
例：
<body>
<form id="robby">
<input type="button" onclick="alert(document.forms[0].id);" value="robby's form" />
</form>
<form id="dave">
<input type="button" onclick="alert(document.forms[1].id);" value="dave's form" />
</form>
<form id="paul">
<input type="button" onclick="alert(document.forms[2].id);" value="paul's form" />
</form>
</body>複製程式碼var forms = document.forms;
alert(forms.length); //3
var form1 = forms[0]; //取得第一個form元素複製程式碼返回當前文件的<head>元素，如果文件中大於一個<head>元素，返回第一個元素。
Notes:
這個屬性是隻讀的，試圖給這個屬性賦值都會出錯。
複製程式碼返回當前文件image元素的集合
例子：
var ilist = document.images;
for(var i = 0; i < ilist.length; i++) {
if(ilist[i].src == "banner.gif") {
// found the banner
}
}複製程式碼Notes:
* document.images.length返回當前頁面的圖片數
* document.images它是html dom的一部分，只工作在html中
複製程式碼返回文件的script元素列表（是一個HTMLCollection物件）
例子：
var scripts = document.scripts;
if (scripts.length) {
alert("This page has scripts!");
}複製程式碼獲取或設定文件的標題
例子：
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<script>
alert(document.title); // displays "Hello World!"
document.title = "Goodbye World!";
alert(document.title); // displays "Goodbye World!"
</script>
</body>
</html>複製程式碼返回文件中的錨點列表
例子：
<h1>Title</h1>
<h2><a name="contents">Contents</a></h2>
<h2><a name="plants">Plants</a></h2>
<h2><a name="veggies">Veggies</a></h2>複製程式碼// document.anchors返回一個陣列包含3個值，[<a name="contents">Contents</a>, <a name="plants">Plants</a>, <a name="veggies">Veggies</a>]
alert(document.anchors.length); //3複製程式碼Notes:
返回的錨點集合中只包含帶有name屬性的<a>，並不包含使用id屬性建立的錨點（<a>標籤的name屬性在html5已經不支援，html5推薦使用id屬性來設定錨點）
複製程式碼links屬性返回文件中帶href屬性的<area>元素和<a>元素的集合
<a href="http://baidu.com">baidu</a>
<a href="http://taobao.com">taobao</a>
<area shape="" coords="" href="" alt=""/>複製程式碼alert(document.links.length); //3複製程式碼Document.location是一個只讀屬性，返回一個Location物件，它包含了當前文件URL的資訊以及提供了一些方法來改變URL地址或者是載入另一個URL
返回當前文件的url，但不能設定url
document.location = 'http://www.mozilla.org'; //Equivalent to
document.location.href = 'http://www.mozilla.org';複製程式碼返回連結到當前文件的url（之前link過來的路徑）
獲取或設定文件的域名
返回當前文件焦點所在的元素
Example
<input type="text">複製程式碼var input = document.querySelector('input');
input.focus();
console.log(document.activeElement === input); //true複製程式碼注：當文件載入完成後，document.activeElement 返回document.body，在文件載入期間document.activeElement是null.
當文件正在載入時返回"loading"，解析完成但仍然載入資源返回"interactive"，所有的資源全部載入完成返回"complete"。
document.onreadystatechange = function () {
if (document.readyState === 'complete') {
console.log('complete');
}
if (document.readyState === 'interactive') {
console.log('interactive');
}
};
// output
// interactive
// complete複製程式碼readystatechange事件當readyState屬性改變時觸發。
設定或讀取當前文件的cookie
讀取所有cookie:
allCookies = document.cookie;讀取後的cookie是一個鍵值對的字串設定新的cookie:
document.cookie = newCookie;
返回文件對應的window物件
MethodsDocument.getElementById()
通過元素id返回元素的引用，如果在文件中找不到id，返回null(id是大小寫敏感的)
Document.getElementsByTagName()
根據標籤名返回元素的集合（一個HTMLCollection物件）
根據節點的屬性name值返回元素的集合（一個NodeList物件）
Example
<div id="div1" name="test"></div>
<div id="div2" name="test"></div>
<div id="div3" name="test"></div>複製程式碼// 返回一個HTMLCollection物件
var divs = document.getElementsByTagName('div');
console.log(divs);
// 返回一個NodeList物件
var names = document.getElementsByName('test');
console.log(names);
// divs[0]和names[0]都返回了第一個div元素的引用
console.log(divs[0] === names[0]);複製程式碼Document.getElementsByClassName()
根據類名返回元素的集合（一個類陣列的物件HTMLCollection），當作用在document上，將搜尋整個文件的。也可以通過element.getElementsByClassName()作用在指定的節點元素上查詢。
var elements = document.getElementsByClassName(names); // or:
var elements = rootElement.getElementsByClassName(names);複製程式碼- elements是一個動態元素的集合。
- names要查詢的類名的字串，如果有多個類名時，需要用空格分開。
- getElementsByClassName可以作用在任意元素上，不僅僅是document物件
Example1
// Get all elements that have a class of 'test'
document.getElementsByClassName('test');
// Get all elements that have both the 'red' and 'test' classes
document.getElementsByClassName('red test');
// Get all elements that have a class of 'test', inside of an element that has the ID of 'main'
document.getElementById('main').getElementsByClassName('test');複製程式碼Example2
<ul>
<li class="test"></li>
<li class="test"></li>
<li class="test"></li>
</ul>複製程式碼var lis = document.getElementsByClassName('test');
console.log(lis.length); //3
console.log(lis instanceof HTMLCollection); //true複製程式碼通過匹配css選擇器，返回第一個匹配的元素。
var element = document.querySelector(selectors);複製程式碼- element 是返回的一個元素物件
- selectors 是一組匹配的選擇器
Example
<ul>
<li class="test" id="l1"></li>
<li class="test" id="l2"></li>
<li class="test" id="l3"></li>
<li class="test" id="l4"></li>
<li class="test" id="l5"></li>
</ul>複製程式碼var ul = document.querySelector('.test'); // equal to "document.querySelector('#l1')"
console.log(ul); //<li class="test" id="l1"></li>複製程式碼通過匹配css選擇器返回NodeList物件
Example1
<ul>
<li class="test"></li>
<li class="test"></li>
<li class="test"></li>
<li class="test"></li>
<li class="test"></li>
</ul>複製程式碼var uls = document.querySelectorAll('.test');
console.log(uls.length); //5複製程式碼Example2 返回div元素帶有calss為'note'或'alert'元素的集合
var matches = document.querySelectorAll("div.note, div.alert");複製程式碼建立一個html元素
var element = document.createElement(tagName);複製程式碼- element 建立後的元素物件
- tagName 要建立元素的標籤名
建立一個文字節點
var text = document.createTextNode(data);複製程式碼- text 建立後的文字節點
- data 文字字串
建立一個屬性節點
attribute = document.createAttribute(name)複製程式碼- attribute 建立的屬性節點.
- name 屬性名.
Example
初始html為:
<div>
<span id="childSpan">foo bar</span>
</div>複製程式碼var sp1 = document.createElement('span');
sp1.setAttribute('id', 'newSpan');
// 建立屬性節點a，屬性名為myattr
var a = document.createAttribute('myattr');
// 設定屬性值為my_value
a.value = 'my_value';
// 通過setAttributeNode設定節點屬性
sp1.setAttributeNode(a);
var sp1_content = document.createTextNode('new replacement span element.');
sp1.appendChild(sp1_content);
var sp2 = document.getElementById('childSpan');
var parentDiv = sp2.parentNode;
parentDiv.appendChild(sp1);複製程式碼現在html為:
<div>
<span id="childSpan">foo bar</span>
<span id="newSpan" myattr="my_value">new replacement span element.</span>
</div>複製程式碼指示文件或文件中的任何元素是否處於焦點狀態。這個方法用來檢查在文件中是否有焦點元素
Example
<p>Click anywhere in the document (the right frame) to get focus. If you click outside the document, it will lose focus.</p>
<p id="demo"></p>
複製程式碼setInterval(myFunction, 1);
function myFunction() {
var x = document.getElementById("demo");
if (document.hasFocus()) {
x.innerHTML = "The document has focus.";
} else {
x.innerHTML = "The document DOES NOT have focus.";
}
}複製程式碼Document.createDocumentFragment()
建立一個空的文件片段
多次使用節點方法(如：appendChild)繪製頁面,每次都要重新整理頁面一次。效率也就大打折扣了，而使用document.createDocumentFragment()建立一個文件碎片，把所有的新結點附加在其上，然後把文件碎片的內容一次性新增到document中，這也就只需要一次頁面重新整理就可
var ul = document.getElementsByTagName('ul')[0];
var docfrag = document.createDocumentFragment();
var browserList = ["Internet Explorer", "Mozilla Firefox", "Safari", "Chrome", "Opera"];
browserList.forEach(function (item) {
var li = document.createElement('li');
li.textContent = item;
docfrag.appendChild(li);
});
ul.appendChild(docfrag);複製程式碼Js 陣列——filter()、map()、some()、every()、forEach()、lastIndexOf()、indexOf()
filter():
語法：
var filteredArray = array.filter(callback[, thisObject]);
引數說明：
callback： 要對每個陣列元素執行的回撥函式。
thisObject ： 在執行回撥函式時定義的this物件。
//過濾掉小於 10 的陣列元素：
//程式碼：
function isBigEnough(element, index, array) {
return (element >= 10);
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// 12, 130, 44
//結果：[12, 5, 8, 130, 44].filter(isBigEnough) ： 12, 130, 44 複製程式碼功能說明：
對陣列中的每個元素都執行一次指定的函式（callback），並且建立一個新的陣列，該陣列元素是所有回撥函式執行時返回值為 true 的原陣列元素。它只對陣列中的非空元素執行指定的函式，沒有賦值或者已經刪除的元素將被忽略，同時，新建立的陣列也不會包含這些元素。
回撥函式可以有三個引數：當前元素，當前元素的索引和當前的陣列物件。
如引數 thisObject 被傳遞進來，它將被當做回撥函式（callback）內部的 this 物件，如果沒有傳遞或者為null，那麼將會使用全域性物件。
filter 不會改變原有陣列，記住：只有在回撥函式執行前傳入的陣列元素才有效，在回撥函式開始執行後才新增的元素將被忽略，而在回撥函式開始執行到最後一個元素這一期間，陣列元素被刪除或者被更改的，將以回撥函式訪問到該元素的時間為準，被刪除的元素將被忽略。
map():
//將所有的陣列元素轉換為大寫：
var strings = ["hello", "Array", "WORLD"];
function makeUpperCase(v)
{
return v.toUpperCase();
}
var uppers = strings.map(makeUpperCase);
// uppers is now ["HELLO", "ARRAY", "WORLD"]
// strings is unchanged
//結果：["hello", "Array", "WORLD"].map(makeUpperCase) ： HELLO, ARRAY, WORLD 複製程式碼some():
對陣列中的每個元素都執行一次指定的函式（callback），直到此函式返回 true，如果發現這個元素，some 將返回 true，如果回撥函式對每個元素執行後都返回 false ，some 將返回 false。它只對陣列中的非空元素執行指定的函式，沒有賦值或者已經刪除的元素將被忽略。
//檢查是否有陣列元素大於等於10：
function isBigEnough(element, index, array) {
return (element >= 10);
}
var passed = [2, 5, 8, 1, 4].some(isBigEnough);
// passed is false
passed = [12, 5, 8, 1, 4].some(isBigEnough);
// passed is true
//結果：
//[2, 5, 8, 1, 4].some(isBigEnough) ： false
//[12, 5, 8, 1, 4].some(isBigEnough) ： true 複製程式碼every():
對陣列中的每個元素都執行一次指定的函式（callback），直到此函式返回 false，如果發現這個元素，every 將返回 false，如果回撥函式對每個元素執行後都返回 true ，every 將返回 true。它只對陣列中的非空元素執行指定的函式，沒有賦值或者已經刪除的元素將被忽略
//測試是否所有陣列元素都大於等於10：
function isBigEnough(element, index, array) {
return (element >= 10);
}
var passed = [12, 5, 8, 130, 44].every(isBigEnough);
// passed is false
passed = [12, 54, 18, 130, 44].every(isBigEnough);
// passed is true
//結果：
//[12, 5, 8, 130, 44].every(isBigEnough) 返回 ： false
//[12, 54, 18, 130, 44].every(isBigEnough) 返回 ： true 複製程式碼forEach():
//列印陣列內容：
function printElt(element, index, array) {
document.writeln("[" + index + "] is " + element + "<br />");
}
[2, 5, 9].forEach(printElt);
// Prints:
// [0] is 2
// [1] is 5
// [2] is 9
//結果：
//[0] is 2
//[1] is 5
//[2] is 9
複製程式碼lastIndexOf():
語法
var index = array.lastIndexOf(searchElement[, fromIndex]);複製程式碼引數說明
searchElement： 要搜尋的元素
fromIndex ： 開始搜尋的位置，預設為陣列的長度（length），在這樣的情況下，將搜尋所有的陣列元素。搜尋是反方向進行的。
功能說明
比較 searchElement 和陣列的每個元素是否絕對一致（===），當有元素符合條件時，返回當前元素的索引。如果沒有發現，就直接返回 -1 。
//查詢符合條件的元素：
var array = [2, 5, 9, 2];
var index = array.lastIndexOf(2);
// index is 3
index = array.lastIndexOf(7);
// index is -1
index = array.lastIndexOf(2, 3);
// index is 3
index = array.lastIndexOf(2, 2);
// index is 0
index = array.lastIndexOf(2, -2);
// index is 0
index = array.lastIndexOf(2, -1);
// index is 3
//結果：
//[2, 5, 9, 2].lastIndexOf(2) ： 3
//[2, 5, 9, 2].lastIndexOf(7) ： -1
//[2, 5, 9, 2].lastIndexOf(2, 3) ： 3
//[2, 5, 9, 2].lastIndexOf(2, 2) ： 0
//[2, 5, 9, 2].lastIndexOf(2, -2) ： 0
//[2, 5, 9, 2].lastIndexOf(2, -1) ： 3 複製程式碼indexOf():
功能與lastIndexOf()一樣，搜尋是正向進行的
//查詢符合條件的元素：
var array = [2, 5, 9];
var index = array.indexOf(2);
// index is 0
index = array.indexOf(7);
// index is -1
//結果：
//[2, 5, 9].indexOf(2) ： 0
//[2, 5, 9].indexOf(7) ： -1 複製程式碼JavaScript中提供了多種陣列方法，如下：
- 轉換方法—toLocaleString()方法、toString()方法、valueOf()方法
- 棧方法——push()方法、pop()方法
- 佇列方法——shift()方法、unshift()方法
- 重排序方法——reverse()方法、sort()方法
- 操作方法——concat()方法、slice()方法、splice()方法
- 位置方法——indexOf()方法、lastIndexOf()方法
- 迭代方法——every()方法、filter()方法、forEach()方法、map()方法、some()方法
- 歸併方法——reduce()方法、reduceRight()方法
轉換方法：
①：toString()方法返回由陣列中每個值的字串形式拼接並且以逗號相隔的字串
②：valueOf()方法返回的還是陣列
③：toLocaleString()方法也會返回一個陣列值以逗號相隔的字串，但與toString()方法不同的是在返回日期物件時格式不同。
具體看一下例子：
var colors=["red","blue","green"];
console.log(colors.toString()); //"red,blue,green"
console.log(colors.valueOf()); //red,blue,green
console.log(colors.toLocaleString()); //"red,blue,green"
//toLocaleString()方法與toString()方法在返回日期物件時格式不同
var today=new Date();
console.log(today.toString()); // Sun Mar 05 2017 12:57:11 GMT+0800 (中國標準時間)
console.log(today.toLocaleString()); // 2017/3/5 下午12:57:11複製程式碼棧方法：
①：push()方法可以接受任意數量的引數，逐個新增到陣列末尾，返回修改後陣列的長度
②：pop()方法從陣列末尾移除最後一項，返回被移除的項
具體看下面例子：
var arr=new Array(); //使用建構函式建立陣列
var count=arr.push("red","blue"); //push()返回陣列長度
console.log("count="+count); //count=2
console.log(arr); //red,blue
count=arr.push("black"); //count=3
var item=arr.pop();
console.log("item="+item);//pop返回被移除的項--item=black複製程式碼佇列方法：
①：shift()方法移除陣列的第一次項並返回該項
②：unshift()方法在陣列前端新增任意項，並返回新陣列的長度
具體看一下例子：
var colors=new Array(); //建立陣列
var count=colors.unshift("red","green"); //在陣列前端新增兩項
console.log(count); //2
count=colors.unshift("black"); //此時陣列各項順序為"black","red","green"
console.log(count) //3
item=colors.shift();
console.log(item); //black複製程式碼作者： 關於鄭州想的都是你
來源：慕課網
一、題目
用JS程式碼求出頁面上一個元素的最終的background-color，不考慮IE瀏覽器，不考慮元素float情況。
二、題目解析
1.考察底層JavaScript基礎
前端開發，日常最常接觸的就是頁面樣式的編寫。而擺脫jQuery等工具庫，用原生js獲取樣式，是每個前端程式猿進階階段必須掌握的技能。
2.考察面試者的思維縝密程度和開發經驗
如果認為單單求元素計算後的樣式，就有點too young了。頁面的樣式的複雜，永遠是最虐心的。就算前端有多牛逼，一聽到相容IE6，論誰都會心塞?。所以還要考慮特殊的情況：display，opacity，visibility的取值。
三、理論基礎
1. 內聯樣式
內聯樣式可以通過元素的style屬性獲取，如果style屬性有background-color值，則可以直接獲取出來 (暫不考慮!important) 。
2. 外聯的層疊樣式
DOM2樣式規範在document.defaultView中包含了一個getComputedStyle()方法。該方法返回一個只讀的CSSStyleDeclaration物件，其中包含特定元素的所有計算樣式。
四、解題
4.1 將所有工具方法封裝在WDS(wall dom script)名稱空間中
(function(WDS, undefined){
// 封裝程式碼...
})(window.WDS || (window.WDS = {}));複製程式碼程式碼封裝在名稱空間裡，不會造成無意間的程式碼汙染。
4.2 工具方法camelize
// 字串轉換為駝峰寫法
function camelize(str) {
return str.replace(/-(\w)/g, function (strMatch, p1){
return p1.toUpperCase();
});
}複製程式碼 該方法是為了方便後續getStyle()方法的編寫，而獨立出來的。
作用是將連字元類的css屬性值，轉換成駝峰寫法。
例如：將background-color轉換為backgroundColor
4.3 獲取特定元素的計算樣式
// 獲取元素計算後的樣式
function getStyle(elem, property){
if(!elem || !property){
return false;
}
var value = elem.style[camelize(property)], // 先獲取是否有內聯樣式
css; // 獲取的所有計算樣式
// 無內聯樣式，則獲取層疊樣式表計算後的樣式
if(!value){
if(document.defaultView && document.defaultView.getComputedStyle){
css = document.defaultView.getComputedStyle(elem, null);
value = css ? css.getPropertyValue(property) : null;
}
}
return value;
}複製程式碼 做到這一步，第一個考察點基本就滿足了。也能獲知面試者是否具備足夠紮實的js基礎。
另外，像安全保護性的判斷if(!elem || !property)和功能嗅探if(document.defaultView && document.defaultView.getComputedStyle)，都能很好地體現開發者的程式碼邏輯和開發經驗。
4.4 排除特殊情況
// 檢測獲取的背景色是否有效
function checkBgValue(elem){
var value = getStyle(elem, 'background-color'),
hasColor = value ? true : false; // 是否有顏色
// 排除特殊情況
if(value == "transparent" || value == "rgba(0, 0, 0, 0)"){
// 未設定background-color，或者設定為跟隨父節點
hasColor = false;
}else if(getStyle(elem, 'opacity') == "0"){
// dom節點透明度為全透明
hasColor = false;
}else if(getStyle(elem, 'visibility') == "hidden"){
// dom節點不可見
hasColor = false;
}else if(getStyle(elem, 'display') == "none"){
// dom節點不可見
hasColor = false;
}
return hasColor;
}複製程式碼4.5 獲取div在頁面最終顯示的顏色
// 獲取div最終顯示的顏色
function getRealBg(elem){
if(checkBgValue(elem)){
return getStyle(elem, 'background-color');
}else if(elem != document.documentElement){
return getRealBg(elem.parentNode);
}
return '';
}複製程式碼 獲取樣式值採用遞迴方式處理。
如果能順利獲取到元素樣式，且不觸發4.4 排除特殊情況中的一種，則直接返回結果。
觸發了特殊情況，則需要查詢父節點以及更上層的節點的樣式，來獲取肉眼能看到，顯示在頁面上的background-color值。
在向上回溯的過程中，如果已經回溯到html根節點，則可以停止回溯。所以加了判斷else if(elem != document.documentElement)
五、遺漏的大boss
5.1 大boss !important
如果亂用 !important，對大型專案的維護和開發，絕對是一場噩夢。因為優先順序規則的計算，!important永遠處在食物鏈的最頂層。
當前題目不考慮這種情況，也是我的偷懶?。確實很棘手，就不寫這個邏輯分支的程式碼了。這裡提醒一下~
5.2 大boss 父節點及根節點設定了不可見css屬性
只要設定該css語句：html {display:none;}，頁面所有元素立刻消失不見。而任意特定元素的上級節點，只要設定了 opacity,display,visibility，判斷邏輯瞬間變得複雜起來。所以，這個渾水我也不趟 O(∩_∩)O哈哈~
六、改進的點
其實特殊情況排除的判斷，我偷懶沒做到最好——rgb顏色值和特定顏色值(比如red)沒有進行統一的轉換，只是加了生硬的判斷if(value == "transparent" || value == "rgba(0, 0, 0, 0)")。
有興趣的可以搜尋下顏色值轉換的js方法，這裡我就不寫了。
七、原始碼和demo
原始碼地址：github.com/wall-wxk/bl…
demo：wall-wxk.github.io/blogDemo/20…
補充
謝謝@煙雨霧嵐 的提醒的新思路：canvas截圖+Js獲取圖片某點顏色，這樣可以完美解決所有的問題。
一、值
1）數字
JavaScript只有一種數值型別：number（數字），包括“整數”和帶小數的十進位制數。
//數字的語法
var a = 5E10; // 50000000000
a.toExponential(); // "5e+10"
var b = a * a; // 2.5e+21
var c = 1 / a; // 2e-11
var d = 0.42;
var e = .42; //數字前面的0可以省略
var f = 42.; //小數點後小數部分最後面的0也可以省略複製程式碼由於數字值可以使用Number物件進行封裝，因此數字值可以呼叫Number.prototype中的方法。例如，tofixed(..)方法可指定小數部分的顯示位數：
// 無效語法：
42.toFixed( 3 ); // SyntaxError
// 下面的語法都有效：
a = (42).toFixed(3); // "42.000"
b = 0.42.toFixed(3); // "0.420"
c = 42..toFixed(3); // "42.000"
d = 42 .toFixed(3); // "42.000"複製程式碼2）整數檢測
//整數檢測
if (!Number.isInteger) {
Number.isInteger = function(num) {
return typeof num == "number" && num % 1 == 0;
};
}
//安全整數檢測
if (!Number.isSafeInteger) {
Number.isSafeInteger = function(num) {
return Number.isInteger(num) &&
Math.abs(num) <= Number.MAX_SAFE_INTEGER;
};
}複製程式碼3）null與undefined
特殊數值undefined與null。它們的名稱既是型別也是值。
null指空值（empty value），曾賦過值，但是目前沒有值。null是一個特殊關鍵字，不是識別符號，我們不能將其當作變數來使用和賦值。
undefined指沒有值（missing value），從未賦值。undefined是一個識別符號，可以被當作變數來使用和賦值。
//將undefined當作變數來使用和賦值
function foo() {
"use strict";
var undefined = 2;
console.log(undefined); // 2
}
foo();複製程式碼4）不是數字的數字
NaN意指“不是一個數字”（not a number），將它理解為“無效數值”、“失敗數值”或者“壞數值”可能更準確些。
NaN是一個特殊值，它和自身不相等，是唯一一個非自反（自反，即x === x不成立）的值。而NaN != NaN為true。
var a = 2 / "foo"; // NaN
typeof a === "number"; // true
if (!Number.isNaN) {
Number.isNaN = function(n) { //非數字型別的值在isNaN中也會返回true
return (
typeof n === "number" &&
window.isNaN(n)
);
};
}
//利用NaN不等於自身這個特點
if (!Number.isNaN) {
Number.isNaN = function(n) {
return n !== n;
};
}複製程式碼5）零值
加法和減法運算不會得到負零（negative zero）。負零在開發除錯控制檯中通常顯示為“-0”，但在一些老版本的瀏覽器中仍然會顯示為“0”。
//零值
a = 0 / -3; // -0
b = 0 * -3; // -0
c = +"-0"; // -0
d = Number("-0"); // -0
e = JSON.parse("-0"); // -0
//值比較
-0 == 0; // true
-0 === 0; // true
0 > -0; // false
//-0的判斷方式
function isNegZero(n) {
n = Number(n);
return (n === 0) && (1 / n === -Infinity);
}
isNegZero(-0); // true
isNegZero(0 / -3); // true
isNegZero(0); // false複製程式碼6）特殊等式
NaN和-0在相等比較時的表現有些特別。
由於NaN和自身不相等，所以必須使用ES6中的Number.isNaN(..)。 而-0等於0（對於===也是如此），因此我們必須使用isNegZero(..)這樣的工具函式。
//特殊等式
if (!Object.is) {
Object.is = function(v1, v2) {
// 判斷是否是-0
if (v1 === 0 && v2 === 0) {
return 1 / v1 === 1 / v2;
}
// 判斷是否是NaN
if (v1 !== v1) {
return v2 !== v2;
}
// 其他情況
return v1 === v2;
};
}複製程式碼7）值和引用
JavaScript引用指向的是值。如果一個值有10個引用，這些引用指向的都是同一個值，它們相互之間沒有引用/指向關係。
向函式傳遞值的時候，實際是將引用值的一個複本傳遞進去，不管是基本型別還是物件。
//基本型別
var a = 2;
var b = a; // b是a的值的一個副本
b++;
a; // 2
b; // 3
//變數引用同一個值
var c = [1, 2, 3];
var d = c; // d是[1,2,3]的一個引用
d.push(4);
c; // [1,2,3,4]
d; // [1,2,3,4]
//變數引用不同的值
var a = [1, 2, 3];
var b = a;
b = [4, 5, 6]; //給b重新賦值，引用新的值，不影響a的引用
a; // [1,2,3]
b; // [4,5,6]
//函式內讓引數重新引用值
function foo2(x) {
x.push(4);
x; // [1,2,3,4]
x = [4, 5, 6];// 然後重新引用新的值
x.push(7);
x; // [4,5,6,7]
}
var a = [1, 2, 3];
//向函式傳遞a的時候，實際是將引用a的一個複本賦值給x，而a仍然指向[1,2,3]
foo2(a);
a; // 是[1,2,3,4]，不是[4,5,6,7]複製程式碼上面的原始碼可以在此次瀏覽。
二、原生函式
常用的原生函式有：String()、Number()、Boolean()、Array()、Object()、Function()、RegExp()、Date()、Error()、Symbol()。
1）內部屬性[[Class]]
這個屬性無法直接訪問，一般通過Object.prototype.toString(..)來檢視。
//內部屬性[[Class]]
Object.prototype.toString.call([1, 2, 3]); // "[object Array]"
Object.prototype.toString.call(/regex-literal/i); // "[object RegExp]"
//基本型別
Object.prototype.toString.call(null); // "[object Null]"
Object.prototype.toString.call(undefined); // "[object Undefined]"複製程式碼雖然Null()和Undefined()這樣的原生建構函式並不存在，但是內部[[Class]]屬性值仍然是"Null"和"Undefined"。
基本型別值被各自的封裝物件自動包裝，所以它們的內部[[Class]]屬性值分別為"String"、"Number"和"Boolean"。
Object.prototype.toString.call("abc"); // "[object String]"
Object.prototype.toString.call(42); // "[object Number]"
Object.prototype.toString.call(true); // "[object Boolean]"複製程式碼2）封裝物件包裝
由於基本型別值沒有.length和.toString()這樣的屬性和方法，需要通過封裝物件才能訪問，此時JavaScript會自動為基本型別值包裝（box或者wrap）一個封裝物件：
//封裝物件
var a = "abc";
a.length; // 3
a.toUpperCase(); // "ABC"複製程式碼如果想要自行封裝基本型別值，可以使用 Object(..) 函式（不帶 new 關鍵字）
//自行封裝基本型別
var a = "abc";
var b = new String(a);
var c = Object(a);
typeof a; // "string"
typeof b; // "object"
typeof c; // "object"
b instanceof String; // true
c instanceof String; // true
Object.prototype.toString.call(b); // "[object String]"
Object.prototype.toString.call( c ); // "[object String]"複製程式碼3）拆封
如果想要得到封裝物件中的基本型別值，可以使用valueOf()函式：
//拆封
var a = new String("abc");
var b = new Number(42);
var c = new Boolean(true);
console.log(a.valueOf()); // "abc"
console.log(b.valueOf()); // 42
console.log(c.valueOf()); // true複製程式碼在需要用到封裝物件中的基本型別值的地方會發生隱式拆封。
/*========================常用函式========================*/
/*時間格式化*/
Date.prototype.Format = function (fmt) {
var o = {
"M+": this.getMonth() + 1, /*月份*/
"d+": this.getDate(), /*日*/
"h+": this.getHours(), /*小時*/
"m+": this.getMinutes(), /*分*/
"s+": this.getSeconds(), /*秒*/
"q+": Math.floor((this.getMonth() + 3) / 3), /*季度*/
"S": this.getMilliseconds() /*毫秒*/
};
if (/(y+)/.test(fmt))
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt))
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
};
/*IE瀏覽器不支援date(time),所以用此方法轉換*/
function NewDate(fmt) {
/*首先將日期分隔 ，獲取到日期部分 和 時間部分*/
var day = fmt.split(' ');
/*獲取日期部分的年月日*/
var days = day[0].split('-');
/*獲取時間部分的 時分秒*/
var mi = day[day.length - 1].split(':');
/*獲取當前date型別日期*/
var date = new Date();
/*給date賦值 年月日*/
date.setUTCFullYear(days[0], days[1] - 1, days[2]);
/*給date賦值 時分秒 首先轉換utc時區 ：+8*/
date.setUTCHours(mi[0] - 8, mi[1], mi[2]);
return date;
}
/*為空判斷*/
function isEmpty(s) {
switch (typeof(s)) {
case 'string':
return !s.length;
break;
case 'array':
case 'object':
for (var i in s) return false;
return true;
break;
case 'undefined':
return true;
break;
default:
return !s;
break;
}
}
/*數字判斷*/
function isNumber(s) {
return typeof(s) == 'number' ? true : false;
}
/*整數判斷*/
function isInt(s) {
var re = /^-?\d*$/;
return re.test(s);
}
/*正整數判斷*/
function isUInt(s) {
var re = /^\d*$/;
return re.test(s) && s >= 0;
}
/*小數判斷*/
function isDecimal(s, bit) {
if (!arguments[1]) bit = -1;
if (bit == -1) {
var re = /^-?\d*.?\d*$/;
return re.test(s);
} else {
var re = new RegExp('^-?\\d*.?\\d{0,' + bit + '}$');
return re.test(s);
}
}
/*正小數判斷*/
function isUDecimal(s, bit) {
if (!arguments[1]) bit = -1;
if (bit == -1) {
var re = /^\d*.?\d*$/;
return re.test(s) && s >= 0;
} else {
var re = new RegExp('^\\d*.?\\d{0,' + bit + '}$');
return re.test(s) && s >= 0;
}
}
/*字串判斷*/
function isString(s) {
return typeof(s) == 'string';
}
/*========================/常用函式========================*/
js onkeyup replace 自動替換
檢測浮點數 只能是整數或者小數
多餘的就replace 掉 的表單驗證
function checkFloatNum(obj)
{
//先把非數字的都替換掉，除了數字和.
obj.value = obj.value.replace(/[^\d.]/g,"");
//必須保證第一個為數字而不是.
obj.value = obj.value.replace(/^\./g,"");
//保證只有出現一個.而沒有多個.
obj.value = obj.value.replace(/\.{2,}/g,".");
//保證.只出現一次，而不能出現兩次以上
obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
}複製程式碼