JX Cheat Sheet

Common Used Methods 常用方法

J = Jx()

J.isUndefined(o): 判断变量的值是否是 undefined
J.isNull(o): 判断变量的值是否是 null
J.isNumber(o): 判断变量的类型是否是 Number
J.isString(o): 判断变量的类型是否是 String
J.isBoolean(o): 判断变量的类型是否是 Boolean
J.isObject(o): 判断变量的类型是否是 Object
J.isArray(o): 判断变量的类型是否是 Array
J.isArguments(o): 判断变量的类型是否是 Arguments
J.isFunction(o): 判断变量的类型是否是 Function
J.$typeof(o): 判断变量类型
J.$return(val): 生成一个返回值是传入的 val 值的函数
J.$try(funcA, funcB, funcC...): 从第一个函数开始try，直到尝试出第一个可以成功执行的函数就停止继续后边的函数，并返回这个成功执行的函数结果
J.extend(beExtendObj, extendObj1, extendObj2): 对一个对象或数组进行扩展
J.clone(o): 克隆一个对象
J.getLength(obj): 获取对象自身具有的属性和方法的数量
J.random(min, max): 生成随机数
J.now(): 获取当前时间时间戳
J.timedChunk(items, process, context, isShift, callback): 通用分时处理函数
J.emptyFunc(): 生成一个空函数
J.rebuild(func, option): 函数的重构方法
J.pass(func, var_args): 给函数传入参数并执行
J.bind(func, context, var_args): 给函数绑定一个上下文对象再执行
J.bindNoEvent: TODO
J.checkJSON: TODO
new J.Class({extend: SuperClass}, {init: function(){},...}): 创建类
new J.Chunk(items, process, context, isShift, callback): 创建分时处理类

D = Jx().dom

D.getDoc(element): 获取元素所属的根文档
D.id(id, doc): 根据 id 获取元素
D.name(name, doc): 根据 name 属性获取元素
D.tagName(tagName, el): 根据 tagName 获取元素
D.getText(element): 获取元素中的文本内容
D.getAttributeByParent(attribute, startNode, topNode): 从起始元素查找某个属性，直到找到，或者到达顶层元素位置
D.node(type, attrObj, win): 生成一个 DOM 节点
D.getScrollHeight(el): 获取文档的 scroll 高度，即文档的实际高度
D.getScrollWidth(el): 获取文档的 scroll 宽度，即文档的实际宽度
D.getClientHeight(el): 获取元素内高度
D.getClientWidth(el): 获取元素内宽度
D.getOffsetHeight(el): 获取元素的外高度
D.getOffsetWidth(el): 获取元素的外宽度
D.getScrollLeft(el): 获取元素的左边已卷动的宽度
D.getScrollTop(el): 获取元素的上边已卷动的宽度
D.setClass(el, className): 设置元素的class属性
D.getClass(el): 获取元素的class属性
D.hasClass(el, className): 判断元素是否含有 class
D.addClass(el, className): 给元素添加 class
D.removeClass(el, className): 给元素移除 class
D.toggleClass(el, className): 对元素 class 的切换方法，即：如果元素用此class则移除此class，如果没有此class则添加此class
D.replaceClass(el, oldClassName, newClassName): 替换元素 oldClassName 为 newClassName
D.setStyle(el, styleName, value): 设置元素的样式，css 属性需要用驼峰式写法，如：fontFamily
D.getStyle(el, styleName): 获取元素的当前实际样式，css 属性需要用驼峰式写法，如：fontFamily
D.addCssText(el, cssText): 添加元素cssText
D.setCssText(el, cssText): 重置元素cssText
D.getCssText(el): 获取元素cssText
D.show(el, displayStyle): 以指定方式如：block，inline，inline-block 显示元素
D.hide(el): 获取元素cssText
D.recover(el): 还原元素原来的display属性
D.isShow(el): 判断元素是否是显示状态
D.getXY(el): 获取元素坐标
D.setXY(el, x, y): 设置元素坐标
D.getRelativeXY(el, relativeEl): 获取元素相对于其他元素坐标
D.getPosX(el): 获取元素left值
D.getPosY(el): 获取元素top值
D.getWidth(el): 获取元素宽度
D.getHeight(el): 获取元素高度
D.getSelectionText(win): 获取选择的文本
D.getTextFieldSelection(el): 获取元素高度
D.contains(parent, child, containSelf): 判断一个节点是否是某个父节点的子节点

E = Jx().event

E.onDomReady(handler): 文档加载完成时事件监听器
E.addEventListener/on(element, eventType, handler,options): 元素添加事件监听器
E.removeEventListener/off(element, eventType, handler): 元素移除事件监听器
E.addObserver(targetModel, eventType, handler): 为自定义Model添加事件监听器
E.addObservers({targetModel : {eventType:handler,eventType2:handler2...} ,... }): 批量为自定义Model添加事件监听器
E.notifyObservers(targetModel, eventType, argument): 触发自定义Model事件的监听器
E.removeObserver(targetModel, eventType, handler): 移除自定义 Model 事件监听器
new E.Publish(): 消息源发布者的类

JSON = Jx().json

JSON.parse(text, reviver): 解析JSON格式字符串
JSON.stringify(value, replacer, space): 序列化为JSON格式字符串

Jx().date.format(date, formatString)

让日期和时间按照指定的格式显示的方法

var d = new Date();
// 以 YYYY-MM-dd hh:mm:ss 格式输出 d 的时间字符串
J.date.format(d, "YYYY-MM-DD hh:mm:ss");

Jx().number.format(num, pattern)

让日期和时间按照指定的格式显示的方法

J.number.format(12345.999,'#,##0.00');
//out: 12,34,5.99
J.number.format(12345.999,'0');
//out: 12345
J.number.format(1234.888,'#.0');
//out: 1234.8
J.number.format(1234.888,'000000.000000');
//out: 001234.888000

C = Jx().cookie

C.set(name, value, domain, path, hour): 设置一个cookie
C.get(name): 获取指定名称的cookie值
C.remove(name, domain, path): 删除指定cookie,复写为过期

Important Methods 重要方法

H = Jx().http

示例代码：

H.ajax("cgi.web2.qq.com",{
    method: "GET",
    data: null,
    arguments: null,
    onSuccess: function(){},
    onError: function(){},
    onComplete: function(){},
    onTimeout: function(){},
    isAsync: true,
    timeout: 30000,
    contentType: "utf-8",
    type:  "xml"
});

H.ajax(uri, options): Ajax方式请求
H.comet(url, option): comet方式请求
H.load(type, uri, options): 加载样式或脚本文件
H.loadCss(url, option): 加载样式文件
H.loadScript(url, option): 加载脚本文件
H.formSend(url, option): Form方式请求

S = Jx().string

S.toString(o)

将任意变量转换为字符串的方法

S.template(string, data)

多行或单行字符串模板处理

S.isURL(string)

判断是否是一个可接受的 url 串

S.parseURL(string)

分解 URL 为一个对象，成员为：scheme, user, pass, host, port, path, query, fragment

S.buildURL(obj)

将一个对象（成员为：scheme, user, pass, host, port, path, query, fragment）重新组成为一个字符串

S.mapQuery(uri)

将 uri 的查询字符串参数映射成对象

S.test(string, regex, params)

test的方法

S.contains(string1, string2, separator)

判断是否含有指定的字符串

S.trim(string)

清除字符串开头和结尾的空格

S.clean(string)

清除字符串开头和结尾的空格，并把字符串之间的多个空格转换为一个空格

S.camelCase(string)

将“-”连接的字符串转换成驼峰式写法

S.hyphenate(string)

将驼峰式写法字符串转换成“-”连接的

S.capitalize(string)

将字符串转换成全大写字母

S.escapeRegExp(string)

转换 RegExp 正则表达式

S.toInt(string, base)

将字符串转换成整数

S.toFloat(string)

将字符串转换成浮点数

S.toSingleLine(string)

将带换行符的字符串转换成无换行符的字符串

S.toHtml(string)

将字符串转换成html源码

S.toTitle(string)

将字符串转换成用于title的字符串

S.toQueryPair(key, value)

生成已编码的请求字符串对格式 foo1=1

S.toQueryString(obj)

生成已编码的请求字符串格式 foo1=1&foo2=2&foo3=3

S.hexToRgb(string, array)

将颜色 Hex 写法转换成 RGB 写法

S.rgbToHex(string, array)

将颜色 RGB 写法转换成 Hex 写法

S.stripScripts(string, option)

脱去script标签

S.substitute(string, object, regexp)

按规则替换字符串

S.replaceAll(string, reallyDo, replaceWith, ignoreCase)

全局替换指定的字符串

S.byteLength(string)

计算字符串的字节长度

S.cutRight(string, n)

截取指定长度字符串

S.isNumber(string)

是否为数字

S.isEmail(string)

是否为邮箱格式字符

S.cutByBytes(string,n)

截取指定字节长度的字符串

S.encodeHtmlSimple(string)

html正文编码：对需要出现在HTML正文里(除了HTML属性外)的不信任输入进行编码

S.decodeHtmlSimple(string)

html正文解码：对HtmlEncode函数的结果进行解码

S.decodeHtmlSimple2(string)

S.encodeHtmlAttributeSimple(string)

html属性编码：对需要出现在HTML属性里的不信任输入进行编码,注意:

该函数不适用于属性为一个URL地址的编码.这些标记包括:a/img/frame/iframe/script/xml/embed/object... 属性包括:href/src/lowsrc/dynsrc/background/...
该函数不适用于属性名为 style="[Un-trusted input]" 的编码

S.encodeHtmlAttribute(string)

用做过滤HTML标签里面的东东比如这个例子里的<input value="XXXX"> XXXX就是要过滤的

S.encodeHtml(string)

用做过滤直接放到HTML里的

S.encodeScript(string)

用做过滤直接放到HTML里js中的

S.encodeHtml(string)

用做过滤直接放到HTML里的

S.encodeHrefScript(string)

用做过滤直接放到<a href="javascript:XXXX">中的

S.encodeRegExp(string)

用做过滤直接放到正则表达式中的

S.encodeUrl(string)

用做过滤直接URL参数里的比如 http://show8.qq.com/abc_cgi?a=XXX XXX就是要过滤的

S.encodeUriComponent(string)

对需要出现在一个URI的一部分的不信任输入进行编码,例如:
对 <a href="http://search.msn.com/results.aspx?q1=[Un-trusted-input]& q2=[Un-trusted-input]">Click Here!</a>
除[a-zA-Z0-9.-_]以外的字符都会被替换成URL编码

S.vaildTencentUrl(url)

url转向验证,对通过javascript语句载入（或转向）的页面进行验证，防止转到第三方网页和跨站脚本攻击

合法的值

http://xxx.qq.com/hi/redirect.html?url=http://www.qq.com
http://xxx.qq.com/hi/redirect.html?url=a.html
http://xxx.qq.com/hi/redirect.html?url=/a/1.html

非法的值

http://xxx.qq.com/hi/redirect.html?url=http://www.baidu.com
http://xxx.qq.com/hi/redirect.html?url=javascript:codehere
http://xxx.qq.com/hi/redirect.html?url=//www.qq.com

S.vaildUrl(url)

验证并规格化URL: http://web.qq.com/

S.getCharWidth(str,fontsize)

获取字符实际显示宽度

S.cutByWidth(str,fontsize,width)

截取字符串显示宽度

A = Jx().array

A.indexOf(arr, obj, fromIndex): 正向查找数组元素在数组中的索引下标
A.lastIndexOf(arr, obj, fromIndex): 反向查找数组元素在数组中的索引下标
A.forEach(arr, fun /*, contextObj*/): 遍历数组，把每个数组元素作为第一个参数来执行函数
A.filter(arr, fun /*, contextObj*/): 用一个自定义函数来过滤数组
A.some(arr, fun /*, contextObj*/): 遍历数组，把每个数组元素作为第一个参数来执行函数，如果有任意一个或多个数组成员使得函数执行结果返回 true，则最终返回 true，否则返回 false
A.map(arr, fun /*, contextObj*/): 遍历数组，把每个数组元素作为第一个参数来执行函数，并把函数的返回结果以映射的方式存入到返回的数组中
A.every(arr, fun /*, contextObj*/): 遍历数组，把每个数组元素作为第一个参数来执行函数，如果所有的数组成员都使得函数执行结果返回 true，则最终返回 true，否则返回 false
A.reduce(arr, fun /*, contextObj*/): 该数组的每项和前一次调用的结果运行一个函数，收集最后的结果。
A.reduceRight(arr, fun /*, contextObj*/): 与A.reduce功能一致，但从右向左执行
A.toArray(o): 将任意变量转换为数组的方法
A.remove(arr, members): 从数组中移除一个或多个数组成员
A.replace(arr, oldValue, newValue): 替换一个数组成员
A.bubbleSort(arr, compareFunc): 冒泡排序,默认从小到大排序
A.binarySearch(arr, item, compareFunc): 二叉搜索
A.contains(arr, o): 判断arr是否包含元素o
A.uniquelize(arr): 唯一化一个数组，由不重复元素构成
A.intersect(arr1, arr2): 求两个集合的交集
A.minus(arr1, arr2): 求两个集合的差集
A.union(arr1, arr2): 求两个集合的并集

Object-Oriented 面向对象

Jx().$package 创建包

以alloy.app.demo.js为例：

//创建一个匿名package包：
Jx().$package(function(J){
     //这时上下文对象this指向全局window对象
     alert("Hello world! This is " + this);
};

//创建一个名字为alloy.app.demo的package包：
Jx().$package("alloy.app.demo", function(J){
     //这时上下文对象this指向window对象下的alloy.app.demo对象
     alert("Hello world! This is " + this);
};

new J.Class() 创建类

以创建Programer类为例：

Jx().$package(function(J){
    // 创建Person类
    var Person = new J.Class({
        init : function(name){
           this.name = name;
           alert("init");
        },
        showName : function(){
           alert(this.name);
        }
    });

    // 继承Person类
    var Programer = new J.Class({extend : Person}, {
        init : function(name){
           this.name = name;
           alert("init");
        },
        showName : function(){
           alert(this.name);
        }
    });
};

new ClassName() 创建实例

var p1= new Programer("yuanyan1");
var p2= new Programer("yuanyan2");

附：Browser Events 常用浏览器事件

事件	说明
click	鼠标点击时触发此事件
dblclick	鼠标双击时触发此事件
mousedown	按下鼠标时触发此事件
mouseup	鼠标按下后松开鼠标时触发此事件
mouseover	当鼠标移动到某对象范围的上方时触发此事件
mousemove	鼠标移动时触发此事件
mouseout	当鼠标离开某对象范围时触发此事件
keypress	当键盘上的某个键被按下在释放时触发此事件
keydown	当键盘上某个按键被按下时触发此事件
keyup	当键盘上某个按键被按放开时触发此事件
error	出现错误时触发此事件
load	页面内容完成时触发此事件
move	浏览器的窗口被移动时触发此事件
resize	当浏览器的窗口大小被改变时触发此事件
scroll	浏览器的滚动条位置发生变化时触发此事件
blur	当前元素失去焦点时触发此事件
change	当前元素失去焦点并且元素的内容发生改变而触发此事件
focus	当某个元素获得焦点时触发此事件
submit	一个表单被递交时触发此事件
copy	当页面当前的被选择内容被复制后触发此事件
paste	当内容被粘贴时触发此事件
dragdrop	一个外部对象被鼠标拖进当前窗口或者帧
select	当文本内容被选择时的事件
selectstart	当文本内容选择将开始发生时触发的事件
drag	元素被拖动事件
contextmenu	鼠标右键菜单事件
mousewheel	鼠标滚轮事件
customclick	自定义点击事件 [自定义事件]
mouseenter	鼠标进入事件 [自定义事件]
mouseleave	鼠标离开事件 [自定义事件]