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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容

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