利用jQuery.expr创建一个自己的伪类选择器

  话说好久没来园子写博客了,哎,看来懒癌已经到晚期,得治...

  进入正题。前段时间看到一段jQuery代码,代码里面用到了jQuery.expr这个对象。完全陌生又木有。翻了下jQuery的官方文档,没找到关于这个对象的解释,不过搜寻了一番过后终于在jQuery的选择器引擎——sizzle的文档里找到了线索。如果没猜错的话,这个对象应该是Sizzle.selectors对象的扩展。其实要验证这一点非常简单,我们把两个对象分别console.log出来对比下就知道了。页面引入jQuery和sizzle,在控制台输入如下代码:

  

 console.log(‘Sizzle.selectors‘,Sizzle.selectors);
 console.log(‘jQuery.expr‘,$.expr);

结果:

  可以看到,jQuery.expr对象除了比Sizzle.selectors对象多了一个‘::‘属性,其余属性一模一样(‘::‘属性里包含了jQuery中已经定义好的各种伪类选择器,如:‘:first‘、‘:checked‘..)。

  所以,我们可以利用这一点在jQuery里扩展选择器,定义出我们自己的选择器,这里简单举个例子,更多的用法可以参照Sizzle的官方文档依葫芦画瓢用到jQuery里就行了。

  HTML:  

<p class="contain">about how to define a new pseudo selector</p>
<p class="contain">do not contain</p>
<p class="contain">do not contain</p>

  JS:

//这里定义了一个icontain自定义伪类,作用是找到包含特定文本的节点$.expr.pseudos.icontain = $.expr.createPseudo(function(arg) {
        return function(elem) {
            return (elem.textContent
                    || elem.innerText
                    || jQuery(elem).text()
                    || ‘‘)
                            .toLowerCase()
                            .indexOf(arg.toLowerCase()) >= 0;
        };
    });
console.log($(‘.contain:icontain(pseudo)‘).length);
//输出 1(只有第一个P标签包含了文本pseudo)

  这里用了$.expr.createPseudo方法,同样,该方法的用法在sizzle的文档里也有很详细的解释和示例,大家有兴趣的话可以移步去看看。

  好了,以上是本人对$.expr对象的认识,如果有理解不到位的地方,欢迎指正。

时间: 2024-10-10 04:44:12

利用jQuery.expr创建一个自己的伪类选择器的相关文章

css3 巧用结构性伪类选择器

最近在国外的一个网站上看到的一个关于结构性伪类选择器的用法,觉得十分实用,就自己尝试了一下,并把它给记录下来: 这是最基本的样式: 1 <style type="text/css"> 2 li{ 3 list-style-type: none; 4 float: left; 5 width: 60px; 6 height: 60px; 7 background-color: #979698; 8 margin-left: 10px; 9 text-align: center

www.xttblog.com伪类选择器:E:checked、E:default和E:indeterminate

伪类选择器:E:checked.E:default和E:indeterminate E:checked伪类选择器用来指定当表单中的radio单选框或checkbox复选框处于选取状态时的样式. 代码清单19-21为一个E:checked伪类选择器的使用示例,在该示例中使用了几个checkbox复选框,复选框在非选取状态时边框默认为黑色,当复选框处于选取状态时通过E:checked伪类选择器让选取框的边框变为蓝色. 代码清单19-21 E:checked伪类选择器的使用示例 “http://www

利用JavaScript如何创建一个table表格

创建Table标签和定义表格头部份代码: window.onload=function(){ var arr=["编号","性别","姓名","年龄"]; var oDatas=[ { "id":1 , "gender":"男", "name" : "Javascript" , "age":30 }, { &

利用Zynq Soc创建一个嵌入式工程

英文题目:Using the Zynq SoC Processing System,参考自ADI的ug1165文档. 利用Zynq Soc创建一个嵌入式工程,该工程总体上包括五个步骤: 步骤一.新建空白工程 步骤二.创建一个Embedded Processor工程 步骤三.Zynq7 Processing System的管理 步骤四.综合仿真.编译运行.生成二进制文件 步骤五.Exporting Hardware to SDK 步骤一.新建工程 1. 点击Vivado图标启动软件,Create

利用jQuery如何删除一个节点

利用jQuery如何删除一个节点:添加或者删除节点是常用的操作,本章节介绍一下如何删除一个节点,当然在jQuery中删除节点的函数不止一个,不过这里就介绍一下如何使用remove()函数实现此功能,代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.soft

利用JavaScript如何创建一个table表格[第2种方法]

创建一个五行五列的表格(使用循环) <style> td{border:1px solid #ccc;} </style> <script> window.onload=function(){ var oTable=document.createElement("table"); var row; var cell; for(var i=0;i<5;i++){ row=document.createElement("tr")

jquery怎么创建一个img标签

有几种方法 但都需要你指定一个节点 根据这个节点进行添加 如现有一节点Id为pr:一,向该节点内部后方添加:1 $("#pr").append("<img src=''/>");2 $("<img src=''/>").appendTo("#pr");二,向该节点内部前方添加:1 $("#pr").prepend("<img src=''/>");2

jQuery过滤选择器之伪类选择器和内容选择器

jQuery给我们提供了很多简易用的方法,jQuery过滤选择器是其中一种.过滤器主要通过特定的过滤规则来筛选所需DOM元素,使用冒号(:)开关. 一.基本过滤器 :first选取第一个元素(单个元素)$('li:first') :last选取最后一个元素(单个元素)$('li:last') :not(selector)等到class不是blue的元素$('li:not(.blue)')  选取class不是blue的元素 :even选择索引(0开始)是偶数的所有元素(集合元素)$('li:ev

关于伪类选择器中一个冒号和两个冒号的区别

在平时工作中用到伪类选择器的时候一个冒号和两个冒号貌似都是可以的,所以两者到底有什么区别呢,我们先来看下W3C关于CSS3选择器的规范中有一段描述: A pseudo-element is made of two colons (::) followed by the name of the pseudo-element. This :: notation is introduced by the current document in order to establish a discrimi