严格来说是自定义伪类选择器,不过也相当有意思了。
昨天我学习其中一个 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 自定义选择器相关推荐

  1. jQuery自定义选择器

    jQuery 1.8版本后, 可以通过$ 的createPseudo()方法自定义选择器,满足不同的需求,本文来自<jquery in action> <ul class=" ...

  2. JQuery 自定义选择器 详解

    :animated          Selects elements that are currently under animated control.( 匹配所有正在执行动画效果的元素) 声明: ...

  3. JQuery - Sizzle选择器引擎原理分析

    说明:14年学习的jquery源码,搬到这里供大家交流.原文地址:https://segmentfault.com/a/1190000003933990 一.前言 Sizzle原来是jQuery里面的 ...

  4. JQuery自定义插件详解之Banner图滚动插件

      前  言 JRedu JQuery是什么相信已经不需要详细介绍了.作为时下最火的JS库之一,JQuery将其"Write Less,Do More!"的口号发挥的极致.而帮助J ...

  5. jQuery(简介、特点、使用方法、【重点】jQuery的选择器:是jQuery的灵魂、jQuery的属性:操作标签的属性)

    https://www.jq22.com/chm/jquery/index.html 一.jQuery 1.简介:是一个对JavaScript进行了封装的库,简化了用户使用javascript 2.特 ...

  6. jQuery 常规选择器

    常规的选择器 学习要点: 1.简单选择器 2.进阶选择器 3.高级选择器 jQuery 最核心的组成部分就是:选择器引擎.它继承了 CSS 的语法,可以对 DOM 元 素的标签名.属性名.状态等进行快 ...

  7. JQuery基本操作 JQueryCSS操作 JQuery筛选选择器 JQuery筛选方法 JQuery效果

    JQuery 基本使用 原生JS获取的对象就是DOM对象 JQuery方法获取的元素是JQuery对象  (伪数组形式存储)   不能使用原生Js的属性和方法 DOM对象转换为 JQuery 对象 $ ...

  8. jQuery 常用选择器

    jQuery 选择器简介 jquery的选择器有:1.基本选择器(ID.元素.类选择器等):2.基本过滤选择器(:first.:last.:even等):3.内容过滤选择器(:empty.:has() ...

  9. jQuery Sizzle选择器

    转载 原文作者:yleo77 这是一篇关于介绍jQuery Sizzle选择器的文章,由我和obility共同完成.在文中,我们试图用自己的语言配以适量的代码向读者展现出Sizzle在处理选择符时的流 ...

最新文章

  1. R语言包_recharts
  2. ios 地图黑屏_ios – 导航控制器显示黑屏
  3. 异常Exception(Java)
  4. Rating Prediction——评分预测小结
  5. [转]SecureCRT使用配置详细图文教程
  6. docker跑codalab_Codalab使用与采坑
  7. 存储在U盘中的文件被误删后怎么免费恢复
  8. 基于opencv 的OCR小票识别(1)
  9. matlab 小波变换程序,matlab 小波变换
  10. Fully Convolutional Networks for Semantic Segmentation 个人总结
  11. 1位全加器设计—— 原理图与VHDL设计初步
  12. VBA写入公式(4):数字转大写金额公式
  13. el-table单元格中加上横向柱状图
  14. 关于Git 的管理凭据操作
  15. Expression #3 of ORDER BY clause is not in SELECT list,references column ‘xx‘which is not in SELECT
  16. oracle dbms_crypto,dbms_crypto函数包的简单介绍
  17. 如何用arcgis修改栅格文件的波段数?
  18. 微信小程序中使用阿里巴巴字体图标
  19. 计算机主板上的fan,电脑主板上CPU_FAN、SYS_FAN、CHA_FAN、CPU_OPT接口知识科普
  20. 小光棍数(同余定理)

热门文章

  1. 为什么工厂招人越来越不容易?是招工难还是待遇低?
  2. 常言道:“人在做,天在看。”,你是怎样理解这句话的?
  3. 家里门不小心反锁应该怎么办?
  4. 赚钱也好,投资也好,本质上都是一种专业技能
  5. 路由器隔一段时间就上不了网,断一下电又能用了,这是什么原因?
  6. 进程的系统调用命令转换为INT 0x80中断的过程
  7. 华为手机的硬件好,苹果手机的系统好,能不能将苹果手机的系统装到华为手机里面呢?
  8. CSU计算机图形学复习
  9. SpringMVC_day1
  10. cocos2d-x学习知识点记录