项目地址:http://quojs./
如何使用 QuoJS使用的命名空间是$$,所以如果你需要的话,你还可以使用其它的JavaScript类库例如(jQuery,Zepto...)使用通用符号$。 // Find all elements in
查询方法 QuoJs有DOM元素查询引擎与其它著名的类库非常相似.你已经使用的jQuery的很多方法在这里都可以使用. // jQuery的支持的查询方法
.get(index)
.find('selector')
.parent()
.siblings('selector')
.children('selector')
.first()
.last()
.closest('selector')
.each(callback)
元素方法QuoJs有DOM元素查询引擎与其它著名的类库非常相似.你已经使用的jQuery的很多方法在这里都可以使用. // Get/Set element attribute .attr('attribute') .attr('attribute', 'value') .removeAttr('attribute') // Get/Set the value of the "data-name" attribute .data('name') .data('name', 'value') // Get/Set the value of the form element .val() .val('value') // Show/Hide a element .show() .hide() // get object dimensions in px .offset('selector') .height() .width() // remove element .remove()样式方法 QuoJS可以轻松管理你任何DOM元素的CSS样式,这些方法很箱子,你很容易记住所有的CSS方法 // set a CSS property .style('css property', 'value') // add/remove a CSS class name .addClass('classname') .removeClass('classname') .toggleClass('classname') // returns true of first element has a classname set .hasClass('classname') // Set a style with common vendor prefixes .vendor('transform', 'translate3d(50%, 0, 0)'); $$('article').style('height', '128px'); $$('article input').addClass('hide'); var houses = $$('.house'); if (houses.hasClass('ghost')) { houses.addClass('buuhh'); }
DOM操作方法
这些方法允许我们插入/更新现有的元素,里面的内容。
// get first element's .innerHTML .html() // set the contents of the element(s) .html('new html') // get first element's .textContent .text() // set the text contents of the element(s) .text('new text') // add html (or a DOM Element) to element contents .append(), prepend() // If you like set a new Dom Element in a existing element .replaceWith() // Empty element .empty() $$('article').html('tapquo'); var content = $$('article').html(); //content is 'tapquo'
事件处理
每一个前端项目需要一个高效的事件管理,你可以创建自己的活动,以及现有的订阅。
// add event listener to elements
.on(type, [selector,] function);
// remove event listener from elements
.off(type, [selector,] function);
// triggers an event
.trigger(type);
//If loaded correctly all resources
.ready(function);
// Subscribe for a determinate event
$$(".tapquo").on("tap", function);
// Trigger custom event
$$(".quojs").trigger("loaded");
// Loaded page
$$.ready(function() {
alert("QuoJS rulz!");
});
手势事件
既然QuoJs支持浏览器的触摸事件,那么你有无数的事件和手势来帮助你做任何一个项目 //Tap event, common event
.tap(function);
//Long tap event (650 miliseconds)
.hold(function);
//A tap-delay event to combine with others events
.singleTap(function);
//If you send two singleTap
.doubleTap(function);
滑动方法
不仅有基本的滑动方法,常见的应用程序中有很多的滑动你都可以使用 .swipe(function);
//Detect if is swipping
.swiping(function);
//Swipe directions
.swipeLeft(function);
.swipeRight(function);
.swipeDown(function);
.swipeUp(function);
捏方法(类似iphone图片缩小的手势
As with the previous gesture, QuoJS have easy control over this
gesture and its variations.
旋转方法(Rotate
methods)
Ajax方法 $$.get(url, [parameters], [callback], [mime-type]);
$$.post(url, [parameters], [callback], [mime-type]);
$$.put(url, [parameters], [callback], [mime-type]);
$$.delete(url, [parameters], [callback], [mime-type]);
$$.json(url, [parameters], [callback]);
$$.json(url, {id: 1980, user: 'dan'}, function(data){ ... });
$$.ajax({
type: 'POST', // defaults to 'GET'
url: 'http://rest',
data: {user: 'soyjavi', pass: 'twitter'},
dataType: 'json', //'json', 'xml', 'html', or 'text'
async: true,
success: function(response) { ... },
error: function(xhr, type) { ... }
});
//Default Settings
$$.ajaxSettings = {
async: true,
success: {},
error: {},
timeout: 0
};
//Set de default timeout to 1 second (1000 miliseconds)
$$.ajaxSettings.timeout = 1000;
//Set de default callback when ajax request failed
$$.ajaxSettings.error = function(){ ... };
$$.ajaxSettings.async = false;
var response = $$.json('http://', {id: 1980, user: 'dan'});
环境事件 The environment object contains useful information to learn more about your device. var env = $$.environment();
env.browser //[STRING] Browser of your mobile device
env.isMobile //[BOOLEAN]
env.os.name //[STRING] iOS, Android, Blackberry...
env.os.version //[STRING] Versión of OS
env.screen //[OBJECT] With properties: width & height
|
|