jQuery自定义选择器

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

<ul class="levels"><li data-level="1" data-points="1" data-technologies="javascrip grunt node">level 1</li><li data-level="2" data-points="10" data-technologies="php composer">level 2</li><li data-level="3" data-points="100" data-technologies="jquery requirejs">level 3</li><li data-level="4" data-points="1000" data-technologies="javascript jquery backbone">level 4</li>
</ul>

1.选择等级高于2的, 分数高于100的li

$.expr[":"].requireLevel = $.expr.createPseudo(function(param) {return function(element, context, isXML) {return element.getAttribute("data-level") > 2 && element.getAttribute("data-points") > 100;}
})

$("ul li:requireLevel(2, 100)").css({"color": "aqua","background": "yellow"
});

2.选择分数高于50的

$.expr[":"].highPoint = $.expr.createPseudo(function(param) {var points = parseInt(param, 10);  //缓存参数，以便下面闭包环境中能使用return function(element, context, isXML) {return  element.getAttribute("data-points") > points;}
})

$("ul li:highPoint(50)").css({
"fontSize": "1.4em"
});

3.几个选择器

1 选择所有没有子节点，在文档中位置为偶数，并且不包含wrapper类名的所有div　　$("div:empty:even:not(.wrap)")

2 选择form中第一个元素是input,类型为password,并且包含required特性 的 input　　$("input[required]:password:first-child", "form")

3 选择所有的a, p，其祖先元素为div　　$("div a, div p") 或者 $("a, p", "div")

4 选择元素只包含数字，字符， 或下划线(使用自定义选择器)　　$.expr[":"].onlyText = $.expr.createPseudo(function (filterParam) {　　　   return function(element, context, isXML) {　　　　　　　return　element.innerHTML.match("/^\w+$/");　　　　　　}　 　　});

转载于:https://www.cnblogs.com/JamesSawyer/p/5739887.html

jQuery自定义选择器相关推荐

jQuery 自定义选择器
严格来说是自定义伪类选择器,不过也相当有意思了. 昨天我学习其中一个 jquery lazy load 源码的时候,看到末尾这么写的. /* Custom selectors for your con ...
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在处理选择符时的流 ...

jQuery自定义选择器

jQuery自定义选择器相关推荐

最新文章

热门文章