jqMobi学习笔记----中文API指南

原文出处：http://www.xuebuyuan.com/1975792.html

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 函数(中英

.map(elements,callback)//把当前匹配集合中的每个元素传递给函数，产生包含返回值的新JQMobi 对象。

.each(elements,callback)//对 jQMobi 对象进行迭代，为每个匹配元素执行函数。

.extend(target,{params})//给一个对象扩展一个额外的元素

.isArray(data)//判断是否为数组，返回值为布尔值。

.isFunction(data)//判断是否为函数返回值为布尔值

.isObject(param) //判断是否为对象返回为布尔值

.ready(callback)//页面加载完成后开始运行

.find(selector)// 根据已给的选择器查找所有下级元素

.html(['newhtml']) // 取得/设置该元素的.innerHTML

.text(['newtext']) //取得/设置该元素的innerText

.css('property',['value'])//获得/设置元素CSS指定属性的值

.empty()//设置该元素的.innerHHML一空字符串

.hide() //设置该元素CSS的display属性为"none"

.show() //设置该元素CSS的display属性为"block"

.toggle()//切换该元素的CSS的display属性（显示/隐藏）

.val(["value"])//获得该元素的value属性

.attr("attribute",["value"])//获得/设置这个元素的属性

.removeAttr("attribute") //移除当前元素的该属性

.remove()//从DOM中移除指定元素

.addClass("className")//给指定的元素添加该名称的css类

.removeClass("className")//移除指定元素该名称的css类

.hasClass("className",[_element]) //检查一个元素时候含有该名称的类

.append(element,[insert])//向每个匹配的元素内部后置内容。

.prepend(element)//向每个匹配的元素内部前置内容。

.insertBefore(target)//把匹配的元素插入到另一个指定的元素集合的前面。

.insertAfter(target)//把匹配的元素插入到另一个指定的元素集合的后面。

.get([index])//获得基于. index ()返回的第一个元素

.offset()//计算元素在屏幕上的位置

.parent(selector)//返回该元素的父元素

.children(selector)//返回该元素的后代元素

.siblings(selector)//获得匹配元素集合中所有元素的同辈元素。

.closest(selector,[context])//从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素。

.filter(selector)//将匹配元素集合缩减为匹配指定选择器的元素。

.not(selector)//返回从匹配元素集合中删除该元素集合。

.data(key,[value])//获得/设置一个data-*属性。

.end() //回滚jqMobi元素当过滤器被应用时

.clone()//克隆节点到知道集合

.size() //返回匹配元素数量。

.serialize(grouping)//将表单内容序列化为字符串。

.jsonP(options)//执行JSONP请求，允许跨域

.bind("event",function(){})//向匹配元素附加一个或更多事件处理器

.unbind("event",[callback])//从匹配元素移除一个被添加的事件处理器

.one("event",callback)//向匹配元素添加事件处理器。每个元素只能触发一次该处理器。

.delegate(selector,"event",callback)//向匹配元素的当前或未来的子元素附加事件处理器

.undelegate(selector,"event",[callback])//从匹配元素移除一个被添加的事件处理器

.on("event",selector,callback)//类似于 .delegate()

.off("event",selector,[callback])//删除.on()添点的事件处理器

.trigger("event",data)//触发事件，并传入一个数据（可选）

.proxy(callback,context)//创建一个代理函数,改变该函数中'this'作用域

jQMobi助手调用

.param() //序列化一个JSON对象为键/值对字符串

parseJSON(string) //向后兼容JSON解析调用。使用浏览器原生JSON解析器

.parseXML(string)//解析字符串并返回一XML文档的版本

.uuid //Utility function tocreate a pseudo GUID

.uuid //用来来创建一个伪GUID

.Event(type,props) //创建一个内部使用的自定义事件

jQMobi操作系统检测

$.os.webkit //如果浏览器为webkit核心，返回true

$.os.android //如果用户设备为android，返回true

$.os.ipad //如果用户设备为ipad，返回true

$.os.iphone //如果用户设备为iphone，返回true

$.os.webos //如果用户设备为webos，返回true

$.os.touchpad //如果用户设备为touchpad，返回true

$.os.ios //如果用户设备为iPad或iPhone，返回true

$.os.blackberry //如果用户设备为黑莓PlayBook或OS> = 6，返回true

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

jqUi API 函数 ($.ui)

.loadDefaultHash //布尔值设置应用开始后是否从hash加载panel(默认为true)

.blockUI(opacity) //产生一遮罩层并锁住UI

-Opacity 为遮罩层透明度。

.unblockUI() //删除遮罩层开启ui

.removeFooterMenu() //删除app底部的导航栏

.showNavMenu //布尔值，是否显示底部导航栏

.autoLaunch //布尔值，是否自动运行jqUi

.isAjaxApp // 布尔值，为true时如同<a>标签设有data-refresh-ajax=trueanddata-persist-ajax=true 属性

.showLoading //布尔值，显示或隐藏ajax请求时表示正在加载的旋转体（就是 “无限菊花”中的菊花）

.launch() //运行jqUi。如果autoLaunch设为true，DOM加载完时调用.launch()，

.showBackButton //布尔值，是否显示返回按钮

.resetScrollers //布尔值，在导航panels时重置滚动条位置

.ready(function) //当jaUi已加载，并完全运行时执行传入的函数

.setBackButtonStyle(class) //重写返回按钮的class名称

.goBack() //发起一返回转场

.clearHistory() //清除历史队列

.updateBadge(target,value,[position]) //给选定的目标添加标记

演示地址：http://blog.siyue.cc/jqmobi/lib/#uiremovebadge

.removeBadge(target) //删除为选定的目标添加的标记

.toggleNavMenu([force]) //显示或隐藏底部导航菜单

.toggleHeaderMenu([force]) //显示或隐藏头部菜单

.toggleSideMenu([force]) //显示或隐藏侧边栏菜单

.updateNavbarElements(elements) //更新导航栏下的元素

.updateSideMenu(elements) //更新导航栏菜单下的元素

.setTitle(value) //为当前panel设置标题

.setBackButtonText(value) //重写返回按钮的文字内容

.showMask(text) //显示表示正在加载的遮罩层

.hideMask() //隐藏已表示的加载遮罩层

.showModal() //加载一内容 panel 在模式窗口

.hideModal() //隐藏模式窗口，并删除已加载进去的内容

.updateContentDiv(id,content) //更新指定id panel的HTML

.addContentDiv(id,content,title) //动态创建一个新panel

.loadContent(target,newTab,goBack,transition)//发起转场或通过ajax加载

.scrollToTop(id) //滚动到panel顶部

.slideTransition(prevPanel,currPanel,goBack)//发起滑动转场

.finishTransition(oldDiv) //在每次转场结束时调用，以隐藏旧DIV并重设正在进行的转场变化。

jQMobi指南（五）jq.Plugins用法

1.jq.scroller

用法：

1）.给滚动的可见区域创建与该区域相同高宽的外部container DIV

1. <div id="my_div_container"style="width:100%;height:300px">

2.

3. </div>

复制代码

2）.创建包含滚动内容的DIV

1. <div id=”my_div” >

2.

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}