JS API

现在的位置: 首页 > 综合 > 正文

2013年10月31日 ⁄ 综合 ⁄ 共 27452字 ⁄ 字号小中大 ⁄ 评论关闭

语言相关

数组

建立

通过变量赋值为 [] 来建立一个数组：

   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]

对数组中每一个元素执行回调函数

回调函数可以有三个参数：当前元素，当前元素的索引和当前的数组对象。

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]

过滤数组

回调函数可以有三个参数：当前元素，当前元素的索引和当前的数组对象。

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

 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

调用 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

【上篇】Android中的Cursor
【下篇】JTextArea文本及时的刷新与添加

作者: aurore

该日志由 aurore 于10年前发表在综合分类下，最后更新于 2013年10月31日.
转载请注明: JS API | 学步园 +复制链接

抱歉!评论已关闭.

返回首页

（其他合作也可洽谈）

必威体育

必威电竞

学步园

JS API

语言相关

数组

对象

函数

字符串

数字

Math

Date

RegExp

全局变量（函数）

dom相关

document

Node

HTMLInputElement

HTMLSelectElement

浏览器相关

淘宝类库

KISSY

KISSY.DOM

KISSY.Node

quickstart

Api 列表

功能说明

注意

KISSY.Event

EventObject

UA

Anim

作者: aurore

书签

最新文章New

本站推荐

返回首页