jQuery Mobile教程-高级篇-特殊选择器扩展之:jqmData

特别声明:本站已开启付费阅读,年费会员价 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

特别申明:本系列教程由小春撰写

本文我们来认识一下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这种选择器进行处理

PS:
1、有问题欢迎在官网留言或者直接联系我:@zhangyaochun_fe
2、可以在官网的问答频道进行提问,我们会尽快回复
3、谢谢您对w3cplusjquery mobile系列教程的关注

 

关于小春

专注于前端开发,对ECMA底层有深入探究和兴趣…热衷新技术深入调研学习,涉足移动前端许久,爱好分享交流…个人博客focus-fe。欢迎随时关注我:新浪微博

Nike Paul George PG3

如需转载,烦请注明出处:https://www.w3cplus.com/blog/731.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部