强大的jQuery自定义选择器:css

jQuery中提供了丰富多样的选择器,利用这些选择器我们可以完成大多数任务,我们现在来思考如下几个问题:
1.选取字体颜色为红色的所有元素
2.选出背景颜色为白色的元素
3.选择出字体大于等于16px的元素
4.选择出背景为白色并且文字颜色为黄色的元素
5.选出所有字体为红色的元素的字体为14像素的所有子元素
......
总之一句话:如何通过css的样式规则来选择元素?是不是感觉jQuery自带的选择器力不从心了吧,好吧,高手就是喜欢这个时候出手得意,鄙人闭关一个时辰,苦思冥想,悟出了这么一个利器,吾命其名曰jQuery样式选择器。少年,既然你能看到我这篇博客,也是有缘人,就不卖你10块钱了,点个赞拿去吧!看看引入样式选择器插件后,上面几个问题是怎么搞定的

1. $("#c :css({color:'red'})")
2. $("#c :css({backgroundColor:'white'})");
3. $("#c :css({fontSize:'>=16px'})");
4. $("#c :css({backgroundColor:'white',color:'yellow'})");
5. $("#c :css({color:'red'}) :css({fontSize:'14px'})")

原理

jQuery支持扩展选择器,如:first、:last都属于扩展选择器,我们可以定义自己的扩展选择器,如上所见,我定义的选择器就是:css,下面我们来看看如何定义:

$.extend($.expr[':'],{
  selectorName:function(e,i,m){
  //解析自己选择器,其中m是个数组,e是当前元素,m[3]便是选
  //择器字符串,如果返回true代表当前元素被选中,反之则否 
  }
}

看到这里你是不是觉得自己也能实现了呢?too young too simple! 当然,我鼓励你去尝试, 站在设计者的角度,注意几个问题:

  1. 如何进行运算符支持?比如问题3中,要选出字体>=16像素的元素,如果是小于呢? 或者是不等于呢?
  2. 如何支持多个条件匹配,比如问题4中,既要求背景颜色是白色,而且字体是黄色,如果我再加上字体小于18像素并且margin-top大于0,并且是定位方式是fixed……
  3. 假如你css代码中写了这么一句:color:red,然后你在判断是否满足条件时用jquery css("color")取出颜色值a,然后看a和选择器中的色值是否满足条件;这样有问题吗?有! 因为不同浏览器css("color")返回的值是不一样的,如果返回的是"red"那万事大吉,但是返回的可能是#ff0000(这也是红色,只不过换了一个16进制的马甲),这怎么整?好好想想吧!不过你应该知道,浏览器这样做是可以理解的,因为浏览器内部认得肯定是一个数值,而red这种语义化的写法只是为了给开发人员方便而已。

考虑到如上几个问题,便自然而然的产生了一个最麻烦的新问题:如何设计接口?
我们提供的接口要支持关系判断(>,<,>=,<=,!=)和条件逻辑(&&)。当然,如果太复杂就不应该用选择器了,直接写个函数去处理,总不能在选择器里支持js表达式吧。即如此,我们必须找一种优雅的解决方案,该怎么做?既然不能用js复杂表达式, 那能有其它什么东西本身语法表现力可以胜任我们当下的需求,并且能够和js很好的结合(这有助于减少我们的代码量),总不能引入一个库来解析表达式吧。想到这里,想必大家心里自然有了答案,对,就是json. 当然,正如上面所示,最终的接口竟是如此优雅,唉,太完美。

想到这里,一个大问题算是解决了,当还有另一个棘手的问题没有结局,那就是上面提出的第三个问题。 本来我想直接告诉你,但本文定位不会太深入,同时也留给你想象的空间,思考过,然后再去看源码,我想我们才会发生真正意义上的互动与交流,毕竟,本人剑道已成多年,到如今,很久未遇对手,寂寞啊 。
在贴出源码之前,我想请大家猜一下这个插件代码量,不用告诉我,自己去看。

源码地址:https://github.com/wendux/style-selector-jQuery-plugin

还是那句老话:欢迎star! 欢迎点赞(请在简书原文哦)!打赏再怎么欢迎,你也不会,以后就不说了。 还有,欢迎访问我的github主页,也许你会发现更多有价值的东西。当然,这都是笨办法了,聪明的孩子都选择了直接关注我。

注:客观来讲,本插件为当年笔者研究jQuery源码时,闲来无事,找乐子的实验性产物,笔者认为实际工程中的有需求的场景不会多,了解我的人应该都知道我比较懒,很少有耐心写博客,不过,这个插件,我曾经在csdn上介绍过一次,jQuery社区插件很多,但关于自定义选择器的却很少见,此次,旧文重写,一来是由于最近粉丝多了,二来也是为了探发幽微。

再注:由于之前几篇文章都是关于前端的,有些人误以为我现在是做前端的,首先谢关心,不过呢,还真不是。之所以开博的几篇文章写前端,我之前的想法是前端程序员多些,吸粉应该比较快。不过你不要害怕,不会把你带到沟里,笔者虽然很谦虚,但也愿意承认一个事实,前端技术虽然广杂,但笔者有信心,在国内的前端的江湖,笔者眼里的没几个人,尤雨溪不错,阮一峰老师在科普上做的工作也值得肯定。也许还有其它一些人可能像我一样,平时太懒不怎么宣传自己所以也不为人知,不过呀,我最近思想发生了变化,所以就开了博客,懒病慢慢治,既然要出世,就先高调一点,毕竟我才发现懒人吸粉不容易啊。

ps:所有互动请在简书原文哦,简书我会经常看,评论也会第一时间回复,掘金到现在我还不怎么会用,之前几篇文章更新后想在掘金同步,愣是没成功,帮助文档也没找到,真是的,放弃了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,685评论 1 92
  • 在线阅读 http://interview.poetries.top[http://interview.poetr...
    前端进阶之旅阅读 115,120评论 24 450
  • 原文链接 http://blog.poetries.top/2016/10/20/review-jQuery 关注...
    前端进阶之旅阅读 16,756评论 18 503
  • 开了篇,却不知道要说点什么。 正值暑假,带了俊宝来了青岛。天气炎热,多半时间是呆在屋子里。晨起爸爸上班了,我把他安...
    四月吉衣阅读 2,047评论 0 1
  • 《请回答1988》第19集,甜哭了一众泽善党,心碎了一众狗善党。作为坚定的狗善党,为这个怂boy心疼的同时,...
    意识刘的碎碎念阅读 3,287评论 2 2