重磅推荐12款jQuery编写的选择器
我最近开始编写自己的jQuery选择器,我越来越开始意识到这是一种不错而简洁的完成某些特定任务的方式,而以往我使用的是迭代器。
这些选择器中如果不是你一直在寻找的,你也许根本将不会碰到。所以我决定写下一个简单的教程来告知你用jQuery写出自己的选择器是一件相当轻松的事。
下面是一个用jQuery编写选择器的模版文件,你需要的全都在这里:
$.extend($.expr[':'],
02
{
03
selectorName: function(el, i, m)
04
{
05
return true/false;
06
},
07
08
selectorName2: function(el, i, m)
09
{
10
return true/false;
11
}
12
});
下面是两种调用一个选择器的方法,一种带有一个参数而另一种则没有参数:
$("#container :selectorName");
2
$("#conainert :selectorName(#element)");
3
$("#conainert :selectorName(>300)");
i与m参数可以是缺省的,当传入一个集合,他们只是用来匹配一个参数的当前元素的索引。当你传入一个参数时,匹配器便开始工作了,这是一个正则表达式匹配器,返回类似如下信息:
1
[":width(>100)", "width", "", ">100"]
你会经常使用到m[3]的值,至此,便由你决定如何处理传入的参数。下面给出了一系列的例子。
我们可以与jQuery已有的选择器一起进行链式的调用,这是相当有意思的:
1
$("#container :isBold:even");
2
$("#container :leftOf(#element):width(>100):height(>100)");
你可以在此下载该库和文档
以下列出12个自定义的选择器实例,你可以在这些选择器中放入任何内容,只要你根据当前元素是否通过选择器测试返回true或者false值即可。
1、:loaded
选择所有加载完的图片:
01
$.extend($.expr[':'],
02
{
03
loaded: function(el)
04
{
05
return $(el).data('loaded');
06
}
07
}
08
09
$('img').load(function(){ $(this).data('loaded', true); });
10
$('img:loaded');
2.Width
选择所有宽度大于或小于指定值的元素:
01
$.extend($.expr[':'],
02
{
03
width: function(el, i, m)
04
{
05
if(!m[3]||!(/^(<|>)\d+$/).test(m[3])) {return false;}
06
return m[3].substr(0,1) === '>' ?
07
$(el).width() > m[3].substr(1) : $(el).width() < m[3].substr(1);
08
}
09
}
10
11
$('#container :width(>100)');
3.Height
选择所有高度大于或小于指定值的元素:
01
$.extend($.expr[':'],
02
{
03
height: function(el, i, m)
04
{
05
if(!m[3]||!(/^(<|>)\d+$/).test(m[3])) {return false;}
06
return m[3].substr(0,1) === '>' ?
07
$(el).height() > m[3].substr(1) : $(el).height() < m[3].substr(1);
08
}
09
}
10
11
$('#container :height(<100)');
4.leftOf
选择在指定元素左边的所有元素
01
$.extend($.expr[':'],
02
{
03
leftOf: function(el, i, m)
04
{
05
var oe = $(el).offset();
06
var om = $(m[3]).offset();
07
08
return oe.left + $(el).width() < om.left;
09
}
10
}
11
12
$('#container :leftOf(#element)');
5、RightOf
选择在指定元素右边的所有元素
01
$.extend($.expr[':'],
02
{
03
rightOf: function(el, i, m)
04
{
05
var oe = $(el).offset();
06
var om = $(m[3]).offset();
07
08
return oe.left > om.left + $(m[3]).width();
09
}
10
}
11
12
$('#container :rightOf(#element)');
6、External
选择所有带外站链接的锚点标签
01
$.extend($.expr[':'],
02
{
03
external: function(el)
04
{
05
if(!el.href) {return false;}
06
return el.hostname && el.hostname !== window.location.hostname;
07
}
08
}
09
10
$('#container :external');
7、target选择指定target属性的锚点标签
01
$.extend($.expr[':'],
02
{
03
target: function(el, i, m)
04
{
05
if(!m[3]) {return false;}
06
return (m[3] === '_self' && ($(el).attr('target') == '' || !el.target)) ||
07
(m[3] === $(el).attr('target'));
08
}
09
}
10
11
$('#container :target(_self)');
8、inView
选取位于可视窗口内的所有元素
01
$.extend($.expr[':'],
02
{
03
inView: function(el)
04
{
05
var offset = $(el).offset();
06
07
return !(
08
(offset.top > $(window).height() + $(document).scrollTop()) ||
09
(offset.top + $(el).height() < $(document).scrollTop()) ||
10
(offset.left > $(window).width() + $(document).scrollLeft()) ||
11
(offset.left + $(el).width() < $(document).scrollLeft())
12
)
13
}
14
}
15
16
$('#container :inView');
9、largerThan
选取比指定元素大的所有元素
01
$.extend($.expr[':'],
02
{
03
largerThan: function(el, i, m)
04
{
05
if(!m[3]) {return false;}
06
return $(el).width() * $(el).height() > $(m[3]).width() * $(m[3]).height();
07
}
08
}
09
10
$('#container :largerThan(#element)');
10、isBold
选择font-weight为700的所有元素
1
$.extend($.expr[':'],
2
{
3
isBold: function(el)
4
{
5
return $(el).css("fontWeight") === '700';
6
}
7
}
8
9
$('#container :isBold');
11、Color
选择颜色为指定RGB值的所有元素
01
$.extend($.expr[':'],
02
{
03
color: function(el, i, m)
04
{
05
if(!m[3]) {return false;}
06
return $(el).css('color') === m[3];
07
}
08
}
09
10
$("#container :color(rgb(255, 0, 0))");
12、Hasld
选择存在id属性的所有元素
1
$.extend($.expr[':'],
2
{
3
hasId: function(el)
4
{
5
return $(el).attr('id') !== undefined && $(el).attr('id') !== '';
6
}
7
}
8
9
$("#container :hasId");
转载于:https://blog.51cto.com/wws5201985/806982
重磅推荐12款jQuery编写的选择器相关推荐
- 推荐12款非常有用的流行 jQuery 插件
jQuery 是一个非常优秀的 JavaScript 框架,在现在的 Web 开发项目中扮演着重要角色.jQuery 使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入一些非常好的 ...
- 推荐12款精心设计网站设计PSD模板
为什么80%的码农都做不了架构师?>>> 日期:2012-4-18 来源:GBin1.com PSD网站设计模板在我看来,是非常有效的制作工具之一. 它可以用在很多方面.比如 ...
- java写的教育管理的项目_干货分享|推荐12款适合做Java后台管理系统的项目
Java是一种可以撰写跨平台应用软件的面向对象的程序设计语言.Java技术具有卓越的通用性.高效性.平台移植性和安全性,广泛应用于PC.数据中心.游戏控制台.科学超级计算机.移动电话和互联网,同时拥有 ...
- everything搭配什么软件_重磅推荐一款神级工具软件!有了它,90%的软件都可以卸载了!...
如果有人问大侠,你必备的软件是什么?大侠的第一反应肯定是搜索软件,为什么这么说呢? 是因为我们工作中肯定是会产生很多文件的,就拿大侠来说,文档是在太多,各种数据整理文件,还每个都是不能删掉的那种,久而 ...
- 重磅 | 推荐一款技术人必备的写作神器 (支持多平台自动同步)
很多技术人都特别喜欢写技术文章并发布到自己的博客上,写技术文章有两个好处:一个是进行一次技术知识的总结和提高,另一个就是通过技术文章的传播,可以打造自己的影响力. 当下,随着自媒体的高速发展,越来越多 ...
- 重磅 | 推荐一款技术人必备的写作神器 (支持多平台博客群发)
很多技术人都特别喜欢写技术文章并发布到自己的博客上,写技术文章有两个好处:一个是进行一次技术知识的总结和提高,另一个就是通过技术文章的传播,可以打造自己的影响力. 当下,随着自媒体的高速发展,越来越多 ...
- html轮播图水平传送带,12款 jquery轮播插件
Nivo Slider 首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本. 目前下载量已经突破 1,800,000 次!jQuery 独 ...
- 推荐一款jquery前端插件(zoomify),灯箱效果插件(用于图片看大图的效果),简单易用!
前段时间项目中,需要使用图片看大图的效果,主要是用于上传的企业工商执照等信息.这个时候的需求是希望放大图片,看到大图.在进行认真调研基础上发现了一款极好用.极简单的前端插件 zoomify,下面简单介 ...
- 用jQuery编写爱好选择器,全选/全不选/反选
功能说明: 1.点击'全选':选中所有爱好 2.点击'全不选':所有爱好都不勾选 3.点击'反选':改变所有爱好的勾选状态 4.点击'提交':提示所有勾选的爱好 5.点击'全选/全不选:选中所有爱好, ...
最新文章
- 连接ORACLE实例
- Io流的字节流与缓冲流
- 线程和进程有什么区别?
- 【git效率篇】在window上面的git bash 配置永久别名 快捷方式
- C 盘FAT32变为 RAW 格式
- 超细粒度分析XLNet中神奇的Attention Mask
- TMS320F28335之GPIO原理
- 华为暂停一般性社招;嘀嗒出行系统崩溃;美团和摩拜账号互通 | 极客头条
- [JDBC] MySQL中数据的增查删改(二)
- 两则新闻的另外一种角度
- LaTeX 绘制思维导图
- 标准的项目管理完整流程图
- 测度论与概率论笔记1:可测空间与可测函数
- 合抱之木,生于毫末。九层之台,起于累土。千里之行,始于足下
- Video.js 使用教程 - 手把手教你基于 Vue 搭建 HTML 5 视频播放器
- 恒玄BES调试笔记-BES2500啸叫howling
- Silicycle反相C-18 SPE固相萃取小柱
- 关于Binder (AIDL)的 oneway 机制
- WIN10下没有NVIDIA控制面板的解决办法
- 【论文笔记】Deep Reinforcement Learning for Robotic Pushing and Picking in Cluttered Environment