jQuery Mobile教程:处理jqmData选择器

2013-05-13 08:58:22  来源:w3cplus 

网页制作Webjx文章简介:本文我们来认识一下jQuery Mobile的一个比较特殊的选择器方式。

本文我们来认识一下jQuery Mobile的一个比较特殊的选择器方式
(注释:下面示例中的代码片段均来自1.1.0版本)
很多看过源码的同学,应该多会在很多地方看到下面这种选择器,用过jquery的人都会疑问?
---- jquery本身没有这种选择器类型的支持!

源码示例:

//获取页面data-role="page"和data-role="dialog"的数目 //#7470 var $pages = $(":jqmData(role='page'),:jqmData(role='dialog')") 

那我来大家来看一下到底是咋样实现的呢?

源码展示:

var oldFind = $.find, 	jqmDataRE = /:jqmData\(([^)]*)\)/g; 	 $.find = function(selector,context,ret,extra){ 	//注意这边会按照jquery mobile的特性写法,进行一层过滤 	selector = selector.replace(jqmDataRE,"[data-" + ($.mobile.ns || "") + "$1]"); 	//比如selector为":jqmData(role='page')",替换后的"[data-role='page']" 	return oldFind.call(this,selector,context,ret,extra); };	 

说明;
1、其实在jquery mobile体系中,内部处理了一下$.find,对:jqmData这种选择器进行处理

更多