jQuery Mobile 和 JSON
基于Jquery Mobile数字校园移动应用实践论文
基于Jquery Mobile的数字校园移动应用实践随着信息技术的迅速发展，数字校园已成为高校信息化建设发展的趋势和学校现代化的标志。
数字校园建设为高校学生与教师的学习生活带来了深刻的影响，它正在改变着学校原有的管理、教学和办公模式。
北京师范大学数字校园信息服务从师生需求出发，结合当代移动应用技术，自主开发了基于jquery mobile技术的数字校园移动应用。
该应用包含了通知公告、校园卡移动充值、教师信息查询、数字校园地图、校内电话黄页五大模块。
数字校园移动应用的推出，受到校园广大师生的一致认可，以校园卡充值为例，学生仅需在手机上即可完成转账充值，同时也节省了教职员工的管理成本与沟通成本。
一、前端架构该应用包括ios和android两个版本。
由于采用jquery mobile 和cordova技术，该应用在平台间的移植成本相对较低。
jquery作为世界知名框架驱动着internet 上的大量网站，在浏览器中提供动态用户体验。
在移动互联时代的今天，jquery 团队引入了jquery mobile（或jqm）。
jqm 的使命是向所有主流移动浏览器提供一种统一体验，使整个internet 上的内容更加丰富。
webkit 是一个开源项目，其起源可追溯到k desktop environment （kde）。
webkit 项目催生了面向移动设备的现代web 应用程序。
目前ios和android的内置浏览器组件均使用webkit内核，而jqm对于webkit的支持非常完善。
jqm目前可以支持多种移动设备，iphone、ipod touch、ipad、android、blackberry、palm、nokia塞班三代等。
phonegap是一个用基于html，css和javascript的创建移动跨平台移动应用程序的快速开发平台，后贡献给apache后更名为cordova。
它使开发者能够利用js和html来访问包括地理定位，加速器，联系人，声音和振动等功能，其拥有丰富的插件，可以以此扩展无限的功能。
jquery-mobile遇到的问题
1、在浏览器中点击一个链接打一个新的页面时，jQuery Mobile接收这个链接，通过AJAX 的方式请求链接页面，并把请求得到的内容注入到当前页面的DOM里而不是新创建一个dom，所以不会加载链接页面的js。
这样会导致用户手动刷新页面时只有当前页面的js有效，也不能根据转场页面自动加载js，所以需要在第一个页面就加载所有的js。
解决方法：把所有的js在访问的第一个页面就全部加载进来，所有的page都写在一个文件里。
2、因为所有的page在一个页面,而且只有一个dom，所以id不能重复解决方法：每个page的元素的id加后缀来区别3、对话框dialog的问题，对话框会把整个page覆盖住，页面四周没有被占满的会是黑色的解决方法：不用dialog，改用弹出层popup4、弹出层popup,没有模态效果，点击其他位置，会消失不见解决方法：page初始化时，增加样式id为弹出层的id$("#id").on({popupbeforeposition: function () {$('.ui-popup-screen').off();}});5、弹出弹出层通过标签弹出弹出层<div data-role=”page”><div data-role=”header”></div><div data-role=”content”><a data-role=”button” href=”# popDiv” data-rel=”popup”>弹出</a></div><div id=”popDiv” data-role=”popup”data-position-to=”window”><!—弹出层要求写的page的content和footer之间→<div data-role=”header”><h3>标题</h3><a data-role=”button” data-rel=”back” data-theme=”a”data-icon=”delete” data-iconpos=”notext” class=”ui-btn-right”></a> <!—关闭按钮→</div><div data-role=”content”></div><div data-role=”footer”></div></div><div data-role=”footer”></div></div>通过js代码调用弹出层$("#id").popup();初始化$("#id").popup("popup");打开$("#id").popup("close");关闭弹出位置data-position-to=“window”,在屏幕的中央，origin:在所单击的控件的上面，“#id”在指定的组件为id的上面6、分组的listview collapsible<div id=” collapsibleID” data-role="collapsible-set" data-theme="b" data-content-theme="d"data-inset="true" class="ui-scrolllistview"><div data-role=” collapsible”><h2>标题AAABBB</h2><ul><li>AAAAAAAAA</li><li>BBBBBBBBB</li></ul></div><div data-role=” collapsible”><h2>标题CCCCCDDDD</h2><ul><li>CCCCCC</li><li>DDDDDDDDD</li></ul></div></div>js代码刷新$("# collapsibleID ").collapsibleset("refresh");7、单选按钮$("#id").attr("checked",true).checkboxradio("refresh");刷新8、下拉菜单select$("#id").selectmenu("refresh");9、input[type=radio] 和label联合使用时，及获取label的值解决方法：<fieldset data-role=”controlgroup”><input type=”radio” name id=”mayradio””radio-a”/><label for=”radio-a”>radio1</label></ fieldset >$("input[type=radio]").bind('click',function(event){$(this).next().text()); //被点击的radio的label的值})10、时间组件mobiscroll-2.2.custom.min.js 的使用obj=$("#id");//id为文本框的idfunction getDateTime(obj){var now = new Date();obj.scroller({preset: 'datetime',theme: 'default',display: 'modal',mode: 'scroller',});}$("#id").scroller('getDate') ;//获取时间参考文档：/datetime/datetime11、listview js代码刷新$("#id").listview("refresh");12、判断是否登录解决方法:因为只有一个页面，所以不能用filter来拦截，所以在每个Page初始化通过js判断有没有登录，如果没有登录window.location.href=”login.jsp”13、页面转场标签:<a data-role=”button” href=”#pageID”>toPage</div>js代码实现转场$.mobile.changePage(“#pageID”,{transition:pop})Transition转场效果：{fade，slide，pop，。
jq解析json的高级用法
jq解析json的高级用法jq是一个轻量级的命令行工具，用于解析和操作JSON数据。
它提供了丰富的功能和高级用法，可以帮助用户更精确地提取和处理JSON数据。
本文将介绍jq解析JSON的高级用法，包括过滤、映射和条件操作等。
第一步：基本用法回顾在开始讨论jq的高级用法之前，我们先回顾一下jq的基本用法。
jq能够将JSON数据转换为人类可读的格式，并且能够输出特定的字段或组合字段的值。
以下是一些常用的命令：1. `.`这个点操作符表示当前对象。
例如：bashecho '{"name": "Alice", "age": 30}' jq '.name'# 输出："Alice"2. .点操作符还可以与其他命令连用，以获取嵌套字段的值。
例如：bashecho '{"user": {"name": "Alice", "age": 30}}' jq ''# 输出："Alice"3. `[]`这个方括号操作符可以用来遍历数组，并逐个输出数组中的元素。
例如：bashecho '[1, 2, 3, 4, 5]' jq '.[]'# 输出：# 1# 2# 3# 4# 5以上是jq的基本用法，用于提取和处理JSON数据中的字段。
接下来，我们将学习一些更高级的用法。
第二步：高级过滤器jq支持一些高级过滤器，用于在JSON数据中进行更复杂的查询和操作。
下面是几个常见的高级过滤器：1. `select()``select()`函数用于根据指定的条件过滤JSON对象。
例如：bashecho '[{"name": "Alice", "age": 30}, {"name": "Bob", "age": 25}]' jq 'select(.age > 28)'# 输出：# {"name": "Alice", "age": 30}2. `map()``map()`函数用于对数组中的每个元素应用指定的操作，并返回一个新的数组。
发展历程 jquery
发展历程 jqueryjQuery（简称为“$”）是一种快速、简洁的JavaScript库，由美国软件工程师John Resig创建于2006年。
它的目标是使JavaScript编写的客户端脚本更加简单，并且能够以一种更统一的方式与HTML文档进行交互。
2006年，jQuery库的第一个版本（1.0）发布。
它引入了许多重要的特性，包括选择器、事件处理、以及动画效果等。
这些特性大大简化了JavaScript编程，使开发者能够更轻松地操作HTML元素、处理用户交互，以及实现动态效果。
随着时间的推移，jQuery持续进行功能扩展和改进。
2009年，jQuery发布了1.3版本，引入了更多有用的工具和方法，进一步提高了开发效率。
此后，jQuery团队开始积极采纳开发者的建议和贡献，并将其整合到新版本中。
2013年，jQuery发布了2.0版本，重点优化了库的性能和稳定性。
该版本移除了对一些旧版浏览器的支持，以便提供更好的升级路径和更高的性能。
与此同时，jQuery还发布了1.10版本，为那些需要支持旧版浏览器的开发者提供了选择。
随着移动互联网的兴起，jQuery Mobile应运而生。
这是一个基于jQuery库的移动应用框架，专门用于开发适用于各种移动设备的Web应用。
jQuery Mobile提供了丰富的UI组件和更好的触摸支持，使开发者能够更方便地创建响应式的移动应用。
2019年，jQuery发布了3.4.0版本，这是目前最新的稳定版本。
该版本修复了一些问题，并提供了更好的安全性和稳定性。
jQuery团队承诺将继续提供支持和更新，以确保jQuery始终保持在最新的Web开发技术趋势中。
总的来说，jQuery自问世以来在Web开发领域取得了巨大的成功。
它以其简洁的语法和强大的功能成为了开发者们的首选工具之一。
无论是用于简单的DOM操作还是复杂的应用开发，jQuery都能够提供良好的支持，并帮助开发者更高效地完成工作。
jq命令用法
jq命令用法`jq` 是一个轻量级的命令行JSON 处理工具，它被设计用来处理和查询JSON 数据。
以下是一些常见的`jq` 命令用法：1. 基本用法：```bashjq '.' file.json```这个命令会将JSON 文件的内容原样输出。
2. 选择字段：```bashjq '.fieldName' file.json```这个命令会提取JSON 中的指定字段的值。
3. 使用通配符：```bashjq '.arrayName[]' file.json```这个命令会提取JSON 数组中所有元素的值。
4. 过滤：```bashjq '.fieldName | select(. > 10)' file.json```这个命令会选择JSON 中指定字段的值大于10 的项。
5. 迭代：```bashjq '.arrayName | map(. * 2)' file.json```这个命令会将数组中的每个元素乘以2。
6. 使用条件：```bashjq 'if .fieldName == "value" then . else empty end' file.json```这个命令会根据条件选择JSON 中的数据。
7. 格式化输出：```bashjq '.' file.json -C```这个命令会以彩色输出格式化的JSON。
8. 使用变量：```bashjq --arg variableName 'value' '.fieldName | select(. == $variableName)' file.json ```这个命令会使用变量进行条件过滤。
9. 输出为其他格式：```bashjq -r '.fieldName' file.json```这个命令会以原始文本格式输出，而不是JSON 格式。
Jquery遍历json的两种数据结构
没有落叶的秋-博客:/s/blog_8fbeeb59010153d3.html Jquery遍历json的两种数据结构简介什么是JSON？JSON 即JavaScript Object Natation(Java对象表示法)，它是一种轻量级的数据交换格式，非常适合于服务器与JavaScript 的交互。
简而言之，JSON就是JavaScript交换数据的一种格式。
例子如下：{"username":"coolcooldool","password":"1230","usertype":"superadmin" }{"list":[{"password":"1230","username":"coolcooldool"},{"password":" thisis2","username":"okokok"}]}第二种是有数组的情况，我也不用文字表述JSON到底是怎么构成的了，相信长眼睛的人都看懂了。
为什么使用JSON而不是XML？尽管有许多宣传关于 XML 如何拥有跨平台，跨语言的优势，然而，除非应用于 Web Services，否则，在普通的 Web 应用中，开发者经常为 XML 的解析伤透了脑筋，无论是服务器端生成或处理 XML，还是客户端用 JavaScript 解析 XML，都常常导致复杂的代码，极低的开发效率。
实际上，对于大多数 Web 应用来说，他们根本不需要复杂的 XML 来传输数据，XML 的扩展性很少具有优势，许多 AJAX 应用甚至直接返回 HTML 片段来构建动态 Web 页面。
和返回 XML 并解析它相比，返回 HTML 片段大大降低了系统的复杂性，但同时缺少了一定的灵活性。
JQuery ajax返回JSON时的处理方式
最近在使用JQuery的ajax方法时，要求返回的数据为json数据，在处理的过程中遇到下面的几个问题，那就是采用不同的方式来生成json数据的时候，在$.ajax方法中应该是如何来处理的，下面依次来进行说明，由于本人使用的是，所以处理的页面都是采用.net来做的！其他的方式应该是相同的吧首先给出要传的json数据：[{"demoData":"This Is The JSON Data"}]1,使用普通的aspx页面来处理本人觉得这种方式处理起来是最简单的了,看下面的代码吧$.ajax({type: "post",url: "Default.aspx",dataType: "json",success: function (data) {$( "input#showTime").val(data[0].demoData);},error: function (XMLHttpRequest, textStatus, errorThrown) {alert(errorThrown);}});这里是后台传递数据的代码Response.Clear();Response.Write( "[{\"demoData\":\"This Is The JSON Data\"}]");Response.Flush();Response.End();这种处理的方式将传递过来的数据直接解析为json数据，也就是说这里的前台js代码可能直接把这些数据解析成json对象数据，而并非字符串数据，如data[0].demoData，这里就直接使用了这个json对象数据2,使用webservice(asmx)来处理这种处理方式就不会将传递过来的数据当成是json对象数据，而是作为字符串来处理的，如下代码$.ajax({type: "post",url: "JqueryCSMethodForm.asmx/GetDemoData",dataType: "json", /*这句可用可不用，没有影响*/contentType: "application/json; charset=utf-8",success: function (data) {$( "input#showTime").val(eval('(' + data.d + ')')[0].demoData);//这里有两种对数据的转换方式，两处理方式的效果一样//$("input#showTime").val(eval(data.d)[0].demoData);},error: function (XMLHttpRequest, textStatus, errorThrown) {alert(errorThrown);}});下面这里为asmx的方法代码[WebMethod]public static string GetDemoData() { return"[{\"demoData\":\"This Is The JSON Data\"}]";}这里的这种处理方式就把传递回来的json数据当成了字符串来处理的，所在就要对这个数据进行eval的处理，这样才能成为真正的json对象数据，3,使用ashx文件来处理这种方式和普通的aspx的页面处理是一样的所以这里就不多做解释了！本文由淄博SEO()，淄博网站优化()整理发布，转载请注明出处。
jqueryajax调用springboot接口发送json数据示例，兼容跨域调用，解决m。。。
jqueryajax调⽤springboot接⼝发送json数据⽰例，兼容跨域调⽤，解决m。
本⽂主要解决三个问题：1.解决maven项⽬中引⽤本地lib⽬录的jar包时打包失败的问题2.解决spring boot开发的微服务接⼝中的跨域问题3.ajax 发送json数据的问题昨天研究 office 外接程序开发时，发现在插件中调⽤后台由 Spring boot 开发的接⼝并传递json时总是失败，调试了半天，尝试了$.ajax，$.post等⽅法服务端均⽆法获取到正确的请求，发送到后端的请求的格式是application/www-urlencode，⽽后端接受的是application/json格式的数据，由于⽤postman测试接⼝可以正常返回，应该可以说明后台接⼝没有问题。
1.解决maven项⽬中引⽤本地lib⽬录的jar包时打包失败的问题其实在⼀开始编写后台接⼝时，也遇到了⼀些问题，因为接⼝中引⽤了⼀个项⽬本地的lib⽬录中的jar包，⽽这个jar包并未⽤maven管理，所以调试和打包上遇到了⼀些问题，以前使⽤mvn clean install就可以完成的动作，现在⼀直报错，在pom中这样修改就可以解决了：<build><!-- 加上下⾯的，mvn命令会报错，现在直接调试完毕后，mvn package即可--><resources><resource><directory>lib</directory><targetPath>/BOOT-INF/lib/</targetPath><includes><include>**/*.jar</include></includes></resource></resources><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-compiler-plugin</artifactId><configuration><skip>true</skip></configuration></plugin><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-surefire-plugin</artifactId><configuration><skip>true</skip></configuration></plugin></plugins></build>2.解决spring boot开发的微服务接⼝中的跨域问题由于服务端⽇志中⼀直观察不到ajax调⽤的正确请求，于是祭出终极⼤杀器——抓包，打开WireShark，选择对应的⽹卡，参数设置成：ip.dst_host== 你接⼝服务器的ip && tcp.dstport ==你接⼝服务监听的端⼝抓包后发现，第⼀个HTTP请求竟然不是POST，⽽是OPTIONS：这不是我嘞个⼤擦了么…… ⽴马拿出万能钥匙——⾕歌搜索引擎开始解决问题，输⼊关键字“http options request”，看到第⼀条就应该是我要的答案了：沿着指路明灯给出的航向继续前进（）：OPTIONSThe HTTP OPTIONS method requests permitted communication options for a given URL or server. A client can specify a URL with thismethod, or an asterisk (*) to refer to the entire server.继续往下翻，看到了这段⽂字：In , a is sent with the OPTIONS method so that the server can respond if it is acceptable to send the request. In this example, we will request permission for these parameters:The header sent in the preflight request tells the server that when the actual request is sent, it will have a request method.The header tells the server that when the actual request is sent, it will have the X-PINGOTHER and Content-Type headers.我恍然⼤悟，原来是跨域调⽤的问题。
jQuery的基本用法
、jQuery的基本用法:随着WEB2.0及ajax思想在互联网上的快速发展传播，陆续出现了一些优秀的Js框架，其中比较著名的有Prototype、YUI、 jQuery、mootools、Bindows以及国内的JSVM框架等，jQuery是继prototype之后的又一个优秀的Javascript框架。
它是由 John Resig 于 2006 年初创建的，它有助于简化 JavaScript 以及Ajax 编程。
它具有如下一些特点：1. 代码简练、语义易懂、学习快速、文档丰富。
2. jQuery是一个轻量级的脚本，其代码非常小巧，最新版的JavaScript包只有20K左右。
3. jQuery支持CSS1-CSS3,以及基本的xPath。
4. jQuery是跨浏览器的，它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+。
5. 可以很容易的为jQuery扩展其他功能。
6. 能将JS代码和HTML代码完全分离，便于代码和维护和修改。
7. 插件丰富，除了jQuery本身带有的一些特效外，可以通过插件实现更多功能，如表单验证、tab导航、拖放效果、表格排序、DataGrid，树形菜单、图像特效以及ajax上传等。
使用方法(同prototype)在需要使用JQuery的页面中引入JQuery的js文件即可。
例如：<script type="text/javascript" src="js/jquery.js"></script>引入之后便可在页面的任意地方使用jQuery提供的语法。
三、学习教程及参考资料请参照《jQuery中文API手册》和/visual/cn/index.xml推荐两篇不错的jquery教程：《jQuery的起点教程》和《使用 jQuery 简化 Ajax 开发》(说明：以上文档都放在了【附件】中)四、语法总结和注意事项1、关于页面元素的引用通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath 条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。
(bi商务智能)推荐jQueryMobile插件和教程
4.jQueryMobileDatepickers 21.jQueryUI’sDatepickerStyledformobile TheincludedfilesextendthejQueryUIdatepickertomakeitsuitablefortouchdevices.This pluginisnotincludedinjQueryMobilebydefault,soyou’llneedtoincludethefilesyourse lfifyou’dliketousethem.Scrolldownforusageinstructions. 22.Android-LikeDatePickerwithjQuerymobile.2 23.SoundSystemStudioWebLayout Inthistutorialyouwilllearnhowtocreateanicelookinglayout.
Jquery中$.get（）,$.post（）,$.ajax（）,$.getJSON（）的用法总结
Jquery中$.get（）,$.post（）,$.ajax（）,$.getJSON（）的⽤法总结详细解读Jquery各Ajax函数：$.get(),$.post(),$.ajax(),$.getJSON()⼀，$.get(url,[data],[callback])说明：url为请求地址，data为请求数据的列表，callback为请求成功后的回调函数，该函数接受两个参数，第⼀个为服务器返回的数据，第⼆个参数为服务器的状态，是可选参数。
⽽其中，服务器返回数据的格式其实是字符串形势，并不是我们想要的json数据格式，在此引⽤只是为了对⽐说明复制代码代码如下:$.get("data.php",$("#firstName.val()"),function(data){$("#getResponse").html(data); }//返回的data是字符串类型);⼆，$.post(url,[data],[callback],[type])说明：这个函数跟$.get()参数差不多，多了⼀个type参数，type为请求的数据类型，可以是html,xml,json等类型，如果我们设置这个参数为：json，那么返回的格式则是json格式的，如果没有设置，就和$.get()返回的格式⼀样，都是字符串的复制代码代码如下:$.post("data.php",$("#firstName.val()"),function(data){$("#postResponse").html();},"json"//设置了获取数据的类型，所以得到的数据格式为json类型的);三，$.ajax(opiton)说明：$.ajax()这个函数功能强⼤，可以对ajax进⾏许多精确的控制，需要详细说明的请参照相关资料复制代码代码如下:$.ajax({url: "ajax/ajax_selectPicType.aspx",data:{Full:"fu"},type: "POST",dataType:'json',success:CallBack,error:function(er){BackErr(er);}});四，$.getJSON(url,[data],[callback])复制代码代码如下:$.getJSON("data.php",$("#firstName.val()"),function(jsonData){$("#getJSONResponse").html(jsonData.id);}//⽆需设置，直接获取的数据类型为json，所以调⽤时需要使⽤jsonData.id⽅式);When Ajax meets jQuery 基于AJAX的应⽤现在越来越多，⽽对于前台开发⼈员来说，直接和底层的HTTPRequest打交道⼜不是⼀件令⼈愉快的事情。
jQuery中$.ajax解析xml、json格式数据
jQuery中$.ajax解析xml、json格式数据$.ajax()方法参数详解：url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。
注意：这个要访问url必须与js文件在同一个域，否则会报错。
type: 要求为String类型的参数，请求方式（post或get）默认为get。
注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。
timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。
此设置将覆盖$.ajaxSetup()方法的全局设置。
async：要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。
如果需要发送同步请求，请将此选项设置为false。
注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。
cache：要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false）。
设置为false将不会从浏览器缓存中加载请求信息。
data: 要求为Object或String类型的参数，发送到服务器的数据。
如果已经不是字符串，将自动转换为字符串格式。
get请求中将附加在url后。
防止这种自动转换，可以查看processData选项。
对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。
如果是数组，jQuery将自动为不同值对应同一个名称。
例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。
dataType: 要求为String类型的参数，预期服务器返回的数据类型。
如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。
jq命令用法总结
jq命令用法总结摘要：一、jq命令简介二、jq命令的基本用法1.过滤数据2.映射数据3.变换数据类型4.添加和删除数据5.访问和修改数据三、jq命令的进阶用法1.函数定义与调用2.模块化编程3.事件处理4.插件扩展四、jq命令实战案例1.解析JSON数据2.处理XML数据3.操作Web API五、jq命令的优缺点与应用场景1.优点2.缺点3.应用场景六、总结与建议正文：一、jq命令简介jq是一款强大的JSON解析和生成工具，命令行界面操作，易于上手。
它可以对JSON数据进行各种操作，使得JSON数据更易于阅读和处理。
二、jq命令的基本用法1.过滤数据jq命令可以通过过滤器对JSON数据进行筛选。
例如，筛选出JSON数组中的某个元素，可以使用如下命令：```jq ".| select(.)" input.json```2.映射数据jq命令支持对JSON数据进行映射操作，可以将数据映射到指定的key或值。
例如，将所有元素的值乘以2：```jq ".| map(select(.) | .* 2)" input.json```3.变换数据类型jq命令可以对JSON数据进行类型转换。
例如，将所有字符串类型的值转换为大写：```jq ".| map(select(.) | .tolupper())" input.json```4.添加和删除数据jq命令可以对JSON数据进行添加和删除操作。
例如，在数组末尾添加一个元素：```jq ".| append(["new_element"])" input.json```5.访问和修改数据jq命令可以方便地访问和修改JSON数据。
例如，修改指定元素的值：```jq ".| assoc(.) "new_key" 10" input.json```三、jq命令的进阶用法1.函数定义与调用jq命令支持自定义函数，可以方便地进行复杂的数据处理。
jQuery前端开发实战教程 第9章 jQuery Mobile
Tips
运行结果如下图所示
jQuery Mobile >>页面结构>>示例9-2
9-2
<div data-role="header"> <h1>首页</h1> <div data-role="navbar"> <ul> <li> <a href="#home">首页</a> </li> <li> <a href="#">上一页</a> </li> <li> <a href="#">下一页</a> </li> </ul> </div> </div>
序号 来源 href或src
1 2
bootCDN jQuuery-mobile/1.4.5/jquery.mobile.css https:///jquery-mobile/1.4.5/jquery.mobile.js /mobile/1.4.5/jquery.mobile-1.4.5.min.css /mobile/1.4.5/jquery.mobile-1.4.5.min.js
Tips
右侧是页面头部代码，运行结 果如下图所示
jQuery Mobile >> 组件定位
JQM支持页头和页脚的固定定位
序号 1 2 data-position的值 data-position="fixed" data-tap-toggle="false" 描述 用于页头和页脚固定定位在页面的顶部或者底部。默认值是inline， 与页面内容内联 用于固定定位的页头或者页脚，触屏时不切换页头或者页脚的显示与 隐藏状态。默认值是true
dw中jquery mobile的用法
一、介绍jQuery Mobile 是一个基于 HTML5 的移动应用开发框架，它通过使用 HTML、CSS 和 JavaScript 技术，为开发者提供了一种快速、简便的移动应用开发方式。
而 Dw (Dreamweaver) 是 Adobe 公司开发的一款流行的网页开发工具，它集成了各种前端技术和框架，对于使用jQuery Mobile 开发移动应用的开发者来说，Dw 是一个非常便捷的开发工具。
本文将介绍如何在 Dw 中使用 jQuery Mobile 开发移动应用。
二、使用步骤1. 在 Dw 中新建一个网页项目，选择 HTML 文件类型，以开始开发基于 jQuery Mobile 的移动应用。
2. 在 HTML 文件中引入 jQuery Mobile 的样式文件和 JavaScript 文件。
可以通过 CDN 或下载文件的方式引入 jQuery Mobile 的资源。
在头部的 <head> 标签中添加以下代码：```html<link rel="stylesheet" href="xxx"><script src="xxx"></script><script src="xxx"></script>```3. 创建一个基本的页面结构，使用 jQuery Mobile 的组件和样式来设计页面。
可以使用Dw 提供的可视化界面来快速拖拽和编辑页面内容，也可以在代码视图中手动编写页面布局。
4. 在页面中使用 jQuery Mobile 的组件，如按钮、列表、导航栏等，来实现丰富的交互效果和移动端友好的用户界面。
通过 Dw 提供的工具和插件，可以快速添加和编辑这些组件。
5. 编写 JavaScript 代码，来实现页面交互和逻辑功能。
可以在 Dw 中使用 JavaScript 编辑器来编写和调试代码，实现丰富的用户交互和应用逻辑。
基于jQuery的AJAX和JSON的实例
基于jQuery的AJAX和JSON的实例通过jQuery内置的AJAX功能，直接访问后台获得JSON格式的数据，然后通过jQuer把数据绑定到事先设计好的html模板上，直接在页面上显示。
我们先来看一下html模板：<table id="datas" border="1" cellspacing="0" style="border-collapse: collapse"><tr><th>订单ID</th><th>客户ID</th><th>雇员ID</th><th>订购日期</th><th>发货日期</th><th>货主名称</th><th>货主地址</th><th>货主城市</th><th>更多信息</th></tr><tr id="template"><td id="OrderID"></td><td id="CustomerID"></td><td id="EmployeeID"></td><td id="OrderDate"></td><td id="ShippedDate"></td><td id="ShippedName"></td><td id="ShippedAddress"></td><td id="ShippedCity"></td><td id="more"></td></tr></table>一定要注意的就是里面所有的id属性，这个是一个关键。
JQUERY MOBILE使用指南
jQuery Mobile使用指南jQuery一直以来都是非常流行的富客户端及Web应用程序开发中使用的JavaScript类库,然而一直以来它都是为桌面浏览器设计的，没有特别为移动应用程序设计。
jQuery Mobile是一个新的项目用来添补在移动设备应用上的缺憾。
它是基本jQuery框架并提供了一定范围的用户接口和特性，以便于开发人员在移动应用上使用。
使用该框架可以节省大量的js代码开发时间，尽管目前的版本还是不是一个稳定的版本。
但它的应用效果已经备受瞩目。
接下来我们将通过实例向大家展示jQuery Mobile的特性及好处，让我们看一下这个新框架是怎么帮助你在短时间内建立起一个高质量的移动应用程序,接下来的代码讲解中的代码最好使用的移动设备平台是IPhone或Android。
或者是PC电脑上使用Safari浏览器调试。
Go on!jQuery Mobile都能做什么?◆jQuery Mobile为开发移动应用程序提代了非常简单的用户接口◆这种接口的配置是标签驱动的，这意味着我们可以在HTML中建立大量的程序接口而不不需要写一行js代码◆提供了一些自定义的事件用来探测移动和触摸动作。
例如tap(敲击)、tap-and-hold(点击并按住)、swipe、orientation change◆使用一些加强的功能时需要参照一下设备浏览器支持列表◆使用预设主题可以轻松定制应用程序外观jQuery Mobile基本页面结构大部分jQuery Mobile Web应用程序都要遵循下面的基本模板1.<!DOCTYPE html>2.<html>3.<head>4.<title>Page Title</title>5.<link rel="stylesheet"href="/mobile/1.0a1/jquery.mobile-1.0a1.min.css"/>6.<script src="/jquery-1.4.3.min.js"></script>7.<script src="/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>8.</head>9.<body>10.11.<div data-role="page">12.13.<div data-role="header">14.<h1>Page Title</h1>15.</div>16.17.<div data-role="content">18.<p>Page content goes here.</p>19.</div>20.21.<div data-role="footer">22.<h4>Page Footer</h4>23.</div>24.</div>25.26.</body>27.</html>要使用jQuery Mobile，首先需要在开发的界面中包含如下3个内容◆CSS文件jquery.mobile-1.0a1.min.css◆jQuery library jquery-1.4.3.min.js◆jQuery Mobile library jquery.mobile-1.0a1.min.js在上面的页面基本模板中，引入这三个元素采用的是jQuery CDN方式，开发人员也可以下载这些文件及主题到你的服务器上。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
<!TYPE html> <html>
<head> <title>IBM jQuery Tutorial</title> <link rel="stylesheet" href="/mobile/1.0a1
与 jQuery 核心库一样，您的开发计算机上不需要安装任何东西；只需将各种 *.js 和 *.css 文件直接包含到您的 web 页 面中即可。这样，JQM 的功能就好像被放到了您的指尖，供您随时使用。
清单 1 展示了将 jQuery Mobile 文件添加到应用程序是多么简单！
页码，3/31
清单 1. 将 jQuery Mobile 添加到应用程序
回页首
面向触摸
JQM 是一个经过触摸优化的框架，用于为基于浏览器的移动 web 应用程序构建统一和理想的用户体验。您所知道的关 于编写 web 应用程序的大部分知识仍然适用；但是，使应用程序看起来更统一这个目标是 JQM 方法的真正关键部分。 JQM 采用一种特殊方式样式化标准表单元素，使其在视觉上更美观并更容易操作。请您仔细查看 图 1 中的图像，它们 展示了 JQM 样式化表单元素的一个子集。
JQM 采用另一种方法。jQuery 核心库的标志是开发人员执行 Ajax 调用的便捷性。Ajax 被浏览器的异步 HTTP 请求功 能包裹。当取回整个页面成本很高时，通常使用 Ajax 来取回部分页面或执行某种内联引用数据查询。通过截获页面请 求并在多数情况下将那些请求转换成特殊的 Ajax 调用，JQM 将 Ajax 提升到下一个水平。这种行为的最终结果是：当 访客导航通过 JQM 构建的 web 应用程序时，页面的 DOM 将被操作，而不是每次替换每个页面。为提供这种行为的 一些上下文，请查看 清单 2 中的 JQM 样板文档。
为了使本教发挥最大作用，您应该熟悉使用 HTML、JavaScript 和 CSS 构建 web 应用程序。另外，这个移动 web 应 用程序附带的服务器端代码是用 PHP 和 MySQL 编写的。熟悉服务器端编程也有助于您跟随本教程的操作。如果您熟 悉其他服务器端平台，比如 ASP Classic、 或 Java™ Server Pages，那么您可能会发现，服务器端代码很容 易理解。熟悉 jQuery 并不是必须的，当然，熟悉它不会有坏处。事实上，本教程的目标读者是致力于探索新框架的移 动程序员，而不是启动到移动空间中的 jQuery 专业人员。学习完本教程后，您将了解如何构建一个基本 jQuery Mobile 应用程序和如何在移动浏览器和后端服务器之间管理数据。这个应用程序演示如何在销售相关数据上执行基本记录操作 （比如 insert、update、delete）。当您从多个浏览器运行您的移动 web 应用程序时，您将注意到它有多么通 用。最后，您将您的移动 web 应用程序的快捷键安装到 iPod 和 Android 设备的主屏幕上，展示如何部署 web 应用程 序。
我在一个 MacBook Pro 上创建本教程的代码样例，通过 VMWare Fusion 运行 Windows® 7。我使用 Notepad++ 编辑 文件，因为它不仅拥有不错的语法高亮显示功能，还有安全的 FTP，可以使与基于服务器的 PHP 文件交互变得非常直 观。您也可以在 vi 中编辑文件，但谁想这样做呢？为了使用 MySQL 数据库，我使用我的主机帐户可用的 phpMyAdmin。为了在一个物理设备上进行测试，我使用一个运行 Android 2.2 的 Nexus One 和一个运行 iOS 4.1 的 iPod Touch。
清单 1 中的版本实际上是 jQuery Mobile alpha 发布 1。alpha 发布 2 已经可用，但由于存在一些 bug 行为，本教程依 赖该代码的第一个 alpha 发布。您阅读本教程之时，这些 JQM 文件的一个更新版本可能已经可以下载。参见 参考资 料 中 jQuery 的 CDN 链接，获取这些库文件的最新版本。JQM 受到 MIT 和 GPL 许可的双重许可；基本上，这意味 着如果您保持这个 jQuery 属性，就能在您的应用程序中使用这些文件。
标记本文！
发布日期： 2011 年 4 月 11 日 级别： 中级
访问情况 144 次浏览 建议： 0 (添加评论)
开始之前
平均分 （共 0 个评分 ）
常用缩略词
l Ajax：异步 JavaScript + XML l ASP：活动服务器页 l CSS：层叠样式表 l DOM：文档对象模型 l FTP：文件传输协议 l GPL：GNU 通用公共许可 l HTML：超文本标记语言 l HTTP：超文本传输协议 l MIT：麻省理工学院 l SQL：结构化查询语言 l UI：用户界面 l XML：可扩展标记语言
JQM — 最新的 jQuery 家族成员
JQM 的目标是在一个统一的 UI 中交付超级 JavaScript 功能，跨最流行的智能手机和平板电脑设备工作。与 jQuery 一 样，JQM 是一个在 Internet 上直接托管、免费可用的开源代码基。事实上，当 JQM 致力于统一和优化这个代码基时， jQuery 核心库受到了极大关注。这种关注充分说明，移动浏览器技术在极短的时间内取得了多么大的发展。
/jquery.mobile-1.0a1.min.css" /> <script src="/jquery-1.4.3.min.js"></script> <script src="/mobile/1.0a1
关于本教程
页码，2/31
本教程介绍 jQuery Mobile (JQM) 框架，该框架用于编写针对移动行业的领先浏览器的移动 web 应用程序。JQM 用于 向一些移动设备（比如 iPhone、iPad、Android、WebOS、BlackBerry Version 6 (Torch, Playbook) 等等）上运行的基 于 web 的应用程序提供直观统一的用户体验。本教程首先简要介绍 JQM 项目，以及 JQM 与 HTML5 的关系及其对后 者的依赖。然后，本教程介绍构建一个 JQM 应用程序的众多方法中的一种，以及 JQM 增强基本 web UI 元素的一些 方法。最后，本教程检查一个基本销售力量自动化需求。
针对这个问题，本教程制定一个计划来实现一个针对移动设备用户的解决方案，无需进行本地移动开发。完成后的应用 程序将被演示，这样当您跟随本教程逐步构建自己的应用程序时，就知道本教程将把您带向何处。当您学习使用 JQM 实现这个解决方案时，我们将逐一检查源文件中的函数。本教程最后将介绍几个技巧，以帮助您的用户在他们的移动设 备上更轻松地访问您的应用程序。
<head> <title>IBM JQuery Tutorial</title> <link rel="stylesheet" href="/mobile/1.0a1 /jquery.mobile-1.0a1.min.css" /> <script src="/jquery-1.4.3.min.js"></script> <script src="/mobile/1.0a1/jquery.mobile-1.0a1.min.js"> </script> <script src="/utils.js"></script> </head>
请参见 参考资料 获取帮助链接；下载 样例应用程序的源代码。
jQuery Mobile
我们首先检查 JQM 以及如何使用它改进移动 web 应用程序开发体验。尽管 jQuery Core 有一个大型已安装基，JQM 仍然处于婴儿期，在本文撰写之时还处于 alpha 模式。我们看看 JQM 项目希望实现的目标。
注意，也可以下载这些 jQuery 文件的一个副本并直接从您自己的 web 服务器托管它们。这种方法不是个坏主意，特别 是当您正在发布一个依赖这个框架的商业应用程序时。这些框架可能会而且的确会发生更改，有时会损害依赖特定行为 的应用程序。商业企业通常对可预测的行为更感兴趣，因为这种行为更容易支持；而不是总是追赶时髦。
l Web 浏览器— 这个浏览器用于查看 jQuery Mobile 帮助和文档。 l WebKit (Safari) 或 Chrome Browser — 这些浏览器支持在桌面机上进行 jQuery Mobile 开发。 l 移动设备 — 可以使用 iPod Touch、Android、BlackBerry Torch 或具有类似功能的移动设备。 l PHP 和 MySQL 托管环境 — 用于应用程序的服务器端。
图 1. JQM 表单元素
页码，4/31
除便于触摸和样式化 UI 元素外，JQM 的真正魔力在于它管理屏幕过渡的方式。我们来看一看。
回页首 扩展 DOM 在传统 web 应用程序构建中，每个屏幕或页面从服务器获取，屏幕的全部内容被替换。这种方法意味着：
1. 往返服务器 2. 下载 HTML 3. 解析 HTML 4. 呈现 HTML，包括应用层叠样式表
除 CSS 文件外，这个头部还包含三个 JavaScript 文件。第一个 JavaScript 文件对缩减 形式的 jQuery 核心库的引 用，然后是 JQM 库的缩减形式，最后是一个特定于应用程序的 JavaScript 文件 utils.js。缩减 意味着代码针对快速下 载和解析进行过优化。记住，每个应用程序页面都需要下载这些文件，因此，应使它们的大小绝对最小（并依赖缓 存！）来大幅提高应用程序性能。
页码，1/31