强大的 jQuery 自定义选择器: css |
您所在的位置：网站首页 › jquery自定义属性选择器 › 强大的 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! 当然，我鼓励你去尝试, 站在设计者的角度，注意几个问题： 如何进行运算符支持？比如问题3中，要选出字体>=16像素的元素，如果是小于呢? 或者是不等于呢？ 如何支持多个条件匹配，比如问题4中，既要求背景颜色是白色，而且字体是黄色，如果我再加上字体小于18像素并且margin-top大于0，并且是定位方式是fixed…… 假如你css代码中写了这么一句：color:red,然后你在判断是否满足条件时用jquery css("color")取出颜色值a,然后看a和选择器中的色值是否满足条件；这样有问题吗？有！ 因为不同浏览器css("color")返回的值是不一样的，如果返回的是"red"那万事大吉，但是返回的可能是#ff0000（这也是红色，只不过换了一个16进制的马甲），这怎么整？好好想想吧！不过你应该知道，浏览器这样做是可以理解的，因为浏览器内部认得肯定是一个数值，而red这种语义化的写法只是为了给开发人员方便而已。考虑到如上几个问题，便自然而然的产生了一个最麻烦的新问题：如何设计接口？我们提供的接口要支持关系判断(>,=, |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |