语言相关
数组
建立
通过变量赋值为 [] 来建立一个数组 :
var x=[]; // x 是一个数组
注意数组的下标从 0 开始
获取长度
通过 length 属性来获得 :
var x=[1,2];
console.log(x.length); // => 2
合并数组
调用 concat 函数产生一个新的合并后的函数 :
var x=[1,2];
console.log(x.concat([3,4])); // => 1,2,3,4
console.log(x); // => 1,2
转化为字符串
调用 join 将数组中的元素以分隔符合并为一个字符串
var x=[1,2];
console.log(x.join(":")); // => 1:2
弹出最后一个元素
调用 pop 弹出数组的最后一个元素并返回
var x=[1,2];
console.log(x.pop()); // => 2
console.log(x); // => [1]
添加元素到数组尾部
调用 push 添加新元素到数组尾部
var x=[1,2];
console.log(x.push(3));
console.log(x); // => [1,2,3]
倒转数组元素的位置
调用 reverse 来颠倒数组元素的位置
var x=[1,2];
x.reverse();
console.log(x); // => [2,1]
弹出数组的第一个元素并返回
调用 shift 弹出数组的第一个元素并返回
var x=[1,2];
console.log(x.shift()); // => 1
console.log(x); // => [2]
添加元素到数组头部
调用 unshift 添加新元素到数组头部
var x=[1,2];
console.log(x.unshift(3));
console.log(x); // => [3,1,2]
获取子数组
调用 slice 获取数组指定范围的子数组
var x=[1,2,3,4,5,6];
console.log(x.slice(1,3)); // => [2,3]
console.log(x); // => [1,2,3,4,5,6]
替换数组元素
调用 splice 将数组的连续元素替换为另外一批元素
var x=[1,2,3,4];
console.log(x.splice(1,2,5,6)); // => [2,3] ,替换从第1个下标开始的两个数为 5,6,并返回被替换的数组成的数组
console.log(x); // => [1,5,6,4]
排序
调用 sort 对数组进行排序,默认为从小到大,也可以自定义排序规则
var x=[1,3,2,4];
console.log(x.sort()); // =>1,2,3,4 . 默认从小到大排序
console.log(x.sort(function(a,b){return b-a;})); // => 4,3,2,1. 也可从大到小
循环
调用 forEach 对数组进行循环处理。
[1,2,3].forEach(function(i){
console.log(i); // =>1,2,3
})
索引
调用 indexOf 正向查找某个值在数组中的索引位置
var index = [1,5,3,2,77,88].indexOf(3);
console.log(index); //=> 2
索引
调用
lastIndexOf 反向查找某个值在数组中的索引位置, 与indexOf的方法不同在于开始查找的位置。
var index = [1,5,3,2,77,88].lastIndexOf(3);
console.log(index); //=> 2
循环
调用 map对数组进行循环处理. 类似于forEach,不同的是提供了index 索引的值
var x = ["apple","num","item1","origin"]; x.map(function(item, index){ console.log(item,index); }); //结果如下: //apple 0 //num 1 //item1 2 //origin 3
对数组中每一个元素执行回调函数
对数组中的每个元素都执行一次指定的函数(callback),直到此函数返回 false,如果发现这个元素,every 将返回 false,如果回调函数对每个元素执行后都返回 true ,every 将返回 true。它只对数组中的非空元素执行指定的函数,没有赋值或者已经删除的元素将被忽略。
回调函数可以有三个参数:当前元素,当前元素的索引和当前的数组对象。
var x = [1,3,5,6,7,8,9]; var flag = x.every(function(a){ return a > 4; }); console.log(flag); // => false var flag2 = x.every(function(a){ return a > 0; }); console.log(flag2); // => true console.log(x); // =>[1,3,5,6,7,8,9]
对数组中每一个元素执行回调函数
对数组中的每个元素都执行一次指定的函数(callback),直到此函数返回true,如果发现这个元素,some 将返回true,如果回调函数对每个元素执行后都返回
false ,some 将返回false。它只对数组中的非空元素执行指定的函数,没有赋值或者已经删除的元素将被忽略。
回调函数可以有三个参数:当前元素,当前元素的索引和当前的数组对象。
var x = [1,3,5,6,7,8,9]; var flag = x.some(function(a){ return a > 4; }); console.log(flag); // => true var flag2 = x.every(function(a){ return a < 0; }); console.log(flag2); // => false console.log(x); // =>[1,3,5,6,7,8,9]
对数组中每一个元素执行回调函数
对数组中的每个元素都执行一次指定的函数(callback),直到此函数返回true,如果发现这个元素,some 将返回true,如果回调函数对每个元素执行后都返回
false ,some 将返回false。它只对数组中的非空元素执行指定的函数,没有赋值或者已经删除的元素将被忽略。
回调函数可以有三个参数:当前元素,当前元素的索引和当前的数组对象。
var x = [1,3,5,6,7,8,9]; var flag = x.some(function(a){ return a > 4; }); console.log(flag); // => true var flag2 = x.every(function(a){ return a < 0; }); console.log(flag2); // => false console.log(x); // =>[1,3,5,6,7,8,9]
过滤数组
对数组中的每个元素都执行一次指定的函数(callback),直到此函数返回 false,如果发现这个元素,every 将返回 false,如果回调函数对每个元素执行后都返回 true ,every 将返回 true。它只对数组中的非空元素执行指定的函数,没有赋值或者已经删除的元素将被忽略。
回调函数可以有三个参数:当前元素,当前元素的索引和当前的数组对象。
var x = [1,3,5,6,7,8,9]; var newx = x.filter(function(a){ return a > 4; }); console.log(x); // => [1,3,5,6,7,8,9] console.log(newx); // => [5, 6, 7, 8, 9]
对象
建立
通过对变量赋值 {} 建立对象
var x={}; // x 是一个对象
判断属性包含
调用 hasOwnProperty 判断对象是否包含某个属性
var x={ z:1 };
console.log(x.hasOwnProperty("z")); // => true
console.log(x.hasOwnProperty("y")); // => false
函数
建立
通过函数声明或将变量赋值函数表达式创建一个函数
function x(){} // 通过函数声明创建函数
var y=function(){}; // 通过函数表达式创建函数
调用
通过函数名加()传入参数后调用相关函数
function x(a,b){return a+b;}
x(1,2); // => 3
指定this调用
调用函数的 call/apply 可以指定函数内的 this 值 ,call 传参和普通调用一致,apply 则需要传入参数数组.
function x(c){return this.a+this.b+c;}
x.call({a:1,b:2},3); // => 6 , 参数列表可直接传递
x.apply({a:1,b:2},[3]); // => 6 , 参数列表需要包装为数组
字符串
建立
通过变量赋值 " 包裹的字符串创建
var x="123"; // => x 为包含 123 的字符串
注意:字符串的字符下标从 0 开始.
从unicode中产生
调用 String.fromCharCode 从给定的 unicode 数值得到包含一个字符的字符串
var x=String.fromCharCode(65); // => "A"
得到指定下标的字符
调用 charAt 得到包含指定下标的字符的字符串
var x="abc".charAt(0); // => "a"
得到指定下标的字符的unicode值
调用 charCodeAt 得到指定下标的字符的unicode值
var x="ABC".charCodeAt(0); // => 65
合并字符串
通过 + 操作符合并两个字符串
"abc"+"123" // => "abc123"
查找子串的首次出现位置
调用 indexOf 获取子串的首次出现位置
"a123bc123de".indexOf("123") // => 1
查找子串最后一次出现位置
调用 lastIndexOf 获取子串的末次出现位置
"a123bc123de".lastIndexOf("123") // => 6
获取子串
调用 slice 获取字符串指定范围的子串
"a123bc123de".slice(1,4)// => 123 , 获取下标位于 1-4 范围内的子串(包括1,不包括4)
转化小写
调用 toLowerCase 返回源字符串的小写形式
"ABC".toLowerCase() // => "abc"
转化大写
调用 toUpperCase 返回源字符串的大写形式
"abc".toUpperCase() // => "ABC"
获取正则匹配结果
调用 match 并传入正则表达式得到正则匹配的结果,具体返回结果和正则表达式相关
如果设置了全局标志,返回所有的匹配项
"1 加 2 等于 3".match(/\d+/g) // => ["1", "2", "3"]
否则返回第一个匹配项以及它的捕获分组
var url = /(\w+):\/\/([\w.]+)\/(\S*)/;
var text = "访问淘宝 http://www.taobao.com/index.php http://www.etao.com/";
var result = text.match(url);
if (result != null) {
var fullurl = result[0]; // => "http://www.taobao.com/index.php"
var protocol = result[1]; // => "http"
var host = result[2]; // => "www.taobao.com"
var path = result[3]; // => "index.php"
}
查找匹配正则的起始位置
调用 search 返回匹配正则的起始位置
var s="TaoBao 开放 js";
s.search(/t.o/i) // => 0
s.search(/x+/) // => -1
分割字符串为数组
调用 split 将字符串依据传入的分割符分割为数组
分隔符为字符串
"1:2:3:4:5".split(":"); // => ["1","2","3","4","5"]
分隔符为正则
"1::2:3:4:5".split(":"); // => ["1","","2","3","4","5"]
"1::2:3:4:5".split(/:+/); // => ["1","2","3","4","5"]
如果正则为括号起始,则匹配到的分隔符也包含在返回结果中
"1::2:3:4:5".split(/(:)/); // => ["1",":","",":","2",":","3",":","4",":","5"]
替换子串
调用 replace 将正则匹配到的子串替换为指定的字符串
替换为指定的字符串,注意字符串中 $ 具有特殊含义: $1 表示第一个捕获分组 ... $& 表示匹配字符串
"tao bao".replace(/(\w+) (\w+)/g,"$2 $1") // => "bao tao"
替换为指定的函数返回结果,改函数传入参数:匹配字符串以及各个匹配分组
"tao bao".replace(/(\w+)/g,function(w){
return w.charAt(0).toUpperCase()+w.slice(1);
}); //=> Tao Bao
去掉字符串两边的空格
调用 trim 去掉字符串两边的空格
" abc " // => "abc"
数字
最大正数
通过 Number.MAX_VALUE 来获取最大正数
console.log(Number.MAX_VALUE);
最小正数
通过 Number.MIN_VALUE 来获取最小正数
console.log(Number.MIN_VALUE);
正溢出值
Number.POSITIVE_INFINITY 表示运算正溢出时的值
console.log(1/0 === Number.POSITIVE_INFINITY);
负溢出值
Number.NEFATIVE_INFINITY 表示运算负溢出时的值
console.log(-1/0 === Number.NEFATIVE_INFINITY);
小数点位数控制
调用 toFixed 返回代表限定小数点位数的字符串
var n = 12345.6789;
n.toFixed( ); // => '12346': 去除小数点的数字
n.toFixed(1); // => '12345.7': 保留一位,进行四舍五入
n.toFixed(6); // => '12345.678900' 保留六位,不足补零
(1.23e+20).toFixed(2); // => '123000000000000000000.00'
(1.23e-10).toFixed(2) // => '0.00'
总体精度控制
调用 toPrecison 来返回代表限定数字有效位的字符串
var n = 12345.6789; n.toPrecision(1); // => 1e+4 n.toPrecision(3); // => 1.23e+4 n.toPrecision(5); // => 12346 (四舍五入) n.toPrecision(10); // => 12345.67890 (四舍五入)
科学计数法精度控制
调用 toExponential 返回代表限定小数点位数的科学计数法字符串
var n = 12345.6789;
n.toExponential(1); // => '1.2e+4'
n.toExponential(5); // => '1.23457e+4'
n.toExponential(10); // => '1.2345678900e+4'
n.toExponential( ); // => '1.23456789e+4'
Math
获取数学常量e
通过 Math.E 获取数学常量 e
console.log(Math.E);
自然对数
通过 Math.log(x) 获取 x 的自然对数
console.log(Math.log(10)===Math.LN10); // => true
10的自然对数
通过 Math.LN10 获取10的自然对数
console.log(Math.LN10);
2的自然对数
通过 Math.LN2 获取 2 的自然对数
console.log(Math.LN2);
以2为底 e的对数
通过 Math.LOG2E 获取以2为底 e的对数
console.log(Math.LOG2E);
以 10 为底 e的对数
通过 Math.LOG10E 获取以10为底 e的对数
console.log(Math.LOG10E);
圆周率
通过 Math.PI 获取圆周率常量
console.log(Math.PI);
根号2
通过 Math.SQRT2 获取常量根号2
console.log(Math.SQRT2);
绝对值
调用 Math.abs 获取变量的绝对值
console.log(Math.abs(1)); // => 1
console.log(Math.abs(-1)); // => 1
余弦
调用 Math.cos 获取角度的余弦值
console.log(Math.cos(0.5)); // => 0.877...
console.log(Math.cos(-0.5)); // => 0.877...
正弦
调用 Math.sin 获取角度的正弦值
console.log(Math.sin(0.5)); // => 0.497...
console.log(Math.sin(-0.5)); // => -0.497...
正切
调用 Math.atan 获取角度的正切值
console.log(Math.tan(0.5)); // => 0.546...
console.log(Math.tan(-0.5)); // => -0.546...
反余弦
调用 Math.acos 获取变量的反余弦值
console.log(Math.acos(0.5)); // => 1.047...
console.log(Math.acos(-0.5)); // => 2.094...
反正弦
调用 Math.asin 获取变量的反正弦值
console.log(Math.asin(0.5)); // => 0.523...
console.log(Math.asin(-0.5)); // => -0.523...
反正切
调用 Math.atan 获取变量的反正切值
console.log(Math.atan(0.5)); // => 0.523...
console.log(Math.atan(-0.5)); // => -0.523...
大于或等于某数的最近整数
调用 Math.ceil 大于或等于某数的最近整数
console.log(Math.ceil(0.5)); // => 1
console.log(Math.ceil(-0.5)); // => 0
小于或等于某数的最近整数
调用 Math.floor 得到小于或等于某数的最近整数
console.log(Math.floor(0.5)); // => 0
console.log(Math.floor(-0.5)); // => -1
幂计算
调用 Math.pow(x,y) 返回 x 的 y 次方
console.log(Math.pow(2,3)); // => 8
console.log(Math.pow(3,2)); // => 9
四舍五入
调用 Math.round 返回四舍五入后的值
console.log(Math.round(2.3)); // => 2
console.log(Math.round(2.5)); // => 3
最大值
调用 Math.max 获得参数列表中最大的参数值
console.log(Math.max(2,4,3,-9); // => 4
最小值
调用 Math.min 获取参数列表中的最小的参数值
console.log(Math.min(2,4,3,-9); // => -9
随机数
调用 Math.random 返回一个范围在 0.0 与 1.0 之间的伪随机数
console.log(Math.random()!==Math.random()); // => true
Date
根据GMT时间获取绝对时间值
调用 Date.UTC(year, month, day, hours, minutes, seconds, ms) 来获取给定的 GMT 时间相对于 GMT 1970.1.1 的毫秒数
注意: year 为四位数 month 从 0开始(0表示一月) day可选参数,范围 1-31 hours可选参数,范围 0-23 minutes可选参数,范围 0-59 seconds可选参数,范围 0-59 ms可选参数,范围 0-999
console.log(Date.UTC(1970,0,1)); // => 0
console.log(Date.UTC(1970,0,1,0,0,0,1)); // => 1
创建一个 Date 对象
调用
new Date() 创建一个表示当前时间的 Date 对象 或 new Date(milliseconds) 创建一个举例 1970.1.1 GMT时间指定毫秒的 Date 对象 或 new Date(year,month,day,hours,minutes,seconds,ms) 创建一个指定本地时间的 Date 对象,参数格式要求同 Date.UTC
console.log(new Date().toLocaleString()); // => "Fri Sep 09 2011 12:13:30 GMT+0800 (中国标准时间)
得到区域时间格式化表示
调用 date.toLocaleString() 得到时间对象的当前区域格式化表示(不同浏览器间可能不同)
console.log(new Date().toLocaleString()); // => "Fri Sep 09 2011 12:13:30 GMT+0800 (中国标准时间)"
得到绝对毫秒值
调用 date.getTime() 得到当前时间实例距离 1970/1/1 GMT 的毫秒数
console.log(new Date().getTime()); // => 1315881421972
得到年
调用 date.getFullYear() 得到时间实例的当前区域四位年份表示
console.log(new Date().getFullYear()); // => 2011
得到月份
调用 date.getMonth() 得到时间实例的当前区域月份表示
注意:返回值范围为 0-11 , 0 表示一月
console.log(new Date().getMonth()); // => 8 (9 月)
得到日期
调用 date.getDate() 得到时间实例的当前区域的日期表示
console.log(new Date().getDate()); // => 13
得到星期
调用 date.getDay() 得到时间实例的当前区域的星期
注意:返回值范围为 0-6 , 0 表示星期天,1 表示星期一 ...
console.log(new Date().getDay()); // => 2 (星期二)
得到时值
调用 date.getHours() 得到时间实例的当前区域的时数值
注意:返回值范围为 0-23 , 0 表示午夜12点.
console.log(new Date().getHours()); // => 10
得到分值
调用 date.getMinutes() 得到时间实例的当前区域的分数值
注意:返回值范围为 0-59
console.log(new Date().getMinutes()); // => 56
得到秒数
调用 date.getSeconds() 得到时间实例的当前区域的秒数
注意:返回值范围为 0-59
console.log(new Date().getSeconds()); // => 13
得到毫秒值
调用 date.getMilliseconds() 得到时间实例的当前区域的毫秒位数值
注意:返回值范围为 0-999
console.log(new Date().getMilliseconds()); // => 564
得到 GMT 年
调用 date.getUTCFullYear() 得到时间实例的GMT标准时间四位年份表示
console.log(new Date().getUTCFullYear()); // => 2011
得到GMT月份
调用 date.getUTCMonth() 得到时间实例的GMT标准时间月份表示
注意:返回值范围为 0-11 , 0 表示一月
console.log(new Date().getUTCMonth()); // => 8 (9 月)
得到GMT日期
调用 date.getUTCDate() 得到时间实例的GMT标准时间日期表示
console.log(new Date().getUTCDate()); // => 13
得到GMT星期
调用 date.getUTCDay() 得到时间实例的GMT标准时间星期
注意:返回值范围为 0-6 , 0 表示星期天,1 表示星期一 ...
console.log(new Date().getUTCDay()); // => 2 (星期二)
得到GMT时值
调用 date.getUTCHours() 得到时间实例的GMT标准时间时数值
注意:返回值范围为 0-23 , 0 表示午夜12点.
console.log(new Date().getUTCHours()); // => 2
得到GMT分值
调用 date.getUTCMinutes() 得到时间实例的GMT标准时间分数值
注意:返回值范围为 0-59
console.log(new Date().getUTCMinutes()); // => 56
得到GMT秒数
调用 date.getUTCSeconds() 得到时间实例的GMT标准时间秒数
注意:返回值范围为 0-59
console.log(new Date().getUTCSeconds()); // => 13
得到GMT毫秒值
调用 date.getUTCMilliseconds() 得到时间实例的GMT标准时间毫秒位数值
注意:返回值范围为 0-999
console.log(new Date().getUTCMilliseconds()); // => 564
得到时区差异
调用 date.getTimezoneOffset() 得到GMT标准时区和当前时区的差异分钟数
console.log(new Date().getTimezoneOffset()); // => -480 , 8*60 , 北京处于东八区
设置绝对毫秒值
调用 date.setTime() 设置当前时间实例距离 1970/1/1 GMT 的毫秒数
console.log(new Date().setTime(1315881421972));
设置年
调用 date.setFullYear() 设置时间实例在当前区域的年份
console.log(new Date().setFullYear(2011));
设置月份
调用 date.setMonth() 设置时间实例在当前区域的月份
注意:参数范围为 0-11 , 0 表示一月
console.log(new Date().setMonth(8));
设置日期
调用 date.setDate() 设置时间实例在当前区域的日期
console.log(new Date().setDate(13));
设置时值
调用 date.setHours() 得到时间实例在当前区域的时值
注意:参数范围为 0-23 , 0 表示午夜12点.
console.log(new Date().setHours(10));
设置分值
调用 date.setMinutes() 设置时间实例在当前区域的分数值
注意:参数范围为 0-59
console.log(new Date().setMinutes(56));
设置秒数
调用 date.setSeconds() 设置时间实例在当前区域的秒数
console.log(new Date().setSeconds(13));
设置毫秒值
调用 date.setMilliseconds() 设置时间实例在当前区域的毫秒位数值
console.log(new Date().setMilliseconds(564));
得到 GMT 年
调用 date.getUTCFullYear() 得到时间实例的GMT标准时间四位年份表示
console.log(new Date().getUTCFullYear()); // => 2011
得到GMT月份
调用 date.getUTCMonth() 得到时间实例的GMT标准时间月份表示
注意:返回值范围为 0-11 , 0 表示一月
console.log(new Date().getUTCMonth()); // => 8 (9 月)
得到GMT日期
调用 date.getUTCDate() 得到时间实例的GMT标准时间日期表示
console.log(new Date().getUTCDate()); // => 13
得到GMT星期
调用 date.getUTCDay() 得到时间实例的GMT标准时间星期
注意:返回值范围为 0-6 , 0 表示星期天,1 表示星期一 ...
console.log(new Date().getUTCDay()); // => 2 (星期二)
得到GMT时值
调用 date.getUTCHours() 得到时间实例的GMT标准时间时数值
注意:返回值范围为 0-23 , 0 表示午夜12点.
console.log(new Date().getUTCHours()); // => 2
得到GMT分值
调用 date.getUTCMinutes() 得到时间实例的GMT标准时间分数值
注意:返回值范围为 0-59
console.log(new Date().getUTCMinutes()); // => 56
得到GMT秒数
调用 date.getUTCSeconds() 得到时间实例的GMT标准时间秒数
注意:返回值范围为 0-59
console.log(new Date().getUTCSeconds()); // => 13
得到GMT毫秒值
调用 date.getUTCMilliseconds() 得到时间实例的GMT标准时间毫秒位数值
注意:返回值范围为 0-999
console.log(new Date().getUTCMilliseconds()); // => 564
设置GMT年
调用 date.setUTCFullYear() 设置时间实例在GMT标准时区的年份
console.log(new Date().setUTCFullYear(2011));
设置GMT月份
调用 date.setUTCMonth() 设置时间实例在GMT标准时区的月份
注意:参数范围为 0-11 , 0 表示一月
console.log(new Date().setUTCMonth(8));
设置GMT日期
调用 date.setUTCDate() 设置时间实例在GMT标准时区的日期
console.log(new Date().setUTCDate(13));
设置GMT时值
调用 date.seUTCHours() 得到时间实例在GMT标准时区的时值
注意:参数范围为 0-23 , 0 表示午夜12点.
console.log(new Date().setUTCHours(10));
设置GMT分值
调用 date.setUTCMinutes() 设置时间实例在GMT标准时区的分数值
注意:参数范围为 0-59
console.log(new Date().setUTCMinutes(56));
设置GMT秒数
调用 date.setUTCSeconds() 设置时间实例在GMT标准时区的秒数
console.log(new Date().setUTCSeconds(13));
设置GMT毫秒值
调用 date.setUTCMilliseconds() 设置时间实例在GMT标准时区的毫秒位数值
console.log(new Date().setUTCMilliseconds(564));
RegExp
创建
通过 /code/flag 来创建正则表达式实例,其中 code 表示正则表达式,flag 表示该表达式的模式修饰符,包括 i(大小写模式) , m(多行模式) ,g(全局模式)
console.log(/x/i);
查看全局模式
通过 reg.global 来判断该正则表达式是否设置了全局模式
console.log(/x/g.global); // => true
console.log(/x/.global); // => false
查看大小写模式
通过 reg.ignoreCase 来判断该正则表达式是否设置了大小写不敏感
console.log(/x/.ignoreCase); // => false
console.log(/x/i.ignoreCase); // => true
查看多行模式
通过 reg.multiline 来判断该正则表达式是否设置了多行模式
console.log(/x/.multiline); // => false
console.log(/x/m.multiline); // => true
下次开始查找位置
通过 reg.lastIndex 来获取或设置带有全局模式的正则式下次开始查找的位置
var x=/x/g;
console.log(x.lastIndex); // => 0
x.test("xyzxyz");
console.log(x.lastIndex); // => 1
通用模式匹配
调用 reg.exec 来对参数字符串进行通用模式匹配
如果匹配成功返回数组,数组第一项表示匹配的字符串,其余表示匹配分组
var x=/(j)ava\w*/g,result;
while(result=x.exec("javascript is not java")){
console.log("匹配到:" + result[0] +
" 捕获分组 :"+result[1]+
" 下次匹配开始于:" + x.lastIndex);
}
// 匹配到:javascript 捕获分组 :j 位于: 0 下次匹配开始于:10
// 匹配到:java 捕获分组 :j 位于: 18 下次匹配开始于:22
是否匹配字符串
调用 reg.test 来判断参数字符串是否匹配当前模式,相当于 reg.exec(str) != null
var pattern = /java/i;
pattern.test("JavaScript"); // => true
pattern.test("ECMAScript"); // => false
全局变量(函数)
null
特殊的空对象
false
true
NaN
特殊的数字,不等于任何数字包括自身
console.log(Number("x")) // => NaN
console.log(NaN === NaN); // => false
Infinity
特殊的数字表示无穷大,运算溢出时返回
console.log(1/0); // => Infinity
undefined
特殊值,表示不存在的变量或属性
parseInt
将字符串转化为整数
parseInt("12x") // => 12
parseFloat
将字符串转化为浮点数
parseFloat("12.98x") // => 12.98
isNaN
判断一个字符串或数字是否是非NaN数字
isNaN("12") // => false
isNaN("12x") // => true
isNaN(NaN) => true
isNaN(Infinity) => false
isFinite
判断一个字符串或数字是否是非 Infinity 或 -Infinity 或 NaN 数字
isFinite("12") // => true
isFinite("12x") // => false
isFinite(NaN) => false
isFinite(Infinity) => false
encodeURI
对 url 进行编码,除了以下字符外其它字符都被编码为 utf-8 格式的 %xx
1. ascii 字符和数字 2. - _ . ! ~ * ' ( ) 3. ; / ? : @ & = + $ , #
encodeURI("http://www.taobao.com/?arg1=1&arg2=hello world"); // => "http://www.taobao.com/?arg1=1&arg2=hello%20world"
decodeURI
对调用 encodeURI 后的 url 进行解码
decodeURI("http://www.taobao.com/?arg1=1&arg2=hello%20world"); // => "http://www.taobao.com/?arg1=1&arg2=hello world"
encodeURIComponent
对 url 进行编码,除了以下字符外其它字符都被编码为 utf-8 格式的 %xx
1. ascii 字符和数字 2. - _ . ! ~ * ' ( )
encodeURIComponent("hello ?"); // => "hello%20%3f"
decodeURIComponent
对调用 encodeURIComponent 后的 url 进行解码
decodeURIComponent("hello%20%3f"); // => "hello ?"
setTimeout
延迟执行一个函数,返回一个可以用 clearTimeout 取消的句柄
setTimeout(function(){
alert("run"); // => 10 毫秒后执行
},10);
clearTimeout
取消执行用 setTimeout 延迟的函数
var id=setTimeout(function(){
alert("run"); // => 永远不会执行
},10);
clearTimeout(id);
setInterval
定时重复执行某个函数,返回一个可以用 clearInterval 取消的句柄
var id=setInterval(function(){
alert("run"); // 每 10 毫秒执行一次
},10);
clearInterval
取消 setInterval 定时重复执行的函数
var id=setInterval(function(){
alert("run"); // => 永远不会执行
},10);
setInterval(id);
console.log
调用 console.log 可在控制台打出参数信息
注意:ie6,7 需要安装 companionJS
console.log("log"); // => 控制台打印出 "log"
dom相关
document
可通过常量 document 的一些方法来获得节点实例
body
通过 document.body 来获得模块的根节点
getElementsByTagName
通过 document.getElementsByTagName 来获得模块的制定标签的节点集合
console.log(document.getElementsByTagName("a")); // => 得到模块内的全部链接节点
createElement
通过 document.createElement 来返回一个节点实例
console.log(document.createElement("button")); // => 返回一个按钮节点实例
createTextNode
通过 document.createTextNode来返回一个文本节点实例
console.log(document.createTextNode("button")); // => 返回一个文本节点,内容为 button
createDocumentFragment
通过 createDocumentFragment 来返回一个节点碎片集合,然后可以通过往这个集合上添加节点,用于提高批量节点添加性能
console.log(document.createDocumentFragment());
Node
所有的节点实例都是从 Node 产生出来,都具备一下方法和属性
nodeType
返回整数,表明当前节点的类型,常用的含义如下
- 1 表示 element(元素)
- 2 表示属性
- 3 表示元素或属性中的文本内容
- 4 表示文档中的 CDATA 区段(文本不会被解析器解析)
- 5 表示实体引用元素
- 6 表示实体
- 7 表示处理指令
- 8 表示注释
- 9 表示整个文档
- 10 向为文档定义的实体提供接口
- 11 节点碎片集合
- 12 表示在 DTD 中声明的符号
console.log(document.createDocumentFragment().nodeType); // => 11
console.log(document.createTextNode("button").nodeType); // => 3
console.log(document.createElement("button").nodeType); // => 1
nodeName
返回字符串,返回节点的标签内容,文本节点则返回 "#text"
console.log(document.createElement("button").nodeName); // => button
console.log(document.createElement("div").nodeName); // => div
firstChild
返回元素的第一个子节点
html:
<div class='t1'><a class='t2'></a><a class='t3'></a></div>
console.log(KISSY.DOM.query(".t1")[0].firstChild.className); // => t2
lastChild
返回元素的最后一个子节点
html:
<div class='t1'><a class='t2'></a><a class='t3'></a></div>
console.log(KISSY.DOM.query(".t1")[0].lastChild.className); // => t3
nextSibling
返回节点的下一个兄弟节点
html:
<div class='t1'><a class='t2'></a><a class='t3'></a></div>
console.log(KISSY.DOM.query(".t2")[0].nextSibling.className); // => t3
previousSibling
返回节点的上一个兄弟节点
html:
<div class='t1'><a class='t2'></a><a class='t3'></a></div>
console.log(KISSY.DOM.query(".t3")[0].previousSibling.className); // => t2
parentNode
返回节点的父亲节点
html:
<div class='t1'><a class='t2'></a><a class='t3'></a></div>
console.log(KISSY.DOM.query(".t3")[0].parentNode.class); // => t1
childNodes
返回元素的全部子节点数组
html:
<div class='t1'><a class='t2'></a><a class='t3'></a></div>
console.log(KISSY.DOM.query(".t1")[0].childNodes); // => [KISSY.DOM.query(".t2")[0] , KISSY.DOM.query(".t3")[0]]
clientWith
返回元素的可视区域宽度(不包括滚动条,边框以及被滚动的区域),类型整数
KISSY.DOM.query(".t1")[0].clientWidth
clientHeight
返回元素的可视区域高度(不包括滚动条,边框以及被滚动的区域),类型整数
KISSY.DOM.query(".t1")[0].clientHeight
offsetWith
返回元素的实际宽度(不包括被滚动的区域),类型整数
KISSY.DOM.query(".t1")[0].offsetWidth
offsetHeight
返回元素的实际高度(不包括被滚动的区域),类型整数
KISSY.DOM.query(".t1")[0].offsetHeight
scrollLeft
返回元素的向左滚动值,类型整数
KISSY.DOM.query(".t1")[0].scrollLeft
scrollTop
返回元素的向上滚动值,类型整数
KISSY.DOM.query(".t1")[0].scrollTop
scrollHeight
返回元素内容的实际高度(包含滚动区域),类型整数
KISSY.DOM.query(".t1")[0].scrollHeight
innerHTML
访问元素的所有子节点的 html 代码
html:
<div class='t1'><a class='t2'></a><a class='t3'></a></div>
console.log(KISSY.DOM.query(".t1")[0].innerHTML); // => "<a class='t2'></a><a class='t3'></a>"
className
返回元素的class 属性值
html:
<div class='test warn'></div>
console.log(KISSY.DOM.query(".test")[0].className); // => "test warn"
appendChild
调用 appendChild(node) 给当前元素添加一个子节点
html:
<div class='t1'></div>
KISSY.DOM.query(".t1")[0].appendChild(document.createElement("span"));
html:
<div class='t1'><span></span></div>
insertBefore
通过调用 parent.insertBefore(newNode,refNode) 将 newNode 插入到 refNode 前面
html:
<div class='t1'><a class='t3'></a></div>
KISSY.DOM.query(".t1")[0].insertBefore(document.createElement("span"),KISSY.DOM.query(".t3")[0]);
html:
<div class='t1'><span></span><a class='t3'></a></div>
removeChild
调用 parent.removeChild(node) 将 node 从 parent 中去除
html:
<div class='t1'><a class='t3'></a></div>
KISSY.DOM.query(".t1")[0].removeChild(KISSY.DOM.query(".t3")[0]);
html:
<div class='t1'></div>
replaceChild
调用 parent.replaceChild(newNode,exsitNode) 将 exsitNode 替换为 newNode
html:
<div class='t1'><a class='t3'></a></div>
KISSY.DOM.query(".t1")[0].replaceChild(document.createElement("span"),KISSY.DOM.query(".t3")[0]);
html:
<div class='t1'><span></span></div>
getElementsByTagName
调用 parent.getElementsByTagName(tagName) 获取 parent 下标签名为 tagName 的节点数组
html:
<div class='t1'><a class='t3'></a><div class='t4'><div class='t5'></div></div></div>
console.log(KISSY.DOM.query(".t1")[0].getElementsByTagName("div")); // => [KISSY.DOM.query(".t4")[0],KISSY.DOM.query(".t5")[0]]
HTMLInputElement
代表输入框的节点( input ) 类型,可提供输入区域,包括以下属性和方法
value
可通过 value 属性获取用户的输入值或设置输入框的值
html:
<input class='inp' />
console.log(KISSY.DOM.query(".inp")[0].value); // => 当前用户的输入值
type
可通过 type 属性获取输入框的类型,包括 checkbox ,radio ,text ,默认为 text 注意:该属性只读
html:
<input class='inp' /> <input class='inp2' type='checkbox'/>
console.log(KISSY.DOM.query(".inp")[0].type); // => "text"
console.log(KISSY.DOM.query(".inp2")[0].type); // => "checkbox"
name
可通过 name 属性获取输入框的名称属性 注意:该属性只读
html:
<input class='inp' name='inp_in'/>
console.log(KISSY.DOM.query(".inp")[0].name); // => "inp_in"
disabled
可通过 disabled 读取或设置输入框元素是否禁用(允许用户输入)
html:
<input class='inp'/>
console.log(KISSY.DOM.query(".inp")[0].disabled); // => false
KISSY.DOM.query(".inp")[0].disabled = true; // => 用户将不能输入
console.log(KISSY.DOM.query(".inp")[0].disabled); // => true
readOnly
可通过 readOnly 读取或设置输入框元素是否只读(不允许用户输入)
html:
<input class='inp'/>
console.log(KISSY.DOM.query(".inp")[0].readOnly); // => false
KISSY.DOM.query(".inp")[0].readOnly= true; // => 用户将不能输入
console.log(KISSY.DOM.query(".inp")[0].readOnly); // => true
checked
可通过 checked 读取或设置类型为 checkbox 或 radio 的输入框是否被选中
html:
<input class='inp' type='checkbox' />
console.log(KISSY.DOM.query(".inp")[0].checked); // => false
KISSY.DOM.query(".inp")[0].checked= true; // => 用户将不能输入
console.log(KISSY.DOM.query(".inp")[0].checked); // => true
HTMLSelectElement
代表 select 的节点类型。具有 HTMLInputElement 的所有属性和方法,还包括其他一些方法和属性
options
可获取select 元素的所有选择项数组,单个元素类型为 HTMLOptionElement
html:
<select class='inp'> <option value='one'>1</option> <option>2</option> </select>
console.log(KISSY.DOM.query(".inp")[0].options.length); // => 2
console.log(KISSY.DOM.query(".inp")[0].options[0].text); // => 1
console.log(KISSY.DOM.query(".inp")[0].options[0].value); // => 'one'
selectedIndex
可获取或设置select 元素当前选中选项处于所有选项数组的下标
html:
<select class='inp'> <option>1</option> <option selected>2</option> </select>
console.log(KISSY.DOM.query(".inp")[0].options.length); // => 2
console.log(KISSY.DOM.query(".inp")[0].selectedIndex); // => 1
console.log(KISSY.DOM.query(".inp")[0].options[KISSY.DOM.query(".inp")[0].selectedIndex].text); // => "1"
HTMLOptionElement
代表 select 的每个选项的节点类型,包括一下属性
text
类型字符串,选项的显示内容
value
类型字符串,选项代表的值
selected
代表该选项是否是对应select当前选中的项
浏览器相关
getComputedStyle获取浏览器计算样式
css
.grid-container{ background-color:red; }
js
var S = KISSY, DOM = S.DOM; var con = DOM.get('.grid-container'); console.log(window.getComputedStyle(con,null).backgroundColor); //red 或者 rgb (255,0,0) 根据浏览器不同有差异
补充说明: 编译环境支持, 已知问题是:a标签不支持获取样式。
淘宝类库
淘宝提供了一个基础类库,用于处理浏览器兼容性问题以及提供一些可以增强工作效率的快捷方法,下面对淘宝提供的基础类库 KISSY 的用法做下介绍
KISSY
提供了一些常用的工具方法方法具体使用方法可以参考kissy官方文档
unparam
http://docs.kissyui.com/docs/html/api/seed/kissy/unparam.html
param
http://docs.kissyui.com/docs/html/api/seed/kissy/param.html
param
http://docs.kissyui.com/docs/html/api/seed/kissy/param.html
unEscapeHTML
http://docs.kissyui.com/docs/html/api/seed/kissy/unEscapeHTML.html
escapeHTML
http://docs.kissyui.com/docs/html/api/seed/kissy/escapeHTML.html
substitute
http://docs.kissyui.com/docs/html/api/seed/kissy/substitute.html
KISSY.DOM
提供了操作页面元素的兼容处理和快捷方法
query
通过 KISSY.DOM.query(selector) 来获取符合选择器字符串的页面元素数组. (selector 为选择器字符串数组,格式和 jquery 保持一致)
html:
<div> <span id='t1' class='t'></span> <span id='t2'></span> <span id='t3' class='t'></span> </div>
console.log(KISSY.DOM.query(".t")); // => [document.getElementById('t1'),document.getElementById('t3')]
get
相当于KISSY.DOM.query(selector)[0]
text
通过 KISSY.DOM.text(selector) 来获取或设置匹配选择器的第一个节点的文本内容 参数也可以是通过query取得的节点 : KISSY.DOM.text(node)
html:
<div> <span id='t1' class='t'>1<a>2</a>3</span> <span id='t2'></span> <span id='t3' class='t'>4<a>5</a>6</span> </div>
console.log(KISSY.DOM.text(".t")); // => "123"
console.log(KISSY.DOM.text(KISSY.DOM.query(".t")[1])); // => "456"
KISSY.DOM.text(".t","789");
console.log(KISSY.DOM.text(KISSY.DOM.query(".t")[0])); // => "789"
offset
通过 KISSY.DOM.offset(node) 获取或设置元素相对于文档根节点的位置对象,位置对象包括 left 与 top 两个数值属性
html:
<div> <span id='t1' class='t'>1<a>2</a>3</span> </div>
var DOM = KISSY.DOM , t = DOM.query(".t")[0];
console.log(DOM.offset(t)); // => 可能:{ left:100 , top:200 }
DOM.offset(t,{ left:200, top:300 });
console.log(DOM.offset(t)); // => 可能:{ left:200 , top:300 }
hasClass
通过 KISSY.DOM.hasClass(node,cls) 判断元素 node 是否具有样式类 cls
addClass
通过 KISSY.DOM.addClass(node,cls) 可以给元素 node 加上样式类 cls
html:
<div class='t'></div>
var DOM = KISSY.DOM , t = DOM.query(".t")[0];
console.log(DOM.hasClass(t,"custom")); // => false
DOM.addClass(t,"custom");
console.log(DOM.hasClass(t,"custom")); // => true
removeClass
通过 KISSY.DOM.removeClass(node,cls) 移除元素 node 上的样式类 cls
html:
<div class='t'></div>
var DOM = KISSY.DOM , t = DOM.query(".t")[0];
console.log(DOM.hasClass(t,"t")); // => true
DOM.removeClass(t,"t");
console.log(DOM.hasClass(t,"t")); // => false
KISSY.Node
Node 包括 dom , event , anim 模块的所有功能, 推荐采用 Node 模块功能同官方 kissy node的基本保持一致文档地址:
http://docs.kissyui.com/docs/html/api/core/node/ 。不同的地方会再稍后做统一说明
quickstart
如何使用这个模块?很简单
var $ = KISSY.all;
'$' 你可以理解就是jquery的jQuery/$ ,你可以像使用jquery一样去使用这个接口了。 链式操作你会喜欢的! 一个例子
$('.navbar').addClass('floding').c_children().item(3).c_add('.bd').c_animate({top:100}).pause().stop().... //还能再长点吗?
Api 列表
c_getDOMNodes end equals c_add item slice scrollTop scrollLeft height width c_appendTo c_prependTo c_insertBefore c_insertAfter c_animate stop run pause resume isRunning isPaused show hide toggle fadeIn fadeOut fadeToggle slideDown slideUp slideToggle c_filter test clone empty replaceWith parent hasClass c_addClass removeClass replaceClass toggleClass val text toggle offset scrollIntoView c_next c_prev c_first c_last c_siblings c_children contains remove contains innerWidth innerHeight outerWidth outerHeight c_on c_detach fire all len
功能说明
- 以上api的使用,可直接参考
http://docs.kissyui.com/docs/html/api/core/node/ 地址的api文档
- len 为新增api 函数,即获取node长度
$('a').len(); // number , 同$('a').length;
注意
有以下几点,必须要注意
1: 所有方法的api名称大部分与 kissy官方文档保持一致。 开放js在部分api前面增加了 "c_"前缀, 但功能和原api保持一致比如kissy中的api 是 getDOMNodes , add ,children ,在开放js中使用,需要改成 c_getDOMNodes, c_add ,c_children, 具体参考上面“api列表”
2:部分kissy node的api,开放js中不支持, 其中包括append prepend before after html attr相关 prop hasProp css index data removeData hasData unselectable 使用的时候需要额外注意,不要使用非 #api列表#中的api
3: 在kissy官方文档中, api ‘filter next prev first last siblings children’,都支持过滤条件这个参数,这个过滤条件在开放js这边,目前只支持字符串,不支持函数过滤
如 kissy官方文档
http://docs.kissyui.com/docs/html/api/core/dom/first.html#dom.first 中提到filter支持 string|function ,开放js这边,只支持string,不支持function代码示例:
KISSY.all('.bd').c_children('.j_c'); //所有class为j_c的孩子节点,这是正确的 KISSY.all('.db').c_children(function(){return xxx;}) //这种写法是不支持的
Enjoy it。
KISSY.Event
on
调用 KISSY.Event.on(node,eventName,fn) 给节点注册某个事件的处理器.
var DOM = KISSY.DOM , Event = KISSY.Event , t = DOM.query(".t")[0];
Event.on(t,"click",function(e){
alert("带有样式t的第一个元素被点击了");
});
remove
调用 KISSY.Event.remove(node,eventName,fn) 去除节点上某个事件的处理器 eventName , fn 可选 :
eventName 指定 , fn 不指定时清除某个事件的所有处理器 eventName 不指定 , fn 不指定时清除节点所有事件的所有处理器
注意:fn 如果指定那么必须和调用 on 时的处理器函数一致
var DOM = KISSY.DOM , Event = KISSY.Event , t = DOM.query(".t")[0];
function onClick(e){
alert("带有样式t的第一个元素被点击了");
}
Event.on(t,"click",onClick);
Event.remove(t,"click",onClick); // 点击元素 t 将不起作用
fire
调用 KISSY.Event.fire(node,eventName) 将会触发该节点上所有已经注册了eventName的事件函数
var DOM = KISSY.DOM , Event = KISSY.Event , t = DOM.query(".t")[0];
Event.on(t,"click",function(e){
alert("带有样式t的第一个元素被点击了");
});
Event.on(t,'click');//页面将会弹出alert
EventObject
当事件触发后,传递给事件处理器参数的事件对象类型
var DOM = KISSY.DOM , Event = KISSY.Event , t = DOM.query(".t")[0];
Event.on(t,"click",function(e){
// e 是 EventObject 类型
});
这种型的对象具备以下属性
type
事件类型,可从事件处理器中获取触发事件的类型
var DOM = KISSY.DOM , Event = KISSY.Event , t = DOM.query(".t")[0];
Event.on(t,"click",function(e){
console.log(e.type); // => "click"
});
target
类型 HTMLNode ,事件触发源节点,可用于事件委托情景的事件源头跟踪
pageX
类型 Number,事件触发时鼠标相对页面根节点横坐标的位置,仅在鼠标相关事件中有效.
pageY
类型 Number,事件触发时鼠标相对页面根节点纵坐标的位置,仅在鼠标相关事件中有效.
altKey
类型 Number,事件触发时是否按下了 Alt 键,仅在键盘相关事件中有效
ctrlKey
类型 boolean,事件触发时是否按下了 Ctrl 键,仅在键盘相关事件中有效
metaKey
类型 boolean,事件触发时是否按下了 mac 下的 meta 键,仅在键盘相关事件中有效
shiftKey
类型 boolean,事件触发时是否按下了 Shift 键,仅在键盘相关事件中有效
keyCode
类型 Number,事件触发时的按键数值,仅在键盘事件中有效
which
类型 Number,表示事件触发时鼠标的按键值
- 1 表示左键
- 2 表示中键
- 3 表示右键
currentTarget
类型 HTMLNode,表示事件触发所在当前节点.
relatedTarget
类型 HTMLNode,表示事件触发所在相关节点,仅在 mouseover ,mouseout 时有效
UA
KISSY.UA 表示用户浏览器版本信息的属性,不匹配用户浏览器的属性为undefined,具体包括
- UA.gecko : gecko 引擎版本号
- UA.webkit : webkit 引擎版本号
- UA.ie : ie 版本号
- UA.firefox : firefox 版本号
- UA.chrome : chrome 版本号
- UA.opera : opera 版本号
- UA.safari : safari 版本号
- UA.presto: presto 版本号
- UA.trident : trident 版本号
- UA.shell : shell 版本号
http://docs.kissyui.com/1.1.6/ua/index.html#prop_trident
Anim
KISSY.Anim 动画功能函数:
KISSY.Anim(node,toStyle,duration,easing,callback)
- node (HTMLNode): 将要动画的节点,
- toStyle (Object): 结束样式对象,例如 { width:"100px",height:"100px"}
- duration (Number): 动画持续时间,以秒为单位,默认 1
- easing (String) – 默认为 ‘easeNone’ , 动画平滑函数, 可取值 “easeNone”,”easeIn”,”easeOut”,”easeBoth”,”easeInStrong”, “easeOutStrong”,”easeBothStrong”,”elasticIn”,”elasticOut”, “elasticBoth”,”backIn”,”backOut”,”backBoth”, bounceIn”,”bounceOut”,”bounceBoth”.
- call