jQuery 自定义选择器
严格来说是自定义伪类选择器,不过也相当有意思了。
昨天我学习其中一个 jquery lazy load 源码的时候,看到末尾这么写的。
/* Custom selectors for your convenience. 译: 提供自定义选择方便你使用。 */
/* Use as $("img:below-the-fold").something() or 译: 你可以这样使用 $("img:below-the-fold").something() 或 */
/* $("img").filter(":below-the-fold").something() which is faster 译: $("img").filter(":below-the-fold").something() 这样更快 */
// 简单翻译了下不知道准不准确。。
$.extend($.expr[":"], {"below-the-fold" : function(a) { return $.belowthefold(a, {threshold : 0}); },"above-the-top" : function(a) { return !$.belowthefold(a, {threshold : 0}); },"right-of-screen": function(a) { return $.rightoffold(a, {threshold : 0}); },"left-of-screen" : function(a) { return !$.rightoffold(a, {threshold : 0}); },"in-viewport" : function(a) { return $.inviewport(a, {threshold : 0}); },/* Maintain BC for couple of versions. */"above-the-fold" : function(a) { return !$.belowthefold(a, {threshold : 0}); },"right-of-fold" : function(a) { return $.rightoffold(a, {threshold : 0}); },"left-of-fold" : function(a) { return !$.rightoffold(a, {threshold : 0}); }
});
好神奇的说,有木有。。
虽然之前也有简单的看过 jQuery 源码,可是 Sizzle 选择器引擎部分我直接跳过了,所以完全没注意到这块功能。
出于好奇心,当然要去学习下怎么自定义选择器。
翻了下百度谷歌,只找到一篇靠谱的中文博客。。看样子这东西确实冷门啊。。仔细想想确实没多大必要自定义。。
不过以学习为目标,多学点总是好的。
大家可以去看下这篇文章《jQuery Custom Selector JQuery自定义选择器》
基本格式:
$.expr[':'].test = function(obj, index, meta, stack) {/* obj - is a current DOM element 当前DOM元素index - the current loop index in stack 当前元素在stack中的索引,meta - meta data about your selector !!! 用来存参数值,详见带参数的自定义选择器。stack - stack of all elements to loop 选择器所选中的元素集。Return true to include current element 返回 true 就包含当前元素Return false to explude current element 返回 false 就抛弃当前元素*/
};
调用方法:
$('.someClasses:test').doSomething();
带参数调用:
$('.someClasses:test(argument)').doSomething();
$('.someClasses:test("arg1, arg2")').doSomething();
$(".someClasses:test('arg1, arg2')").doSomething();
还记得刚才 meta 参数么?
例如这样调用:
$('.someClasses:test(argument)').doSomething();
meta 就会得到如下格式的数组:
[':test(argument)', // full selector 整个自定义选择器'test', // only selector 自定义选择器名称'', // quotes used 使用了什么引号(很明显这里没有)'argument' // parameters 参数
]
例如调用:
$('.someClasses:test("arg1, arg2")').doSomething();
meta 就会得到如下格式的数组:
[':test("arg1, arg2")', // full selector 整个自定义选择器'test', // only selector 自定义选择器名称'"', // quotes used 使用了什么引号(这里用的是双引号)'arg1, arg2' // parameters 参数
]
那我们来写个简单的选择器,当作练习吧。
就写个刚才那个选择器把,带参数好了。
$("a:test(haha)");
自定义选择器代码为:
$.expr[':'].test = function(obj, index, meta, stack) {var txt = obj.innerHTML,key = meta[3];return txt.indexOf(key) > -1;
};
// 测试
$('#navList a:test(JavaScript)').each(function () {console.log(this.innerHTML);
});
点击右侧运行看看。。
没啥技术含量,不过确实是有意思的技巧。
其他参考资料:
http://www.cnblogs.com/webfpc/archive/2009/11/22/1605302.html
http://jquery-howto.blogspot.com/2009/06/custom-jquery-selectors.html
http://jquery-howto.blogspot.com/2009/06/jquery-custom-selectors-with-parameters.html
转载于:https://www.cnblogs.com/52cik/p/jquery-custom-selector.html
jQuery 自定义选择器相关推荐
- jQuery自定义选择器
jQuery 1.8版本后, 可以通过$ 的createPseudo()方法自定义选择器,满足不同的需求,本文来自<jquery in action> <ul class=" ...
- JQuery 自定义选择器 详解
:animated Selects elements that are currently under animated control.( 匹配所有正在执行动画效果的元素) 声明: ...
- JQuery - Sizzle选择器引擎原理分析
说明:14年学习的jquery源码,搬到这里供大家交流.原文地址:https://segmentfault.com/a/1190000003933990 一.前言 Sizzle原来是jQuery里面的 ...
- JQuery自定义插件详解之Banner图滚动插件
前 言 JRedu JQuery是什么相信已经不需要详细介绍了.作为时下最火的JS库之一,JQuery将其"Write Less,Do More!"的口号发挥的极致.而帮助J ...
- jQuery(简介、特点、使用方法、【重点】jQuery的选择器:是jQuery的灵魂、jQuery的属性:操作标签的属性)
https://www.jq22.com/chm/jquery/index.html 一.jQuery 1.简介:是一个对JavaScript进行了封装的库,简化了用户使用javascript 2.特 ...
- jQuery 常规选择器
常规的选择器 学习要点: 1.简单选择器 2.进阶选择器 3.高级选择器 jQuery 最核心的组成部分就是:选择器引擎.它继承了 CSS 的语法,可以对 DOM 元 素的标签名.属性名.状态等进行快 ...
- JQuery基本操作 JQueryCSS操作 JQuery筛选选择器 JQuery筛选方法 JQuery效果
JQuery 基本使用 原生JS获取的对象就是DOM对象 JQuery方法获取的元素是JQuery对象 (伪数组形式存储) 不能使用原生Js的属性和方法 DOM对象转换为 JQuery 对象 $ ...
- jQuery 常用选择器
jQuery 选择器简介 jquery的选择器有:1.基本选择器(ID.元素.类选择器等):2.基本过滤选择器(:first.:last.:even等):3.内容过滤选择器(:empty.:has() ...
- jQuery Sizzle选择器
转载 原文作者:yleo77 这是一篇关于介绍jQuery Sizzle选择器的文章,由我和obility共同完成.在文中,我们试图用自己的语言配以适量的代码向读者展现出Sizzle在处理选择符时的流 ...
最新文章
- R语言包_recharts
- ios 地图黑屏_ios – 导航控制器显示黑屏
- 异常Exception(Java)
- Rating Prediction——评分预测小结
- [转]SecureCRT使用配置详细图文教程
- docker跑codalab_Codalab使用与采坑
- 存储在U盘中的文件被误删后怎么免费恢复
- 基于opencv 的OCR小票识别(1)
- matlab 小波变换程序,matlab 小波变换
- Fully Convolutional Networks for Semantic Segmentation 个人总结
- 1位全加器设计—— 原理图与VHDL设计初步
- VBA写入公式(4):数字转大写金额公式
- el-table单元格中加上横向柱状图
- 关于Git 的管理凭据操作
- Expression #3 of ORDER BY clause is not in SELECT list,references column ‘xx‘which is not in SELECT
- oracle dbms_crypto,dbms_crypto函数包的简单介绍
- 如何用arcgis修改栅格文件的波段数?
- 微信小程序中使用阿里巴巴字体图标
- 计算机主板上的fan,电脑主板上CPU_FAN、SYS_FAN、CHA_FAN、CPU_OPT接口知识科普
- 小光棍数(同余定理)