https://github.com/wendux/style-selector-jQuery-plugin

http://blog.csdn.net/duwen90/article/details/50570848

http://www.jianshu.com/p/88c101483a9d

jquery中提供了丰富多样的选择器,利用这些选择器我们可以完成大多数任务,但是喜欢思考的我们总得找点事,提问时间:
1.如何选择所有字体颜色为红色的元素
2.如何选择出背景颜色为为白色的元素
3.如何选择出字体大于等于16px的元素
4.如何选择出背景元素为白色并且文字颜色为黄色的元素
等等等等......总之一句话:如何通过css的样式规则来选择元素?

是不是感觉jquery自带的选择器力不从心了吧,好吧,高手就是喜欢这个时候出手得意,鄙人闭关一个时辰,苦思冥想,悟出了这么一个利器,吾命其名为jquery样式选择器插件,少年,既然你能看到我这篇博客,也是有缘人,就不卖你10块钱了,点个赞拿去吧!从此妈妈再也不用担心老师会问如何根据元素的样式特征去选择元素了,看看引入样式选择器插件后,上面几个问题是怎么简单轻松easy nice 搞定的

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

原理:jquery支持选择器扩展:

$.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这种语义化的写法只是为了给开发人员方便而已。

It's your turn. 少年去尝(碰)试(壁)吧!

-----------------------------------------------------------------------------------------------------
----------我是分割线,如果你实现了,或者已经碰的头破血流了,那么请往下看,看看大师是怎么实现的---------------
------------------------------------------------------------------------------------------------------

可以看到我们的选择器字符串是一个对象{}的串,为什么要这样,这可是很巧(xin)妙(ji)的:原因有两个:

1.解析时可以直接用eval转化成js对象 
2.css样式非常多,我们不可能在解析时逐一对比到底是哪个样式有规则(可能是font-size也可能是color....),因为最终我们是要通过jquery方法的css去匹配,而css方法正好可以接受一个对象。【ps:这一点不能理解的话你可以试着不要看下面源代码想想定义成其它格式怎么实现,然后你就会默然回首,恍然大悟,大赞一声"喵"的】

如何支持运算符, 无非就是== > < >= <= 这几种,一个正则搞定:/^[><=!]?=?/。

颜色问题怎么办? 关键是思维! 我们虽然不知道自己设置的和再去取得的样子是不是一样,比如我们css中写的是red,我们不用css()返回后的结果a(可能是#ff0000)直接和我们选择器字符串中的值b(red)相比,而是我们先把b设置到某个元素E中之后,然后再用css()取出E的color,记为c,最后用c去和a去比较! (好好体会一下)。

能看到这里,少年,好样的,我果然没有看错你,但是先别高兴,我们还有一个问题,那就是E什么时候创建(当然E肯定是不能显示的,display:none),我们不能每次比较前都创建一个元素吧,对的,缓存!

好了,既然到这一步了,那么代码你也应该能看懂了! 来想象一下,这么狂拽炫酷屌炸天的功能,代码得有多少行? 大胆一点!

看看源码长啥样:

/*
author:duwen 2015.9.3
*/ +function($){
$.extend($.expr[':'],
{
css: function(e, i, m)
{
"use strict";
var s=eval("("+m[3]+")")
var r=/^[><=!]?=?/;
var t,cc
for(var c in s){
s[c]=s[c].replace(r,function(w){t=w;return ""})
if(t=="")t="==";
if(!m[9]){
var d=$("#_csss");
m[9]=d[0]&&d||$("<div id='_csss' style='display:none'>").appendTo("body")
}
m[9].css(c,s[c]);
cc=m[9].css(c);
if (eval("$(e).css(c)"+t+"cc"));
else return false;
}
return true;
}
});
}(jQuery);

惊艳了吧~

jquery选择器扩展之样式选择器的更多相关文章

  1. jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax

    jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...

  2. jQuery基础(样式篇,DOM对象,选择器,属性样式)

      1. $(document).ready 的作用是等页面的文档(document)中的节点都加载完毕后,再执行后续的代码,因为我们在执行代码的时候,可能会依赖页面的某一个元素,我们要确保这个元素真 ...

  3. jQuery 1.0 | 选择器 | 事件 | 操作样式 | 操作属性

    使用jQuery: 1,下载jQuery http://jquery.com/download/ 2,引入jQuery文件 3,定义入口函数 <script src="jquery-1 ...

  4. CSS 基础知识点 样式 选择器 伪类

    CSS 基础知识点汇集 版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 ...

  5. jQuery学习笔记(一)——基础选择器、过滤选择器、表单选择器

    $()就是jQuery中的函数,它的功能是获得()中指定的标签元素.如演示样例中$("p")会得到一组P标签元素,当中"p"表示CSS中的标签选择器.$()中的 ...

  6. 认识CSS中css引入方式、选择器、文本样式设置以及显示模式

    前端之HTML.CSS(三) CSS CSS-Cascading Styles Sheets,层叠样式表.用于网页的表现,主要用于布局和修饰网页. CSS引入方式 CSS的三种引入方式:行内样式,内部 ...

  7. JQuery -- 介绍,选择器及其示例, 基本选择器,层次选择器,过滤选择器,表单选择器

    1. 什么是jQuery对象 jQuery 对象就是通过jQuery包装DOM对象后产生的对象. jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它就可以使用jQuery里的 ...

  8. jQuery的基本使用及选择器和筛选器

    回顾 事件 鼠标clickdblclickcontextmenumouseentermouseleavemousemovemousedownmouseup​键盘keydownkeyupkeypress ...

  9. Jquery | 基础 | 慕课网 | 类选择器

    原生getElementsByClassName()函数的实现代码与jQuery实现代码的比较: <!DOCTYPE html> <html> <head> < ...

随机推荐

  1. vue 父子组件

    组件 什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊 ...

  2. AtCoder Beginner Contest 066 B - ss

    题目链接:http://abc066.contest.atcoder.jp/tasks/abc066_b Time limit : 2sec / Memory limit : 256MB Score ...

  3. Step2:SQL Server 复制事务发布

    一.背景 在复制的运用场景中,事务发布是使用最为广泛的,我遇到这样一个场景:在Task数据库中有Basic与Group两个表,需要提供这两个表的部分字段给其它程序读取放入缓存,程序需要比较及时的获取到 ...

  4. Python智能检测编码并转码

    #安装包工具 $pip3 install chardet #直接打开文件,中文显示乱码 >>> import chardet >>> f = open('test. ...

  5. Django后端项目---- rest framework(3)

    一.版本 程序也来越大时,可能通过版本不同做不同的处理 没用rest_framework之前,我们可以通过以下这样的方式去获取. class UserView(APIView): def get(se ...

  6. 大数据自学2-Hue集成环境中使用Sqoop组件从Sql Server导数据到Hive/HDFS

    安装完CDH后,发现里面的东东实在是太多了,对于一个初学大数据的来说就犹如刘姥姥进了大观园,很新奇,这些东东每个单拿出来都够喝一壶的. 接来来就是一步一步地学习了,先大致学习了每个模组大致做什么用的, ...

  7. jmeter的使用

    jmeter:java开发的开源的性能测试工具. *jmeter返回中文乱码: 1.在jmeter的bin目录下,找到jmeter的配置文件,jmeter.properties,然后把samplere ...

  8. Ubuntu 18.04.1更改屏幕分辨率

  9. fread和fseek的用法

    原味:http://baike.baidu.com/view/656696.htm    http://baike.baidu.com/view/656689.htm fread 功 能: 从一个流中 ...

  10. Jbarcode 条形码生成工具

    一.准备jar包 https://sourceforge.net/projects/jbcode/?source=typ_redirect 二.编写工具类 package com.example.de ...