jqMobi指南系列教程是《 jqMobi Javascript Frameworks Cheat Sheet》 的中文版

jqMobi指南系列教程是《 jqMobi JavascriptFrameworks Cheat Sheet》 的中文版,详细介绍了jqMobi.

jqMobi指南（一）:介绍jqMobi组成

jqMobi是针对HTML5浏览器的JavaScript框架
它是由三个部分组成：
jQMobi（一个极快的查询选择库，支持W3C查询）
jqUi（运行在WebKit浏览器之上的移动应用程序的UI/UX库）
jqPlugins（移动应用运行在WebKit浏览器的插件）。
 
应用的前期准备工作：
下载jqMobi框架
https://github.com/appmobi/jQ.Mobi
在应用中使用jqMobi，通过加入下面的script标记在你的HTML文件里：
1.  <script  type="text/javascript"charset="utf-8" src="jq.mobi.min.js"></script>
复制代码
在应用程序中使用/引用包括所有jqPlugins，通过加入下面的script标签在你的HTML文件的标记里：
<scripttype="text/javascript"charset="utf-8"src="jq.web.min.js"></script>
如果有需要你也可单个引用插件，例如
1.  <scripttype="text/javascript" charset="utf-8"src="plugins/jq.scroller.js"></script>
复制代码
通过添加下面的script标签和link标签在你的应用里引用jqUi
1.  <scripttype="text/javascript"charset="utf-8"src="ui/jq.ui.min.js"></script>
2.  <linkrel="stylesheet"type="text/css" href="jq.ui.css"/>
复制代码
jqMobi组件

名称	内容
jqMobi	jq.mobi.min.js一个速度极快的查询选择工具，为Html5浏览器做了优化
jqPlugins	Jq.web.min.js-为运行在webkit核心浏览器的移动应用而做的插件，既可以用它来开发移动app也可用在传统的手机web开发中。   包括：   jq.alphatable, jq.carousel,  jq.css3animate,  jq.drawer,   jq.passwordBox, jq.swipeListener, jq.scroller,  jq.selectBox, and jq.template
jqUi	Jq.ui.min.js -为建立针对webkit核心浏览器的jqMobi移动应用而设的 UI/UX 框架，     由css3animate, passwordBox, scroller, and  selectBox jqPlugins的几个组件加在一起组成的：   固定的标题栏，自动滚动的内容面板，   一个可选的Navbar细分您的应用程序

jqMobi指南（二）：jqMobi（查询选择库）之用法（Usage）：
原文（《jqMobi Javascript Frameworks Cheatheet(jqmobi 1.0),》）
 
【译文】：
加入以下script标记在你的html文件中以使用jQMobi
1.  <scriptsrc="jq.mobi.min.js"></script>
复制代码
这将创建两个可使用的对象。它不会覆盖一个预先存在的$对象.
1.  $("#main")
2.  jq("#main")
复制代码

查询选择器 支持所有符合W3C标准的查询，如下选择都被支持： 1.  $("input[type='text']")/下面的选择不被浏览器支持 2.  $("input:text") 复制代码 在某些函数里，会用到一个额外的选择器。这有可能是一个字符串、数组、或者一个jQMobi 对象，目前还不支持函数。

语法：
基本的调用
1.  $("#id").hide()
复制代码
列举Dom元素、选择器、节点列表，或者html字符串
1.  $("span").bind("click",function({console.log("clicked");});//->查找所有span元素并绑定一个click事件
复制代码
通过传递一HTML字符串来创建相应的对象
1.  var myDiv=$("<divid='foo'>") //创建并返回一个div对象
复制代码

jqMobi使用Ajax  1.  .get(url,callback) //发起一个到该URL的Ajax请求并将返回的结果用在回调函数中; 2.  .post(url,data,callback,dataType) //用传入的数据向该URL发起一个Ajax的POST请求并将返回的结果用在回调函数中。可传入一个可选的数据类型，因为有的WEB服务器需要这个头部。 3.  .getJSON(url,data,callback) //用传入的数据向该URL发起一个Ajax请求，并将从应答中得到的json对象传到回调函数，同时执行该回调函数。 复制代码 如果需要更多的入口，以下信息会被用到； 1.  .ajax {  2.     type:'POST', //默认为GET  3.     url:'/api/getinfo', //默认为window.location  4.     contentType:'application/json', //默认为application/x-www-form-urlencoded  5.     headers:{},  6.     dataType:'application/json', //默认为text/html  7.     data:{username:foo}, //可以是一个键/值对字符串或对象。如果是一个对象,可用调用$serialize函数把该对象转换为一键/值对字符串。 8.     success:function(data){}, //Ajax请求成功时调用的函数 9.     error:function(data){}, //Ajax请求出错时调用的函数 10. }    复制代码

在Ajax的GET请求时，如果请求的url中包含了"=？"字样，将会发起一个jsonp请求。
插件

jQMobi具有可扩展性，通过添加插件的方式来扩展。
要创建一个插件，传递一个主要jqMobi对象的参照继承$.fn对象。

jQMobi指南（三）jQMobiAPI 函数(中英文对照）

《jqMobi JavascriptFrameworks Cheat heet(jqmobi 1.0)》

.map(elements,callback)

//Executes callback function on each element
.map(elements,callback)//把当前匹配集合中的每个元素传递给函数，产生包含返回值的新JQMobi 对象。
.each(elements,callback)//Iterate throughelements and execute callback
.each(elements,callback)//对 jQMobi 对象进行迭代，为每个匹配元素执行函数。
.extend(target,{params})//Extends anobject with additional arguments
.extend(target,{params})//给一个对象扩展一个额外的元素
.isArray(data)//Returns true/false if datais an array
.isArray(data)//判断是否为数组，返回值为布尔值。
.isFunction(data)//Returns true/false ifdata is a function
.isFunction(data)//判断是否为函数返回值为布尔值
.isObject(param)//Returns true/false ifparam is an object
.isObject(param) //判断是否为对象返回为布尔值
.ready(callback)// Callback executed whenDOMContentLoaded happens
.ready(callback)//页面加载完成后开始运行
.find(selector)// Find all chidlren thatmatch the given selector
.find(selector)// 根据已给的选择器查找所有下级元素
.html(['newhtml']) // Get/Set the elements.innerHTML
.html(['newhtml']) // 取得/设置该元素的.innerHTML

.text(['newtext']) // Get/Set the elements .innerTEXT
.text(['newtext']) //取得/设置该元素的innerText
.css('property',['value'])//Get/Set theelements css property to value
.css('property',['value'])//获得/设置元素CSS指定属性的值
.empty()//Sets the elements .innerHTML toan empty string
.empty()//设置该元素的.innerHHML一空字符串
.hide()//Sets the elements display cssattribute to "none"
.hide() //设置该元素CSS的display属性为"none"
.show()//Sets the elements display cssattribute to "block"
.show() //设置该元素CSS的display属性为"block"
.toggle()//Togglesthe elements display cssattribute
.toggle()//切换该元素的CSS的display属性（显示/隐藏）
.val(["value"])//Get/Set the elementsvalue property
.val(["value"])//获得该元素的value属性
.attr("attribute",["value"])//Get/Setthe elements attribute
.attr("attribute",["value"])//获得/设置这个元素的属性
.removeAttr("attribute")  //Removesthe attribute from the elements
.removeAttr("attribute")  //移除当前元素的该属性
.remove()//Remove an element from the Dom
.remove()//从DOM中移除指定元素
.addClass("className")//Adds thecss class name to the selected elements
.addClass("className")//给指定的元素添加该名称的css类
.removeClass("className")//Removesa css class from the selected lements
.removeClass("className")//移除指定元素该名称的css类
.hasClass("className",[_element])  //Checksto see if an element has a class
.hasClass("className",[_element])  //检查一个元素时候含有该名称的类
.append(element,[insert])//Appends anelement to the selected elements
.append(element,[insert])//向每个匹配的元素内部后置内容。
.prepend(element)//Prepends an element tothe selected elements
.prepend(element)//向每个匹配的元素内部前置内容。
.insertBefore(target)//Inserts acollection before the target (adjacent)
.insertBefore(target)//把匹配的元素插入到另一个指定的元素集合的前面。

.insertAfter(target)//Inserts a collection after the target (adjacent)
.insertAfter(target)//把匹配的元素插入到另一个指定的元素集合的后面。
.get([index])//Getraw DOM element based onindex. () returns first element
.get([index])//获得基于. index ()返回的第一个元素
.offset()//Calculates the first elementsoffset on the screen
.offset()//计算元素在屏幕上的位置
.parent(selector)//Returns the parentnodes based off selector
.parent(selector)//返回该元素的父元素
.children(selector)//Returns the childrenof the elements
.children(selector)//返回该元素的后代元素
.siblings(selector)//Returns the siblingsof the elemnts
.siblings(selector)//获得匹配元素集合中所有元素的同辈元素。
.closest(selector,[context])//Returnstheclosest element based off selector
.closest(selector,[context])//从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素。
.filter(selector)//Filters the elementsbased off selector
.filter(selector)//将匹配元素集合缩减为匹配指定选择器的元素。
.not(selector)//Return all matches that doNOT match the selector
.not(selector)//返回从匹配元素集合中删除该元素集合。
.data(key,[value])//Gets/Setsa data-*attribute for the param
.data(key,[value])//获得/设置一个data-*属性。
.end()//Rolls back the jqMobi elementswhen filters were applied
.end() //回滚jqMobi元素当过滤器被应用时
.clone()//Clones the nodes in thecollection
.clone()//克隆节点到知道集合
.size()//Returns the number of elements ina collection
.size() //返回匹配元素数量。
.serialize(grouping)//Serializes a forminto a query string
.serialize(grouping)//将表单内容序列化为字符串。
.jsonP(options)//Execute a jsonP call,allowing cross domain scripting
.jsonP(options)//执行JSONP请求，允许跨域
.bind("event",function(){})//Bindsa function to the event listener
.bind("event",function(){})//向匹配元素附加一个或更多事件处理器
.unbind("event",[callback])//Unbindsa function to the event listener
.unbind("event",[callback])//从匹配元素移除一个被添加的事件处理器
.one("event",callback)//Bindevent to each element - only executes once
.one("event",callback)//向匹配元素添加事件处理器。每个元素只能触发一次该处理器。
.delegate(selector,"event",callback)//Delegatean event bassed off selector
.delegate(selector,"event",callback)//向匹配元素的当前或未来的子元素附加事件处理器
.undelegate(selector,"event",[callback])//Unbindan event registered through                                        delegate
.undelegate(selector,"event",[callback])//从匹配元素移除一个被添加的事件处理器
.on("event",selector,callback)//类似于 .delegate()
.off("event",selector,[callback])//删除.on()添点的事件处理器
.trigger("event",data)//Triggeran event and pass inoptional data
.trigger("event",data)//触发事件，并传入一个数据（可选）
.proxy(callback,context)//Creates a proxyfunction so the ‘this’context can
be changedin the function
.proxy(callback,context)//创建一个代理函数,改变该函数中'this'作用域

jQMobi助手调用

.param() //Serialize a JSON object intoKVP for aquerystring
.param() //序列化一个JSON对象为键/值对字符串
 
.parseJSON(string) //Backwardscompatability JSON parsing call.  Uses the                    browsers native JSON parser
parseJSON(string) //向后兼容JSON解析调用。使用浏览器原生JSON解析器
 
.parseXML(string) //Parses a string and returns a XML documentversion
.parseXML(string)//解析字符串并返回一XML文档的版本
 
.uuid  //Utility function tocreate a pseudo GUID
.uuid  //用来来创建一个伪GUID
 
.Event(type,props) //Creates a customevent to be used internally
.Event(type,props) //创建一个内部使用的自定义事件

jQMobi操作系统检测

$.os.webkit    //True if webkit found in the user agent
$.os.webkit     //如果浏览器为webkit核心，返回true
 
$.os.android    //True ifanroid user agent
$.os.android    //如果用户设备为android，返回true
 
$.os.ipad      //True if iPad user agent
$.os.ipad       //如果用户设备为ipad，返回true
 
$.os.iphone    //True if iPhone user agent
$.os.iphone    //如果用户设备为iphone，返回true
 
$.os.webos     //True if WebOS detected
$.os.webos      //如果用户设备为webos，返回true
 
$.os.touchpad   //True ifWebOS and Touchpad user agent
$.os.touchpad   //如果用户设备为touchpad，返回true
 
$.os.ios       //True if iPad or iPhone
$.os.ios       //如果用户设备为iPad或iPhone，返回true
 
$.os.blackberry //True if Blackberry PlayBook or OS >=6
$.os.blackberry //如果用户设备为黑莓PlayBook或OS> = 6，返回true
 

jQMobi指南（四）-jqUi用法及 jqUi API 函数 ($.ui)

jqUi API 函数 ($.ui)

.loadDefaultHash //Boolean to load/notloadpanel from hash when app started  
                 (default is True)
.loadDefaultHash //布尔值 设置应用开始后是否从hash加载panel(默认为true)
 
.blockUI(opacity) //Throw up a maskandblock the UI
.blockUI(opacity) //产生一遮罩层并锁住UI
-Opacity 为遮罩层透明度。
.unblockUI() //Removes the UI mask
.unblockUI() //删除遮罩层开启ui
 
.removeFooterMenu() //Removes thebottomnav bar from app
.removeFooterMenu() //删除app底部的导航栏
 
.showNavMenu //Boolean to show bottomnavbar
.showNavMenu //布尔值，是否显示底部导航栏
.autoLaunch //Boolean to auto launchjqUi
.autoLaunch //布尔值，是否自动运行jqUi
.isAjaxApp //Boolean that when truetreatsevery request as if the anchor had
           data-refresh-ajax=true and data-persist-ajax=true
 
.isAjaxApp // 布尔值，为true时如同<a>标签设有data-refresh-ajax=trueanddata-persist-ajax=true  属性
.showLoading //Boolean to show/notshowloading spinner on ajax requests
.showLoading //布尔值，显示或隐藏ajax请求时表示正在加载的旋转体（就是 “无限菊花”中的菊花）
.launch() //Launch jqUi. If autoLaunchistrue, gets called on DOMContentLoaded
.launch() //运行jqUi。如果autoLaunch设为true，DOM加载完时调用.launch()，
 
.showBackButton //Boolean to show thebackbutton
.showBackButton //布尔值，是否显示返回按钮
 
.resetScrollers //Boolean to resetthescroller position when navigating panels
.resetScrollers //布尔值，在导航panels时重置滚动条位置
 
.ready(function) //Function to firewhenjqUi is ready and completed launch
.ready(function) //当jaUi已加载，并完全运行时执行传入的函数
 
.setBackButtonStyle(class) //Overridetheback button class name
.setBackButtonStyle(class) //重写返回按钮的class名称
.goBack() //Initiate a backtransition
.goBack() //发起一返回转场
.clearHistory() //Clear the historyqueue
.clearHistory() //清除历史队列
 
.updateBadge(target,value,[position])//Updatea badge on the selected target
.updateBadge(target,value,[position]) //给选定的目标添加标记
演示地址：http://blog.siyue.cc/jqmobi/lib/#uiremovebadge
 
.removeBadge(target) //删除为选定的目标添加的标记
.toggleNavMenu([force]) //Toggle thebottomnav menu
.toggleNavMenu([force]) //显示或隐藏底部导航菜单
.toggleHeaderMenu([force]) //Toggle thetopheader menu
.toggleHeaderMenu([force]) //显示或隐藏头部菜单
 
.toggleSideMenu([force]) //Toggle thesidemenu
.toggleSideMenu([force]) //显示或隐藏侧边栏菜单
 
.updateNavbarElements(elements)//Updatethe elements in the navbar
.updateNavbarElements(elements) //更新导航栏下的元素
.updateSideMenu(elements) //Updatetheelements in the side menu
.updateSideMenu(elements) //更新导航栏菜单下的元素
 
.setTitle(value) //Set the title ofthecurrent panel
.setTitle(value) //为当前panel设置标题
 
.setBackButtonText(value) //Overridethetext for the back button
.setBackButtonText(value) //重写返回按钮的文字内容
.showMask(text) //Show the loading mask
.showMask(text) //显示表示正在加载的遮罩层
.hideMask() //Hide the loading mask
.hideMask() //隐藏已表示的加载遮罩层
 
.showModal() //Load a content panel in amodal window
.showModal() //加载一内容 panel 在模式窗口
 
.hideModal() //Hide the modal windowandremove the content
.hideModal() //隐藏模式窗口，并删除已加载进去的内容
 
.updateContentDiv(id,content) //UpdatetheHTML in a content panel
.updateContentDiv(id,content) //更新指定id panel的HTML
.addContentDiv(id,content,title)//Dynamicallycreate a new panel
.addContentDiv(id,content,title) //动态创建一个新panel
 
.loadContent(target,newTab,goBack,transition)//Initiatea transition or load  
                                            via ajax
.loadContent(target,newTab,goBack,transition)//发起转场或通过ajax加载
 
.scrollToTop(id) //Scroll a panel tothetop
.scrollToTop(id) //滚动到panel顶部
.slideTransition(prevPanel,currPanel,goBack)//Initiatea sliding transition
.slideTransition(prevPanel,currPanel,goBack)//发起滑动转场
.finishTransition(oldDiv) //Called atendof each transition to hide the old  
                          div and reset thedoing Transition variable
.finishTransition(oldDiv) //在每次转场结束时调用，以隐藏旧DIV并重设正在进行的转场变化。
 

jQMobi指南（五）jq.Plugins用法

1.jq.scroller

用法：
1）.给滚动的可见区域创建与该区域相同高宽的外部container DIV
1.  <div id="my_div_container"style="width:100%;height:300px">
2.     <!-- div from below goeshere -->
3.  </div>
复制代码
2）.创建包含滚动内容的DIV
1.  <div id=”my_div” >
2.     <!-- content goes here -->
3.  </div>
复制代码
3）.调用下面函数
1.  var scroller =$("#my_div").scroller();
复制代码
 
以对象作为参数传递其他配置选项
1.  var options={
2.    verticalScroll:true,  //vertical scrolling
3.    horizontalScroll:false,  //horizontal scrolling
4.     scrollBars:true  //display scrollbars
5.     vScrollCSS :"scrollBarV", //CSS class for veritcal scrollbar
6.     hScrollCSS :"scrollBarH", //CSS class for horizontal scrollbar
7.     refresh:true, //Adds 'Pullto refresh' at the top
8.    refreshFunction:updateMessage //callback function to execute on pull to
9.  refresh
10. }
11. var scroller =$("#my_div").scroller(options);
复制代码
Note: 你也可通过下面的方法滚动到指定位置
scroller.scrollTo({x:-100,y:-200});
如果你想一直显示滚动条，在你CSS文件里重写下面类的 opacity样式即可
1.  .scrollBarV { opacity:.8 !important}