jQuery Custom Selector JQuery自定义选择器

什么是JQuery的选择器呢,详见JQuery中的Selector: http://docs.jquery.com/Selectors

比如 $("div:contains(‘John‘)").css("text-decoration", "underline");的contains选择器等等

JQuery自定义选择器的基本语法:

$.expr[‘:‘].test = function(obj, index, meta, stack){
/* obj - is a current DOM element
index - the current loop index in stack
meta - meta data about your selector !!! 用来存参数值,详见带参数的自定义选择器。
stack - stack of all elements to loop

Return true to include current element
Return false to explude current element
*/
};

// Usage:

$(‘.someClasses:test‘).doSomething();
1.创建一个简单的自定义选择器(将返回"rel"标签不为空的元素)

$.expr[‘:‘].withRel = function(obj){

var $this = $(obj);

return ($this.attr(‘rel‘) != ‘‘);

};

// 应用:

$(‘a:withRel‘).css(‘background-color‘, ‘yellow‘);

效果见:http://custom-drupal.com/jquery-demo/custom-selectors/

2. 创建带参数的自定义选择器,通过meta来实现.
语法:
$(‘a:test(argument)‘);

//meta would carry the following info: meta的格式如下(meta[3]对应的值是argument)

[

‘:test(argument)‘, // full selector

‘test‘, // only selector

‘‘, // quotes used

‘argument‘ // parameters

]

$(‘a:test("arg1, arg2")‘);

//meta would carry the following info:

[

‘:test(‘arg1, arg2‘)‘, // full selector

‘test‘, // only selector

‘"‘, // quotes used

‘arg1, arg2‘ // parameters

]

实例:

$.expr[‘:‘].withAttr = function(obj, index, meta, stack){

return ($(obj).attr(meta[3]) != ‘‘);

};

应用:
$(‘a:withAttr(rel)‘).css(‘background-color‘, ‘yellow‘);

jQuery Custom Selector JQuery自定义选择器

时间: 2024-08-07 12:18:40

jQuery Custom Selector JQuery自定义选择器的相关文章

jquery 自定义选择器

//  HTML 代码 <body> <div id="divid1" class="divclass">白色</div> <div id="divid2" class="divclass">白色</div> <div id="divid3" class="divclass">白色</div> <d

jquery学习(一)-选择器

参考锋利的jquery第二版 1.基本的选择器 Id选择器 $(“#Id”) class类选择器 $(“.class”) Element元素选择器 $(“element”) *匹配所有元素 $(“*”) Selector1....n 组合选择器 $(“selector1 selector2 ..n”) 2.层次选择题 $(“ancester descendant ”) 选取ancestor元素里面的所有descendant(后代)元素 $(“parent>child”) 选取parent元素下面

JQuery日记_5.14 Sizzle选择器(七)

上篇说道,tokenize方法会把selector分割成一个个selector逻辑单元(如div>a是三个逻辑单元 'div','>','a')并为之片段赋予对应类型的过滤函数. for ( type in Expr.filter ) { if ( (match = matchExpr[ type ].exec( soFar )) && (!preFilters[ type ] || (match = preFilters[ type ]( match ))) ) { matc

JQuery日记_5.13 Sizzle选择器(六)选择器的效率

当选择表达式不符合快速匹配(id,tag,class)和原生QSA不可用或返回错误时,将调用select(selector, context, results, seed)方法,此方法迭代DOM选择.过滤元素, 在DOM树非常大的时候为了保证效率,应该保证html设计的合理,尽量使用可快速匹配(id,tag,class)的表达式,其次是QSA支持的选择器,尽量不要使用jquery扩展的selector和嵌套selector,然后是尽量不要使用位置伪类(它是从左向右查找,需要多次循环内套循环遍历)

模仿jquery框架源码 -成熟---选择器

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .red { color: red; } </style> </head> <body> <div class=

jquery插件开发及 jquery自定义函数

jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级别的插件开发,即给jQuery对象添加方法.下面就两种函数的开发做详细的说明. jQuery为开发插件提拱了两个方法,分别是: JavaScript代码 jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为

jQuery入门、jQuery选择器、jQuery操作

一.什么是jQuery及如何使用 1.1 jQuery 简介 jQuery是一个兼容多浏览器的javascript函数库(把我们常用的一些功能进行了封装,方便我们来调用,提高我们的开发效率.),核心理念是write less,do more(写得更少,做得更多) 1.2 jQuery 和 Js 的区别 Javascript是一门编程语言,我们用它来编写客户端浏览器脚本.jQuery是javascript的一个库(框架),包含多个可重用的函数,用来辅助我们简化javascript开发. 注意:jQ

“jquery中each方法和选择器”的学习笔记

<head> <title></title> <script src="jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { //alert($("div").text()); //对数组元素使用匿名函数进行逐个处理.

JQuery日记 5.11 Sizzle选择器(五)

//设置当前document和document对应的变量和方法 setDocument = Sizzle.setDocument = function( node ) { var hasCompare, //node为Element时返回node所属document //node为Document时返回node //node为空时返回window.document doc = node ? node.ownerDocument || node : preferredDoc, //document