本节书摘来自异步社区《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。
相关资源:枫树浏览器下载 枫树浏览器 v2.0.9.20