// Find all <span> elements in <p> elements
$$('span', 'p');//Subscribe to a tap event with a callback
$$('p').tap(function() {// affects "span" children/grandchildren$$('span', this).style('color', 'red');
});// Chaining methods
$$('p > span').html('tapquo').style('color', 'blue');
// 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()
// 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. .pinch(function);
//Detect if is pinching
.pinching(function);
//Pinch zoom
.pinchIn(function);
.pinchOut(function);
旋轉方法(Rotate methods)
.rotate(function);
//Detect if is rotating
.rotating(function);
//Rotate directions
.rotateLeft(function);
.rotateRight(function);
環境事件 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