javascript 原生經常使用api 數組方法大全
<!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})
複製代碼
參考 https://juejin.im/post/5abde97df265da23884d2b91
camelize方法，轉換爲駝峯命名風格
function camelize (target) {
if (target.indexOf('_') < 0 && target.indexOf('_') < 0) {
return target; //提早判斷，提升響應效率 }
return target.replace(/[-_][^-_]/g , function(match){
return match.charCodeAt(1).toUpperCase();
})
}
underscored方法。轉換爲下劃線風格
function underscored(target){
return target.replace(/([a-z\d])([A-Z])/g , '$1_$2').replace(/\-/g , '_').toLowerCase();
}
複製代碼
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：請求未完成，服務器臨時過載或當機，一段事件後恢復正常
複製代碼
www.cnblogs.com/milo-wjh/p/…
javascript
有時可能須要在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;
+ }); 複製代碼
www.cnblogs.com/blogcxz/p/7…
php
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對象
擴展實例和對象的區別，從定義上來說：一、實例是類的具象化產品，二、而對象是一個具備多種屬性的內容結構。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
複製代碼
深拷貝淺拷貝css
一、淺拷貝 //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)
二、深拷貝
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 精確匹配html
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.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-八、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() //用於將當前頁面的焦點，轉移到指定元素上
2、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、對象
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>標籤的一組元素
一、基本篩選器
$('span:first') //第一個節點
$('span:last') //最後一個節點
$("td:even") //索引爲偶數的節點，從 0 開始
$("td:odd") //索引爲奇數的節點，從 0 開始
$("td:eq(1)") //給定索引值的節點
$("td:gt(0)") //大於給定索引值的節點
$("td:lt(2)") //小於給定索引值的節點
$(":focus") //當前獲取焦點的節點
$(":animated") //正在執行動畫效果的節點
二、內容選擇器
$("div:contains('hello')") //包含hello文本的節點
$("td:empty") //不包含子節點或者文本的空節點
$("div:has(p)") //含有選擇器所匹配的節點
$("td:parent") //含有子節點或者文本的節點
三、表單選擇器
$("input:checked") //全部選中的節點
$("select option:selected") //select中全部選中的option節點
$(":input") //匹配全部 input, textarea, select 和 button 節點
$(":text") //全部的單行文本框
$(":password") //全部密碼框
$(":radio") //全部單選按鈕
$(":checkbox") //全部複選框
$(":submit") //全部提交按鈕
$(":reset") //全部重置按鈕
$(":button") //全部button按鈕
$(":file") //全部文件域
四、篩選與查找
$("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() //全部的同輩節點,不包括本身
五、屬性操做
$("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屬性
六、樣式操做
$("p").addClass("selected"); //爲p節點加上 'selected' 類
$("p").removeClass("selected"); //從p節點中刪除 'selected' 類
$("p").toggleClass("selected"); //若是存在就刪除,不然就添加HTML代碼/文本/值
七、內容操做
$('p').html(); //返回p節點的html內容
$("p").html("Hello <b>hello</b>!"); //設置p節點的html內容
$('p').text(); //返回p節點的文本內容
$("p").text("hello"); //設置p節點的文本內容
$("input").val(); //獲取文本框中的值
$("input").val("hello"); //設置文本框中的內容
八、CSS操做
$("p").css("color"); //訪問查看p節點的color屬性
$("p").css("color","red"); //設置p節點的color屬性爲red
$("p").css({ "color": "red", "background": "yellow" }); //設置p節點的color爲red，background屬性爲yellow（設置多個屬性要用{}字典形式）
九、定位與偏移
$('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
十、尺寸
$("p").height(); //獲取p節點的高度
$("p").width(); //獲取p節點的寬度
$("p:first").innerHeight() //獲取第一個匹配節點內部區域高度(包括補白、不包括邊框)
$("p:first").innerWidth() //獲取第一個匹配節點內部區域寬度(包括補白、不包括邊框)
$("p:first").outerHeight() //匹配節點外部高度(默認包括補白和邊框)
$("p:first").outerWidth() //匹配節點外部寬度(默認包括補白和邊框)
$("p:first").outerHeight(true) //爲true時包括邊距
十一、DOM內部插入
$("p").append("<b>hello</b>"); //每一個p節點內後面追加內容
$("p").appendTo("div"); //p節點追加到div內後
$("p").prepend("<b>Hello</b>"); //每一個p節點內前面追加內容
$("p").prependTo("div"); //p節點追加到div內前
十二、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節點的前面
1三、DOM替換
$("p").replaceWith("<b>Paragraph. </b>"); //將全部匹配的節點替換成指定的HTML或DOM節點
$("<b>Paragraph. </b>").replaceAll("p"); //用匹配的節點替換掉全部 selector匹配到的節點
1四、DOM刪除
$("p").empty(); //刪除匹配的節點集合中全部的子節點，不包括自己
$("p").remove(); //刪除全部匹配的節點,包括自己
$("p").detach(); //刪除全部匹配的節點(和remove()不一樣的是:全部綁定的事件、附加的數據會保留下來)
1五、DOM複製
$("p").clone() //克隆節點並選中克隆的副本
$("p").clone(true) //布爾值指事件處理函數是否會被複制
1六、DOM加載完成事件
$(document).ready(function(){
您的代碼...
});
//縮寫
$(function($) {
您的代碼...
});
1七、綁定事件
//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() //用戶離開頁面時
1八、事件對象
$("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() //中止事件向上層節點冒泡
1九、動態事件綁定
$("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
2一、工具方法
$("#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() //判斷瀏覽器是否支持某個特性
2二、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對象能夠由如下幾種方法獲取html5
1. 一般狀況下直接使用`document`或`window.document`取得`document`對象
2. 經過iframe的`contentDocument`屬性獲取
3. The responseXML of an XMLHttpRequest object
4. 經過`node`或`element`對象的`ownerDocument`屬性獲取
複製代碼
全部的document對象都是經過Document接口實現的java
PropertiesDocument.bodynode
返回當前文檔的<body>或<frameset>元素，若是元素不存在則返回nullgit
<body id="oldBodyElement"></body>複製代碼
例（在頁面加載完成後執行）：github
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複製代碼
做者： 關於鄭州想的都是你
來源：慕課網
1、題目
用JS代碼求出頁面上一個元素的最終的background-color，不考慮IE瀏覽器，不考慮元素float狀況。
2、題目解析
1.考察底層JavaScript基礎
前端開發，平常最常接觸的就是頁面樣式的編寫。而擺脫jQuery等工具庫，用原生js獲取樣式，是每一個前端程序猿進階階段必須掌握的技能。
2.考察面試者的思惟縝密程度和開發經驗
若是認爲單單求元素計算後的樣式，就有點too young了。頁面的樣式的複雜，永遠是最虐心的。就算前端有多牛逼，一聽到兼容IE6，論誰都會心塞😓。因此還要考慮特殊的狀況：display，opacity，visibility的取值。
3、理論基礎
1. 內聯樣式
內聯樣式能夠經過元素的style屬性獲取，若是style屬性有background-color值，則能夠直接獲取出來 (暫不考慮!important) 。
2. 外聯的層疊樣式
DOM2樣式規範在document.defaultView中包含了一個getComputedStyle()方法。該方法返回一個只讀的CSSStyleDeclaration對象，其中包含特定元素的全部計算樣式。
4、解題
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)
5、遺漏的大boss
5.1 大boss !important
若是亂用 !important，對大型項目的維護和開發，絕對是一場噩夢。由於優先級規則的計算，!important永遠處在食物鏈的最頂層。
當前題目不考慮這種狀況，也是個人偷懶😆。確實很棘手，就不寫這個邏輯分支的代碼了。這裏提醒一下~
5.2 大boss 父節點及根節點設置了不可見css屬性
只要設置該css語句：html {display:none;}，頁面全部元素馬上消失不見。而任意特定元素的上級節點，只要設置了 opacity,display,visibility，判斷邏輯瞬間變得複雜起來。因此，這個渾水我也不趟 O(∩_∩)O哈哈~
6、改進的點
其實特殊狀況排除的判斷，我偷懶沒作到最好——rgb顏色值和特定顏色值(好比red)沒有進行統一的轉換，只是加了生硬的判斷if(value == "transparent" || value == "rgba(0, 0, 0, 0)")。
有興趣的能夠搜索下顏色值轉換的js方法，這裏我就不寫了。
7、源碼和demo
源碼地址：github.com/wall-wxk/bl…
demo：wall-wxk.github.io/blogDemo/20…
補充
謝謝@煙雨霧嵐 的提醒的新思路：canvas截圖+Js獲取圖片某點顏色，這樣能夠完美解決全部的問題。
1、值
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]複製代碼
上面的源碼能夠在這次瀏覽。
2、原生函數
經常使用的原生函數有：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("$#$",".");
}複製代碼
相關文章
- 1. javascript 原生經常使用api 數組方法大全
- 2. 原生javascript經常使用方法
- 3. Javascript的數組經常使用方法
- 4. javascript數組經常使用方法
- 5. Javascript 數組經常使用方法
- 6. JavaScript中數組經常使用方法
- 7. 一. JavaScript數組經常使用方法
- 8. JavaScript數組的經常使用方法
- 9. javaScript數組之經常使用方法
- 10. JavaScript經常使用數組方法
- 更多相關文章...
- • Docker 命令大全 - Docker教程
- • PHP 常量數組 - PHP 7 新特性
- • Git可視化極簡易教程 — Git GUI使用方法
- • 常用的分佈式事務解決方案
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
