分享程序员开发的那些事...
更新时间：2022-10-12 22:43:00
本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第9章，第9.20节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看
jQuery Mobile提供了该函数的一个变体，即jqmData()。代码清单9-24演示了如何能像使用data()函数一样来使用它。主要的区别是它考虑了命名空间（namespace）。命名空间在jQuery Mobile中很重要，当jQuery Mobile连同其他插件或者外部库一起使用时，它有助于保护该框架不受到影响。当使用jQuery Mobile时，jQuery Mobile团队推荐使用jqmData()方法而不是jQuery Core中的data()方法。
代码清单9-24 添加、获取和移除jQuery Mobile中与DOM结点关联的数据
00 <!DOCTYPE html>
01 <html>
02 <head>
03 <title>jQuery Mobile Data Function</title>
04 <meta name="viewport"
05 content="width=device-width, initial-scale=1">
06 <link rel="stylesheet" href=
07 "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css">
08 <script type="text/javascript"
09 src="http://code.jquery.com/jquery-1.7.1.min.js">
10 </script>
11 <script type="text/javascript" src=
12 "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js">
13 </script>
14 <script>
15 $(document).ready(function() {
16
17 $('#setdata').on('click', function(event) {
18 $('#mydata').jqmData('mykey', 'myvalue');
19 });
20 $('#getdata').on('click', function(event) {
21 alert($('#mydata').jqmData('mykey'));
22 });
23 $('#removedata').on('click', function(event) {
24 $('#mydata').jqmRemoveData('mykey');
25 });
26 $('#select').on('click', function(event) {
27 alert('Number of buttons = ' +
28 $('a:jqmData(role="button")').length);
29 });
30
31 });
32 </script>
33 </head>
34 <body>
35
36 <div data-role="page">
37
38 <div data-role="header">
39 <h1>jQuery Mobile Data Function</h1>
40 </div>
41
42 <div data-role="content">
43 <p id="mydata">This paragraph serves as the data container.</p>
44 <a href="#" id="setdata" data-role="button">Set Data</a>
45 <a href="#" id="getdata" data-role="button">Get Data</a>
46 <a href="#" id="removedata" data-role="button">Remove Data</a>
47 <a href="#" id="select" data-role="button">Select</a>
48 </div>
49
50 </body>
51 </html>
第18、21和24行演示了如何使用jqmData()函数来保存数据、获取数据和移除数据。如果将这个示例与第1章的示例进行比较，你会发现更多的是相同而不是不同。
与data()函数类似，jqmData函数也是从HTML中读取data-属性。这对于从DOM树中选取某个元素来说尤其有用。第28行显示了如何在CSS选择器中使用jqmData()函数。这比`$('a:data-role="button")多了些许代码。作为回报，这里的代码确保考虑了命名空间。
你可以使用$.mobile.ns配置选项来更改命名空间。如果把命名空间设置为myns，需要设置按钮角色的属性名称为data-myns-role。
《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.13 技巧：将footer的位置保持固定
《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.18 技巧：利用JavaScript调用来变更页面
《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.19 技巧：利用JavaScript调用加载页面
《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.20 技巧：向jQuery Mobile中的DOM结点添加数据
《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.21 技巧：利用jQuery Mobile的辅助函数